在项目中部署jQuery
(1)jQuery的官网（www.jquery.com）下载jQuery
(2)单击官网右侧的Download jQuery，进入到jQuery的下载页面叮=点开需要的版本后"另存为"保存至js文件夹中
(3)在HTML文档的标记对内部，使用<script>标记加载js文件(必须先加载jquery.js文件,在加载自定义的index.js文件)
第一个jQuery程序
$(document)** .**ready**(**function**(){
window.alert**("欢迎学习jQuery");
})
简写格式:
$(function(){
alert(“今天学习了jQuery的使用”);
})
元素选择器
$(“div”) 表示页面中所有的div元素。
-
css()：读取/设置jQuery对象的CSS样式。
读取CSS样式：$(“div”).css(“width”) 设置CSS样式：$(“div”).css(“width”,“200px”); A .设置多个CSS属性可以使用连缀的方式来实现。 $(“div”).css(“width”,“200px”).css(“height”,“150px”).css(“background-color”,“#3385ff”); B .设置多个CSS属性可以使用“键值对”的方式来实现 $(“div”).css({ “键名”:“键值”, // 键名是CSS属性名；键值就是该CSS属性的取值 “键名”:“键值” }) 表示CSS属性名的键名若由一个单词组成，可以带引号，也可以不带引号 表示CSS属性名的键名若由多个单词组成，必须带引号，或者转换为驼峰式命名可以不带引号 -
attr()：读取/设置jQuery对象的HTML属性
A .读取title属性的取值并输出值控制台：
var m=$(“a”).attr(“title”);
console.log(m);
B .设置title属性的取值为“哈利波特前传”：
$(“a”).attr(“title”,“哈利波特前传”);
C .设置a标记的href属性和target属性：
$(“a”).attr({
“href”:“https://www.163.com”,
“target”:“_self”
})
事件
click，表示单击事件，即单击某个jQuery对象时执行对应的代码。
$(“button”).click(function(){
$(“div”).css(“background-color”,“#ff5857”);
})
基本选择器
关系选择器
| **** | **** | CSS**** | j Query**** | |
|---|---|---|---|---|
| 层次关系 | 后代选择器 | div p{} | $(“div p”) | |
| 子选择器 | div>p{} | $(“div>p”) | ||
| 同级关系 | 相邻选择器 | div+p{} | $(“div+p”) | |
| 兄弟选择器 | div~p{} | $(“div~p”) | ||
| 共生关系 | 群组选择器 | div,p{} | $(“div,p”) |
特殊的类选择器
<div class=“dot dot1”></div>
jQuery选择器：$(“.dot.dot1”) // 同时具备dot和dot1类名的元素
选择器找到的元素个数
一个jQuery对象允许包含多个元素
jQuery对象可以使用length属性返回所包含元素的个数
var c=$(“li”).length; // 将页面中所有的li元素的个数赋给变量c
console.log(c);
jQuery对象与DOM对象
（1）jQuery对象：利用jQuery选择器找出的对象。
在控制台中输出jQuery对象，是无法看到元素在HTML文档中的代码的。
console.log($(“li”));
（2）DOM对象：HTML文档中的标记对。
可以将jQuery对象转换为DOM对象：$("li”).get(0)，将jQuery对象$(“li”)中所包含的索引值为0
的元素转化为DOM对象。
格式1：console.log($(“li”).get(0));
格式2：console.log($(“li”)[0]);
如何在事件中表示触发事件的本体
鼠标经过事件：mouseover；鼠标离开事件：mouseout
获得焦点事件：focus；释放焦点事件：blur
// 当鼠标经过列表项时，发生颜色变化
$("li").mouseover(function(){
$(this).css("color","#3385ff");
})
// 当鼠标离开列表项时，颜色恢复黑色
$("li").mouseout(function(){
$(this).css("color","#000000");
})
// 文本框获得鼠标焦点，后面的文本显示
$("input").focus(function(){
$("input+span").css("display","inline");
})
// 文本框释放焦点，后面的文本消失
$("input").blur(function(){
$("input+span").css("display","none");
})
属性选择器
$(“a[title]”).css(“color”,“#ff5857”);
- 属性的取值性
$(“[HTML属性名=属性值]”)，查找HTML属性取值为特定“属性值”的元素。
例：$(“a[title=five]”) // 查找title属性取值为five的a元素
$(“[HTML属性名!=属性值]”)，查找HTML属性取值不为特定“属性值”的元素。
例：$(“a[title!=five]”) // 查找title属性取值不为five的a元素
$(“[HTML属性名^=属性值]”)，查找HTML属性取值以特定“属性值”开头的元素。
例：$(“a[title^=f]”) // 查找title属性的取值以f开头的元素
$(“[HTML属性名$=属性值]”)，查找HTML属性取值以特定“属性值”结尾的元素。
例：$(“a[title$=e]”) // 查找title属性的取值以e结尾的元素
$(“[HTML属性名*=属性值]”)，查找HTML属性取值包含特定“属性值”的元素。
例：$(“a[title*=o]”) // 查找title属性的取值包含o的元素
jQuery方法：before(“”)，after(“”)
before(“”)，为指定选择器的元素前面添加一个具体的内容。
after(“”)，为指定选择器的元素后面添加一个具体的内容。
例：准备若干个表示文件类型的图标，在页面中的下载列表项之前根据不同的文件类型添加不同的图标。
根据<a>标记对href属性指定的文件的类型，在列表项的前面添加一个表示特定类型的图标。
HTML代码：<li><a href=“resource/04.mp3”>孤勇者</a></li>
jQuery代码：$(“a[href$=mp3]”).before(‘<img src=“images/mp3.jpg” / >’);
伪类选择器
| **** | 基本伪类选择器*** | 与父子关系相关的伪类选择器**** |
|---|---|---|
| 查找第一个元素 | :first | :first-child |
| 查找最后一个元素 | :last | :last-child |
| 查找指定索引值 | :eq(n) | : nth-child(n)****:nth-of-type(n):nth-last-child(n):nth-last-of-type(n) |
| 索引值为偶数 | :even | : nth-child(even)****:nth-of-type(even):nth-last-child(even):nth-last-of-type(even) |
| 索引值为奇数 | :odd | : nth-child(odd)****:nth-of-type(odd):nth-last-child(odd):nth-last-of-type(odd) |
| 索引值起始数字 | 0 | 1 |
| 区别 | 父元素无关性 | 父元素相关性 |
| 是否允许CSS使用 | 否 | 是 |
:nth-child(n) 查找页面中该元素的父元素内部所有元素索引值（从1开始计数）为n的那一个元素。
特点：父元素中所有的子元素都参与到计数当中，若查找到的非该元素，则无效。
案例： 照片画廊。
（1）使用纯CSS来实现。
（2）使用jQuery来实现。
// 调整图片的旋转大小
$(".picture img:nth-child(2n)").css("transform","rotate(15deg)");
$(".picture img:nth-child(2n+1)").css("transform","rotate(-20deg)");
$(".picture img:nth-child(3n)").css("transform","rotate(45deg)");
$(".picture img:nth-child(5n)").css("transform","rotate(30deg)");
$(".picture img:nth-child(7n)").css("transform","rotate(-40deg)");
var x; // 声明一个全局变量：任何一个事件处理函数都可以使用
// 图片的鼠标经过事件
$(".picture img").mouseover(function(){
// 先记录图片transform属性的取值
**x**=$(this).css("transform"); // 在图片变形之前记录transform属性的取值
$(this).css({
"opacity":"1",
"transform":"rotate(0) scale(2)",
"zIndex":"1000"
})
})
// 图片的鼠标离开事件
$(".picture img").mouseout(function(){
$(this).css({
"opacity":"0.8",
"transform":**x**,
})
})
与内容相关的伪类选择器
内容：一个元素内部所包含的子元素或文本就是该元素的内容。
- :contains(文本) 查找内容包含指定文本的元素
$(“a:contains(宝)”).css(“color”,“#3385ff”); // 文本内容包含“宝”字的a标记,无需加引号
- :has(selector) 查找子元素有匹配selector选择器的子元素的元素
$(“div:has(.s3)”).css(“border”,“solid 1px #3385ff”); // 子元素有类名为s3的div元素
- :empty 查找没有内容的元素。
$("div:empty").css() // 页面中没有内容（**代码不能换行**）的div
- :parent 查找有内容的元素。
$("div:parent").css / 页面中有内容的div
案例：实现表格数据的筛选
总结：display属性的取值:
block（块级元素）、inline（内联元素）、inline-block（内联块元素）、
table（表格元素）、inline-table（内联表格元素）、table-row（表格行元素）、
flex（弹性盒容器）。
与元素可见性相关的伪类选择器
- :hidden 查找页面不可见的元素。
$(“:hidden”) // 查找页面中所有不可兼得元素，包括<head>和<head>内部的子元素。
:hidden可以找到display:none的元素和type=hidden的<input>，但是不能找到visibility:hidden的元素
例：页面中有一个隐藏的div。
<div class=“box” style=“display:none;”>哈利波特</div>
var x=$(“div:hidden”).text(); // 返回页面中隐藏的div的内部文本
console.log(x);
- :visible 查找页面中可见的元素。
$(“:visible”) // 查找页面中所有可见的元素，包括<html>、<body>。
jQuery 选择器总结
与表单元素相关的伪类选择器
表单元素都有哪些？
（1）<input />：type=text、radio、checkbox、image、submit、reset、button、file、hidden。
（2）<textarea></textarea>
（3）<select></select>
:input
匹配页面中所有的<input />、<textarea>、<select>。
区分$(“:input”)和$(“input”)选择器：
（1）$(“:input”)是伪类选择器；$(“input”)是元素选择器。
（2）$(“input”)只能匹配页面中的<input />元素；$(“:input”)可以匹配所有的表单元素。
:text，匹配页面中type属性取值为text的<input />标记。
:password，匹配页面中type属性取值为password的<input />标记。
:radio，匹配页面中type属性取值为radio的<input />标记。
:checkbox
:image
:submit，匹配页面中type属性取值为submit的<input />标记和<button>标记对。
:reset
:button
:file
设置默认第一个文本框自动获得鼠标焦点
1）方法一：使用jQuery实现。
$(“ **:input**:eq(0)”).focus(); // 将页面中索引值为0的表单元素设置为自动获得焦点
$(“**input**:eq(0)”).focus(); // 将页面中索引值为0的<input />标记设置为自动获得焦点
$(“**input[name=nick]** ”).focus();// 将页面中name属性取值为nick的<input/>标记设置为自动获得焦点
（2）方法二：使用HTML5的新属性。
<input type=“text” name=“nick” autofocus />
与表单元素的属性相关的伪类选择器
1、:checked 匹配页面中带有checked属性的单选框或复选框。
2、:selected 匹配页面中带有selected属性的列表项或菜单项。
3、:disabled 匹配页面中不可用的表单元素，即具备disabled属性的表单元素。
4、:enabled 匹配页面中可用的表单元素，即不具备disabled属性的表单元素。
（1）页面中有一组选择性别的单选框和一个命令按钮。单击命令按钮在控制台中显示用户所选中的性别。
$(“.btn”).click(function(){
var x=$(":radio[name=sex]:checked”).val();
console.log(x);
var y=$(“:radio[name=zzmm]:checked”).val();
console.log(y);
})
val ()：在文本框中表示用户向文本框中输入的文本内容。
在单选框中表示用户选中的单选框的value属性的取值。
（2）复选框**不能**使用下列代码获取所有被选中项的value属性的取值。
~~$(“:checkbox:checked”) ~~ //该句只能匹配复选框中一个被选中的项，不能匹配所有被选中的项
（3）利用全选复选框控制爱好复选框的选中与取消选中。
<input type=“checkbox” name=“all” /> 全选
爱好：<input type=“checkbox” name=“fav” value=“音乐” /> 音乐
<input type=“checkbox” name=“fav” value=“音乐” /> 音乐
// 编写全选复选框的单击事件
$(“:checkbox[name=all]”).click(function(){
// 1.获取全选复选框的状态
var x=$(this).prop(“checked”); // true-表示选中；false-表示未被选中
// 2.将爱好复选框的checked属性设置为全选复选框的状态
$(“:checkbox[name=fav]”).prop(“checked”,x);
})
prop()：和attr()方法相同，区别是prop()可以使用true/false处理放置性属性。
（4）<select>默认为菜单，只能允许单选。
如何获取用户在菜单中选中的那一项的值。
A .方法一：因为菜单具备父元素，可以直接使用父元素的val()方法来获取。
var x=$(“select[name=spec]”).val();
B .方法二：可以先找到<select>中所有的option，在找到被选中的那一个option。
var y=$(“select[name=spce] option:selected”).val();
（5）<select>带有multiple属性就变成列表，列表允许配合Ctrl或Shift多选。
如何获取用户在列表中选中的所有项的值。
A .只能使用列表项的父元素直接调用val()方法来获取
var x=$(“select[name=city]”).val(); // 直接使用select的val()方法可以得到多选的“数组”结果
B .不能使用:selected寻找被选中的option。
~~$(“select[name=city] option:selected”)~~~~~~
补充两个漏掉的选择器
1、:not(selector) 从jQuery对象所包含的元素中排除掉匹配selector选择器的元素。
$(“li:not(.ok)”) // 匹配除了类名取值为ok的li以外的所有li
2、:header 匹配系列标记。
jQuery过滤器
过滤器都是以方法的形式存在的，且必须跟在选择器的后面使用，是对选择器找到的元素进行二次筛选
if else语句
例:
用户输入姓名并选择性别，单击按钮弹窗提示语（区分“先生”和“女士”）
jQuery查找过滤器
**查找父子关系的过滤器 **
（1）查找子元素：children()
A . $(“.box”).children()** .css(“font-size”,“50px”);
寻找class属性取值为box的所有子元素。
B . $(“.box”).children(“.book”) .css(“color”,“#ff5857”);
寻找class属性取值为box的且class属性取值为book的子元素。
相当于 $(“.box>.book”)** 选择器。
（2）查找后代元素：find(selector)
寻找以选择器为基准匹配selector选择器的后代元素。
$(“.box”).find(“.book”) .css(“color”,“#ff5857”);
寻找class属性取值为box的后代元素中类名取值为book的后代元素。
相当于 $(“.box .book”)**
查找上一级元素
（1）查找父元素：（任意元素的父元素最多只有1个）
parent()：查找指定选择器的父元素。
$(“.book”).parent().css(“border”,“dashed 1px #ff5857”); // 为.book寻找父元素
$(“.book”).parent().parent().css(“background-color”,“#3385ff”); // 为.book寻找父元素的父元素
若不断地连缀parent()过滤器，可以找到以下结构：
父元素 -> 祖先元素 -> body -> html -> 文档根节点 -> undefined（未定义的）。
（2）查找祖先元素：
parents()：查找指定选择器的所有祖先元素，包括且直到HTML元素为止。
parents(selector)：查找指定选择器的所有祖先元素中匹配selector选择器的祖先元素。
var x=$(".book”).parents(); // 查找.book的所有祖先元素
console.log(x.length); // 返回.book所有祖先元素的个数
var y=$(“.book”).parents(“.box”) // 查找.book的所有祖先元素中类名取值为box的祖先元素
console.log(y.length); // 1
注意：在jQuery中，使用var声明的变量既可以存储数据，也可以存储jQuery对象。
（3）查找祖先元素直到指定的元素为止：
parentsUntil(selector)：查找指定选择器中所有的祖先元素，直到匹配selector选择器的祖先元素
为止，且匹配selector选择器的祖先元素不在最终的查找结果范围中。
var x=$(".book”).parentsUntil(“body”) // 查找.book的所有祖先元素，直到body元素为止。
console.log(x); // 最终的查询结果中不包括body元素
查找同级关系的过滤器
1、查找下面的同级元素：
（1）next()：查找指定选择器同级的、下面的、相邻的元素。
$(“.abc”).next().css(“font-style”,“italic”); // 查找.abc同级下面相邻的元素
（2）nextAll()：查找指定选择器同级的、下面的、全部的元素。
$(“.abc”).nextAll().css(“font-weight”,“bold”); // 查找.abc同级下面所有的元素
$(“.abc”).nextAll(“.second).css(“font-weight”,“bold”);
// 查找.abc同级下面的所有元素中类名取值为second的元素。
（3）nextUntil(selector)：查找指定选择器同级的、下面的、全部的元素，直到匹配selector选择器为
止。同时匹配selector选择器的元素不包括在最后的结果范围中。
2、查找上面的同级元素：
（1）prev()：查找指定选择器同级的、上面的、相邻的元素。
（2）prevAll()：查找指定选择器同级的、上面的、全部的元素。
（3）prevUntil()：查找指定选择器同级的、上面的、全部的元素，直到匹配selector选择器为
止。同时匹配selector选择器的元素不包括在最后的结果范围中。
3、查找上面的和下面的所有统计元素：
siblings()：查找指定选择器同级的、上面和下面的、全部的元素。
$(“.abc”).siblings().css(“color”,“#ff5857”); // 查找.abc上下所有的同级元素
例:
案例：注册界面的表单验证
表单验证的错误提示语的出现模式：
<div class=“error”></div>
1、在error中书写错误提示内容，默认让所有的error隐藏，当验证出错时，让对应的error显示即可。
这里的隐藏和显示不要使用display属性来设置，因为display:none将会隐藏元素且将位置也隐藏。
这里的隐藏和显示可以使用visibility属性来设置，因为visibility:hidden将会隐藏元素且保留位置。
2、在error中不书写任何内容，当验证出错时，将指定的错误提示语注入到error中。（使用text()方法）
例如：$(".error").text("我是错误提示语");
// 将class属性取值为error的元素内容变为“我是错误提示语”
表单数据的逐一验证：在任意表单元素验证出错时，给出错误提示语，书写return false，让其流程退出事件处理函数，就不会再继续验证后面的内容
单一过滤器
- 根据元素的索引值实现的过滤器
1、first()：从jQuery选择器找到的元素中筛选第一个元素，类似于:first伪类选择器。
例：$(“li”).first() 等同于 $(“li:first”)
2、last()：从jQuery选择器找到的元素中筛选最后一个元素，类似于:last伪类选择器。
例：$(“li”).last() 等同于 $(“li:last”)
3、eq(index)：从jQuery选择器找到的元素中筛选索引值为index的元素，类似于:eq(n)伪类选择器。
例：$(“li”).eq(0) 等同于 $(“li:eq(0)”)
- 元素的截取
1、slice(start,end)：从jQuery选择器找到的元素中截取索引值从start开始直到end为止之间的所有元素，
索引值为**end的那一个元素不参与到最终的截取结果中**。
例：$(“li”).slice(2,4).css(“color”,“#3385ff”); // 筛选所有li中索引值为2和索引值为3的元素
2、slice(start)：从jQuery选择器找到的元素中截取索引值从start开始直到最后一个元素之间的所有元素。
案例：五星好评
3. 清洗过滤器
1、not(selecto)：从jQuery选择器找出的元素中排除掉匹配selector选择器的元素。
2、该过滤器和:not(selector)伪类选择器功能一致。
$(“li”).not(“.box”) 等同于 $(“li:not(.box)”)
4.后代包含过滤器
1、has(selector)：从jQuery选择器找出的元素中寻找子元素包含匹配selector选择器的元素。
2、该过滤器和:has(selector)伪类选择器功能一致。
$(“ul”).has(“.box”) 等同于 $(“ul:has(.box)”) // 寻找后代包含.box元素的ul元素
5.表达式过滤器
1、filter(selector)：从jQuery选择器找出的元素中寻找匹配selector选择器的元素。
2、$(“li.box”) 可以书写为 $(“li”).filter(“.box”)
$(“ul:eq(1)”) 可以书写为 $(“ul”).filter(“:eq(1)”)
$(“input[type=password]”) 可以书写为 $(“input”).filter(“[type=password]”)
判定过滤器
【判定过滤器】
判定过滤器不是在选择器的基础上对元素进行二次筛选，也无法选择任何元素，而是返回判定的结果，这个返回的结果是逻辑值
is ( selector )
1、功能：判定选择器找出的元素是不是匹配指定的selector选择器。
2、<span class="ok"></span>
var y=$("span").is(".ok");
console.log(y); // true，表示$("span”)选择器找出的元素匹配.ok这个选择器
var z=$(".ok").is("span");
console.log(z); // true，表示$(“.ok”)选择器找出的元素是span元素
3、案例：通过单击按钮，返回用户在复选框中选中的选项。
$(".btn").click(function(){
var $favs=$("input[name=fav]");
var x=""; // 定义了一个变量x，初值为空字符串
for(var i=0;i<$favs.length;i++){
if($favs.eq(i).is(":checked")==true){ //默认为true，等同于 if($favs.eq(i).is(“:checked”))
x=x+$favs.eq(i).val();
// 将$favs中索引值为i的那一个的value属性的取值拼接在x变量上
}}
console.log(x);
hasClass ( 类名 )
1、功能：判断选择器找出的元素是否具备指定的类名。
2、<p class=“box”></p>
var x=$(“p”).hasClass(“box”);
console.log(x); // true
var y=$("p”).is(“.box”);
console.log(y); // true
3、案例：在页面中显示若干个矩形块，让用户从中选中与其他颜色不同的那一个矩形块。
在HTML文档中，那个与其他颜色不同的矩形块具备一个别的矩形块都不具备的类名
<div class=“item”></div>
<div class=“item diff”></div> // 在CSS中，diff元素要将背景颜色设置的与其他元素不同
<div class=“item”></div>
<div class=“item”></div>
// 编写item的单击事件
$(“.item”).click(function(){
if($(this).hasClass(“diff”)==true){ // if($(this).hasClass(“diff”)){
window.alert(“你真棒，一眼就被你发现了！”);
}else{
window.alert(“真遗憾，你还得继续找！”);
}
})
串联过滤器
- add(selector)：在选择器找出的元素基础之上在附加匹配selector选择器的元素，相当于群组选择器。
例：$(“.box”).add(“.ok”).css(“border”,“solid 10px #ccc”);
$(“.box,.ok”).css(“border”,“solid 10px #ccc”);
- end()：在选择器和过滤器共同作用下找到的jQuery对象中，返回该对象的选择器部分匹配出的元素。
操作HTML / CS S 属性
操作HTML属性：attr()、prop()、removeAttr()、removeProp()。
操作CSS属性：css()、addClass()、removeClass()、toggleClass()。
- HTML元素的自定义属性名必须以data-开头：
<div class=“box” data-pro=“手机”></div>
var x=$(“.box”).attr(“data-pro”); // 手机
获取HTML属性值时attr()和prop()的区别
| 本身有的同时具备的 | 本身有的但是此时不具备的 | 自定义属性 | 不具备的自定义属性 | 此时具备的放置性属性 | 此时不具备的放置性属性 | |
|---|---|---|---|---|---|---|
| attr() | 得到属性的取值 | undefined（未定义的） | 得到属性的取值 | undefined | 属性名本身 | undefined |
| prop() | 得到属性的取值 | “” | undefined | undefined | true | false |
使用attr生成的html元素,在elements选项卡中可见,prop不可见
A .使用prop()方法操作放置性属性，设置的取值是逻辑值（true-表示选中；false-取消选中）。
// 勾选此项的单击事件
$(".btn1").click(function(){
$("input[type=checkbox]").prop("checked",true) ;
})
// 取消勾选的单击事件
$(".btn2").click(function(){
$("input[type=checkbox]").prop("checked",false) ;
})
B .使用attr()方法操作放置性属性。
// 勾选此项的单击事件
$(".btn1").click(function(){
$("input[type=checkbox]").attr ("checked","checked")** ;
})
操作DOM内容
-
text('')：获取/设置jQuery对象中包含的文本。
trim()：将字符串两端的空白符（空格、回车、Tab键）去掉 -
html('')：获取/设置jQuery对象中包含的HTML代码。
-
val('')：获取/设置表单元素的value属性的取值。
案例2： 制作一个微调器。
HTML5新增的表单元素中提供了微调器：
<input type="number" min="0" max="100" step="10" value="20" />
最小值 最大值 步长值 默认值
使用val()获取文本框中的内容，其内容的数据类型永远是字符串（文本）。
将字符串转变为数值：parseInt()，将字符串中的起始数值转换为整数。
parseInt(“123”)+1 // 124，成功的将“123”转换为了123
parseInt(“123abc”); // 123
parseInt(“123abc456”); // 123
parseInt(“abc123”); // NaN（非数字）
parseInt(“150.79”); // 150（截断小数）
微调器代码：
// plus的单击事件
$(".plus").click(function(){
var x=**parseInt(** $("input[type=text]").val() **)** ;
x=x+1;
$("input[type=text]").val(x);
})
// minus的单击事件
$(".minus").click(function(){
var x=$("input[type=text]").val();
if(x>1){
x=x-1;
$("input[type=text]").val(x);
}
})
操作DOM节点
- 新建节点：
var $变量 = $(‘<element></element>’); - 插入节点：
append()：向指定DOM结构中的节点内部的末尾插入节点
appendTo()：将节点插入至指定的DOM结构中的节点
prepend()：插入至指定节点内部的开头,DOM结构中的节点做整个操作的主语。
prependTo()：插入至指定节点内部的开头,需要插入的节点做整个操作的主语
before() :插入至指定节点的前面
insertBefore()
after()
insertAfter()
- 包裹节点
wrap()：外包。将指定的节点包裹住前面选择器找到的每一个元素。
$(“span”).wrap($x); // 利用$x节点包裹住$("span”)选择器匹配的每一个元素
wrapAll()：总包。将指定的节点包裹住前面选择器找到的所有元素。
$(“span”).wrapAll($x); // 将$(“span”)选择器匹配的所有元素看做一个整体，被$x包裹
wrapInner()：内包。用指定的节点包裹住前面选择器内部所有的节点
$(“.box”).wrapInner($x); // 利用$x节点包裹住$(“.box”)内部所有的节点。
案例：利用脚本语言实现的动态导航条
var linkText=["首页","企业简介","经典案例","新品发布","优秀员工","联系我们"];
var linkUrl=["index.html","x1.html","case.html","x2.html","x3.html","contact.html"];
for(var i=0;i<linkText.length;i++){ // 循环变量i的取值范围是 0 1 2 3 4
var $li=$('<li><a href="' + linkUrl[i] + '">' + linkText[i] + '</a></li>');
$(".navContent").append($li);
}
var $ul=$('<ul></ul>')
$(".navContent").wrapInner($ul);
// 当前页面的导航项要有一个表示当前的状态
在页面的HTML文档的<head>标记对内部添加jQuery脚本代码。
<script type="text/javascript">
$(function(){
// $(".nav li").eq(0).children().css("background-color","#ff5857");
$(".nav li:eq(0) a").addClass("current");
})
</script>
- 删除节点
remove()：删除jQuery对象所包含的DOM节点
detach()：删除jQuery对象所包含的DOM节点
empty()：将jQuery对象中所有的子元素和后代元素清空。
unwrap()：卸包，将jQuery对象的父元素删除。
- 复制节点
复制出来的节点为有游离节点,需插入
参数：false，默认值，表示复制节点的同时不复制节点上绑定的事件。
true，表示复制节点的同时也复制节点上绑定的事件。
- 替换节点
replaceWith()：利用$node节点替换掉$(“selector”).filter()匹配的节点。
replaceAll()：将$(“selector”).filter()匹配的节点利用$node全部替换掉。
jQuery动画
显示：show()方法。
show()：将指定的jQuery对象显示出来。
show(“slow”)：以0.6s为动画时间将jQuery对象显示出来。
show(“normal”)：以0.4s为动画时间将jQuery对象显示出来。
show(“fast”)：以0.2s为动画时间将jQuery对象显示出来。
show(1000)：以1000ms为动画时间将jQuery对象显示出来。
隐藏：hide()方法。
下拉：slideDown()
上翻：slideUp()
上翻下拉切换：slideToggle()
淡入：fadeIn()，元素的opacity属性从0过渡到1。
淡出：fadeOut()，元素的opacity属性从1过渡到0。
淡入淡出切换：fadeToggle()
调整不透明度至指定的值：fadeTo(duration,opacity)
A . duration：设置整个动画效果的总时长，单位为毫秒。
B .opacity：设置总时长范围内不透明度变化到的取值，取值范围0-1。
例:鼠标经过半透明的图片，变得清晰可见；鼠标离开再次变为半透明效果。
$("img").mouseover(function(){
$(this).fadeTo(300,1);
}).mouseout(function(){
$(this).fadeTo(300,0.5);
})
轮播图
// 将所有的图片都隐藏，让第一张图片显示
// 让第一个指示器着色：具备current类
// 大于号的单击事件
// current=(current+1)%imgLength;
// 小于号的单击事件
// 指示器的单击事件
//（1）被单击的指示器要着色
//（2）被单击的指示器对应的图片要显示
// 自动轮播：
每隔一段时间让“大于号的单击事件”自动执行。
var timer=window.setInterval(‘$(“.gt”).click()’,3000); // 每隔3000毫秒执行大于号的单击事件
// 在自动轮播的基础上，鼠标经过轮播图停止轮播，鼠标离开轮播图继续轮播
$(“.carousel”).mouseover(function(){
window.clearInterval(timer) // 释放掉名为timer的计时器
}).mouseout(function(){
timer=window.setInterval(‘$(“.gt”).click()’,3000);
})
自定义动画
（1）语法格式：$(“selector”).filter().animate({
CSS属性名:CSS属性值,
CSS属性名:CSS属性值,
……
},duration,function(){
// 当animate自定义动画执行完毕后需要执行的代码
})
（2）参数：
A .{}，指定CSS属性的的取值，该方法可以结合选择器的初始状态完成指定CSS属性取值的动画
效果。
B .duration，通过毫秒为单位的时间指定整个动画的执行时长。
C .function(){}，可以省略。设置当动画效果完全执行结束后执行的代码。
animate()方法不支持任何颜色类的CSS属性变化解决方案：从jQuery官网上下载jquery.color.js文件，并部署到项目中。
动画队列
A .多个动画效果交替执行。
B .实现动画队列只需要将多个animate()方法连缀书写。
$(".box").animate({
"width":"800px"
},1000).animate({
"height":"300px"
},500).animate({
"border-radius":"30px"
},1400).animate({
"background-color":"#ff5857"
},600);
C .为动画队列添加延迟：delay(duration)
delay()方法书写在任意一个animate()方法之前，在该animate()方法执行时给出指定事件的延迟。
格式：$(“selector”).filter().delay(500).animate({},1000);
计算器:
对象大小与位置
一、jQuery对象有关大小的方法：****
width()：获取/设置jQuery对象的宽度。
height()：获取/设置jQuery对象的高度。
innerWidth()：获取jQuery对象的内部宽度。
innerHeight()：获取jQuery对象的内部高度。
outerWidth()：获取jQuery对象的外部宽度。
outerHeight()：获取jQuery对象的外部高度。
【**总结**】：
A .outerWidth()和outerHeight()方法用于获取元素所占据的空间大小。
B .当box-sizing:content-box时：
outerWidth() = width + (padding-left) + (padding-right) + (border-left) + (border-right)
outerHeight() = height + (padding-top) + (padding-bottom) + (border-top) + (border-bottom)
outerWidth(true) = width + padding + border + margin
outerHeight(true) = height + padding + border + margin
margin在jQuery中被称为“外补白”。
C .当box-sizing:border-box时：
outerWidth() = width
outerHeight() = height
outerWidth(true) = width + (margin-left) + (margin-right)
outerHeight(true) = height + (margin-top) + (margin-bottom)
二 认识两个jQuery对象：
1、$(window)：指浏览器窗口。
2、$(document)：指浏览器窗口中的文档区域。
三、案例：通栏轮播图。
1、浏览器的宽度一定“小于等于”图片宽度。
（1）图片宽度永远是1920px。
（2）浏览器最大化，则浏览器宽度等于图片宽度。
浏览器没有最大化，则浏览器宽度小于图片宽度。
图片向左侧移动的距离：(图片的宽度-浏览器的宽度)/2。
图片的宽度：var imgWidth=$(“.carousel img”).width();
浏览器的宽度：var browserWidth=$(window).width();
图片向左侧偏移的距离：var imgOffset=(imgWidth-browserWidth)/2
设置图片的left属性：$imgs.css(“left”,-imgOffset + “px”)
2、浏览器的缩放事件：
$(window).resize(function(){
// 浏览器缩放的事件代码
})
滚动事件
一、页面和元素的滚动事件：
1、 页面的滚动事件：
$(window).scroll(function(){
// 页面滚动事件的代码
$(this).scrollLeft()：获取/设置水平滚动条滚走的距离。
$(this).scrollTop()：获取/设置垂直滚动条滚走的距离。
})
（1）利用scrollTop()获取垂直滚动条滚走的距离最好在滚动事件内部实现。
（2）利用scrollTop(number)设置垂直滚动条滚走的距离可以书写在任意位置。
例：当浏览器滚动时，页面的背景颜色发生随机变化。
// 页面的滚动事件
$(window).scroll(function(){
var red=parseInt(Math.random()*256);
var green=parseInt(Math.random()*256);
var blue=parseInt(Math.random()*256);
$("body").css("background-color","rgb(" + red + "," + green + "," + blue + ")");
})
2、元素的滚动事件：
（1）元素如何获得滚动条：当内容超过元素的边界，同时overflow属性设置为auto或scroll，元素就可以具备滚动条。
（2）$(“.box”).scroll(function(){
// 元素的滚动事件代码
})
二、滚动案例：
1、在页面右下角出现“回到顶部”按钮，单击该按钮可以回到浏览器的顶端。
// 页面的滚动事件
$(window).scroll(function(){
var distance=$(this).scrollTop();
if(distance>=400){
$(".top").fadeIn();
}else{
$(".top").fadeOut();
}
})
// 单击回到顶部按钮
$(".top").click(function(){
**$("html,body")** .animate({
"**scrollTop**":"0"
},1000)
})
2、页面中某个栏当滚动到指定位置时随着滚动条的滚动而固定。
$(window).scroll(function(){
var distance=$(this).scrollTop();
var topHeight=$(".top").height();
var bannerHeight=$(".banner").height();
if(distance>=topHeight+banerHeight){
$(".nav").css("position","fixed"); // 让.nav变为固定定位
}else{
$(".nav").css("position","**static**"); // 让.nav变为流式定位
}
})
对象的位置
offset()方法：可以返回对象在页面中的位置，返回值包括top和left两个值。
var t=$(“selector”).filter().offset().top; // 得到jQuery对象在页面中的顶部距离。
var t=$(“selector”).filter().offset().left; // 得到jQuery对象在页面中的左侧距离。
