jQuery详解

什么是jQuery?

jQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)
     
    jQuery 简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json)，其理念：write less,do more


  优势：
    1，轻量级
    2，强大的选择器
    3，出色的DOM操作的封装
    4，可靠的事件处理机制
    5，完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
    6，不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
    7，出色的浏览器兼容性
    8，链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
 
  jquery库类型
    完整版本：  主要用于测试，学习和开发
    mini版本：  主要用于产品和项目

实战注意

• 使用最新的版本

  新版本不止会带来新功能，还会提升性能。     注意 jQuery 2.x 不再支持IE 6 ~ IE 8。如果你希望兼容IE 6 ~ IE 8，推荐使用 1.x。

• 选择合理的选择器

  选择同一个网页元素，可以使用多种选择器，但每种选择器的性能却是不一样的。按照性能高低排列：id选择器和元素标签选择器>class选择器>属性选择器。

• 通过父元素选择子元素

  最佳选择是使用$parent.find('.child')。由于$parent通常在前面的操作已经生成，jQuery会进行缓存，提高了执行速度。

• 不要过度使用jQuery

  在能够使用原生的JavaScript的场合，尽量避免使用jQuery。

• 利用缓存

  使用选择器的次数越少越好，并且尽可能地缓存选中的结果，以便复用。

• 使用链式写法

  因为采用链式写法时jQuery会自动缓存每一步的结果，所以比非链式写法要快很多。

• 事件的委托处理

  将需要多次绑定在子元素上的事件，委托给父元素来处理，减少绑定次数，从而提高性能。

• 尽量少地改动DOM结构

  不要频繁改动DOM结构，如果要插入多个元素，可以先将其合并，然后再一次性插入。如果要对DOM元素进行大量处理，应该先使用.detach()方法，将元素从DOM中移除，处理完之后再重新插回文档。在DOM元素上存储数据时，应该使用$.data()方法。插入html代码时，原生的innterHTML()方法要比jQuery对象的html()方法更快。

• 合理地使用循环

  如果可以使用复杂的选择器直接选中元素，就不要使用循环。应该优先使用原生的循环方法。

• 尽量少生成jQuery对象

  每使用一次选择器，都会生成一个jQuery对象，带有很多属性和方法，会占用不少资源。能够使用jQuery函数的场合，尽量不要使用jQuery对象。

• 选择作用域链最短的方法

  JavaScript的变量采用链式作用域，读取局部变量要比全局变量快很多。在调用对象方法时，closure模式要比prototype模式更快。

• 使用Pub/Sub模式管理事件

  当发生某事件后，如果要连续执行多个操作，可以改用事件触发的形式。

• DOM对象与jQuery对象转换

  DOM对象指的是通过传统的JavaScript方法获取的DOM元素对象。jQuery对象指的是通过jQuery语法包装原始的DOM对象后生成的新对象。如果需要使DOM对象与jQuery对象之间的方法互相调用，必须先实现对象之间的类型转换。不能使用DOM对象调用jQuery对象的方法，也不能使用jQuery对象调用DOM对象的方法。

  调用jQuery中提供的[index]与get(index)方法即可将jQuery对象转换成DOM对象。DOM对象只要通过jQuery的方法$()进行封装，就可以转换成jQuery对象。

jQuery选择器

选择器通过标签名、属性名或内容对DOM元素进行快速、准确的定位。根据所获取页面中元素的不同，可以将选择器分为：基本选择器、层次选择器、过滤选择器和表单选择器。

基本选择器

使用最频繁的选择器，包括元素ID、Class名、元素名等。

id选择器：

$('#element-id')

class选择器：

$('.class-name')

元素选择器：

$('element-name')

 注意  除了上面三个最常用的  还有

         *选择器          获得所有元素
         组合选择器 selector1,selector2,selector3  多个选择器
 指定任意多个选择器，并将匹配到的元素合并到一个结果内。
          如  $("div,span,p.myClass")

层次选择器

通过DOM元素间的层次关系获取元素，主要层次关系包括后代、父子、相邻、兄弟关系等。

根据祖先元素匹配所有后代元素：

$('ancestor descendant')

根据父元素匹配所有的子元素：

$('parent > child')

匹配所有紧接在prev元素后的相邻元素：

$('prev + next')

匹配prev元素之后的所有兄弟元素：

$('prev ~ siblings')

过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，以:开头。过滤选择器又分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。

 简单过滤选择器

获取页面第一个和最后一个X元素：

$('element:first')
$('element:last')

获取所有索引值为偶数和奇数的元素，索引值从0开始：

$('element:even')
$('element:odd')

获取等于、大于和小于索引值的元素：

$('element:eq(index)')
$('element:gt(index)')
$('element:lt(index)')

获取除给定的选择器外的元素：

$('element:not(selector)')

 内容过滤选择器

获取包含给定文本的元素：

$('element:contains(text)')

获取所有不包含子元素或者文本的空元素：

$('element:empty')

获取含有选择器所匹配的元素的元素：

$('element:has(selector)')

获取含有子元素或文本的元素：

$('element:parent')

可见性过滤选择器

获取所有不可见的元素，或者type为hidden的元素：

$('element:hidden')

获取所有可见的元素：

$('element:visible')

属性过滤选择器

获取包含给定属性的元素：

$('element[attribute]')

获取属性是给定值的元素：

$('element[attribute=value]')

获取属性不是给定值的元素：

$('element[attribute!=value]')

获取属性是以给定值开始的元素：

$('element[attribute^=value]')

获取属性是以给定值结束的元素：

$('element[attribute$=value]')

获取属性是包含给定值的元素：

$('element[attribute*=value]')

子元素过滤选择器

获取父元素下的第一个、最后一个、唯一一个子元素：

$('parent:first-child')
$('parent:last-child')
$('parent:only-child')

获取父元素下的特定位置的元素，索引值从1开始：

$('parent:nth-child(eq|even|odd|index)')

表单对象属性过滤选择器

获取表单中所有属性为可用的元素：

$('element:enabled')

获取表单中所有属性为不可用的元素：

$('element:disabled')

获取表单中所有被选中的元素：

$('element:checked')

获取表单中所有被选中option的元素：

$('element:selected')

表单选择器

通过它可以在页面中快速定位某表单对象。

获取所有input、textarea、select等input元素：

$('form:input')

获取所有单行文本框：

$('form:text')

获取所有密码框：

$('form:password')

获取所有单项按钮：

$('form:radio')

获取所有复选框：

$('form:checkbox')

获取所有提交按钮：

$('form:submit')

获取所有图像域：

$('form:image')

获取所有重置按钮：

$('form:reset')

获取所有按钮：

$('form:button')

获取所有文件域：

$('form:file')

事件

jQuery可以把事件直接绑定在网页元素上，使代码更加简洁。

事件机制

事件在触发后被分为两个阶段：一个是捕获capture，一个是冒泡bubbling。为阻止事件的冒泡现象，可以调用stopPropagation()方法或者语句return false;来实现。

载入事件

在jQuery脚本加载到页面时，会设置一个isReady标记，用于监听页面加载的进度，当遇到执行ready()方法时，通过查看isReady是否被设置，如果未被设置，说明页面并未加载完成，将未完成的部分用数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

绑定事件

为所选择的元素绑定事件：

$(selector).bind(type, [data], function)

其中，参数type为一个或多个事件类型的字符串，也可以自定义类型；参数data是作为event.data属性值传递给事件对象的额外数据对象；参数function是绑定到每个选择元素的事件中的处理方法。

如果在元素中绑定多个事件，可以将事件用空格隔开。还可以通过传入一个映射，对所选对象绑定多个事件处理方法。

切换事件

有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。

使元素在鼠标悬停和鼠标移出的事件间进行切换：

hover()

可以依次调用N个指定的方法，直到最后一个方法：

toggle()

移除事件

移除元素绑定的事件：

$(selector).unbind([type], [function])

常用事件

.blur()         //表单元素失去焦点。
.change()       //表单元素的值发生变化
.click()        //鼠标单击
.dblclick()     //鼠标双击
.focus()        //表单元素获得焦点
.focusin()      //子元素获得焦点
.focusout()     //子元素失去焦点
.keydown()      //按下键盘（长时间按键，只返回一个事件）
.keypress()     //按下键盘（长时间按键，将返回多个事件）
.keyup()        //松开键盘
.load()         //元素加载完毕
.mousedown()    //按下鼠标
.mouseenter()   //鼠标进入（进入子元素不触发）
.mouseleave()   //鼠标离开（离开子元素不触发）
.mousemove()    //鼠标在元素内部移动
.mouseout()     //鼠标离开（离开子元素也触发）
.mouseover()    //鼠标进入（进入子元素也触发）
.mouseup()      //松开鼠标
.ready()        //DOM加载完成
.resize()       //浏览器窗口的大小发生改变
.scroll()       //滚动条的位置发生变化
.select()       //用户选中文本框中的内容
.submit()       //用户递交表单
.unload()       //用户离开页面

其他事件

为所选的元素绑定一个仅触发一次的处理方法：

$(selector).one(type, [data], function)

在所选的元素上触发指定类型的事件：

$(selector).trigger(type, [data])