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中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用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 自身提供 linear 和 swing；
  • 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

点击查看