作者：烨竹
jQuery官网: http://jquery.com/
$(选择器),可以通过各种途径捕获DOM对象
页面就绪事件:
当页面就绪(html元素)时,触发的事件。$(document).ready(function(){})比window.onload更快触发,避免用户等待资源加载.
页面就绪事件
语法1:
$(document).ready(function(){
//页面就绪时,执行的代码
})
语法2：
$().ready(function(){
//页面就绪时,执行的代码
})
语法3：
$(function(){
//页面就绪时,执行的代码
})
选择器
基本选择器(4种)
1.通过ID捕获 #id
2.通过class捕获 .class
3.通过标签名捕获 tagname
4.分组选择器: 选择器1,选择器2,选择器3…
层级选择器(4种)
层级也就是包含关系 父元素包含子元素
后代选择器 空格 A空格B 表示匹配A后代中的B元素
子元素选择器 > A>B 表示匹配A的子元素B
相邻选择器 + A+B 表示紧跟A元素的同级元素B
弟选择器 ~ A~B匹配A的同级兄弟(但是在A之前的不能匹配)
简单选择器(8种)
把一些相对复杂的匹配逻辑,大幅度简化
匹配第一个元素 :first
匹配最后一个元素 :last
匹配索引(从0开始)为偶数的元素 :even
匹配索引(从0开始)为奇数的元素 :odd
匹配特定索引 :eq(索引) equal
匹配索引大于某值 :gt(索引) greater than
匹配索引小于某值 :lt(索引) little than
淘汰某个元素 :not(选择器) 不选中not中指定的元素
内容选择器(4种)
根据内容捕获dom对象
匹配是否包含某种文本内容 :contains(文本内容)
匹配含有特定子元素的父元素 :has(选择器)
匹配空元素 :empty
匹配非空元素 :parent
可见性选择器(2种)
根据元素是否可见进行捕获
:hidden 匹配 display:none 和 type=”hidden” 等不可见的元素
:visible 匹配可见的元素
子元素选择器(4种)
长子 :first-child
末子 :last-child
特定子元素 :nth-child(序号/even/odd) 序号从1开始
独生子 :only-child
表单元素选择器(10种)
:input 匹配所有表单元素(textarea和select)
:button 匹配type=”button”的元素
:checkbox 匹配type=”checkbox”的元素
:file 匹配type=”file”的元素
:image 匹配type=”image”的元素
:password 匹配type=”password”的元素
:reset 匹配type=”reset”的元素
:radio 匹配type=”radio”的元素
:submit 匹配type=”submit”的元素
:text 匹配type=”text”的元素
区分:
$(“input”) 捕获所有input标签
$(“:input”) 捕获包括textarea和select在内的表单元素
表单属性选择器(4种)
:disabled 捕获被禁用的表单元素
:enabled 捕获未被禁用的表单元素
:selected 捕获下拉选框中被选中的选项
:checked 捕获单选框或复选框被勾选的选项
属性选择器(7种)
根据属性的情况进行匹配
[attr] 匹配含有某个属性的元素 $(“input[name]”)
[attr=value] 匹配含有某个属性,并且属性等于某个值的元素
[attr!=value] 匹配含有某个属性,并且属性不等于某个值的元素
[attr^=value] 匹配attr属性值以value开始的元素
[attr$=value] 匹配attr属性值以value结束的元素
[attr*=value] 匹配attr属性值包含value的元素
[attr][attr][attr] 可以同时建立多个属性选择器表达式
jQuery对象与DOM对象
认清DOM对象
认清jQuery对象
jQuery对象转换为DOM对象
由于jQuery对象是DOM对象的集合,加索引访问,就能得到DOM对象
DOM对象转换为jQuery对象
可以直接把DOM对象传参进万能方法$(dom对象)中,就可以得到jQuery对象
image.png
this的技巧
属性操作
标签属性操作(3种)
标签属性指的是html标签属性 id name src
attr(name); attribute属性 读取名为name的属性值
attr(name,value); 设置name属性 值为value 只能设置一个值
attr({参数对象}); 批量设置属性值
元素内容操作(6种)
一个元素的内容有三种:
普通元素的文本内容: text()
text(); 读取文本内容
text(‘文本’); 写入文本内容
普通元素的HTML内容: html()
html(); 读取html内容
html(‘文本’); 写入html内容
表单元素的value值: val()
val(); 读取填写的value值
val(‘文本’); 写入填写的value值
坐标属性操作(2种)
样式left和top属性的改写
offset(); 不给参数,读取当前元素的坐标(返回一个含有left和top的对象)
offset({
left:设定的值,
top:设定的值
}); 给参数,设置当前元素的坐标属性
尺寸属性操作(4种)
尺寸属性有两种 width和height
width(); 不给参数,读取当前元素的宽度
width(设置的值); 给参数,设置元素的宽度
height(); 不给参数,读取当前元素的高度
height(设置的值); 给参数,设置元素的高度
样式属性操作(3种)
样式属性指的是css属性
css(name); 给一个参数,就是读取name这条样式声明的值
css(name,value); 给两个参数,就是设置name这条声明值为value
css({参数对象}); 通过参数对象,一次调用,批量设置
类属性操作(4种)
类属性就是指class属性
removeClass(类名); 移除某个类属性的值
hasClass(类名); 判断当前元素是否具有一个类属性,true false
addClass(类名); 为当前元素添加一个类属性
toggleClass(类名); 切换类样式
DOM操作
原生JS进行DOM增删改查,手段比较单一
增: document.createElement
再把新元素追加到指定位置
父元素.appendChild(子元素)
父元素.insertBefore(新子元素,旧子元素)//和字符串的replace不同
str.replace(旧字符串,新字符串)
删:父元素.removeChild(子元素)
改:父元素.replaceChild(新子元素,旧子元素)
查:4个方法 $()
内部插入节点(4种)
A.append(B); A和B都是jQuery对象 A追加B 把B追击到A内部
A.appendTo(B); A追加到B 把A放到B的内部 可以用$(‘完整新标签’)创建新节点
A.prepend(B); 把B节点追加到A节点的头部
A.prependTo(B); 把A节点追击到B节点的头部
外部插入节点(4种)
A.after(B); 把B元素插入到A元素的后面
A.before(B); 把B元素插入到A元素的前面
A. insertAfter(B); 把A元素放到B元素的后面
A. insertBefore(B); 把A元素放到B元素的前面
删除节点(2种)
删除一个元素 删自身 A.remove();
清空一个元素 删内容 A.empty();
克隆节点(1种)
A.clone(); 该方法有返回值,是当前对象的副本(与本体不同) 默认不复制事件
A.clone(true); 复制DOM节点,并且复制事件
注意事项:原生JS绑定事件不会被复制
替换节点(2种)
A.replaceAll(B); 用A替换所有B
A.replaceWith(B); 用B替换所有A
捕获A元素,作为整体。依次替换B集合中的节点.
包裹节点(4种)
A.wrap(B); 用B依次包裹A节点(包裹多次)
A.wrapAll(B); 用B包裹所有A节点(包裹一次)
A.unwrap(); 拆包 移除包裹着A元素的父元素
A.wrapInner(B); 用B元素包裹A的内容 A包裹内容
查找节点(8种)
由于$()方法获取的是jQuery对象 包含很多DOM对象
$(选择器).查询方法() 目的是在jQuery对象中进一步筛选或匹配
A.eq(index); 匹配索引
A.not(B); 从A集合中去掉B集合元素
A.next(); 寻找紧跟着A的弟元素 $(“span+p”)
A.prev(); 寻找在A之前的兄元素
A.siblings(); 寻找所有与A平级的兄弟 $(“span~p”)弟选择器
A.parent(); 寻找A的父节点
A.children(标签名); 在匹配A的子元素
A.find(标签名); 匹配A的某个后代元素
可以用于快速检索xml数据
<root>。。。</root> $(xml) 把xml数据转换成jQuery对象
$(xml).find(‘province’);
遍历节点(1种)
jQuery对象作为一个集合,有专门的遍历方法each
A. each(); 依次遍历A集合中的元素,执行一些代码
A.each(function(){
//遍历时要执行的操作
});
A.each(function(index,obj){
//遍历时要执行的操作
//index代表正在遍历的索引
//obj代表正在遍历的对象
});
事件编程
jQuery事件类型
click
focus
blur
mouseover
mouseout
mousedown
mouseup
mousemove
keydown
keyup
keypress
change
submit
reset
load
unload
jQuery事件类型特征 不带on
有一些jQuery中特有的事件类型
ready:页面就绪事件
dblclick:double的缩写dbl ,双击事件
hover: hover这个事件在鼠标进入时触发一次,鼠标离开时又触发一次
原生JS绑定: 事件主体dom.事件类型属性 = 事件处理函数
jQuery绑定: 事件主体jq对象.事件类型方法(事件处理函数);
bind/unbind事件绑定卸载
A.bind(type[,data],callback);
type:事件类型 字符串 不带on ‘click’
[data]:可以传入实参
callback:事件处理程序
通过jQuery事件绑定,在事件触发时,系统会自动传入一个封装过的event事件对象
事件对象中包含很多有用的属性和方法:
jQuery底层已经封装好了事件监听
A.unbind(type); 卸载A元素上所有类型为type的事件
one一次性事件绑定
一次性事件 只触发一次的事件
比如:在表单中,用户页面加载时,为表单文本域里写入一些提示信息
在用户聚焦到文本域时,清空内部的所有值
这个清空功能,应该只触发一次。否则,会影响后续用户对填写的修改。
A.one(type[,data],callback);
type:事件类型 字符串 不带on ‘click’
[data]:可以传入实参
callback:事件处理程序
trigger手动触发事件
原生JS绑定事件 dom.onclick = function(){}
//表单验证时,在失去焦点时,检查当前数据是否正确
input.onblur=function(){
//检查正则或逻辑
}
//用户可能在不触发失去焦点事件的情况下,点击提交表单
input.onblur();//手动调用
jQuery绑定事件:
$().blur(function(){
})
A. trigger(type); 手动触发A元素绑定的类型为type的事件
event事件对象
event事件对象在原生JS中有兼容性问题:
W3C: dom.onclick = function(event){
}
IE: window.event
在jQuery中,event底层已经处理好了兼容性问题,统一按照自动传参的形式,传递给事件处理程序
阻止事件冒泡
在原生JS中,事件冒泡有兼容性问题
jQuery底层已经封装处理过了,统一 event.stopPropagation();
阻止默认行为
在原生JS中,存在兼容性问题
jQuery底层统一封装处理了,方法 event.preventDefault();
jQuery对象高级操作
批量操作
对一个jQuery对象的操作,是对该jQuery集合中所有dom元素的操作
连贯操作
jQuery对象支持很多方法,大部分的方法,其返回值,依然是jQuery对象
image.png
存储数据
jQuery中可以为jQuery对象存储数据
存入 A.data(‘数据名’,‘数据值’); 存储数据
读取 A.data(‘数据名’); 读取数据
插件拓展机制
jQuery功能固然强大,但是依然有限。如果有些需求,是jQuery中不具备的,允许我们人为添加额外功能。
jQuery.fn.extend({额外方法对象}); 为jQuery添加额外方法
each原理解析
A.each(function(){
//遍历时执行的代码
});
each遍历的特征:
1、 在回调函数中,this代表正在遍历的dom对象
2、 在遍历时,回调函数会接收到两个实参,第1个是正在遍历的索引。第2个是正在遍历的dom对象。
3、 可以在回调函数中,执行一个return false,让遍历停止
利用插件拓展机制,模拟封装遍历函数,目的:了解each内部原理
动画编程
动画的概念
动画,会动的画。动画应该由很多连续的,渐变的静态的画组成.
网页上的动画,只能有网页元素来呈现,实际上应该分为以下三个方面:
尺寸变化、位置变化、样式变化
以上代码,勉强称为动画,但是不具备舒缓渐变的特质
自定义动画
A.animate({参数对象}[,speed][,callback]);
网页元素在动画开始前,有初始状态
网页元素在动画结束后,有结束状态
参数对象就是在描述结束状态的样式
animate能够让网页元素从初始状态,渐变到结束状态
[,speed]可以以两种形式设置动画速度:
字符串: slow normal fast
毫秒数: 1000 5000 …
[,callback]在动画执行完毕时,调用的函数
隐藏/显示
show([,speed][,callback]); 显示
hide([,speed][,callback]); 隐藏
toggle([,speed][,callback]); 切换
下拉/上滑
slideDown([,speed][,callback]); 下拉
slideUp([,speed][,callback]); 上滑
slideToggle([,speed][,callback]); 切换
淡入/淡出
fadeIn([,speed][,callback]) 淡入(入场) 从透明逐渐变得不透明
fadeout([,speed][,callback]) 淡出(出场) 从不透明逐渐变得完全透明
fadeTo(speed,opacity) 淡化 把透明度变化到某种程度
opacity 样式 设置透明度 0~1之间的小数
注意:如果执行过淡化的动画,设置过某个透明度。那么后续的淡入,无法恢复到完全不透明的状态,只能恢复到曾经设置的透明度
自制动画插件
制作一个旋转效果
由于animate的局限性,所以需要我们自己封装一些强化插件
利用更高级的代码技巧实现this的引用问题:
Ajax编程
ajax方法
$.ajax({参数对象});
该方法支持多达21种参数,常用的有5~9种
async : 是否异步 默认是
cache : 是否缓存 主要用于解决get缓存问题
content-type : 请求数据类型 post请求必要请求头
complete : 完成 响应完成时触发的事件 readyState==4
data : 请求数据 格式 a=10&b=20
datatype：期望的响应数据类型 text xml json jsonp
success : 成功 响应成功时触发的事件 readyState==4&&status==200
type : 请求类型 get或post
url : 请求地址
ajax方法可设置的参数很多,可以作很详细的设置,但是设置很麻烦.
如果进行常规通信,应该使用后面的get和post方法。
如果想要进行特别的通信,可以使用ajax方法进行专门定制。
get请求方法
$.get(请求地址,请求数据,回调函数,响应类型);
IE老版本依然存在缓存问题:
如何解决3种思路 4种方法:
1、 加随机数
2、 加时间戳
3、 设置请求头 让缓存强制过期
4、 设置响应头 禁用缓存
post请求方法
$.post(请求地址,请求数据,回调函数,响应类型);
处理json数据
如果第4个参数传入的json,期望响应数据格式是json,那么msg接收到的就是一个json数据对象,可以直接引用其属性.
处理xml数据
如果第4个参数传入xml,期望响应数据格式是xml,msg接收到的是一个xml文档对象
可以用jQuery万能方法,把文档对象包裹起来,转换成jQuery对象,可以使用jQuery相关方法。find和children,根据标签名寻找数据
处理跨域请求
跨域的手段有3种:
1、 php代理跨域
2、 jsonp 利用同源策略漏洞 img script src属性不受同源策略限制
3、 cors 设置响应头
回顾jsonp跨域的细节:
1、 jQuery底层会给匿名回调函数起随机函数名
2、 默认情况下传递函数名的get参数名 callback
3、 返回的响应:接收到回调函数的随机函数名 调用,并传参
4、 可以在匿名回调函数中,直接使用传参数据
如果使用jsonp技术,datatype参数(第4个参数)被占用了.如果在跨域时,还需要使用xml和json数据怎么办呢?
jsonp形式的响应类型是普通文本,所以在接收到数据后,还需要手动转换一下
xml格式数据正好是完整的标签,只要用万能方法$()包裹,就变成创建jQuery对象.
load载入方法
load(请求地址);方法底层也是异步通信
发起一个异步请求,并且把响应内容填充到选中元素的文本内容中
其他额外插件(jQuery UI库)
jQuery UI draggable
可拖拽的 可以让网页元素被自由拖拽
jQuery UI sortable
sortable自动排序
sortable 是基于draggable实现的
以项目列表为例:
connectWith 连接多个ul元素,允许互换项目成员
update 项目排序位置发生改变时,触发的事件
