文章目录
1. jQuery 简介
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
jQuery 下载
1. 下载到本地下载地址:https://jquery.com/
2. CDN加速服务,使用网络上现成的,缺陷就是必须要有网络。
CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
'''版本区别'''
1.x: 兼容IE678
2.x: 不兼容IE678
3.x: 不兼容IE678
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
'''后缀区别'''
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
2. jQuery 选择器
jQuery 中所有选择器都以美元符号开头:$()。
补充
$('#d1')[0] // jQuery对象转原生js对象
$(标签对象) // 原生js对象转jQuery对象
如果是原生js代码查找出来的对象,那么只能调用原生js的对象方法
如果是jQuery查找出来的对象,那么只能调用jQuery对象方法
基础选择器
$("*") //所有元素选择器
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
层级选择器:
x和y可以为任意选择器
$("x > y ") //子元素选择器
$("x y") //后代元素选择器
$("x + y") //紧邻下一个元素选择器
$("x ~ y") //兄弟元素选择器
示例(代码片段)
<body>
<div>
<p id="p1">p1</p>
<p class="c1">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<div>
<p>p7</p>
<p>p8</p>
</div>
</div>
<a>a1</a>
<a>a2</a>
<script>
$('div').css('background','gray') //修改div标签背景
$('#p1').css('color','red') // 修改id为p1的颜色
$('.c1').css('color','white') // 修改class类为c1的颜色
$('div>p').css('fontSize','25px') // 修改div下一层级所有的段落文本大小
$('div div p').css('fontSize','5px') // 修改div下一层级的div所有的段落文本大小
$('div+a').css('fontSize','25px') // 修改div毗邻的一个同级别a标签
$('div~a').css('background','pink') //修改div毗邻的所有同级别a标签
</script>
</body>
结果如下图
基本过滤筛选器:
可以对选择器进行筛选
:first // 选取第一个元素
:last // 最后一个
:eq(index) // 索引等于index的元素
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
示例(代码片段)
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<script>
$('div p:first').css('color','red') // 修改第一个段落文本颜色
$('div p:last').css('color','green') // 修改最后一个段落文本颜色
$('div p:eq(1)').css('background','yellow') // 修改索引值为1的段落背景颜色
$('div p:odd').css('fontSize','25px') // 修改索引为奇数的段落字体大小
$('div p:even').css('fontSize','5px') // 修改索引为偶数的段落字体大小
</script>
</body>
结果如下图
:has、:not 示例(代码片段)
<body>
<div>
<p id="p1">p1</p>
<p class="c1">p2</p>
<p>p3</p>
<p>p4</p>
</div>
<div>
<a>a1</a>
<a>a2</a>
</div>
<script>
$("div:has(p)").css('background', 'gray')//查找包含p标签的div标签
$("p:not(#p1)").css('color', 'red')//查找除了id为p1以外的所有p标签
$("div:not(:has(p))").css('background', 'pink')//查找没有p标签的div标签
</script>
</body>
结果如下图
内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的 div
$("td:empty") // :empty 选择器选取空的元素。
$("td:parent") // 选取所有带有子元素或包含文本(非空)的 <td> 元素
可见性过滤选择器
$("li:hidden") //匹配所有不可见元素,或type为hidden的元素
$("li:visible") //匹配所有可见元素
属性过滤选择器
$("div[id]") // 所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") // 多属性选过滤,同时满足两个属性的条件的元素
状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
$(':checked') // 会将option也找到
$(':selected') // 只会找到option标签
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框,等价于 $("[type=text]"),推荐使用$("input:text")效率更高,下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
筛选器方法
同级别往下查找
$("#id").next() // 查找下一个同级别元素
$("#id").nextAll() // 查找下面所有同级别元素
$("#id").nextUntil("#i2") // 查找指定两个元素之间的所有同级元素
同级别向上查找
$("#id").prev() // 查找上一个同级别元素
$("#id").prevAll() // 查找上面所有同级别元素
$("#id").prevUntil("#i2") // 查找指定两个元素之间的所有同级元素
查找父标签
$("#id").parent() // 返回被选元素的直接父元素
$("#id").parents() // 返回被选元素的所有祖先元素
$("#id").parentsUntil() // 返回介于两个给定参数之间的所有祖先元素
查找儿子和兄弟
$("#id").children(); // 返回被选元素的所有直接子元素
$("#id").siblings(); // 返回被选元素的所有同级元素
3. jQuery 获取内容
jQuery 文本操作
jQuery 方法
html() 设置或返回被选元素的内容 对应DOM操作中element.innerHTML
text() 设置或返回被选元素的文本内容 对应DOM操作中element.innerText
示例(代码片段)
<body>
<p id="p1"></p>
<p id="p2"></p>
<script>
$pEle = $('#p1')
$p1Ele = $('#p2')
$pEle.html('<b>你好啊</b>')
$p1Ele.text('<b>你好啊</b>')
console.log($pEle.html())
console.log($p1Ele.text())
</script>
</body>
1. 同样的,text不能识别标签,结果如下图所示
jQuery 获取值
1. 获取 value
使用的方法
val() 设置或返回被选元素的属性值(针对表单元素) 对应DOM操作中element.value
示例(代码片段)
<body>
<div><input type="text"></div>
<div>
<select>
<option value="hz">杭州</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</div>
<div><textarea></textarea></div>
<script>
var iEle = $('input')
var sEle = $('select')
var tEle = $('textarea')
iEle.val('吃了没')
sEle.val('bj')
tEle.val('真的吗')
</script>
</body>
1. 示例中是设置表单的值,也可以获取值,如下图演示
2. 获取文件内容
使用的方法
$(...)[0].files
示例(代码片段)
<body>
<div><input type="file" multiple></div>
</body>
1. 如下图演示
jQuery 文档操作
1. 创建标签
使用的方法
$('<p>') 创建新标签
示例
<body>
<script>
var $pEle = $('<p>')
$pEle.html('你好啊')
$('body').append($pEle)
</script>
</body>
2. 添加内容
'内部添加'
// 在元素内部的尾部添加
$(A).append(B) 把 B 追加到 A
$(A).appendTo(B) 把 A 追加到 B
// 在内部的头部添加
$(A).prepend(B) 把 B 前置到 A
$(A).prependTo(B) 把 A 前置到 B
'外部添加'
// 在元素外部的后面添加
$(A).after(B) 把 B 放到 A 的后面
$(A).insertAfter(B) 把 A 放到 B 的后面
// 在元素外部的前面添加
$(A).before(B) 把 B 放到 A 的前面
$(A).insertBefore(B) 把 A 放到 B 的前面
3. 删除内容
使用的方法
remove() 移除被选元素
empty() 从被选元素移除所有子节点和内容
示例(代码片段)
<body>
<div></div>
<script>
var $dEle = $('div')
var $iEle = $('<input type="text"value="这是div内部头部文本框">')
var $pEle = $('<p>这是加入到div内部尾部的段落</p>')
var $tEle = $('<input type="button"value="这是加入到div外部前面的按钮">')
var $aEle = $('<a href="https://www.baidu.com">这是加入到div外部后面的链接</a>')
$dEle.after($aEle)
$dEle.before($tEle)
$dEle.append($pEle)
$dEle.prepend($iEle)
$tEle.remove() // 删除元素
</script>
</body>
1. 分别在 div 内部和外部的前后面添加元素,并删除外部前面的按钮,结果如下图。
4. 替换元素
使用的方法
replaceWith() 把被选元素替换为新的内容
语法: $(selector).replaceWith(content,function(index))
replaceAll() 把被选元素替换为新的 HTML 元素(内容必须包含 HTML 标签)
语法: $(content).replaceAll(selector)
示例(代码片段)
<body>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<script>
var $dEle = $('div')
var $pEle1 = $('#p1')
var $pEle2 = $('#p2')
$pEle1.replaceWith('你好啊')
$('<a href="">替换的链接</a>').replaceAll($pEle2)
</script>
</body>
1. 结果如下图
5. 克隆
克隆方法可以生成指定元素的副本。
使用的方法: clone() 生成被选元素的副本
语法:
$(selector).clone(true|false)
true 表示复制的副本也有主体的功能,默认为 false
示例(代码片段)
<body>
<input type="button" value=" 复制 ">
<script>
var $iEle = $('input')
$iEle.click(function (){ // 绑定点击事件
$cEle = $iEle.clone(true) // 声明克隆副本对象
$(this).after($cEle) // 将副本添加
})
</script>
</body>
1. 此时点击按钮可以复制此按钮,并且由于clone参数为true,所以副本也具有复制的功能,如下图所示
4. jQuery 样式操作
通过jQuery也可以对元素样式进行操作。
修改 css 样式
使用的方法: css() 为被选元素设置或返回一个或多个样式属性
语法:
$(selector).css(property) 返回 CSS 属性值
$(selector).css(property,value) 设置 CSS 属性和值
$(selector).css({属性:value, 属性:value, ...}) 设置多个属性和值
示例(代码片段)
<body>
<p>你好啊</p>
<script>
var $pEle = $('p')
$pEle.css({'color':'pink', 'font-size':'25px'})
</script>
</body>
1. 效果以及查看css属性演示如下图所示
jQuery 样式类操作
使用的方法
addClass(); 添加指定的CSS类名。
removeClass(); 移除指定的CSS类名。
hasClass(); 判断样式存不存在
toggleClass(); 切换CSS类名,如果有就移除,如果没有就添加。
示例(代码片段)
<body>
<p>你好啊</p>
<script>
var $pEle = $('p')
$pEle.addClass('c1 c2')
$pEle.removeClass('c2')
$pEle.toggleClass('c2')
</script>
</body>
1. 最终结果如下图所示
5. jQuery 属性操作
attr() 方法
使用的方法
attr(property) 返回指定元素的属性值
attr(property, value) 为指定元素设置一个属性值
attr({property:value, property:value,...}) 为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性
'attr() 方法可以用于默认属性,也可以用于自定义属性'
示例(代码片段)
<body>
<a href="" target="_blank">这是一个链接</a>
</body>
1. 代码演示如下图所示
prop() 方法
使用 attr() 方法获取属性有时会出现问题。在获取checkbox
和radio
动态选中的checked
属性并不精准,此时尽量使用 prop()
方法
语法:
prop(property) 返回属性的值
prop(property,value) 设置属性和值
prop({property:value, property:value,...}) 设置多个属性和值
removeProp() 删除属性
示例(代码片段)
<body>
<input type="checkbox" id="i1">
<input type="checkbox" id="i2">
<input type="checkbox" id="i3">
</body>
1. 定义三个复选框,并给予不同的id,操作流程如下图
示例中的复选框并没有指定默认选中,使用 attr() 方法并不能获得动态点击的 checked 属性会返回一个
undefined,而 prop() 方法可以捕获动态的 checked 属性并返回 true 。
prop() 与 attr() 方法比较
'attr()':
1. attr全称attribute(属性)。表示的是 'HTML标签属性',它的作用范围只限于HTML标签内
的属性。
2. 如果有相应的属性,返回指定属性值
如果没有相应的属性,返回值是 undefined。
'prop()':
1. prop全称property(属性)。表示的是 'DOM对象属性',获取的是这个DOM对象的属性。所
以prop不支持获取标签的自定义属性
2. 如果有相应的属性,返回指定属性值。
如果没有相应的属性,返回值是空字符串。
'checked', 'selected' 或者 'disabled' 使用 prop 方法返回的是 'true' 或 'false'
6. jQuery 尺寸
处理元素和浏览器窗口的尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
7. jQuery 位置操作
使用的方法
'offset()' 获取匹配元素在当前窗口的相对偏移或设置元素位置
语法: offset() 返回偏移位置
offset({top:value,left:value}) 设置偏移位置
'position()' 获取匹配元素相对父元素的偏移
语法: position() 返回 top 和 left 偏移位置
'scrollTop()' 设置或返回被选元素的垂直滚动条位置
语法: scrollTop() 返回垂直滚动条位置
scrollTop(position) 设置垂直滚动条位置
'scrollLeft()' 设置或返回被选元素的水平滚动条位置
语法: scrollLeft() 返回水平滚动条位置
scrollLeft(position) 设置水平滚动条位置
8. jQuery 事件操作
常用事件与绑定方式
事件 | 说明 |
---|---|
focus() | 元素获得焦点时 |
blur() | 元素失去焦点触发 |
change() | 当元素的值改变时发生 change 事件(仅适用于表单字段) |
click() | 单击元素时触发 |
dblclick() | 双击元素时触发 |
hover() | 触发鼠标悬停在指定元素上,鼠标离开元素俩个事件 |
keydown() | 当键盘键被按下时触发 |
keyup() | 当键盘键被松开时触发 |
mousedown() | 当鼠标指针移动到元素上方,并按下鼠标左键时触发 |
mouseleave() | 当鼠标指针离开被选元素时触发 |
mouseout() | 鼠标指针离开被选元素或任意子元素时都会被触发 |
mouseover() | 鼠标指针进入被选元素或任意子元素时都会被触发 |
on() | 在被选元素及子元素上添加一个或多个事件处理程序 |
off() | off() 方法通常用于移除通过 on() 方法添加的事件处理程序 |
scroll() | 当用户滚动指定的元素时触发 |
select() | 当 textarea 或文本类型的 input 元素中的文本被选择时触发 |
submit() | 提交表单时触发(只适用于 <form> 元素) |
input | input 内容被改变的时候触发,且需要使用 on 添加 |
'''jQuery绑定'''
jQuery对象.click(function(){})
jQuery对象.change(function(){})
.......
'''on 绑定'''
$(selector).on(event,childSelector,data,function)
event 必需。一个或多个事件
childSelector 可选。子元素选择器(可用于事件传递)
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
'''off 移除事件'''( off 方法移除用 on 方法绑定的事件处理程序。)
off( events [, selector ][,function(){}])
events: 事件
selector: 选择器(可选的)
function: 事件处理函数
事件小案例
hover 事件案例
示例(代码片段)
<body>
<span>放这里放这里</span>
<script>
var $sEle = $('span')
$sEle.hover(
function () {
alert('小伙子终于来了')
},
function () {
alert('人家等了好久')
}
)
</script>
</body>
on 绑定事件
示例(代码片段)
<body>
<p>点这里</p>
<script>
var $pEle = $('p')
$pEle.on("click", function () {
alert('该元素被点击')
}
)
</script>
</body>
实时监听 input 修改内容
示例(代码片段)
<body>
<input type="text">
<script>
var $iEle = $('input')
$iEle.on("input", function () {
console.log($(this).val())
}
)
</script>
</body>
阻止后续事件执行
首先看一个示例
<body>
<form action="">
<input type="text">
<input type="submit" id="i1">
</form>
<script>
$('#i1').click(function () {
alert('123')
}
)
</script>
</body>
1. 在此示例中,给按钮 submit 按钮添加了点击事件,但是按钮本身有提交的功能,所以会依次执行其功能
要是不想让其继续执行下一步功能事件可以使用下面俩种方式。
'阻止事件继续发生的方法'
return false; // 常见阻止表单提交等
e.preventDefault();
方法一(return)
<body>
<form action="">
<input type="text">
<input type="submit" id="i1">
</form>
<script>
$('#i1').click(function () {
alert('123')
return false
}
)
</script>
</body>
方法二(preventDefault)
<body>
<form action="">
<input type="text">
<input type="submit" id="i1">
</form>
<script>
$('#i1').click(function (e) {
alert('123')
e.preventDefault()
}
)
</script>
</body>
事件冒泡
首先也看个例子
<body>
<div id="d1">我是div标签
<p id="p1">我是p标签
<span id="s1">我是span标签</span>
</p>
</div>
<script>
$('#s1').click(function () {
alert('111')
}
)
$('#p1').click(function () {
alert('222')
}
)
$('#d1').click(function () {
alert('333')
}
)
</script>
</body>
1. 当多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象。也就是说,示例中点击span元素
后所有的点击事件都会被触发,要想不触发,可以使用以下俩种方式。
'阻止事件逐级触发方法'
return false
e.stopPropagation()
示例(代码片段)
<body>
<div id="d1">我是div标签
<p id="p1">我是p标签
<span id="s1">我是span标签</span>
</p>
</div>
<script>
$('#s1').click(function (e) {
alert('111')
e.stopPropagation() // 可以切断<span>标签和<p>标签之间的传递
}
)
$('#p1').click(function () {
alert('222')
return false // 可以切断<p>标签和<div>标签之间的传递
}
)
$('#d1').click(function () {
alert('333')
}
)
</script>
</body>
事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
还是先看一个例子
<body>
<div>
<button>按钮1</button>
</div>
<script>
$('button').click(function (){
alert('123')
})
$b1Ele = $('<button>按钮2</button>')
$('div').append($b1Ele)
</script>
</body>
1. 在示例中给按键绑定了一个点击事件,但是对于动态创建的标签提前写好的事件默认是无法生效的
可以使用事件传递的方式将该事件交给父标签执行
'事件传递方法'
$('父标签').on('事件类型','选择器',function(){})
也就是将父标签里的所有指定事件交给指定的选择器执行
示例(代码片段)
<body>
<div>
<button>按钮1</button>
</div>
<script>
$('body').on('click', 'button', function () {
alert('123')
})
$b1Ele = $('<button>按钮2</button>')
$('div').append($b1Ele)
</script>
</body>
9. jQuery 动画效果
隐藏和显示
使用的方法
hide() 隐藏被选元素
show() 显示被选元素
toggle() 用于hide() 和 show() 方法之间的切换
'toggle 方法可以自动判断当前元素需要隐藏还是显示。'
'hide'语法: $(selector).hide(speed,easing,callback)
'show'语法: $(selector).show(speed,easing,callback)
'toggle'语法: $(selector).toggle(speed,easing,callback)
speed 可选。规定隐藏(显示)效果的速度。
easing 可选。规定在动画的不同点上元素的速度。默认值为'swing',还有linear等等
callback 可选。hide() 方法执行完之后,要执行的函数
淡入淡出
使用的方法
fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
'fadeToggle 方法可以自动判断当前元素需要淡入还是淡出。'
'fadeIn'语法: $(selector).fadeIn(speed,easing,callback)
'fadeOut'语法: $(selector).fadeOut(speed,easing,callback)
'fadeTo'语法: $(selector).fadeTo(speed,'opacity',easing,callback)
'fadeToggle'语法: $(selector).fadeToggle(speed,easing,callback)
speed 可选。规定隐藏(显示)效果的速度。
easing 可选。规定在动画的不同点上元素的速度。默认值为'swing',还有linear等等
callback 可选。hide() 方法执行完之后,要执行的函数
'opacity fadeTo 方法必需。规定要淡入或淡出的透明度。且在 0.00 与 1.00 之间的数字。'
滑动
使用的方法
slideUp() 通过调整高度来滑动隐藏被选元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() slideUp() 和 slideDown() 方法之间自动切换
'slideUp'语法: $(selector).slideUp(speed,easing,callback)
'slideDown'语法: $(selector).slideDown(speed,easing,callback)
'slideToggle'语法: $(selector).slideToggle(speed,easing,callback)
speed 可选。规定隐藏(显示)效果的速度。
easing 可选。规定在动画的不同点上元素的速度。默认值为'swing',还有linear等等
callback 可选。hide() 方法执行完之后,要执行的函数
点赞案例
示例(完整代码)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
div {
position: relative;
display: inline-block;
}
div > i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
1. 效果如下图
10. jQuery 实用工具
方法 | 描述 |
---|---|
$.contains() | 判断另一个DOM元素是否是指定DOM元素的后代 |
$.each() | 遍历指定的对象和数组 |
$.extend() | 将一个或多个对象的内容合并到目标对象 |
$.fn.extend() | 为jQuery扩展一个或多个实例属性和方法 |
$.globalEval() | 全局性地执行一段JavaScript代码 |
$.grep() | 过滤并返回满足指定函数的数组元素 |
$.inArray() | 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) |
$.isArray() | 判断指定参数是否是一个数组 |
$.isEmptyObject() | 检查对象是否为空(不包含任何属性) |
$.isFunction() | 判断指定参数是否是一个函数 |
$.isNumeric() | 判断指定参数是否是一个数字值 |
$.isPlainObject() | 判断指定参数是否是一个纯粹的对象 |
$.isWindow() | 判断指定参数是否是一个窗口 |
$.isXMLDoc() | 判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档 |
$.makeArray() | 将一个类似数组的对象转换为真正的数组对象 |
$.map() | 指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回 |
$.merge() | 合并两个数组内容到第一个数组 |
$.noop() | 一个空函数 |
$.now() | 返回当前时间 |
$.parseHTML() | 将HTML字符串解析为对应的DOM节点数组 |
$.parseJSON() | 将符合标准格式的JSON字符串转为与之对应的JavaScript对象 |
$.parseXML() | 将字符串解析为对应的XML文档 |
$.trim() | 去除字符串两端的空白字符 |
$.type() | 确定JavaScript内置对象的类型 |
$.unique() | 在jQuery 3.0中被弃用。对DOM元素数组进行排序,并移除重复的元素 |
$.uniqueSort() | 对DOM元素数组进行排序,并移除重复的元素 |
$.data() | 在指定的元素上存取数据,并返回设置值 |
$.hasData() | 确定一个元素是否有相关的jQuery数据 |
$.sub() | 创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象 |
$.speed | 创建一个包含一组属性的对象用来定义自定义动画 |
$.htmlPrefilter() | 通过jQuery操作方法修改和过滤HTML字符串 |
$.readyException() | 处理包裹在jQuery()中函数同步抛出的错误 |