jQuery简明参考手册——30分钟快速入门jQuery
2017-11-03 23:50
453 查看
选择器
基本选择器
$("#id"):id选择器,返回单个元素
$(".class"):class选择器,返回集合元素
$("element"):选定指定的元素名匹配的元素,返回集合元素
$("*"):通配符选择器,选择所有元素,返回集合元素
$("selector1,selector2"):选择所有选择器匹配的元素,返回集合元素
层次选择器
$("ancestor descendant"):选择ancestor元素的所有descendant后代元素,返回集合元素
$("parent>child"):选择parent下的child子元素,
$("prev+next"):选择紧接在prev后面的同辈next元素
$("prev~siblings"):获取prev后面的所有同辈siblings元素
说明:
$("prev+next")与
$("prev").next()效果相等
$("prev~siblings")与
$("prev").sibling()效果相等
基本过滤选择器
:first:选取第一个元素,返回单个元素
:last:选取最后一个元素,返回单个元素
:not(selector):去除所有给定选择器所匹配的元素,返回集合元素
:even:选取索引为偶数的所有元素,索引号从0开始,返回集合元素
:odd:选取索引为奇数的所有元素,索引号从0开始,返回集合元素
:ep(index):选取索引等于index的元素,index从0开始返回单个元素
:gt(index):选取索引号大于index的所有元素,返回集合元素
:lt(index):选取索引小于index的所有元素,返回集合元素
:header:选取所有的标题元素,返回集合元素
:animated:选取正在执行动画的元素,返回集合元素
:focus:选取当前获取焦点的元素,返回集合元素
内容过滤选择器
:contains(text):选取含有文本内容为text的元素,返回集合元素
:empty:选取没有子节点或者文本的空元素,返回集合元素
:has(selector):选取含有选择器所匹配的元素的元素,返回集合元素
:parent:选取含有子节点或者文本的元素,返回集合元素
可见性过滤选择器
:hidden:选取所有不可见的元素,返回集合元素
:visible:选取所有可见的元素,返回集合元素
属性过滤选择器
[attribute]:选取含有此属性的元素,返回集合元素
:[attribute=value]:选取属性的值为value的元素,返回集合元素
:[attribute!=value]:选取属性的值不为value的元素,返回集合元素
:[attribute^=value]:选取属性的值以value开始的元素,返回集合元素
:[attribute$=value]:选取属性的值以value结尾的元素,返回集合元素
:[attribute*=value]:选取属性的值含有value的元素,返回集合元素
:[attribute|=value]:选取属性的值等于value或者是以value为前缀(即“value-”,value后面跟一个连字符)的元素,返回集合元素
:[attribute~=value]:选取属性的值以空格分隔的值中含有value的元素,返回集合元素
:[attribute1][attribute1]……[attributeN1]:用多个属性选择器合并成一个复合属性选择器,返回集合元素
子元素过滤选择器
:nth-child(index/even/odd):选取父元素下的第index个子元素,index值从1开始,或者选取奇偶子元素,返回集合元素
:first-child:选取父元素下的第一个元素,返回集合元素
:last-child:选取父元素下的最后一个子元素,返回集合元素
:only-child:如果元素是父元素的唯一的元素,则选择,否则,不选择,返回集合元素
另外
:nth-child()还可以通过数学表达式选取一组特定的元素,如:
:nth-child(3n):选取父元素下所有3的倍数的子元素(n从1开始,即选取第3,6,9,……个元素)
表单选择器
:input:选取所有的input、textarea、select、button元素,返回集合元素
:text:选取所有单行文本框,返回集合元素
:password:选取所有的密码框,返回集合元素
:radio:选取所有的单选框,返回集合元素
:checkbox:选取所有的多选框,返回集合元素
:submit:选取所有提交按钮,返回集合元素
:image:选取所有的图像按钮,返回集合元素
:reset:选取所有的重置按钮,返回集合元素
:button:选取所有的按钮,返回集合元素
:file:选取所有的上传域,返回集合元素
表单对象属性过滤选择器
:enabled:选取所有可用元素,返回集合元素
:disabled:选取所有不可用元素,返回集合元素
:checked:选取所有被选中的元素(单选框和多选框),返回集合元素
:selected:选取所有被选中的元素(下拉列表),返回集合元素
DOM操作
查找、设置、删除属性
1、attr()方法:接受一个或两个参数,一个参数是获取属性值,两个参数是设置属性,需要设置多个属性时,attr方法的参数可以是一个由属性和属性值组成的json数据格式3、addClass():为元素添加class值,可批量添加属性与值
创建元素、文本、属性节点
均可以直接将元素、文本、属性添加到$()方法中,如:
插入节点
1、append():向元素内部添加节点,如:
删除节点
1、remove():从DOM中删除所有匹配的元素,同时该节点所包含的所有后代节点将同时被删除,因为返回值是删除节点的引用,因此可以在以后继续使用这些元素,但是此时这些节点所绑定的事件也会删除,如:3、empty():清空所匹配的节点
复制节点
替换节点
1、replaceWith():将匹配的节点替换成指定的节点
包裹节点
1、wrap():将匹配的节点用指定的节点单独包裹起来
设置、获取文本、HTML和值
1、html():类似于原生JavaScript中的innerHTML属性,不含参数时是获取,包含元素节点和文本节点,当内有字符串参数时,是重新设置节点内容和文本内容
遍历节点
1、children():获取所有的子元素集合,返回一个数组,只考虑子元素,不考虑其他后代元素
元素定位
1、offset():获取元素在当前视窗的相对偏移,返回一个对象,对象包含top和left两个属性4、scrollLeft():获取元素的滚动条距离左侧的距离
事件与动画
加载DOM
$(document).ready():和原生的JavaScript的window.onload()方法有类似的功能,window.onload()方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,而$(docuemnt).ready()在DOM完全就绪时就可以被调用,此时并不意味着这些关联文件都已经下载完毕;另外,$(document).ready()可多次使用,而window.onload()只能用一次,多次使用时会出现覆盖的现象,另外其可以简写成$().ready();
事件绑定
bind():可以有三个参数,第一个参数是事件类型,第二个参数可选,作为event.data属性值传给事件对象的额外数据对象,第三个参数是处理函数
合成事件
jQuery中有两个合成事件——hover()和toggle()方法1、hover():用于模拟光标悬停事件,语法
2、toggle():用于模拟鼠标连续点击事件,语法
阻止事件之外的额外问题
1、停止事件冒泡用stopPropagation()方法来停止事件冒泡,如:
用preventDafault()方法来阻止默认行为,当然也可以用原生JavaScript中的return false如:
事件捕获与事件冒泡是刚好两个相反的过程,jQuery不支持事件捕获。
事件对象
添加事件对象非常简单,只需要为函数添加一个参数,一般会用event(1)event.type:获取事件的类型
2、事件对象的方法
(1)event.preventDefault():阻止默认事件
(2)event.stopPropagation():阻止事件冒泡
移除事件
unbind():没有参数时,删除所有的绑定事件,可以有两个参数,第一个参数是事件类型,第二个参数是将要移除的函数,提供了事件类型,则只删除该事件类型,提供了事件处理函数,则只有这个事件处理函数会被删除,语法结构如下
事件的其他用法
1、模拟操作trigger():此方法可以模拟操作,例如
trigger()方法会触发浏览器的默认事件,如果不想执行浏览器的默认操作,可以使用jQuery中的另一个方法triggerHandler()方法
2、绑定多个事件类型
bind可以为元素绑定多个事件类型
动画
1、show()和hide():这两个是jQuery中的最基本的动画,当这两个方法不含参数时,效果类似于直接将元素的display属性分别改为block和none,这两个方法当有参数时,可以使元素慢慢显示出来,速度关键字有slow、normal、fast,此外,还可以直接指定一个数字作为显示的时间参数,单位为毫秒,其中slow的显示时间为600毫秒,normal的显示时间为400毫秒,fast的显示时间为200毫秒,这两个方法是同时改变元素的高度、宽度和不透明度5、slideToggle():通过高度来切换元素的可见性,语法结构
speed:速度参数,可选
callback:在动画完成后执行的函数,可选
另外animate可以添加累加与累减动画,如:
延迟动画利用delay()方法
相关文章推荐
- plain framework 1 参考手册 入门指引之 简明教程
- Bootstrap快速入门参考手册(2)
- Bootstrap快速入门参考手册
- 从C到C++——C++快速入门简明参考
- 文件服务器 之 SAMBA 服务器配置简明参考手册
- javascript快速入门第三章jquery基础知识
- XSLT入门 -- 第2章 基础篇: XSLT快速参考2 [转]
- svn快速参考手册
- jQuery 参考手册 - 选择器
- XML轻松学习手册(1)XML快速入门
- Objective-C语法快速参考--(入门)
- JQuery快速入门
- jQuery 参考手册 - 数据存储
- TWIG 模板引擎 快速入门手册
- jQuery快速入门避免少走弯路
- jQuery快速入门
- Python 绘图 Matplotlib 快速参考手册
- XML轻松学习手册(1)XML快速入门
- jquery get post参考手册
- XML:XML轻松学习手册(4)XML快速入门