欢迎使用CSDN-markdown编辑器

jQuery概述
jQuery是一个JS函数库，用于简化DOM操作，屏蔽浏览器兼容性问题。共提供了100多个函数，分为下列四类：
(1)DOM操作相关函数
(2)事件处理函数
(3)动画函数
(4)AJAX封装函数

jQuery中DOM操作相关函数：
查找元素： 使用 $(‘选择器’) 来查找元素
jQuery提供的选择器分为如下八类：
(1)基本选择器
(2)层级选择器
(3)可见性选择器
(4)属性选择器
(5)表单元素选择器
(6)基本过滤选择器
(7)内容过滤选择器
(8)子元素过滤选择器

2.jQuery知识体系脉络
(1)查找元素
(2)操作元素属性
(3)操作元素内容
(4)操作元素值
(5)操作元素样式
(6)遍历元素
(7)添加元素
(8)删除元素
(9)替换元素
(10)克隆元素

上节课学习的选择器用于查找元素，今天的课程主要学习操作元素，和增删改元素。
3.操作元素
（1）操作元素的属性
jq.attr(attr,value) //等价于element.setAttribute(attr,value)
jq.attr(attr) //等价于element.getAttribute(attr)
jq.removeAttr(attr) //等价于element.removeAttribute(attr)
（2）操作元素的值
jq.val(‘xx’) //等价于element.value = ‘xx’
jq.val() //等价于var v = element.value
（3）操作元素的内容
jq.html(‘xx’) //等价于element.innerHTML = ‘xx’;
var h = jq.html() //等价于var h = element.innerHTML ;
jq.text(‘xx’) //等价于element.innerText/textContent=’xx’;
var t = jq.text() //等价于var t = element.innerText/textContent;
（4）遍历元素
jq.parent() //等价于element.parentNode
jq.children([s]) //返回选定元素的直接子元素
jq.find(s) //找所有的子元素(直接+间接)
jq.next() //下一个兄弟
jq.nextAll() //后面所有的兄弟
jq.prev() //上一个兄弟
jq.prevAll() //上面所有的兄弟
jq.siblings() //上面和下面所有的兄弟
提示：上述方法有些情形下可以使用选择器代替；有些情况下，只能使用上述方法，例如：
$(‘button’).click(){ //让当前元素后面的span兄弟隐藏 $(this).next(‘span’).css(‘display’, ‘none’) } (5)操作元素的样式 jq.css( name ) //获取样式的值，$(‘div’).css(‘color’);
jq.css( name, value ) //设置样式的值，$(‘div’).css(‘color’, ‘red’);
jq.css( {name:value, name:value} ) //连续设置多个样式
jq.addClass( className ) //为选定元素添加一个class
jq.removeClass( className ) //为选定元素删除一个class
jq.hasClass( className ) //判断选定元素是否有指定class
jq.toggleClass( className ) //切换class：有则删除，无则添加

4.添加新元素
DOM中添加新元素：
var child = document.createElement(‘div’);
parent.appendChild( child );
jQuery中添加新元素共提供了八种方法，可以循序渐进的掌握：
方法1：
var child = $(‘

ABCD

‘);
$(‘.parent’).append( child ); //追加到最后 //$(‘.parent’).prepend( child ); //追加到最开始
方法2：
$(‘.parent’).append( ‘

• ABCD
• ’ )
  $(‘.parent’).prepend( ‘
• ABCD
• ’ )

  5.删除元素
  DOM中：
  parent.removeChild( child );
  jQuery中：
  $(‘div’).remove(); //删除当前选定元素$(‘div’).empty(); //清空选定元素中的所有内容

  6.替换元素
  DOM中：
  parent.replaceChild( newChild, oldChild );
  jQuery中：
  方法1：
  newChild.replaceAll( oldChild );
  方法2：
  oldChild.replaceWith( newChild );

  7.jQuery中的事件处理
  面试题：jQuery中如下几个函数的区别：bind 、click 、delegate、on、live？

  jQuery的历史上，先后出现了如下的事件处理函数：
  (1)bind & unbind ： 为选定元素绑定特定事件的处理函数
  jq.bind( ‘事件名’, fn )
  (2)one：为选定元素绑定一次事件处理函数
  jq.one( ‘事件名’, fn )
  (3)click / dblclick / mouseover / mouseout …. ： bind()函数的简化
  jq.click( fn ) 等价于 jq.bind(‘click’, fn)
  注意：DOM所有事件中，只有一部分(23个事件)有简化版本
  上述3种方法只能为DOM树已经存在的元素绑定监听函数，无法为后创建的元素绑定监听函数。

  (4)delegate：子元素委托父元素代理处理自己的事件
  $(‘父元素’).delegate(‘子元素’, ‘事件名’, fn)

  (5)live：指定子元素把指定的事件全部委托给document对象——jQuery1.8之后删除了此方法。
  $(子元素).live(‘事件名’, fn) (6)on：可以实现类似bind / delegate的所有功能 类似bind的使用方法（把监听函数绑定在事件源上）：$(‘子元素’).on(‘事件名’, fn)
  类似delegate的使用方法（把监听函数委托在父元素上）：
  $(‘父元素’).on(‘事件名’, ‘子元素’, fn)