3.jQuery选择器

 1)基本选择器

  #id:依据id查找节点

  .class: 依据class属性值

  element: 依据标记的名称

  selector1,select2..selectn: 将多个选择器的结果进行合并。

  *：所有的节点。

 2)层次选择器

  select1 select2 :查找所有的后代

  select1>select2 :只查找子节点

  select1+select2 :下一个兄弟

  select1~select2 :下面所有的兄弟

  

 3)过滤选择器

  (1)基本过滤选择器

  :first 第一个

  :last 最后一个

  :not(selector) 排除满足selector的节点 

  :even 下标为偶数(下标从0开始)

  :odd 下标为奇数

  :eq(index) 下标等于index

  :gt(index) 下标大于index

  :lt(index) 下标小于index

  (2)内容过滤选择器

   :contains(text) :包含指定文本(text)的节点

   :empty :没有子节点或者没有内容的节点

   :has(selector) :包含有selector节点的节点

   :parent :有子节点或者有内容的节点

  (3)可见性过滤选择器

   :hidden :隐含的节点

   :visible :可见的节点

   

  (4)属性过滤选择器

   [attribute] :具有attribute属性的节点

   [attribute=value] :属性值等于value的节点

   [attribute!=value] :属性值不等于value的节点

  (5)子元素过滤选择器

   :nth-child(index/even/odd)

   对符合条件的所有节点采取相同的操作

   注意index下标从1开始

  (6)表单对象属性过滤选择器

   :enabled :可用的表单域

   :disabled :不可用的表单域

   :checked :单选,多选 被选中的

   :selected :下拉列表被选中的

 4)表单选择器

 

  :input input节点,select,textarea,

  :text 文本输入框

  :pasword 密码输入框

  :radio 单选

  :checkbox 多选

  :submit 提交

  :image 图像

  :reset 重置

  :button 按钮

  :file 文件上传

  :hidden 隐藏域

4.DOM操作

  1)查询

   利用选择器找到某个节点之后，如何获得或者修改

   节点的值、节点之间的文本内容、节点的

   html内容、属性值。

    a,节点的html内容 : html()

    b,节点之间的文本内容:text()

    c,节点的值:val()

    d,属性值: attr()

  2)创建

   $(html);

  3)插入节点

   append():向每个匹配的节点内部追加内容

   prepend():向每个匹配的节点内部前置内容

   after():在每个匹配的节点之后插入内容

   before():在每个匹配的节点之前插入内容

  4)删除节点

   remove()

   remove(selector):删除满足selector要求的节点。

   empty():清空节点

  5)复制节点

   clone():

   clone(true):使复制的节点也具有行为(将事件处理

   函数一块复制)

  6)属性操作

   读取：attr('');

   设置： attr('','') 或者一次设置多个

   attr({"":"","":""});

   删除：removeAttr('')

  7)样式操作

   获取和设置: attr("class","") 

   追加:addClass('')

   移除:removeClass('') 或者removeClass('s1 s2')

   或者removeClass()//会删除所有样式

   切换样式：toggleClass

   是否有某个样式 hasClass('')

   读取css('')

   设置css('','')或者css({'':'','':''})//设置多个样式

  8)遍历节点

   children()/children(selector)只考虑子元素，不考虑其它后代元素。

   next()/next(selector):下一个兄弟

   prev()/prev(selector):前一个兄弟

   siblings()/siblings(selector):其它兄弟

   find(selector):查找满足selector条件的后代元素。

   parent():父节点

 

5.事件处理

 1)事件绑订

  bind(type,fn)

 2)绑订方式的简写形式

  click(function(){

  });

 3)合成事件

  hover(enter,leave) : 模拟光标悬停事件

  toggle(fn1,fn2...)：模拟鼠标连续单击事件

 4)事件冒泡

  a,获得事件对象

   click(function(event){

   });

  b,停止冒泡

   event.stopPropagation()

  c,停止默认行为

   event.preventDefault()

  b,事件对象的属性

   event.type:事件类型

   event.target:返回事件源（是dom对象!!!）

   event.pageX/pageY:获得点击的坐标

 5)模拟操作

  trigger('click')

6.动画

 1)show()/ hide() 

  作用：显示/隐藏 (通过改变宽度和高度)

  用法:

   show(速度，[回调函数]);

   速度可以是'slow','normal','fast',也可以是

   数字，比如900(单位是毫秒) 

   回调函数会在动画执行完毕之后执行。  

 2)fadeIn() fadeOut():

  作用：显示/隐藏(改变不透明度)

  用法:

   fadeIn(速度，[回调函数]);

   速度可以是'slow','normal','fast',也可以是

   数字，比如900(单位是毫秒) 

   回调函数会在动画执行完毕之后执行。

 3)slideUp() /slideDown()

  作用：显示/隐藏(改变元素的高度)

  用法:

   slideUp(速度，[回调函数]);

   速度可以是'slow','normal','fast',也可以是

   数字，比如900(单位是毫秒) 

   回调函数会在动画执行完毕之后执行。

 4)自定义动画 animate(params,speed,callback)

  用法:

   params:是一个javascript对象，描述动画执行完毕

   之后元素的样式。

   speed: 是一个数字，单位是毫秒，表示动画执行所

   需要的时间。

   callback:动画执行完成之后，会调用这个函数。