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");//trueisEmptyObject()
测试对象是否是空对象（不包含任何属性）,这个方法既检测对象本身的属性，也检测从原型继承的属性（因此没有使用hasOwnProperty方法更具体）
console.log(jQuery.isEmptyObject({})); // true
console.log(jQuery.isEmptyObject({ foo: "bar" })); //falseisPlainObject()
测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）
console.log(jQuery.isPlainObject({})); // true
console.log(jQuery.isPlainObject("test")); // false
console.log($.isPlainObject($('body')))//falseisNumberic()
确定它的参数是否是一个数字
$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的
console.log($.isNumeric("-10")); // true
coconsole.log($.isNumeric("")); // false
console.log($.isNumeric(NaN)); // false
console.log($.isNumeric(null)); // false6.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? ")+'--');
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
