jquery选择器、事件

浏览数：21 / 时间：2015年06月09日

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:动画执行完成之后，会调用这个函数。