JQuery

1.jQuery是什么？

  javaScript的框架有很多，比如prototype、JQuery、ExtJS等等。jQuery的通用性很好。

jQuery设计思想是将原始的dom对象封装成一个jQuery对象，通过调用jQuery对象的方法来实现对原始的dom对象的操作，这样设计的目的是：是为了更好地兼容不同的浏览器，简化代码。

2.编程步骤

  step1

  石永红jQuery提供的选择器找到节点，一般情况下，jQuery会将找到的节点封装成jQuery对象

  step2

  调用jQuery对象的提供的方法。

3.jQuery对象与dom对象之间的转换。

  a.dom对象转换成jQuery对象。

    使用var $obj = $(dom对象)；

  b.jQuery对象转换成dom对象。

    使用var obj = $obj.get(0)或者 var obj = $obj.get()[0]

4.如何同时使用jquery与prototype

  step1

  先引入prototype.js

  step2

  使用jQuery.noConflict()函数，为jQuery的$函数提供一个别名。

5.jQuery选择器

  jQuery选择器模仿css选择器的语法，其作用是，查找符合选择器要求的节点。

  a.基本选择器

    #id

    .class

    element

    selector1,select2...selectn

    *

  b.层次选择器

  select1 select2

  select1>select2

  select1+select2

  select1~select2

  c.过滤选择器

  1）基本过滤选择器

  :first

  :last

  :not(selector)

  :even

  :odd

  :eq(index)

  :gt(index)

  :lt(index)

  2）内容过滤选择器

  :contains(text)

  :empty

  :has(selector)

  :parent

  3）可见性过滤选择器

  :hidden

  :visible

  4）属性过滤选择器

  [attribute]

  [attribute=value]

  [attribute!=value]

  5）子元素过滤选择器

  :nth-child(index/even/odd)

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

  :enabled

  :disabled

  :checked

  :selected

  d.表单选择器

  :input

  :text

  :pasword

  :radio

  :checkbox

  :submit

  :image

  :reset

  :button

  :file

  :hidden

6.dom操作

1）查询

  利用选择器查找到节点：

  text()

  输出或者设这节点之间的文本，text方法相当于dom节点的innerText属性

  html()

  输出或者设置节点之间的html内容，html方法相当于dom及诶单的innerHTML属性。

  attr()

  输出或者设置及诶到哪的属性值。

  val()此外，下拉列表，可以使用val()获得值

  2）创建

  $(html);

  3）插入节点

  append()

  向每个匹配的元素内部追加内容

  prepend()

  向每个匹配的元素内部前置内容

  after()

  在每个匹配的元素之后插入内容

  before()

  在每个匹配的元素之前插入内容

  4）删除节点

  remove()

  remove(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()                    只考虑子元素，不考虑其它后代元素

  next()

  prev()

  siblings()                     兄弟节点

  find(selector)、

7.事件处理

1）事件绑定

  bind(type,fn)

2）绑定方式的简写形式

  click(function(){

  });

3）合成事件

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

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

4）事件冒泡

  获得事件对象

  //e不再是原始的事件对象，而是jQuery

  //封装之后的事件对象。

  click(function(e){

  });

  停止冒泡

  event.stopPropagation()

  停止默认行为

  event.preventDefault()

5）事件对象的属性

  event.type:获得时间类型

  event.target:获得事件源，返回的是原始的dom节点

8.jQuery操作类数组的方法

  $(选择器)操作返回的如果是一个数组，可以使用如下方法来操作：

  1）each(fn(i))      循环遍历每一个元素，this代表被迭代的dom对象，$(this)代表被迭代的jQuery对象。

  2）eq(index)       返回index+1位置处的jQuery对象

  3）index(obj)       返回下标，其中obj可以是dom对象或者jQuery对象。

  4）length属性      个数

  5）get()               返回dom对象组成的数组

  6）get(index)       返回index+1处的dom对象