**

  1. jQuery 如何获取元素
  2. jQuery如何筛选结果
  3. jQuery 的链式操作是怎样的
  4. jQuery 如何创建元素
  5. jQuery 如何移动元素
  6. jQuery 如何修改元素的属性

    **

1.获取元素

将一个选择表达式，放进构造函数Jquery(简写为$),然后得到被选中元素
(1)选择表达式可以是CSS选择器

  1. $(document) //选择整个文档对象
  2. $('#first') //选择id为first的网页元素
  3. $('span.mySpan')    //选择class为myClass的div元素
  4. $('input[name=first]') //选择name属性等于first的input元素

(2)选择表达式也可以是Jquery特有的表达式

  1. $('a:first')    //选择网页中第一个a元素
  2. $('tr:odd')     //选择表格的奇数行
  3. $('myForm:input')//选择表单中的input元素
  4. $('div:visible') //选择可见的div元素
  5. $('div:gt(2)')   //选择所有的div元素，除了前三个，012
  6. $('div:animated')//选择当前处于动画状态的div元素

2.筛选结果

使用过滤器，缩小结果范围

  1. $('div').has('p')        //选择包含p元素的div元素
  2. $('div').not('.coca')    //选择class不等于coca的div元素
  3. $('div').filter('.cola') //选择class等于cola的div元素
  4. $('div').first()        //选择第1个div元素
  5. $('div').eq(5)          //选择第6个div元素

在DOM树上移动

  1. $('div').next('p')  //选择div元素后面的第一个p元素
  2. $('div').parent()   //选择div元素的父元素
  3. $('div').closest('form')//选择离div最近的那个form父元素
  4. $('div').children()  //选择div的所有子元素
  5. $('div').siblings()  //选择div的同级元素

3.链式操作

选中要操作的元素之后，用链条的形式写出对元素的一连串操作

  1. $('div').find('span').eq(1).html('Hello')

分解就是

  1. $('div')         //找到div元素
  2. .find('span')    //选择其中的span元素
  3. .eq(1)          //选择第2个span元素
  4. .html('Hello')   //将这个元素的内容改为Hello

能链式操作的根本在于，每一步jQuery操作，返回的都是一个jquery对象
jquery还提供了.end()方法，使得结果集可以后退一步

  1. $('div')         
  2. .find('span')    
  3. .eq(1)          
  4. .html('Hello')   
  5. .end()  //返回选中所有span元素那一步
  6. .eq(0)  //选中第一个span元素
  7. .html('World')  //将它的内容改为World

4.创建元素

直接把新元素传入jQuery的构造函数

  1. $('<p>Hello</p>')
  2. $('<li class="new">New list</li>')
  3. $('ul').append('<li>list item</li>')

5.移动元素

提供两种方法：
1.直接移动目标元素
2.移动其他元素，简介移动目标元素
假设选中一个div元素，要把它移动到p元素后面

  1. //方法一，直接
  2. $('div').insertAfter($('p'));   //返回值是div元素
  3. //方法二，间接
  4. $('p').after($('div'))          //返回值是p元素

类似的操作模式,一共4组

  1. .insertAfter()和.after()     //在现存元素的外部，从后面加入元素
  2. .insertBefore()和.before()   //在现存元素的外部，从前面加入元素
  3. .appendTo()和.append()       //在现存元素内部，从后面加入元素
  4. .prependTo()和.prepend()     //在现存元素的内部，从前面加入元素

6.修改元素

  1. //$div大部分时候对应多个div元素
  2. $div.text()             //读取或者设置text内容
  3. $div.html()             //读取或者设置html内容
  4. $div.attr()             //读取或者设置多个属性
  5. $div.css()              //读取或者设置css属性
  6. $div.addClass()           //添加指定的样式类名
  7. $div.on('click',fn)     //在选定的元素上绑定一个或者多个事件处理函数
  8. $div.off('click',fn)    //移除一个事件处理函数