1. jQuery 概述
1.1 JavaScript 库
JavaScript 库:即 librery ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如后去元素等。
简单理解:就是一个js文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这样封装好的功能了。
比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)
1.2 jQuery 的概念
jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是“write Less, Do More”,即倡导写更少的代码, 做更多的事情。
j 就是JavaScript;Query查询;意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
2. jQuery 的基本使用
2.1 jQuery安装
jQuery安装十分简单,只需要将jQuery的库导入到html中即可,我们可以下载下来也可以使用CDN资源。 一般我们在下载或者使用cdn资源的时候,都会让我们选择jquery.js 与 jquery.min.js版本,它们的区别在于jquery.min.js是经过压缩的,体积更小,适用于部署环境。而jquery适用于源码研究,我们对于jquery的学习,应该要上升到源码层次。
2.2 jQuery 引入
- 在线引入jQuery
// 通过cdn 引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 下载jQuery
有两个版本的jQuery可供下载:
1. Production version -用于实际的网站中,已被精简和压缩
2.Development version -用于测试和开发(未压缩,是可读的代码)
以上两个版本都可以在jQuery官网下载
2.3 jQuery 的入口函数
等着DON结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装。
<script>
// 等着页面DOM加载完毕再去执行js代码
// 方法1
$(document).ready(function() {
$('div').hide();
})
// 方法2
$(function() {
$('div').hide();
})
</script>
<div></div>
2.4 jQuery 的顶级对象
$ 是jQuery的别称, 在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。
<script>
// $(function() {
// alert(11);
// });
jQuery(function() {
alert(11);
})
</script>
2.5 DOM 对象和jQuery 对象
1.用原生JS获取来的对象就是DOM对象
2.jQuery方法获取的元素就是jQuery对象。
3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
<div></div>
<script>
// 1. DOM对象
var myDiv = document.querySelector('div');
console.log(myDiv);
// 2.jQuery 对象
$('div');
console.log($('div'));
// 3. jQuery 对象只能使用jQuery方法。 DOM对象则使用原生的JavaScript 属性和方法
myDiv.style.display = 'none'
// myDiv.hide() 错误 myDiv是一个DOM对象 不能使用jQuery里面的hide方法
// $('div').style.display = 'none' 错误 $('div')是一个jQuery对象 不能使用原生js的属性和方法
</script>
3. jQuery选择器
jQuery的选择器与CSS3中的选择器几乎完全一致
-
基本选择器
-
层次选择器
-
伪类选择器
-
伪元素选择器器
-
属性选择器 具体用法如下:
元素选择器
在页面中选取所有<div>
元素
// $("div")
// 用户点击按钮后所有<div>元素都隐藏
$(document).ready(function(){
$("button").click(function(){
$("div").hide();
});
});
#id选择器
通过 id 选取元素
// $("#div1")
// 用户点击按钮后,有id="div1"属性都元素都将被隐藏
$(document).ready(function(){
$("button").click(function(){
$("#div1").hide();
});
});
.class选择器
jQuery 类选择器可以通过指定的 class 查找元素
// $(".box")
// 用户点击按钮后所有带有 class="box" 属性的元素都隐藏
$(document).ready(function(){
$("button").click(function(){
$(".box").hide();
});
});
4. jQuery事件
3.1.事件的基本使用
jQuery事件方法语法
-
on() off()
-
bind() unbind()
-
快捷绑定click()等
在jQuery中,大多数DOM事件都有一个等效的jQuery方法
页面中指定一个点击事件:
$("p").click();
下一步是定义触发事件的内容:
$("p").click(function(){
//动作触发后执行的代码!!
})
<body>
<button>新增</button>
<button>修改</button>
<div>标题</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
// 第一个参数 事件类型 第二个参数(可选的) 要传递的参数 第三个参数 事件处理函数
/*
$('button').bind('click', '123', function (event) {
console.log('button点击');
console.log(event);
console.log(event.data);//123
})
*/
// 点击新增或者修改按钮,改变div内部的内容
$('button').bind('click', function (event) {
// 通过event.target(DOM节点,可以拿到内部的内容) 来判断当前是哪个按钮点击
// console.log(event.target);
// console.log(event.target.innerHTML);
if($(event.target).html() === '新增'){
$('div').html('新增学生信息')
}else{
$('div').html('修改学生信息')
}
})
// 解绑 unbind() 无参时 解除绑定的所有事件
// $('button').unbind()
// 解绑 unbind('click') 传递参数->事件类型
// $('button').unbind('click')
// 解绑 unbind() 解绑click对应的事件
function clickEvent() {
console.log('我是click事件');
}
$('button').click(clickEvent)
// 第一个参数 事件类型 第二个参数 事件名称
$('button').unbind('click', clickEvent)
})
</script>
</body>
4.2 事件代理
<body>
<button>点我啊</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
// 点击body
// 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
// $('body').on('click', function (event) {
// console.log(event);
// })
// button做代理
$('body').on('click','button', [1,2], function (event, a, b) {
console.log(event, a, b);
})
// 事件解绑 移除代理 使用off
// $('body').off('click', 'button')
// 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
$('button').trigger('click', [1, 2])
</script>
</body>
4.3 事件类型
1.$(document).ready()
$(document).ready()方法允许我们在文档完全加载完后执行函数
2.click()
click()方法是当按钮点击事件被触发时会调用一个函数
3.dbclick()
当双击元素时,会发生dbclick事件
4.mouseenter()
当鼠标指针穿过元素时,会发生mouseenter事件
5.mouseleave()
当鼠标指针离开元素时,会发生mouseleave事件
6.mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
7.mouseup()
当元素上松开鼠标按钮时,会发生mouseup事件
8.hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时,会触发指定当第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定当第二个函数(mouseleave)
9.blur()
当元素失去焦点时,发生blur事件
10.keydown()
键盘事件:按键按下事件
11.keyup()
键盘事件:按键抬起事件
12.表单事件等等
5. jQueryDOM操作
jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。
插入方法:append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter
包裹方法:wrap、unwrap、wrapAll、wrapInner、
替换方法:replaceWith、replaceAll
移除方法:empty、remove、detach
克隆方法:clone
通过 jQuery,可以很容易地添加新元素/内容。
用于添加新内容的四个 jQuery 方法:
-
append() - 在被选元素的结尾插入内容(仍然在该元素的内部)
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
-
复制节点:
原生DOM有 cloneNode(true/false) 浅复制false 深复制true。是否复制内部内容,并不涉及事件的复制。默认浅复制
jQuery对象有 clone(true/false) 浅复制false 深复制true。会复制内容,是否复制事件。默认浅复制
属性操作
在dom中,我们通过setAttribute/getAttribute/style来操作元素属性,jQuery中提供了更加便捷的方法
属性:attr、removeAttr、prop、removeProp
css:addClass、removeClass、toggleClass、wrapInner
内容:html、text、val
jQuery 拥有可操作 HTML 元素和属性的强大方法
三个简单实用的用于 DOM 操作的 jQuery 方法:
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容(包括 HTML 标记)
-
val() - 设置或返回表单字段的值
6. jQuery静态方法
静态方法属于定义在jQuery函数上的方法,通过jQuery或者$直接调用的方法
数组及对象操作:each、map、toArray、merge
测试操作:type、isEmptyObject、isPlainObject、isNumberic
字符串操作:param、trim
6.1.数组及对象操作
each()
通用遍历方法,可用于遍历对象和数组
不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略
// 遍历对象
var obj = {
name: 'zach',
age: 18,
height: '1.88'
}
// 第一个参数 要遍历的数组或对象 第二个参数 处理函数
$.each(obj, function (key, value) {
console.log(key, value);
})
//遍历数组
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
map()
将一个数组中的元素转换到另一个数组中
作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中
var arr=$.map( [0,1,2], function(n){
return n + 4;
});
toArray()
把jQuery集合中所有DOM元素恢复成一个数组
console.log($('li').toArray());
merge() 合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()
console.log($.merge( [0,1,2], [2,3,4] ));
6.2 测试操作
type()
用于检测obj的数据类型
console.log($.type($)); //function
console.log(jQuery.type(true) === "boolean");//true
console.log(jQuery.type(3) === "number");//true
isEmptyObject()
测试对象是否是空对象(不包含任何属性),这个方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使用hasOwnProperty方法更具体)
console.log(jQuery.isEmptyObject({})); // true
console.log(jQuery.isEmptyObject({ foo: "bar" })); //false
isPlainObject()
测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)
console.log(jQuery.isPlainObject({})); // true
console.log(jQuery.isPlainObject("test")); // false
console.log($.isPlainObject($('body')))//false
isNumberic()
确定它的参数是否是一个数字
$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样,它返回 true。否则,它返回false。该参数可以是任何类型的
console.log($.isNumeric("-10")); // true
coconsole.log($.isNumeric("")); // false
console.log($.isNumeric(NaN)); // false
console.log($.isNumeric(null)); // false
6.3 字符串操作
param()
将表单元素数组或者对象序列化。
var obj = { page: 1, age: 12 }
var str = jQuery.param(obj);
console.log(str);
parseJSON()
解析json字符串转换为js对象/数组
// 原生js:
// JSON.parse(jsonString) json字符串 转 js对象/数组
// JSON.stringify(jsonObj/jsonArr) js对象/数组 转 json字符串
// 2.$.parseJSON(json): 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}'// 模拟一个json对象
console.log($.parseJSON(json)); // 将json对象转换为js对象
json = '[{"name":"Tom", "age":12},{"name":"lilly", "age":12}]';// json数组
console.log($.parseJSON(json));// 将json对象转换为js数组
trim()
去掉字符串起始和结尾的空格,多用于用户数据的清洗
console.log('--'+$.trim(" hello, how are you? ")+'--');