jquery复习

复习一下CSS选择器

标签选择器 td{}   li{}

Id选择器   #id{}

类选择器   .class{}

群组选择器   td,p,div{}

后代选择器   div p{}

通配选择器   *{}

 

jQuery分四类：1基本选择器、2层次选择器、3过滤选择器、4表单选择器

（1）基本选择器

1.根据id匹配元素

2.根据给定的类名匹配元素

3.根据给定的元素名匹配元素

4.*匹配所有的元素

5.集合元素，将每个选择器匹配到的元素合并后一起返回

（2）层次选择器

1.后代元素选择器

2.子元素选择器

3.相邻元素（紧接在前一个元素的选择器）

4.兄弟元素选择器

（3）过滤选择器

1.所有div元素中，第一个div

2.所有div元素中，最后一个div

3.获取索引是偶数的所有元素，索引从0开始

4.获取索引是奇数的所有元素，索引从0开始

5.获取索引等于index的所有元素

6.索引大于小于gt() lt()

7.获取网页中所有的h标签内容

8.匹配网页中正在发生动画效果的元素

（4）表单选择器

9内容过滤选择器

（1）选取含有文本内容为text的元素

（2）选取含有某元素的元素

10可见性过滤选择器

（1）选取所有可见元素

（2）选取所有不可见元素

11,属性过滤选择器

    (1)选取拥有此属性的选择器

    (2)选取属性值为value的元素

1,子元素过滤选择器

  (1)选取父元素下，索引值是偶数的元素(索引值从1开始)

  (2)选取父元素下,索引值是奇数的元素(索引值从1开始)

  (3)匹配每个父元素下,索引值为index的元素

  (4)匹配每个父元素的第一个子元素

  (5)匹配每个父元素的最后一个子元素

2表单对象属性过滤选择器

  (1)选取所有被选中的元素(单选框,复选框)

  (2)选取所有被选中的下拉列表选项

3表单选择器

  (1)选取所有的input,textarea,select,button

  (2)选取所有的单行文本框

  (3)选取所有的密码框

  (4)选取所有的单选框

  (5)选择所有的复选框

  (6)选择所有的提交按钮

  (7)选择所有的文件上传域

4空格

var descent =$(".test :hidden").length;

获得class属性为test的元素下面的所有隐藏元素(后代元素)

2,没空格

var ele =$(".test:hidden").length;

获得所有的隐藏的class为test的元素

1,jQuery 查找节点：

    (1)查找元素节点

    (2)查找属性节点

2,jQuery 创建节点：

    (1)创建元素节点 

    (2)创建属性节点

    (3)创建文本节点

3,jQuery 插入节点：

    (1)append()    向匹配的元素内部追加内容

    (2)appendTo()  将匹配的元素追加到指定的元素中

4,jQuery 删除节点：

    (1)根据参数删除指定的元素

      remove()     

    (2)清空节点

       empty()

复制和替换节点

5,clone() 复制节点

6, 替换节点

   replaceWith()

   replaceAll()

包裹节点

7,将某个节点，用其他标记包裹起来

  wrap()   将所有的元素单独包裹

  wrapAll() 将所有匹配的用一个元素来包裹

jQuery 属性操作

8,attr()       获取和设置属性

9,removeAttr()删除属性

样式操作  

10,attr()         获取样式和设置样式

11,addClass()     追加样式

12,removeClass()  移除样式

13,toggle()       切换样式

设置和获取html,文本和值

14,html()  读取某个元素中html内容

15,text()  某元素中的文本内容

16,val()    获取某元素的值 

遍历节点

1,children() 取得匹配元素的子元素的集合 

2,next()     取得匹配元素后面紧邻的同辈元素

3,prev()     取得匹配元素前面紧邻的同辈元素

4,siblings() 取得匹配元素前后所有的同辈元素

jQuery中的事件

1,绑定事件 bind()

2,合成事件 hove()  toggle()

3,事件对象的属性 (案例)

4,事件模拟操作 trigger()

合成事件

1，hover() 

光标移入时触发第一个函数;光标移出时触发第二个函数

2，toggle()

第一次单击触发第一个函数,再次单击触发第二个函数

事件对象的属性

1，event.type()  事件类型

2，event.pageX() 

     event.pageY() 鼠标的X轴 Y轴

3，event.which()

   鼠标单击事件中获得鼠标的左中右键

     键盘事件中获得键盘的按键

事件模拟操作

1,常用模拟操作 trigger()

2,触发自定义事件

3,传递数据

参数1,触发的事件类型;

参数2,传递给事件处理函数的附加数据

jQuery中的动画

1,show()  和  hide()

2,fadeIn()fadeOut() fadeTo()

3,slideUp() 和 slideDown()

4，自定义动画：animate()

注意：

   (1)动画都有速度参数 fast slownormal 自定义

   (2)都有回调函数callback

   (3)animate(params,speed,callback)需要相对定位

5,停止动画  stop()

6,判断是否处于动画状态 is(":animated")