jQuery 是一个 JavaScript 函数库。 兼容所有浏览器
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
目录
一、jQuery 使用了解
jQuery下载： 从 jquery.com 下载 jQuery 库
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）
使用 HTML 的 <script> 标签引用它： <script src="jQuery.js"></script> 注：src里是你下载的jQuery的文件名
二、jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏 id="test" 的元素
jQuery 函数位于一个 document ready 函数中，防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
两种写法均可： $(document).ready( function(){ } )
或 $( function(){ } )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入jQuery 下面的JS文件是基于jQuery写的，所以jQuery要引在前面 -->
<script src="jQuery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
p{
font:#93b;
}
</style>
</head>
<body>
<div></div>
<p>只如初见</p>
<script>
//隐藏div盒子
$('div').hide();
alert('恭喜 jQuery的大门正在向你打开');
$(document).ready(function(){
console.log('文档加载完毕');
})
/*或
$(function(){
console.log('文档加载完毕');
})
*/
</script>
</body>
</html>
jQuery 入口函数与 JavaScript 入口函数的区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。 可以执行多次，第N次都不会被上一次覆盖
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。 只能执行一次，第二次就会覆盖第一次;如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致1oad事件不能够即时被触发。
三、jQuery选择器
1. 基础选择器
- $( "*" ) 选择所有元素
- $( “.class” ) 选择该类名的所有元素
- $( " element " )选择该标签名的所有元素
- $( "#id" )选择该id的单个
- $( "selector1, selector2, selectorN" ) 选择多个匹配的元素
<script>
$(function(){
// 选择div下所有的子元素
$('div *').html("我是选择div下所有元素");
//选择呢给定类名的所有元素
$('.s').html("我用的是class类选择器");
//选择给定html标签的所有元素
$('label').html("我用的是元素选择器");
// 给定id的单个元素
$('#p').html("我用的是id选择器");
//合并选择
$('#p, span,label').html("我要多个选择器");
})
</script>2. 属性选择器
① 语法：$("[attribute='value']') 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符”.”）的元素。
注意：引号是可选的.可以是一个不带引号的一个单问或带一个引号的字符串。
② 语法：$("[attribute*='value']') 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
③ 语法：$("[attribute~='value]") 选择指定属性用空格分隔的值中包含一个给定值的元素。
④ 语法：$("[attribute=value']") 选择指定属性是给定值的元素。
⑤ 语法：$("[attribute！='value']") 选择不存在指定属性，或者指定的属性值不等于给定值的元素
⑥ 语法：$("[attributeS=value]") 选择指定属性是以给定值结尾的元素，这个比较是区分大小写的
⑦ 语法：$("[attribute='value]") 选择指定属性是以给定字符串开始的元素。
⑧ 语法：$(attribute]”) 选择所有具有指定属性的元素，该属性可以是任何值。
⑨ $("[attributeFilter1][attributeFilter2][attributeFilterN]") 选择匹配所有指定的属性筛选器的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<!-- hreflang用于指定被链接文档的语言，要与href一起用 主流浏览器不支持hreflang-->
<a href="#" hreflang="en">英文</a>
<a href="++" hreflang="zh">中文</a>
<input name="man-mews" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />
<script>
$(function(){
// $("[attribute='value']") 或$("[attribute=value]") 表示选择指定属性值等于给定字符串或以该字符串作为前缀（该字符串后跟一个连字符"-"）的元素"
$('[hreflang=en]').css('color', 'purple');
})
$(function(){
//$("[attribute*='value']")选择指定的属性是已包含某些值的元素
$("[href*='+']").css('color','green');
})
$(function(){
//$("[attribute~='value']")选择指定属性 其值是用空格分隔开的 且包含一个给定值的元素
$("input[name~='man']").val('mr.man is in it !');
})
</script>
</body>
</html>
3. 基础过滤
① 语法：$(":animated"）选择所有正在执行动画效果的元素
② 语法：
(1)$(":eq(index)"):index:要匹配元素的索引值（从0开始计数）
(2)$(":eq(index)"):-index:要匹配元素的索引值（从0开始计数），从最后一个元素开始倒计数。
描述：在匹配的集合中选择索引值为index的元素。
③ 语法：$("：even") 选择索引值为偶数的元素，从0开始计数。也可以查看odd(奇数).
注意：这是基于0的索引，所以even选择器是选择第一个元素，第三个元素，依此类推在匹配。
④ 语法：$(":first") 选择第一个匹配的元素。
⑤ 语法：$(":focus") 选择当前获取焦点的元素。
⑥ 语法：$(":header") 选择所有标题元素，像h1,h2,h3等
⑦ 语法：$(":last") 选择最后一个匹配的元素。
⑧ 语法：$(":gt(index)")或S(":gt(-index)") 选择匹配集合中所有大于给定index(索引值)的元素。
⑨ 语法：$(":It(index)")或$(":lt(-index)") 选择匹配集合中所有索引值小于给定index参数的元素。
⑩ 语法：$(":not(selector)") 选择除了该选择器匹配的元素
4. 子元素过滤
- 语法：$(":first-child") 选择所有级元素下的第一个子元素。
- 语法：$(":last-child") 选择所有父级元素下的最后一个子元素。
- 语法：$(":first-of-type') 选择所有相同的元素名称的第一个兄弟元素。
- 语法：$("last-of-type") 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
- 语法：$(":nth-child(index/even/odd/equation)") 选择的他们所有父元素的第个子元素。
部分示例如下：
5. 内容过滤
- 语法：$(":contains(text)") 选择所有包含指定文本的元素
- 注意：text:用来查找的一个文本字符串。这是区分大小写的，匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。
- 语法：$(":empty") 选择所有没有子元素的元素（包括文本节点）。
- 语法：$(":has(selector)"） 选择元素其中至少包含指定选择器匹配的一个种元素
- 语法：$(":parent") 选择所有含有子元素或者文本的父级元素
部分示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
.text{
border:1px solid green;
}
</style>
<body>
<div>john </div>
<div>gggg </div>
<div>hello john heloo </div>
<div>yes j ohn yeses</div>
<table border="1">
<tr><td> TD #0</td><td></td></tr>
<tr><td> TD #2</td><td></td></tr>
<tr><td></td> <td>TD #5</td></tr>
</table>
<div><p>hello in a paragragh </p></div>
<div>hello again! (with no p)</div>
<script>
$(function(){
$("div:contains('john')").css("text-decoration","underline");
})
$(function(){
$("td:empty").text("was empty").css("background-color","red");
})
$(function(){
$("div:has(p)").addClass("text");
})
</script>
</body>
</html>6. 表单
- 语法：$(":button") 选择所有按钮元素和类型为按钮的元素。
- 语法：$(":checkbox") 选择所有类型为复选框的元素。
- 语法：$(":checked") 匹配所有勾选的元素
- 语法：$(":disabled") 选择所有被禁用的元素。
- 语法：$(":enabled") 选择所有可用的（注：未被禁用的元素）元素。
- 语法：$(":fle") 选择所有类型为文件(fle)的元素。
- 语法：$(":focus") 选释当前获取焦点的元素。
- 语法：$(":image'') 选择所有图像类型的元素
- 语法：$(":input") 选择所有input,textarea,select和button元素.
- 语法：$(":password") 选择所有类型为密码的元素
- 语法：$(":radio") 选择所有类型为单选框的元素
- 语法：$(":submit") 选择所有类型为提交的元素
部分示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
textarea{
height: 35px;
}
div{
color: white;
}
fieldset{
margin: 0;
padding: 0;
border-width: 0;
}
.marked{
background-color: yellow;
border: 3px solid red;
}
.marked1{
background-color: blue;
border: 3px solid red;
}
.marked2{
background-color: red;
border: 3px solid red;
}
</style>
</head>
<body>
<form>
<fieldset>
<input type="button" value="Input Button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</fieldset>
</form>
<div></div>
<form>
<!-- input 里面的disabled 禁用属性 -->
<input name="email" disabled="disabled" />
</form>
<script>
$(function(){
var input=$(" :button").addClass("marked");
})
$(function(){
var input=$(" input:image").addClass("marked1");
})
$(function(){
var input=$(" input:input").addClass("marked2");
})
$(function(){
$(" input:disabled").val("hahhah");
})
</script>
</body>
</html>7. 层级
- 语法：$("parent>child") 选择所有指定“parent”元素中指定的"child"的直接子元素。注：parent任何有效的选择器; chid用来筛选子元素的选择器。
- 语法：$("ancestor descendant") 选择给定的祖先元素的所有后代元素。注：ancestor:任何有效的选择器； descendant:一个用来筛选后代元素的选择器。
- 语法：$("prev+next") 选择所有紧接在“prev”元素后的“next”元素。 注：prev:任何有效的选择器； next:用于筛选紧跟在"prev"后面的元素的选择器。
- 语法：$("prev~siblings") 匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤"siblings”选择器。注：prev:任何有效的选择器； siblings:一个选择器来过滤第一选择器以后的兄弟元素。 (prev+next)和(prev~siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。
部分示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<ul class="topnav">
<li>li1</li>
<li>li2
<ul>
<li>next l1</li>
<li>next l2</li>
<li>next l3</li>
</ul>
</li>
<li>li3</li>
</ul>
<br>
<span id="prev">span1</span>
<div>div1</div>
<div>div2</div>
<div>div3
<div>div4</div>
</div>
<script>
$(function(){
$(".topnav>li").css("border","1px solid red");
})
$(function(){
$(".topnav li").css("border","1px solid yellow");
})
$(function(){
$("li+li").css("border","1px solid pink");
})
$(function(){
$("#prev~div").css("border","1px solid blue");
})
</script>
</body>
</html>8. 可见性过滤
语法：$(":hidden") 选择所有隐藏的元素。
补充：
元素可以被认为是隐藏的几个情况：
1)他们的CSS display值是none。
2)他们是type="hidden'的表单元素。
3)它们的宽度和高度都设置为0。
4)一个祖先元素是隐藏的，因此该元素是不会在页面上显示。
语法：$(":visible") 选择所有可见的元素。
如果元素占据文档中一定的空间，元素被认为是可见的。可见元素的宽度或高度是大于零。
所以：元素的visibility:hidden或opacity:0被认为是可见的，因为他们仍然占用空间布局。
不在文档中的元素是被认为隐藏的，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式。隐藏元素上做动画，元素被认为是可见的，直到动画结束。显示元素上做动画，在动画的开始处该元素被认为是可见的。
四、事件
1. 鼠标事件
.click() 点击事件
.dblclick() 双击事件
.hover() 鼠标悬停和离开
.mousedown() 鼠标按下
.mouseenter() 鼠标进入元素
.mouseleave() 鼠标离开元素
.mousemove() 鼠标在元素内移动
.mouseout() 鼠标离开元素（支持事件冒泡）
.mouseover() 鼠标进入元素内（支持事件冒泡）
.mouseup() 鼠标按键被释放
例：click 的原生js写法和jQuery写法对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<script>
//原生 js 写法
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].onclick=function(){
alert(this.innerHTML);
}
}
// jQuery 写法
$(function(){
$("p").click(function(){
alert($(this).html());
})
})
</script>
</body>
</html>2. 键盘事件
.keydown() 键盘按下
.keypress() 键盘按下后松开
.keyup() 键盘松开
触发顺序 keydown keypress keyup
而keyup只有在没有keydown keypress时才能触发
<script>
// 键盘事件
$(document).keydown(function(event){
alert(event.keyCode);
})
</script>3. 浏览器事件
1) 浏览器事件
.error () 报错 已被弃用建议不使用
.resize()页面大小改变
.scroll () 滚动条滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
p{
width: 100%;
height: 600px;
}
div{
width: 100px;
height: 50px;
background-color: pink;
overflow: auto;
margin:auto;
}
</style>
</head>
<body>
<p>hahahaha</p>
<div id="d">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
<script>
$(window).scroll(function(){
console.log("oooo");
})
$("#d").scroll(function(){
alert("dddddd");
})
$(window).resize(function(){
alert("页面大小变了");
})
</script>
</body>
</html>2）文档加载过程
① 解析HTML结构。
② 加载外部脚本和样式表文件。
③ 解析并执行脚本代码
④ 构造HTML DOM模型。// ready
⑤ 加载图片等外部文件。
⑥ 页面加载完毕。// load
4. 绑定事件处理器
bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。语法：$(selector).bind(event,data,function,map) 基本不用了
on() 方法在被选元素及子元素上添加一个或多个事件处理程序，提供绑定事件处理程序所需的所有功能。(动态绑定事件处理函数) 语法：$(selector).on(event,childSelector,data,function)
如需移除事件处理程序，请使用 off() 方法。
如需添加只运行一次的事件然后移除，请使用 one() 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<br>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
<div>
<p> hellohellohellohello </p>
</div>
<button id="one">one</button>
<script>
$(function(){
$("#btn").bind("click mouseover",function(){
alert("hahhaha");
});
})
$("#btn2").bind({
click:function(){
alert('click');
},
mouseleave:function(){
alert('mouseleave');
}
})
// 事件不会被覆盖 可用on代替
$("#btn3").on("click",function(){
alert("ononononon");
})
// on 事件委托
$(function(){
$("ul").on("click","li",function(){
alert($(this).html());
})
})
//监听多个事件
$(function(){
var fn=function(){
alert("hello");
};
$("div").on("click mouseleave","p",fn);
// 移除事件处理 如果off()中没有事件则默认移除全部
$("div").off("mouseleave","p",fn);
})
//one() 只触发一次
$(function(){
$("#one").one("click",function(){
alert("oneoneone");
})
})
</script>
</body>
</html>5. 事件对象
event.currentTarget 事件的监听者
event.target 事件的目标
event.delegateTarget 当前事件的委托者
event.pageX 返回鼠标指针的位置，相对于文档的左边缘
event.pageY 返回鼠标指针的位置，相对于文档的上边缘
event.type 当前的事件类型
event.preventDefault() 阻止默认事件
event.stopPropagation() 阻止冒泡事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<div id="div1">
<p>div 1</p>
</div>
<span></span>
<a href="http://www.baidu.com">百度</a>
<div id="div2">
<p>div 2</p>
</div>
<script>
$(function(){
//on("click")动态加载，当页面加载完，可以为新增加的元素添加事件。但是必须选定父级元素。on()参数里的元素可以反复删除添加
//on() 方法在被选元素及子元素上添加一个或多个事件处理程序，提供绑定事件处理程序所需的所有功能。(动态绑定事件处理函数)
$("#div1").on("click","p",function(e){ // 也可简写为 $("#div1").click(function(e){ }
console.log($(e.currentTarget)); // 事件的监听者 p
console.log($(e.target)); //事件的目标 p
console.log($(e.delegateTarget)); //当前事件的委托者 div1
console.log($(this)); //this指事件监听者 p
console.log($(this).html()); // this里面的内容 div1
alert(e.type); //当前的事件类型：click
})
//pageX pageY
$(document).mousemove(function(event){
$("span").text("X:"+event.pageX+",Y:"+event.pageY);
})
//preventDefault 阻止默认事件
$("a").click(function(e){
e.preventDefault();
alert("阻止");
})
})
//onclick是事件(只有js中有，jQuery没有) 如下：
var div2=document.getElementById("div2");
div2.onclick=function(event){
console.log(this); //this指div2
console.log(this.innerHTML); // this里面的内容
alert(event.type); //当前的事件类型：click
}
</script>
</body>
</html>6. 表单事件
focus() 失去焦点
blur () 获取焦点 适用于所有元素
change () 元素内容改变时值触发，只适用于 input textarea select
select() 文本被选择时会触发 只适用于 input type=text textarea
submit() 只能绑定在form表单上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="field 1">
<input id="target1" type="text" value="field 2">
</form>
<form id="target2">
<input type="submit" value="go">
</form>
<script>
$(function(){
$("#target").focus(function(){
console.log("聚焦");
})
$("#target").blur(function(){
console.log("失去焦点");
})
$("#target").change(function(){
console.log("内容改变啦");
})
$("#target1").select(function(){
console.log("选中");
})
$("#target2").submit(function(){
alert("确定提交吗");
})
})
</script>
</body>
</html>7. DOM属性
.addClass(className):为每个匹配的元素添加指定的样式类名
.attr(attributeName):获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
.hasClass(className):确定任何一个匹配元素是否有被分配给定的（样式）类。
.html():获取集合中第一个匹配元素的HTML内容设置每一个匹配元素的html内容。
.prop(propertyName):获取匹配的元素集中第一个元素的属性(property)值为匹配的元素设置一个或多个属性(properties)。
.removeAttr(attributeName):为匹配的元素集合中的每个元素中移除一个属性(attribute)。
.removeClass([className]):移除集合中每个匹配元素上一个，多个或全部样式。
.removeProp(propertyName):为集合中匹配的元素删除一个属性(property)。
.toggleClass():在匹配的元素集合中的每个元素上添加或删除一个或多个样式类取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
.val():获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
.attr 可以获取所有的属性 包括自己添加的 .prop只能获取系统自有的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<h1>你好</h1>
<a>百度</a>
<p name="thinkthink">想一想</p>
<div></div>
<h2 class="h2 aa"></h2>
<input type="checkbox" value="xuanze">
<script>
$(function(){
$("h1").addClass("pc");
$("a").attr("href","http://www.baidu.com");
var name=$("p").attr("name");
$("div").text(name);
console.log($("h2").hasClass("h2 aa"));
console.log($("a").html());
$("a").html("hehe");
console.log($('input').prop("type","text"));
$("a").removeAttr("href");
})
</script>
</body>
</html>8. DOM操作
1）DOM插入并包裹现有内容
.wrap(wrappingElement):在每个匹配的元素外层包上一个html元素
.unwrap():将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置，仅删除紧挨着的包裹的元素。
.wrapAll(wrapping Element):在所有匹配元素外面包一层HTML结构
.wrapInner((wrappingElement):在匹配元素里的内容外包一层结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
.d1{
background-color: yellow;
}
</style>
</head>
<body>
<div class="d1">
<p id="p1">haha</p>
</div>
<p id="p2">哈哈</p>
<p id="p3">哈哈</p>
<script>
$(function(){
$("p").wrap("<div></div>");
$("#p1").unwrap();
$("p").wrapAll("<div class='container'></div>");
$("#p3").wrapInner("<div class='inner'></div>");
})
</script>
</body>
</html>2）DOM插入现有元素内
.append() 在每个匹配元素里面的内容末尾处插入参数内容
.appendTo() 将匹配的元素插入到目标元素的最后面
.html() 获取集合中第一个匹配元素的HTML内容设置每一个匹配元素的html内容
.prepend() 将参数内容插入到晦个匹配元素的前面（元素内部）
.prependTo() 将所有元素插入到目标前面（元素内）
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
</head>
<body>
<span>我是</span>
<p>wyh</p>
<p>candy</p>
<h1>h1</h1>
<script>
$(function(){
$("p").append("<p>哈哈</p>");//将"<p>哈哈</p>"放到每个p元素内容的后面
$("p").append($("span"));//将span元素放到每个p元素内容的后面
$("<p>111</p>").appendTo($("h1"));
console.log($("span").html());//获取匹配元素的第一个元素的HTML内容
$("span").html("hahaha");//设置每一个匹配元素的内容
$("p").prepend("<div>222</div>");//将<div>222</div>放到每个p元素内容的前面
$("<div>333</div>").prependTo($("p"));//将<div>333</div>放到每个p元素内容的前面
})
</script>
</body>
</html>3）DOM插入现有元素外
.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
.before() 根据参数设定，在匹配元素(外面)的前面插入内容
.insertAfter() 在目标元素后面插入集合中每个匹配的元素
.insertBefore() 在目标元素前面插入集合中每个匹配的元素
4）DOM移除
.detach() 从DOM中去掉所有匹配的元素。
.empty() 从DOM中移除集合中匹配元素的所有子节点
.remove() 将匹配元素集合从DOM中删除（注：同时移除元素上的事件及jQuery数据）
.unwrap() 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置
5）DOM替换
.replaceAll() 用集合的匹配元素替换每个目标元素
.replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
五、CSS属性
.css() 获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性
.heignt() 获取匹配元素集合中的第一个元素的当前计算高度值，设置每一个匹配元素的高度值
.width() 为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度
.innerHeight() 为匹配的元素集合中获取第一个元素的当前计算高度值，包括padding,但是不包括border
.innerWidth() 为匹配的元素集合中获取第一个元素的当前计算宽度值，包括padding,但是不包括border。
.offset() 在匹配的元素集合中，获取的第一个元素相对于文档的当前坐标，设置匹配的元素集合中每一个元素的坐标
.outerHeight() 获取元素集合中第一个元素的当前计算高度值，包括padding,border和选择性的margin，返回一个整数（不包含“px”)表示的值，或如果在一个空集合上调用该方法，则会返回null
.outerWidth() 获取元素集合中第一个元素的当前计算宽度值，包括padding,border和选择性的margin，返回一个整数(不包含"px”)表示的值，或如果在一个空集合上调用该方法，则会返回null
.position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标（offset parenti指离该元素最近的而且被定位过的祖先元素)
.scrollLeft() 获取匹配的元素集合中第一个元素的当前水平滚动条的位置，设置每个匹配元素的水平滚动条位置。
.scroll() 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置，设置每个匹配元素的垂直滚动条位置
六、遍历
1. 过滤
.eq() 减少匹配元素的集合为指定的索引的哪一个元素 正值从0开始 负值倒着数 从-1开始
.filter() 筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合
.first() 获取匹配元素集合中第一个元素 不接收参数
.last() 获取匹配元素集合中最后一个元素 不接收参数
.has() 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
.is() 判断当前匹配的元素集合中的元素，是否为一个选器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
.not() 从匹配的元素集合中移除指定的元素 接收一个参数
.map() 通过一个函数匹配当前集合中的每个元素，产生一个包含新的jQuery对象
.slice() 根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象
2. 其他遍历
.add() 添加元素到匹配的元素集合
.contents() 获得匹配元素集合中每个元素的子元素，包括文字和注释节点
.end() 终止在当前链的最新过滤操作，并返回匹配的元素的以前状态
3. 树遍历
.children() 获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选
.closest() 从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素
.find() 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
.next() 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
.nextAll() 获得每个匹配元素集合中所有下面的同辈元素，选择性筛选的选择器。
.nextUntil() 通过选择器，DOM节点，或jQuery)对象得到每个元素之后的所有兄弟元素，但不包括匹配的元素
.parent() 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
.parents() 获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
.offsetParent() 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS的position属性是relative,absolute,或fixed的元素
七、特效
1. 隐藏与显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
div{
width: 40px;
height: 40px;
background-color: pink;
margin-left: 10px;
float: right;
}
</style>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
<script>
$(function(){
$("#hide").click(function(){
$("p").hide(1000); //隐藏
})
$("#show").click(function(){
$("p").show(1000); //显示
})
$("#toggle").click(function(){
$("p").toggle(1000); //显示或隐藏
})
for(var i=0; i<5; i++){
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(2000,function(){
$(this).remove();//此回调函数在hide执行完后执行
})
})
})
</script>
</body>
</html>2. 淡入淡出 fade
fadeIn fadeOut fadeToggle fadeTo
<body>
<div id="div1" style="width:80px; height:80px; display: none; background-color: pink;"></div>
<div id="div2" style="width:80px; height:80px; display: none; background-color: yellow;"></div>
<div id="div3" style="width:80px; height:80px; display: none; background-color: purple;"></div>
<button id="in">fade in </button>
<button id="out">fade out</button>
<button id="toggle">fade toggle</button>
<button id="to">fade to</button>
<script>
$(function(){
$("#in").on("click",function(){
$("#div1").fadeIn(1000); //fadein淡入
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
})
$("#out").on("click",function(){
$("#div1").fadeOut(2000); // fadeout 淡出
$("#div2").fadeOut(2000);
$("#div3").fadeOut(2000);
})
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000); // fadeToggle淡入或淡出
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
})
$("#to").on("click",function(){
$("#div1").fadeTo(2000,1) // fadeto 改变被选元素的不透明度为指定的值
$("#div2").fadeTo(2000,0.3)
$("#div3").fadeTo(2000,0)
})
})
</script>
</body>3. 滑动 slide
slideDown slideUp slideToggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
#content{
padding: 50px;
display: none;
}
#flipshow,#fliphide,#fliptoggle,#content{
padding: 5px;
text-align: center;
background-color: pink;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="flipshow">点击显示</div>
<div id="fliphide">点击隐藏</div>
<div id="fliptoggle">隐藏或显示</div>
<div id="content">helloworld</div>
<p>世界，你好</p>
<button>隐藏/显示</button>
<script>
$(function(){
$("#flipshow").click(function(){
$("#content").slideDown(2000); // slideDown以滑动方式显示被选元素
})
$("#fliphide").click(function(){
$("#content").slideUp(2000); // slideUp以滑动方式隐藏被选元素
})
$("#fliptoggle").click(function(){
$("#content").slideToggle(2000); // slideToggle 以滑动方式隐藏或显示被选元素
})
$("button").click(function(){
$("p").toggle(2000,function(){
alert("动画执行完毕，执行该回调函数")
})
})
$("p").css("color","red").slideUp(1000).slideDown(2000); // 显示再隐藏
})
</script>
</body>
</html>4. 自定义特效
animate（参数1，参数2，参数3，参数4）
参数1：css属性（所有该属性必须要有数值，比如width height 但background-color不行）
参数2：动画执行的时间
参数3：动画执行的过渡类型（linear线型的 swing曲线型）
参数4：回调函数
clearQueue() finish() stop()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
button{
position: absolute;
}
</style>
</head>
<body>
<div></div>
<button id="button1">运行完当前动画停止</button>
<button id="button2">立即停止动画</button>
<button id="button3">停止动画</button>
<script>
$(function(){
$("div").click(function(){
$(this).animate({
width:500, opacity:0.2, left:200
}, 2000,"linear").delay(4000);
$(this).animate({
opacity:0.8,
width:300,
left:200
}, 4000,"swing",function(){
alert("动画执行完毕");
})
$("#button1").click(function(){
$("div").clearQueue(); //从尚未运行的队列中移除所有项目，当函数开始运行时，它会一直运行直到完成。
})
$("#button2").click(function(){
$("div").stop(); // 被选元素停止当前正在运行的动画
})
$("#button3").click(function(){
$("div").finish(); // 停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画
})
})
})
</script>
</body>
</html>
7429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
