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对象