jQuery基础知识
jQuery简介
jQuery 是一个高效、精简并且功能丰富的JavaScript工具库。它提供的API易于使用并兼容众多浏览器，这让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单。
jQuery版本说明
jQuery分为三个⼤版本：1.x 2.x 3.x
1.x 版本
兼容ie678,使⽤最为⼴泛的，官⽅只做BUG维护，功能不再新增。因此⼀般项⽬来说，使⽤1.x版本就可以了，最终版本：1.12.4 (2016年5⽉20⽇)
2.x 版本
不兼容ie678，很少有⼈使⽤，官⽅只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使⽤2.x，最终版本：2.2.4 (2016年5⽉20⽇)
3.x 版本
不兼容ie678，只⽀持最新的浏览器。除⾮特殊要求，⼀般不会使⽤3.x版本的，很多⽼的jQuery插件不⽀持这个版本。⽬前该版本是官⽅主要更新维护的版本。最新版本：3.6.0
jQuery主要功能
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- Ajax
- Utilities
jQuery的应⽤
- CDN方式
常用的 CDN 有很多，根据自己公司的需求来进行选择 - 本地加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.6.0.min.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>
体验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="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script src="./js/libs/jquery.min.1.12.4.js"></script>
</head>
<body>
<p id="text">Hello</p>
<button id="btn">修改</button>
<script>
// var btn = document.getElementById("btn");
// var text = document.getElementById("text");
// btn.onclick = function(){
// text.innerHTML = "新的内容"
// }
$("#btn").click(function(){
$("#text").html("修改成新的内容")
})
</script>
</body>
</html>
DOM属性(上)
.addClass()
为每个匹配的元素添加指定的样式类名值得注意的是这个⽅法不会替换⼀个样式类名。它只是简单的添加⼀个样式类名到元素上。
对所有匹配的元素可以⼀次添加多个⽤空格隔开的样式类名, 像这样：
$("p").addClass("myClass yourClass");
.addClass() ⽅法允许我们通过传递⼀个⽤来设置样式类名的函数。
$("ul li:last").addClass(function(index) {
return "item-" + index;
});
addClass还可以接受第⼆个参数，下⾯是使⽤例⼦
<!DOCTYPE html>
<html>
<head>
<style>
div { background: white; }
.red { background: red; }
.red.green { background: green; }
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes. It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$("div").addClass(function(index, currentClass) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$("p").text("There is one green div");
}
return addedClass;
});
</script>
</body>
</html>
.removeClass()
移除集合中每个匹配元素上⼀个，多个或全部样式。
如果⼀个样式类名作为⼀个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除。
从所有匹配的每个元素中同时移除多个⽤空格隔开的样式类 ，像这样:
$('p').removeClass('myClass yourClass')
这个⽅法通常和 .addClass() ⼀起使⽤⽤来切换元素的样式, 像这样：
$('p').removeClass('myClass noClass').addClass('yourClass');
这⾥从所有段落删除 myClass 和 noClass 样式类, 然后 yourClass 样式被添加。
removeClass() ⽅法允许我们指定⼀个函数作为参数，返回将要被删除的样式。
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
.toggleClass()
在匹配的元素集合中的每个元素上添加或删除⼀个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）⼀个类。
$('#foo').toggleClass(className, addOrRemove);
等价于
if (addOrRemove) {
$('#foo').addClass(className);
}
else {
$('#foo').removeClass(className);
}
.hasClass()
确定任何⼀个匹配元素是否有被分配给定的（样式）类。
如果匹配元素上有指定的样式，那么.hasClass() ⽅法将返回 true ， 即使元素上可能还有其他样式。 举个例⼦, 给上⽂的HTML加上下⾯的代码将返回 true：
<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo')
DOM属性(下)
.html()
获取集合中第⼀个匹配元素的HTML内容
在⼀个 HTML ⽂档中, 我们可以使⽤ .html() ⽅法来获取任意⼀个元素的内容。 如果选择器匹配多个元素，那么只有第⼀个匹配元素的 HTML 内容会被获取。
$('div.demo-container').html();
html()⽅法还可以设置每⼀个匹配元素的html内容。
我们可以使⽤ .html() 来设置元素的内容，这些元素中的任何内容会完全被新的内容取代。
$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');
.val()
获取匹配的元素集合中第⼀个元素的当前值或设置匹配的元素集合中每个元素的值。主要⽤<input>标签获取内容
$(".input").val();
设置内容
$(".input").val("username")
.attr()
获取匹配的元素集合中的第⼀个元素的属性的值 或 设置每⼀个匹配元素的⼀个或多个属性。
.attr()⽅法只获取第⼀个匹配元素的属性值。
使⽤ jQuery的 .attr() ⽅法得到了⼀个元素的属性值主要有两个好处：
- 方便：它可以直接被 jQuery 对象访问并且链式调用其他 jQuery 方法。
- 浏览器兼容：一些属性在不同浏览器中得到不同的值。甚至在同一个浏览器的不同版本中。
.attr()方法减少了兼容问题。
<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>
<script>
$("img").attr({
src: "images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
</body>
</html>
.removeAttr()
为匹配的元素集合中的每个元素中移除⼀个属性（attribute）。
input.removeAttr("title")
选择器之基础选择器
All Selector ("*")
选择所有元素,此选择器使⽤要慎重，其速度是极其慢的
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
#test {
width: auto; height: auto; background-color: transparent;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="test">
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</div>
<script>
var elementCount = $("#test").find("*").css("border","3px solidred").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>
Class Selector (".class")
选择给定样式类名的所有元素。
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 100px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>
</body>
</html>
Element Selector (“element”)
根据给定（html）标记名称选择所有的元素。
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>$("div").css("border","9px solid red");</script>
</body>
</html>
ID Selector ("#id")
选择⼀个具有给定id属性的单个元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 90px;
height: 90px;
float:left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
</body>
</html>
Child Selector (“parent > child”)
选择所有指定“parent”元素中指定的"child"的直接⼦元素。
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2 </li>
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li>
</ul>
<li>Item 3</li>
</ul>
<script>$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>
选择器之属性选择器
Attribute Selector [name=“value”]
选择指定属性是给定值的元素。
attribute: ⼀个属性名.
value: ⼀个属性值，可以是⼀个不带引号的⼀个单词或带⼀个引号的字符串。
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<label>
<input type="radio" name="newsletter" value="name" />
<span>name</span>
</label>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="age" />
<span>age</span>
</label>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="age" />
<span>sex</span>
</label>
</div>
<script>$('input[value="name"]').next().text("username");</script>
</body>
</html>
Attribute Selector [name|=“value”]
选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟⼀个连字符“-” ）的元素。
<!DOCTYPE html>
<html>
<head>
<style>
a { display: inline-block; }
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>
</body>
</html>
Attribute [name*="value"]
选择指定属性具有包含⼀个给定的⼦字符串的元素。（选择给定的属性是以包含某些值的元素）
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name*="man"]').val('has man in it!');</script>
</body>
</html>
Attribute Selector [name~=“value”]
选择指定属性⽤空格分隔的值中包含⼀个给定值的元素。
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>
</body>
</html>
Attribute Selector [name$=“value”]
选择指定属性是以给定值结尾的元素。这个⽐较是区分⼤⼩写的。
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>
</body>
</html>
Attribute Selector [name^=“value”]
选择指定属性是以给定字符串开始的元素
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>
</body>
</html>
选择器之jQuery扩展
:eq() Selector
在匹配的集合中选择索引值为index的元素。
<!DOCTYPE html>
<html>
<head>
<style>
.foo {
color: blue;
background-color: yellow;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<script>
$( "li:eq(2)" ).addClass( "foo" )
</script>
</body>
</html>
:even Selector
选择所引值为偶数的元素，从 0 开始计数。
特别地注意的是，这是基于0的索引，所以:even选择器是选择第⼀个元素，第三个元素，依此类推在匹配。
<!DOCTYPE html>
<html>
<head>
<style>
table {
background:#eeeeee;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
<script>$("tr:even").css("background-color", "#bbbbff");</script>
</body>
</html>
:odd Selector
选择索引值为奇数元素，从 0 开始计数。
特别地注意的是，这是基于0的索引，所以:odd选择器是选择第⼆个元素，第四个元素，依此类推在匹配。
<!DOCTYPE html>
<html>
<head>
<style>
table {
background:#f3f7f5;
}
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<tr><td>Row with Index #1</td></tr>
<tr><td>Row with Index #2</td></tr>
<tr><td>Row with Index #3</td></tr>
</table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>
</body>
</html>
:first Selector
选择第⼀个匹配的元素。
:first伪类选择器相当于:eq(0)
<!DOCTYPE html>
<html>
<head>
<style>
td { color:blue; font-weight:bold; }
</style>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<script>$("tr:first").css("font-style", "italic");</script>
</body>
</html>
:last Selector
选择最后⼀个匹配的元素。
注意:last选择⼀个过滤和匹配当前jQuery集合在它的最后⼀个单独的元素。
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr><td>First Row</td></tr>
<tr><td>Middle Row</td></tr>
<tr><td>Last Row</td></tr>
</table>
<script>$("tr:last").css({backgroundColor: 'yellow', fontWeight:'bolder'});</script>
</body>
</html>
:gt() Selector
选择匹配集合中所有⼤于给定index（索引值）的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>gt demo</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>
$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
</script>
</body>
</html>
:lt() Selector
选择匹配集合中所有索引值⼩于给定index参数的元素。
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:lt(4)").css("color", "red");</script>
</body>
</html>
CSS
.css()
获取匹配元素集合中的第⼀个元素的样式属性的值 或 设置每个匹配元素的⼀个或多个CSS属性。
- 获取样式值
<!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>
<style>
.container{
margin: 20px;
position: relative;
border: 1px solid red;
overflow: hidden;
clear: both;
}
.box {
width:60px;
height:60px;
margin:5px;
float:left;
padding: 10px;
border: 1px solid red;
}
</style>
<script src="./libs/jquery.min.1.12.4.js"></script>
</head>
<body>
<div class="container">
<span id="result"> </span>
<div class="box" style="background-color:blue;"></div>
<div class="box" style="background-color:rgb(15,99,30);"></div>
<div class="box" style="background-color:#123456;"></div>
<div class="box" style="background-color:#f00;"></div>
</div>
<script>
$(".box").click(function(event){
console.log($(this).css("background-color"));
$(this).css("background-color","yellow");
console.log($(this).height(),$(this).width());
console.log($(this).innerHeight(),$(this).innerWidth());
console.log($(this).outerHeight(),$(this).outerWidth());
console.log($(this).offset().left,$(this).offset().top);
$(this).offset({
top:30
})
console.log($(this).position().left,$(this).position().top);
})
</script>
</body>
</html>
- 设置样式
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
<script>
$("p").mouseover(function () {
$(this).css("color","red");
});
</script>
</body>
</html>
.height()，.width()
- height()
获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值。
<!DOCTYPE html>
<html>
<head>
<style>div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; } </style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>$("div").one('click', function () {
var currentHeight = $(this).height();
console.log(currentHeight)
$(this).height(30).css({cursor:"auto", backgroundColor:"green"});
});
</script>
</body>
</html>
- width()
为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置宽度
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 70px; height: 50px; float:left; margin: 5px;
background: red; cursor: pointer; }
.mod { background: blue; cursor: default; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<script>
(function() {
var modWidth = 50;
$("div").click('click', function () {
var currentWidth = $(this).width();
console.log(currentWidth);
$(this).width(modWidth).addClass("mod");
modWidth -= 8;
});
})();
</script>
</body>
</html>
.innerHeight()，.innerWidth()
为匹配的元素集合中获取第⼀个元素的当前计算⾼度值和宽度值,包括padding，但是不包括border。
<!DOCTYPE html>
<html>
<head>
<style>p { margin:10px;padding:5px;border:2px solid #666; }</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
$("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
</body>
</html>
.offset()
在匹配的元素集合中，获取的第⼀个元素的当前坐标，或设置每⼀个元素的坐标，坐标相对于⽂档。
- 获取位置
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>
</body>
</html>
- 位置设置
<!DOCTYPE html>
<html>
<head>
<style>p { margin-left:10px; } </style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>$("p:last").offset({ top: 10, left: 30 });</script>
</body>
</html>
.outerHeight()，.outerWidth()
获取元素集合中第⼀个元素的当前计算宽度值和⾼度值,包括padding，border和选择性margin。（注：返回⼀个整数（不包含“px”）表示的值，或如果在⼀个空集合上调⽤该⽅法，则会返回 null。）
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" +
p.outerWidth(true) );
</script>
</body>
</html>
.position()
获取匹配元素中第⼀个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的⽽且被定位过的祖先元素 )
.position()⽅法可以取得元素相对于⽗元素的偏移位置。与.offset()不同, .offset()是获得该元素相对于documet的当前坐标 当把⼀个新元素放在同⼀个容器⾥⾯另⼀个元素附近时，⽤.position()更好⽤。
.position()返回⼀个包含 top 和 left属性的对象.
<!DOCTYPE html>
<html>
<head>
<style>
div { padding: 15px;}
p { margin-left:10px; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<p></p>
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>
事件之绑定事件处理器
.on()
在选定的元素上绑定⼀个或多个事件处理函数。
$("#button").on("click", function(event){
console.log("事件处理器")
});
事件委托
$("#ul").on("click", "li", function(event){
console.log($(this).text());
});
.one()
为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执⾏⼀次。
$("#foo").one("click", function() {
console.log("This will be displayed only once.");
});
.off()
移除⼀个事件处理函数。
function aClick() {
console.log("点击事件")
}
$("#button1").click(function () {
$("body").on("click", aClick);
});
$("#button1").click(function () {
$("body").off("click",aClick);
});
事件之⿏标事件
.click()
为 JavaScript 的"click" 事件绑定⼀个处理器，或者触发元素上的 "click" 事件。
$("#target").click(function() {
alert("Handler for .click() called.");
});
.hover()
将⼆个事件函数绑定到匹配元素上，分别当⿏标指针进⼊和离开元素时被执⾏。
$("li").hover(
// 滑⼊
function () {
console.log("滑⼊")
},
// 滑出
function () {
console.log("滑出")
}
);
其他事件
.mouseenter()
.mouseleave()
.mouseout()
.mouseover()
.mousemove()
事件之表单事件
.blur()
为 "blur" 事件绑定⼀个处理函数，或者触发元素上的 "blur" 事件（注：此事件不⽀持冒泡）。
$('#other').click(function() {
$('#target').blur();
});
.focus()
为 JavaScript 的 "focus" 事件绑定⼀个处理函数，或者触发元素上的 "focus" 事件。
$('#target').focus(function() {
alert('Handler for .focus() called.');
});
.change()
为JavaScript 的 "change" 事件绑定⼀个处理函数，或者触发元素上的 "change" 事件。
$('.target').change(function() {
alert('Handler for .change() called.');
});
.submit()
当⽤户试图提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上。
$('#target').submit(function() {
alert('Handler for .submit() called.');
});
遍历
.map()
通过⼀个函数匹配当前集合中的每个元素,产⽣⼀个包含新的jQuery对象。
由于返回值是⼀个jQuery包裹的数组，所以通常会使⽤get()⽅法将其转换成普通的数组。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.6.0.min.js" charset="utf-8"></script>
</head>
<body>
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>
<script type="text/javascript">
$('input').map(function(index) {
console.log(this.id);
})
</script>
</body>
</html>
map()⽅法会返回⼀个新的数组。
.each()
遍历⼀个jQuery对象，为每个匹配元素执⾏⼀个函数
<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( "li" ).each(function( index ) {
console.log( index + ":" + $(this).text());
});
each()返回的是原来的数组，并不会新创建⼀个数组。
.get()
通过jQuery对象获取⼀个对应的DOM元素。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
console.log( $( "li" ).get( 0 ) );
动画
jQuery提供了⼀些列的动画基本⽅法，同时也提供了⾃定动画⽅案.animate()。
.show()
当提供⼀个 duration（持续时间）参数，.show()成为⼀个动画⽅法。.show()⽅法将为匹配元素的宽度，⾼度，以及不透明度，同时进⾏动画操作。
持续时间是以毫秒为单位的，数值越⼤，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
出了上述时间，还可以⾃定时间，接受毫秒为参数
jQuery默认只提供两个缓冲效果：调⽤ swing, 在⼀个恒定的速度进⾏；调⽤ linear. 更多的缓动函数要使⽤的插件
$("button").click(function () {
$("p").show("slow");
});
.hide()
$("#hidr").click(function () {
$("div").hide(1000);
});
.fadeIn()
通过淡⼊的⽅式显示匹配元素。
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
.fadeOut()
通过淡出的⽅式显示匹配元素。
$("p").fadeOut("slow");
.animate()
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
.slideDown()
⽤滑动动画显示⼀个匹配元素。
$("div").slideDown("slow");
.slideUp()
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
.delay()
设置⼀个延时来推迟执⾏队列中后续的项。
$("div.first").slideUp(300).delay(800).fadeIn(400);
.clearQueue()
从列队中移除所有未执⾏的项。
$("#start").click(function () {
$("div").slideUp(300).delay(800).fadeIn(400);
})
$("#stop").click(function () {
var myDiv = $("div");
myDiv.clearQueue();
myDiv.stop();
});
.fadeTo()
调整匹配元素的透明度。
透明度的值为：0～1
其他事件
.fadeToggle()
.finish()
.toggle()
.stop()
5122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
