jQuery

jQuery

jQuery 2.0版本后不兼容IE6，7，8浏览器
jQuery核心理念：write less，do more.
jQuery编程步骤：

• 引入jQuery的js文件
• 使用选择器定位要操作的节点
• 调用jQuery的方法进行操作

jQuery对象：为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述
jQuery方法大部分都是返回jQuery对象，所有可以连缀调用。

• DOM对象—->jquery对象：$obj=$(obj);
• jQuery对象—>DOM对象：$obj.get(0);或者$obj.get()[0];

jQuery选择器种类：基本选择器，层次选择器，过滤选择器，表单选择器

基本选择器

• $('#id')
• $('.class')
• $('div')
• $('#id,.class,div')
• $('*')所有元素

层次选择器

• select1 空格 select2：找select1下的select2 $(‘#d1 div’)
• select1>select2：找select1下的第一层（直接子节点）的select2 $(‘#d1>div’)
• select1+select2：“+”表示下一个兄弟节点 $(‘#d2+div’)
• select1~select2：“~”代表下面所有兄弟节点，select1以上的兄弟节点不行 $(‘#d2~div’)

过滤选择器

以“：”或“[ ]”开始

• ：first ——-第一个元素
• ：last ——-最后一个元素
• ：not(selector)———除selector以外
• ：even———–偶数行
• ：odd———–奇数行
• ：eq(index)—–下标等于index元素
• ：gt(index)—–下标大于index元素
• ：lt(index)——下标小于index元素

如：$(‘div:not(:first)’)

内容过滤选择器

• ：contains(text)——-匹配包含给定文本的元素
• ：empty————–匹配所有不包含子元素或文本的空元素
• ：has(selector)——-匹配含有选择器所匹配的元素
• ：parent————–匹配含有子元素或者文本的元素

可见性过滤选择器

• ：hidden————-匹配所有不可见元素，或type为hidden的元素
• ：visible————–匹配所有的可见元素

属性过滤选择器

• [attribute]————-匹配具有attribute的属性元素
• [attribute=value]——匹配属性等于value的元素
• [attribute！=value]—-匹配属性不等于value的元素
• [attribute^=value]—-匹配属性以value开始的元素
• [attribute$=value]—-匹配属性以value结尾的元素

子元素过滤选择器

• ：nth-child(index/even/odd)——–匹配第几个元素，index从1开始
• ：eq(index)—————-匹配一个给定索引值的元素，index从0开始

jQuery操作DOM

• html()：读取或修改节点内容
• text()：读取或修改节点为文本内容
• val()：读取或修改节点的value值
• attr()：读取或者修改节点的属性

插入DOM节点

• $(html)：创建DOM节点，返回一个对象

var $obj=$('<div>hello jQuery</div>');$('body').append($obj);简写为：$('body').append('<div>hello jQuery</div>');

• append()：作为最后一个子节点添加进来
• prepend()：作为第一个子节点添加进来
• after()：作为下一个兄弟节点添加进来
• before()：作为上一个兄弟节点添加进来

删除DOM节点

• remove()：移除
• remove(selector)：按选择器定位后删除
• empty()：清空节点

复制节点

• clone：复制节点
• clone(true)：复制的节点也具有行为（与hyml分离的行为）（将处理代码一块复制）

样式操作

• attr(‘class’,’ ‘)——–获取和设置
• addclass(“”)———-追加样式
• removeClass(’ ‘)——移除样式
• removeClass( )——-移除所有样式
• toggleClass(’ ‘)——-切换样式，如果存在接删除，不存在则添加
• hasClass( )———–是否有某个样式
• css(’ ‘)—————–读取css的值（单属性的设置）
• css(’ ‘,’ ‘)————–设置多个样式

遍历节点

• children()/children(selector)：只考虑直接子节点
• next()/next(selector)：下一个兄弟节点
• prev()/prev(selector)：上一个兄弟节点
• siblings()/siblings(selector)：其他兄弟
• find(selector)：查找满足选择器的所有后代
• parent()：父节点（没有选择器）

jQuery事件

1.页面加载后执行
DOM：window.onload
浏览器解析HTML的步骤：

• 解析服务器端返回的内容
• 在客户端内存中生成一棵DOM树
• 渲染成最后的画面

在jQuery中，如何处理页面加载事件：

1.$(document).ready(function(){    //初始化操作    //事件绑定});2.$(function(){    //初始化操作});

jQuery初始化事件与window.onload的不同：
1）window.onload在一个页面中，只能有一个，然而jQuery的初始化事件，在一个页面中，可以有若干多个。
2）window.onload要在整个页面加载完毕时执行，而jQuery的初始化事件，是在DOM树加载完毕时，就已经开始执行了。

2.多个库并存时，$的控制权
可以让jQuery将$的控制权交出

jQuery.noConflict();

3.jQuery事件绑定

DOM:elem.onclick=function();    addEventListener('click',fn);

3.1 $obj.bind(事件名称，执行函数)
事件名称：jQuery所支持的事件名称
执行行数：待执行的function

$obj.bind('click',function(){    //事件操作});

3.2 事件简写：

• $obj.事件名称(fn);———–绑定事件
• $obj.事件名称();————-执行事件

3.3 解绑事件

• $obj.unbind(事件名称);——-解绑指定事件对应的所有函数
• $obj.unbind(事件名称);——-解绑指定事件对应的指定函数

4. 事件对象
绑定事件时，直接定义一个参数，该参数则为当前事件的事件对象。可以通过事件对象，获取鼠标坐标，按下的键盘键位，以及事件源，阻止事件冒泡。

$obj.click(function(event){});

获取事件源：

• event.target
• this
  获取到的事件源为DOM对象

5. 取消事件冒泡
e.stopPropagation()可以取消事件冒泡

6. 模拟操作的语法

• obj.trigger(事件类型)如：obj.trigger('focus'); $obj.trigger(‘click’);
• $obj.click();简写

7. 动画
7.1 基本显示与隐藏相关

• hide(speed,fn);
  speed:动画完成的时间（毫秒），默认/slow/normal/fast/自定义
• show(speed,fn);

7.2 动画排队效果
可以通过动画的方法连缀调用来实现。

7.3自定义动画
$obj.animate({ },speed);

7.4 滑动显示与隐藏

• slideDown()显示
• slideUp()隐藏

7.5 透明度显示与隐藏

• fadeIn()显示
• fadeOut()隐藏
  所有方法的使用方式与hide()一样

jQuery中类数组的操作

属性：length:当前jQuery对象所有封装的数据长度（元素个数）
方法：
1.循环遍历数组中的每一个元素

$obj.each(function(i){    //this:当前循环遍历出的DOM元素});

2.eq(index) 获取当前数组中指定索引处的jQuery元素
var td=$(‘td’).eq(0);

3.get返回由DOM元素组成的数组

4.index(obj) 获取obj在当前数组中的索引
obj可以是DOM对象，也可以是jQuery对象