jQuery 基础操作

jQuery 能做什么?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jQuery是一个快速,小巧,功能丰富的 JavaScript 库。 它使诸如 HTML 文档遍历和操纵,事件处理,动画和 Ajax 等事情变得简单得多,而且易于使用的 API 可以在多种浏览器中使用。

  • 选择网页元素
  • 改变结果集
  • 元素的操作:取值和赋值
  • 元素的操作:移动
  • 元素的操作:复制、删除和创建
  • 工具方法
  • 事件操作
  • 特殊效果
  • AJAX

jQuery 对象和 DOM 原生对象有什么区别?如何转化?

  • 区别

    • jQuery 对象是通过对 DOM 对象封装后产生的对象,jQuery 对象只能使用 jQuery 里面的方法,不能使用 DOM 中的方法
    • DOM 对象是 JavaScript 固有的对象,DOM 对象可以使用 JavaScript 原生方法,不可以使用 jQuery 中的方法
  • 转换

    • jQuery 对象转换为 DOM 对象可以通过类数组下标的获取方式或者 get 方法获取指定 index 的 DOM 对象。
      $('div')[2];
      $('div').eq(2);
      $('div')get();
      
    • DOM 对象转换为 jQuery 对象可以使用 $()将 DOM 对象包裹起来既可以获取到一个 jQuery 对象

jQuery中如何绑定事件?bindunbinddelegateliveonoff都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

  • jQuery 中 通过 on 方法绑定事件,通过 off 方法卸载事件

    • bind 为一个元素绑定一个事件处理程序
    • unbind 从元素上删除一个以前附加事件处理程序
    • delegate 为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素
    • live 附加一个事件处理器到匹配目前选择器的所有元素,现在和未来
    • on 在选定的元素上绑定一个或多个事件处理函数
    • off 移除一个事件处理函数
  • 推荐使用on 方法绑定事件, off 方法卸载事件

  • 使用on绑定事件使用事件代理的写法

    $('.box ul').on('click', 'li', function(){
      // Do something
    })
    

jQuery 如何展示/隐藏元素?

  • 通过设置 CSS 来实现

    var $h1 = $('h1');
    $h1.css('display','none')
    
  • 通过设置 class 来实现

    // CSS 部分
    .class {
      display: none;
    }
    // JS 部分
    var $h1 = $('h1');
    $h1.addClass('class');
    $h1.removeClass('class');
    
  • 通过 jQuery 动画来实现
    var $h1 = $('h1');
    $h1.hide();  // 隐藏
    $h1.show();  // 显示
    $h1.toggle(); // 切换隐藏/显示
    

jQuery 动画如何使用?

  • 四个参数

    • duration 动画持续时长,单位毫秒,默认400ms;
    • easing 过渡使用哪种缓动函数,jQuery 自身提供 linearswing
    • complete 在动画完成时执行的函数;
    • opacity 不透明度,1为不透明,0为完全透明;
  • 基础用法

    • 显示元素
      .show([duration ] [, easing ] [, complete ])
    • 隐藏元素
      .hide([duration ] [, easing ] [, complete ])
    • 切换隐藏或显示
      .toggle([duration ] [,easing ] [,complete ])
  • 渐变

    • 淡入显示
      .fadeIn( [duration ] [, easing ] [, complete ] )

    • 淡出隐藏
      .fadeOut( [duration ] [, easing ] [, complete ] )

    • 调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果
      .fadeTo( duration, opacity [, easing ] [, complete ] )

    • 通过匹配的元素的不透明度动画,来显示或隐藏它们,方法执行匹配元素的不透明度动画。当被可见元素调用时,元素不透明度一旦达到0,display 样式属性设置为 none ,所以元素不再影响页面的布局。
      .fadeToggle( [duration ] [, easing ] [, complete ] )

  • 滑动

    • 用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式
      .slideDown( [duration ] [, easing ] [, complete ] )
    • 用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为 none,以确保该元素不再影响页面布局。
      .slideUp( [duration ] [, easing ] [, complete ] )
    • 用滑动动画显示或隐藏一个匹配元素
      .slideToggle( [duration ] [, easing ] [, complete ] )
      • 用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。

      • 如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline。当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。

  • 自定义动画
    .animate( properties [, duration ] [, easing ] [, complete ] )
    properties 是一个 CSS 属性和值的对象,动画将根据这组对象移动。
    例子:

    $('#clickme').click(function() {
      $('#book').animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
      }, 5000, function() {
        // Animation complete.
      });
    });
    
  • 停止动画

    • 清除动画队列中未执行的动画
      .clearQueue( [queueName ] )
    • 停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
      .finish( [queue ] )
    • 停止当前正在运行的动画
      .stop( [clearQueue ] [, jumpToEnd ] )
      • clearQueue(default: false)
      • jumpToEnd(default: false)

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

  • 设置和获取内部 HTML 内容
    .html([string])
    这是一个读写两用的方法,用于获取/修改元素的 innerHTML

    1. 当没有传递参数的时候,返回元素的 innerHTML
    2. 当传递了一个 string 参数的时候,修改元素的 innerHTML 为参数值
     $('div').html();
     $('div').html(`123`);
    
  • 设置和获取元素内部文本
    .text([string])
    这是一个读写两用的方法,用于获取/修改元素的 innerText

    1. 当没有传递参数的时候,返回元素的 innerText
    2. 当传递了一个 string 参数的时候,修改元素的 innerText 为参数值
     $('div').text();
     $('div').text(`123`);
    

如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

  • 设置和获取表单用户输入或者选择的内容
    .val([value])
    这是一个读写双用的方法,用来处理 input 的 value,当方法没有参数的时候返回 input 的 value 值,当传递了一个参数的时候,方法修改 input 的 value 值为参数值

    $('input').val()
    $('input').val()
    
  • 设置和获取元素属性

    • 获取元素特定属性的值
      .attr(attributeName)

    • 为元素属性赋值
      .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )

    • 为匹配的元素集合中的每个元素中移除一个属性(attribute)
      .removeAttr()

题目8

点击查看

题目9

点击查看

题目10

点击查看

题目11

点击查看

推荐阅读更多精彩内容

  • 题目1: jQuery 能做什么? 选择网页元素 改变结果集 元素的操作:取值和赋值 元素的操作:移动 元素的操作...
    cheneyzhangch阅读 53评论 0 1
  • 1、 jQuery 能做什么? jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如j...
    zh_yang阅读 876评论 6 13
  • 1.说说库和框架的区别? 库主要是封装了某些函数的集合。框架也是。使用库是指,你的代码决定什么时候从库中调用一个特...
    墨月千楼阅读 113评论 0 2
  • 1.说说库和框架的区别? 库:是一个数据仓库,里面放了各种可以利用的API,由于库的内部已经做了各种底层的封装和各...
    Rising_suns阅读 88评论 0 1
  • 前两天黄哥回老家,在家待了两天,给我留下最大印象的是家乡的变化很大,很多地方都变了样,小时候经常玩的地方早已今非昔...
    小兵黄道明阅读 63评论 0 0