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>