Jquery
2021-02-07 09:44:19 33 举报AI智能生成
登录查看完整内容
jQuery思维导图
作者其他创作
大纲/内容
jQuery
API帮助文档
jQuery简介与使用方式
http://jquery.com一个优秀的JS函数库封装简化DOM操作
引入jQuery库
引入方式
本地引入
CDN远程引入
引入版本
测试版（未压缩版）
生产版（压缩版）
使用jQuery
使用jQuery函数：$/jQuery
使用jQuery对象：$xxx(执行$()得到的)
jQuery的功能
HTML元素选取（选择器）
HTML元素操作
CSS操作
HTML事件处理
JS动画效果
链式调用
可以通过 . 不断调用jQuery对象的方法
读写合一
读数据与写数据用的是一个函数
浏览器兼容
易扩展插件
ajax封装
使用jQuery核心函数
jQuery函数：$/jQuery
作为一般函数调用：$(param)
param是function: 相当于window.onload = function(文档加载完成的监听)
param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
作为对象使用: $.xxx()
例如：$.each():隐式遍历数组$.trim():去除俩段空格
选择器
说明
选择器本身只是一个有特定语法规则的字符串，没有实质用处
它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展
只有调用$()，并将选择器作为参数传入才能起作用
$(selector)作用： 根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回
分类
基本选择器
基本常用的选择器
#idID选择器根据给定的id匹配元素
$(\" #title\")选取id为title的元素
element标签选择器根据给定的标签名匹配元素
$(\"h2\" )选取所有h2元素
.class类选择器根据给定的class匹配元素
$(\" .title\")选取所有class为title的元素
*通配符匹配所有元素
$(\"*\" )选取所有元素
$(\
selector1selector2selectorN交集选择器匹配指定class或id的某元素或元素集合
$(\"h2.title\")选取所有拥有class为title的h2元素
层次选择器
用来查找子元素，后代元素，兄弟元素的选择器
ancestor descendant后代选择器选取ancestor元素里的所有descendant（后代）元素
$(\"#menu span\" )选取#menu下的<span>元素
parent >child子选择器选取parent元素下的child（子）元素
$(\" #menu>span\" )选取#menu的子元素<span>
prev+next相邻元素选择器选取紧邻prev元素之后的next元素
$(\" h2+dl \" )选取紧邻<h2>元素之后的同辈元素<dl>
prev~sibings同辈元素选择器选取prev元素之后的所有siblings元素
$(\" h2~dl \" )选取<h2>元素之后所有的同辈元素<dl>
过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素可以根据索引的值选取元素还支持一些特殊的选择方式
:first选取第一个元素
$(\" li:first\" )选取所有<li>元素中的第一个<li>元素
:last选取最后一个元素
$(\" li:last\" )选取所有<li>元素中的最后一个<li>元素
:even选取索引是偶数的所有元素（index从0开始）
$(\" li:even\" )选取索引是偶数的所有<li>元素
:odd选取索引是奇数的所有元素（index从0开始）
$(\" li:odd\" )选取索引是奇数的所有<li>元素
:eq(index)选取索引等于index的元素（index从0开始）
$(\"li:eq(1)\" )选取索引等于1的<li>元素
:gt(index)选取索引大于index的元素（index从0开始）
$(\" li:gt(1)\" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index选取索引小于index的元素（index从0开始）
$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:not(selector)选取去除所有与给定选择器匹配的元素
$(\" li:not(.three)\" )选取class不是three的元素
:header选取所有标题元素，如h1~h6
$(\":header\" )选取网页中所有标题元素
:focus选取当前获取焦点的元素
$(\":focus\" )选取当前获取焦点的元素
可见性过滤选择器可以通过元素显示状态来选取元素
:visible选取所有可见的元素
$(\":visible\" )选取所有可见的元素
:hidden选取所有隐藏的元素
$(\":hidden\" ) 选取所有隐藏的元素
内容选择器
:contanins(text)匹配包含给定文本的元素
$(\"div:contains('John')\")查找所有包含 \"John\" 的 div 元素
:empty匹配所有不包含子元素或者文本的空元素
$(\"td:empty\")查找所有不包含子元素或者文本的td元素
:has(selector)匹配含有选择器所匹配的元素的元素
$(\"div:has(p)\").addClass(\"test\")给所有包含 p 元素的 div 元素添加一个 text 类
:parent匹配含有子元素或者文本的元素
$(\"td:parent\")查找所有含有子元素或者文本的 td 元素
属性选择器通过HTML元素的属性来选择元素
[attribute]选取包含给定属性的元素
$(\" [href]\" )选取含有href属性的元素
[attribute=value]选取等于给定属性是某个特定值的元素
$(\" [href ='#']\" )选取href属性值为“#”的元素
[attribute !=value]选取不等于给定属性是某个特定值的元素
$(\" [href !='#']\" )选取href属性值不为“#”的元素
[attribute^=value]选取给定属性是以某些特定值开始的元素
$(\" [href^='en']\" )选取href属性值以en开头的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素
$(\" [href$='.jpg']\" )选取href属性值以.jpg结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素
$(\" [href* ='txt']\" )选取href属性值中含有txt的元素
[selector] [selector2] [selectorN]选取满足多个条件的复合属性的元素
$(\"li[id][title=新闻要点]\" )选取含有id属性和title属性为新闻要点的<li>元素
表单选择器
表单
$(\":input\")查找所有的input元素
:text匹配所有的单行文本框
$(\":text\")查找所有文本框
:password匹配所有密码框
$(\":password\")查找所有密码框
:radio匹配所有单选按钮
$(\":radio\")查找所有单选按钮
:checkbox匹配所有复选框
$(\":checkbox\")查找所有复选框
:submit匹配所有提交按钮
$(\":submit\")查找所有提交按钮
:image匹配所有图像域
$(\":image\")匹配所有图像域
:reset匹配所有重置按钮
$(\":reset\")查找所有重置按钮
:file匹配所有文件域
$(\":file\")查找所有文件域
表单对象属性
:enabled匹配所有可用元素
$(\"input:enabled\")查找所有可用的input元素
:disabled匹配所有不可用元素
$(\"input:disabled\")查找所有不可用的input元素
:checked匹配所有选中的被选中元素
$(\"input:checked\")查找所有选中的复选框元素
:selected匹配所有选中的option元素
$(\"select option:selected\")查找所有选中的选项元素
工具
$.each() 遍历数组或对象中的数据
$.trim()去除字符串两边的空格
$.type(obj) 得到数据的类型
$.isArray(obj) 判断是否是数组
$.isFunction(obj) 判断是否是函数
$.parseJSON(json) 解析json字符串转换为js对象/数组
ajax
使用jQuery对象
即执行jQuery核心函数返回的对象jQuery对象内部包含的是dom元素对象的伪数组（可能只有一个元素）jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom
. 属性和方法
基本行为
size()/length得到dom元素的个数
[index]/get(index)得到指定下标对应的dom元素
index()得到当前dom元素在所有兄弟中的下标
属性
操作内部标签的属性或值
attr() removeAttr() prop()操作任意属性
addClass() removeClass()操作class属性
html() val()操作HTML代码/文本/值
CSS
操作标签的样式
css()设置css样式/读取css值
css(styleName): 根据样式名得到对应的值
css({多个样式对}): 设置多个样式
位置坐标
offset(): 读/写当前元素坐标(原点是页面左上角)
position(): 读当前元素坐标(原点是父元素左上角)
scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
尺寸
* width()/height(): width/height * innerWidth()/innerHeight(): width + padding * outerWidth()/outerHeight(): width + padding + border
文档
对标签进行增删改操作
offset() 读/写当前元素坐标相对页面左上角的坐标
position() 读写当前元素坐标相对于父元素左上角的坐标
scrollTop()/scrollLeft() 读/写元素/页面的滚动条坐标
添加/替换元素
append(content)/appendTo(content)向当前匹配的所有元素内部的最后插入指定内容
prepend(content)/prependTo(content)向当前匹配的所有元素内部的最前面插入指定内容
before(content)将指定内容插入到当前所有匹配元素的前面
after(content)将指定内容插入到当前所有匹配元素的后面替换节点
replaceWith(content)用指定内容替换所有匹配的标签删除节点
删除元素
empty()删除所有匹配元素的子元素
remove()删除所有匹配的元素
筛选
根据指定的规则过滤内部的标签
first()获取第一个元素
last()获取最后一个元素
eq(index|-index)获取下标位置元素
filter(selector) 对当前元素提要求筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
not(selector) 对当前元素提要求，并取反从匹配元素的集合中删除与指定表达式匹配的元素
has(selector) 对子孙元素提要求保留包含特定后代的元素，去掉那些不含有指定后代的元素。
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签children(): 子标签中找 find() : 后代标签中找 parent() : 父标签 prevAll() : 前面所有的兄弟标签 nextAll() : 后面所有的兄弟标签 siblings() : 前后所有的兄弟标签
事件
处理事件监听相关
eventName(function(){}) 绑定对应事件名的监听
例如：$('#div').click(function(){});
事件解绑： off(eventName)
事件的坐标
事件相关处理
停止事件冒泡 : event.stopPropagation() 阻止事件默认行为 : event.preventDefault()
区别mouseover与mouseenter
事件委托 将子元素的事件委托给父元素处理
效果
实现一些动画效果
淡入淡出: 不断改变元素的透明度来实现的
fadeIn(): 带动画的显示
fadeOut(): 带动画隐藏
fadeToggle(): 带动画切换显示/隐藏
滑动动画
slideDown(): 带动画的展开
slideUp(): 带动画的收缩
slideToggle(): 带动画的切换展开/收缩
显示隐藏，默认没有动画
show(): (不)带动画的显示
hide(): (不)带动画的隐藏
toggle(): (不)带动画的切换显示/隐藏
jQuery动画本质 :在指定时间内不断改变元素样式值来实现的
animate(): 自定义动画效果的动画
stop(): 停止动画
window.onload与 $(document).ready()的区别
window.onload * 包括页面的图片加载完后才会回调(晚) * 只能有一个监听回调
$(document).ready() * 等同于: $(function(){}) * 页面加载完就回调(早) * 可以有多个监听回调
多库共存
jQuery插件
扩展插件
扩展jQuery的工具方法
$.extend(object)扩展jQuery的工具方法
扩展jQuery对象的方法
$.fn.extend(object)扩展jQuery对象的方法
理解
基于jQuery编写的扩展库
http://plugins.jquery.com/
jquery-validation
表单插件
jquery UIhttp://jqueryui.com
手风琴
自动搜索匹配
选项卡
laydatehttp://www.layui.com/laydate
日期插件
0 条评论
回复 删除
下一页
