1. 简介
jQuery 是一个兼容多浏览器的 javascript 库(函数库)，核心理念是 write less, do more(写得更少，做的更多)。
JQuery，顾名思义，就是 JavaScript 和查问 (Query)，即是辅助 JavaScript 开发的库。
特点：
Query 是一个疾速的简洁的 javascript 框架，能够简化查问 DOM 对象、处理事件、制作动画、解决 Ajax 交互过程。
- 提供了弱小的性能函数
- 解决浏览器兼容性问题
- 纠正错误的脚本常识
- 体积小，应用乖巧(只需引入一个 js 文件)
- 易扩大、插件丰盛
作用：
程序员的角度：简化 JavaScript 和 Ajax 编程，可能使程序员从设计和书写繁冗的 JS 利用中解脱进去，将关注点转向性能需要而非实现细节上，从而进步我的项目的开发速度。
用户体验的角度：改善了页面视觉效果，加强了与页面的交互性，体验更壮丽的网页物资。
- 不便地抉择页面元素(模拟 CSS 选择器更准确、灵便)
- 动静更改页面款式 / 页面内容(操作 DOM，动静增加、移除款式)
- 管制响应事件(动静增加响应事件)
- 提供根本网页特效(提供已封装的网页特效办法)
-
疾速实现通信(ajax)
如何引入 jQuery 包：
jQuery 库文件不须要装置，只需应用 < script > 标签引入到 HTML 文件中，拿到 jQuery 的库文件后，就跟本人写的 JS 文件同样的引入形式，即可，以下是几种引入形式：
1）引入本地的 Jquery
2）引入 cdn 在线提供的库文件（稳固牢靠高速）
2. 用法
$(function(){})
- $ 是 jQuery 外围函数, 是 jQuery 的简写 jQuery == $
- jQuery 有本人的语法, 它和原生是两套语法
- $ 办法: 是一个工厂模式的函数
- $()相当于页面初始化函数，当页面加载结束，会执行 $()，即 jQuery()
- $(function(){}) 是 $(document).ready(function(){}); 的简写
-
$(document).ready(function(){})和 window.onload 的区别：
- ready 示意文档已加载实现（不蕴含图片等非文字媒体文件）
- onload 是指页面蕴含图片在内的所有元素都加载实现
- $(document).ready(function(){})要比 window.onload 先执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">123123</div>
</body>
</html>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
// 相似于提早加载
$(function() {console.log("xixi");
});
// 齐全体
$(document).ready(function() {
// 原生 dom
let oBox = document.getElementById("box");
console.log(oBox.innerHTML);
//jQueryDom
console.log($("#box").html());
});
</script>包装集
jQuery 所获取的所有 dom 元素无论是一个还是一组，都封装成一个 jQuery 包装集，即汇合。
-
jQuery 包装集与 DOM 对象的互转：
-
原生 Dom -> jQueryDom
- 将原生对象放入 $(原生 Dom) 如：document —> $(document)
let oBox = document.getElementById("box"); console.log($(oBox).html()); -
jQueryDom -> 原生 Dom
// 办法 1: let oBox = $("div").get(0); // 办法 2: let oBox = $("div")[0]; console.log(oBox.innerHTML);
-
1) 根底选择器
id 选择器
// 办法 1:
// $("#box1").css("backgroundColor", "red");
// 办法 2: 相似 css 代码
$("#box1").css({backgroundColor: "red"});类选择器
$(".box").css({backgroundColor: "red"});标签选择器
$("p").css({color: "red"});群组选择器
$("p,span,strong").css({color: "red"});通用选择器
（这是抉择全副元素）
$("*").css({backgroundColor: "green"});
2) 档次选择器
后辈选择器
空格
后辈：不只是子代
$("body div").css({backgroundColor: "red"});子代选择器
大于号
$("body>div").css({backgroundColor: "red"});相邻选择器
加号
$("#box1+div").css({backgroundColor: "red"});兄弟选择器
波浪号~
$("#box2~div").css({backgroundColor: "red"});3) 属性选择器
[属性名 / 属性名 = 属性值 …]
<script type="text/javascript">
// div 带有 class 属性的选择器
$("div[class]").css({backgroundColor:"red"});
// div 同时带有多个属性的选择器
$("div[class][id]").css({backgroundColor:"red"});
// 通过指定的属性值来获取元素
$("div[id='box1']").css({backgroundColor:"red"});
</script>4) 伪类选择器
-
:even 获取所有偶数行的元素
// 留神: 从第 0 行开始 $("div:even").css({backgroundColor:"red"}); -
:odd 获取所有奇数行的元素
$("div:odd").css({backgroundColor:"red"}); -
:first 获取第 0 个元素
$("div:first").css({backgroundColor: "red"}); -
:last 获取最初一个元素
$("div:last").css({backgroundColor:"red"}); -
:eq(下标) 依据下标获取某个特定的元素
// 写法 1: $("div:eq(2)").css({backgroundColor: "red"}); // 写法 2: let n = 3; $("div").eq(n).css({backgroundColor: "red"}); -
:not(指标元素) 除了某个元素
// 写法 1: $("div:not('#box3')").css({backgroundColor: "red"}); // 写法 2: $("div").not("#box3").css({backgroundColor: "red"}); -
:gt(n) 获取大于 n 的元素
$("div:gt(2)").css({backgroundColor:"skyblue"}); -
:lt(n) 获取小于 n 的元素
$("div:lt(2)").css({backgroundColor:"red"});
5) 内容选择器
-
:contains(内容) 依据元素的内容, 获取元素
$("div:contains('hello world')").css({backgroundColor: "red"}); -
:empty 选中内容为空的元素, 空格换行都不能有
$("div:empty").css({backgroundColor:"red"}); -
:has(选择器) 依据蕴含的元素来进行抉择
$("div:has('span')").css({backgroundColor:"red"});
6) 可见性选择器
- :hidden 选中暗藏的元素
-
:visible 扭转可见元素的款式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr style="display:none"> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> </table> </body> </html> <script class="lazy" data-src="js/jQuery.js"></script> <script type="text/javascript"> // :hidden 选中暗藏的元素 $("tr:hidden").css({backgroundColor:"red"}); // :visible 扭转可见元素的款式 $("tr:visible").css({backgroundColor:"green"}); </script>
7) jQuery 的遍历
jQuery 遍历，意为“挪动”，用于依据其绝对于其余元素的关系来“查找”（或选取）HTML 元素。以某项抉择开始，并沿着这个抉择挪动，直到到达您冀望的元素为止。
下图展现了一个家族树。通过 jQuery 遍历，您可能从被选（以后的）元素开始，轻松地在家族树中向上挪动（先人），向下挪动（子孙），程度挪动（同胞）。这种挪动被称为对 DOM 进行遍历。
图示解释：
兄弟节点之间的遍历
- next() 下一个兄弟
- nextAll() 上面所有兄弟
- prev() 上一个兄弟
- prevAll() 下面所有
$("#box1").next().css({backgroundColor: "red"});// 连缀模式
$("#box1").nextAll().css({backgroundColor: "red"});父子节点间的遍历
-
parent() 找父节点
$("p").eq(1).parent().css({backgroundColor:"red"}); -
找子节点
- find (必须写参数)
-
children (能够不写参数)
$("body").find("span").css({backgroundColor: "red"}); $("body").children().css({backgroundColor: "red"});//body 的孩子(父子关系)
3. 文本
jQuery 特点: 对于读写的函数, 通常都是一个, 无参为读, 有参为写。
- innerHTML == html()
- value == val()
<script type="text/javascript">
// 读
console.log($("div").html());
// 写
$("div").html(567);
// 读
console.log($("input").val());
// 写
$("input").val(888);
</script>4. 事件
Query 的事件：
- 事件不须要带 on;
- 能够传参数;
- 不必思考兼容性;
- this 转 jQuery 的 this this==$(this)
$("#box").click(function(){
//this 要转成 jQueryDom 的 this
$(this).css({backgroundColor: "red"});
})传参：
$("#box").click({name:"小明",age:18},function(evt){console.log(evt.data);//{name:"小明",age:18}
})5. 动画
jQueryDom 对象.show([speed,[easing],[fn])；
等价于：jQueryDom 对象.hide([工夫]，[切换成果]，[回调函数]);
-
参数 speed
- 即动画所需工夫；
- 三种预约速度之一的字符串 (“slow”,”normal”, or “fast”) 或示意动画时长的毫秒数值(如：1000)；
-
参数 easing
- 用来指定切换成果，默认是 ”swing 摇晃 ”，可用参数 ”linear 线性 ”；
-
参数 fn 回调函数
- 在动画实现后执行的函数，每个元素执行一次；
举例：
$('button').eq(0).click(function() {
// 用 1000 毫秒将 box 元素暗藏，动画实现后执行回调，打印 heihei
// 留神：动画须要工夫，是异步，异步实现后再执行回调函数
$("#box").hide(1000, function() {console.log('heihei');
})
});
// 做一些奇奇怪怪的事件
$("button").eq(2).click(function() {
// 回调
$("#box").fadeToggle(1000, arguments.callee);
});根本动画：show hide toggle
滑块：slideDown slideUp slideToggle
淡入淡出：fadeIn fadeOut fadeToggle
自定义动画
- animate(params,[speed],[easing],[fn]) 等价于 animate（数据, 工夫,[切换成果], 回调函数）
-
stop([clearQueue],[jumpToEnd])
- clearQueue: 如果设置成 true，则清空队列。能够立刻完结动画
- jumpToEnd: 如果设置成 true，则实现队列。能够立刻实现动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button type="button"> 变形 </button>
<button type="button"> 进行 </button>
<div id="box">
</div>
</body>
</html>
<script class="lazy" data-src='jQuery.js'></script>
<script type="text/javascript">
$("button").eq(0).click(function() {
// 连缀模式
$("#box").animate({
height: 100,
width: "300px",
left: 1000
}, 1000, function() {console.log(1);
}).animate({top: 600}, 2000, function() {console.log(2);
}).animate({left: 0}, 2000, function() {console.log(3);
}).animate({top: 50}, 2000, function() {console.log(4);
});
});
$("button").eq(1).click(function() {
// 完结以后动画, 其余动画失常执行
// $("#box").stop();// 无参默认为两个 false
// 进行所有动画队列
// $("#box").stop(true,false);
// 立刻执行完以后动画，其余动画失常执行
// $("#box").stop(false,true);
// 立刻执行完以后动画，并清空动画队列
$("#box").stop(true, true);
});
</script>案例：手风琴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
width: 500px;
height: 150px;
background-color: #FFC0CB;
margin: auto;
/* position: relative; */
}
li {
list-style: none;
float: left;
width: 40px;
height: 150px;
overflow: hidden;
border: 1px solid black;
}
img {
height: 150px;
width: 240px;
background-size: 240px;
}
</style>
</head>
<body>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
$('li').mouseover(function() {$(this).stop().animate({width: 240}).siblings('li').stop().animate({width: 40});
});
</script>