最好的jQuery示例

jQuery是使用最广泛的JavaScript库，并在所有主要网站的一半以上中使用。座右铭是“少写，多做...！”

jQuery通过提供许多“帮助”功能使Web开发更易于使用。这些可帮助开发人员快速编写DOM（文档对象模型）交互，而无需自己手动编写尽可能多的JavaScript。

jQuery添加了一个附加了所有库方法的全局变量。命名约定是将此全局变量设置为$。通过输入，$.您可以使用所有jQuery方法。

入门

开始使用jQuery的主要方法有两种：

在本地包含jQuery：从jquery.com下载jQuery库并将其包含在您的HTML代码中。
使用CDN：使用CDN（内容交付网络）链接到jQuery库。

<head>
<script src="/jquery/jquery-3.4.1.min.js"></script>
<script src="js/scripts.js"></script></head>

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/scripts.js"></script></head>

选择器

jQuery使用CSS样式选择器选择HTML页面的部分或元素。然后，它使您可以使用jQuery方法或函数对元素进行操作。

要使用以下选择器之一，请在其后输入美元符号和括号：$()。这是该jQuery()功能的简写。在括号内，添加要选择的元素。您可以使用单引号或双引号。此后，在圆括号和要使用的方法后面添加一个点。

在jQuery中，类和ID选择器类似于CSS中的选择器。

这是一个jQuery方法的示例，该方法选择所有段落元素，并向其中添加“选择”类：

<p>This is a paragraph selected by a jQuery method.</p><p>This is also a paragraph selected by a jQuery method.</p>$("p").addClass("selected");

在jQuery中，类和ID选择器与CSS中的相同。如果要选择具有特定类别的元素，请使用点（.）和类别名称。如果要选择具有特定ID的元素，请使用井号（#）和ID名称。请注意，HTML不区分大小写，因此，最佳做法是将HTML标记和CSS选择器保持小写。

按班级选择

如果要选择具有特定类的元素，请使用点（。）和类名称。

<p class="pWithClass">Paragraph with a class.</p>

$(".pWithClass").css("color", "blue"); // colors the text blue

您还可以将类选择器与标签名称结合使用，以更加具体。

<ul class="wishList">My Wish List</ul>`<br>

$("ul.wishList").append("<li>New blender</li>");

通过ID选择

如果要选择具有特定ID值的元素，请使用井号（＃）和ID名称。

<li id="liWithID">List item with an ID.</li>

$("#liWithID").replaceWith("<p>Socks</p>");

与类选择器一样，它也可以与标签名结合使用。

<h1 id="headline">News Headline</h1>

$("h1#headline").css("font-size", "2em");

按属性值选择

如果要选择具有特定属性的元素，请使用([attributeName="value"])。

<input name="myInput" />

$("[name='myInput']").value("Test"); // sets input value to "Test"

您还可以将属性选择器与标签名称结合使用，以更加具体。

<input name="myElement" />`<br><button name="myElement">Button</button>

$("input[name='myElement']").remove(); // removes the input field not the button

充当过滤器的选择器

还有一些选择器充当过滤器-它们通常以冒号开头。例如，:first选择器选择作为其父级的第一个子级的元素。这是带有一些列表项的无序列表的示例。列表下方的jQuery选择器选择列表中的第一个<li>元素（“一个”列表项），然后使用.css方法将文本变为绿色。

 <ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
 </ul>

$("li:first").css("color", "green");

属性选择器

有一些选择器返回与某些属性组合匹配的元素，例如Attribute contains，Attribute结束，Attribute开头等。这是带有一些列表项的无序列表的示例。列表下方的jQuery选择器选择列表中的<li>元素-“一个”列表项，因为它具有data*属性"India"作为其值-然后使用该.css方法将文本变为绿色。

 <ul>
<li data-country="India">Mumbai</li>
<li data-country="China">Beijing</li>
<li data-country="United States">New York</li>
 </ul>

$("li[data-country='India']").css("color", "green");

另一个过滤选择器，:contains(text)选择具有特定文本的元素。将要匹配的文本放在括号中。这是一个包含两个段落的示例。jQuery选择器使用单词“ Moto”，并将其颜色更改为黄色。

<p>Hello</p>
<p>World</p>

$("p:contains('World')").css("color", "yellow");

同样，:last选择器选择作为其父级的最后一个子级的元素。下面的jQuery选择器选择<li>列表中的最后一个元素（“三”列表项），然后使用.css方法将文本变为黄色。

$("li:last").css("color", "yellow");

注意：在jQuery选择器中，World用单引号引起来，因为它已经在一对双引号内。始终在双引号内使用单引号，以避免无意中结束字符串。

多个选择器

在jQuery中，可以使用多个选择器通过一行代码将相同的更改应用于多个元素。您可以通过用逗号分隔不同的ID来做到这一点。例如，如果要将ID为cat，dog和rat的三个元素的背景色设置为红色，只需执行以下操作：

$("#cat,#dog,#rat").css("background-color","red");

HTML方法

jQuery .html()方法获取HTML元素的内容或设置HTML元素的内容。

得到

要返回HTML元素的内容，请使用以下语法：

$('selector').html();

例如：

$('#example').html();

设置

要设置HTML元素的内容，请使用以下语法：

$('selector').html(content);

例如：

$('p').html('Hello World!');

这样会将所有<p>元素的内容设置为Hello World！

警告

.html()方法用于以HTML格式设置元素的内容。如果内容由用户提供，则可能很危险。.text()如果您需要将非HTML字符串设置为内容，请考虑使用method。

CSS方法

jQuery .css()方法获取匹配元素集中第一个元素的计算样式属性值，或者为每个匹配元素设置一个或多个CSS属性。

得到

要返回指定CSS属性的值，请使用以下语法：

$(selector).css(propertyName);

例：

$('#element').css('background');

注意：这里我们可以使用任何CSS选择器，例如：element（HTML标记选择器）、. element（类选择器），＃element（ID选择器）。

设置

要设置指定的CSS属性，请使用以下语法：

$(selector).css(propertyName,value);

例：

$('#element').css('background','red');

要设置多个CSS属性，您必须使用对象文字语法，如下所示：

$('#element').css({
'background': 'gray',
'color': 'white'
});

如果要更改标记有多个单词的属性，请参考以下示例：

改变background-color元素

$('#element').css('background-color', 'gray');

点击方式

单击元素时，jQuery Click方法将触发一个函数。该函数称为“处理程序”，因为它处理click事件。函数可以影响使用jQuery Click方法绑定到单击的HTML元素，或者它们可以完全更改其他内容。最常用的形式是：

$("#clickMe").click(handler)

click方法将处理函数用作参数，并在每次#clickMe单击元素时执行该函数。处理程序函数接收一个称为eventObject的参数，该参数可用于控制操作。

例子

此代码显示用户单击按钮时的警报：

<button id="alert">Click Here</button>

$("#alert").click(function () {
alert("Hi! I'm an alert");});

该的EventObject有内建的方法，包括preventDefault()，这不正是它说-停止元素的默认事件。在这里，我们将锚标记用作链接：

<a id="myLink" href="www.google.com">Link to Google</a>

$("#myLink").click(function (event) {
event.preventDefault();});

使用click方法的更多方式

处理函数还可以接受对象形式的其他数据：

jqueryElement.click(usefulInfo, handler)

数据可以是任何类型。

$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
alert(event.data.firstWord);
alert(event.data.secondWord);});

在没有处理函数的情况下调用click方法会触发click事件：

$("#alert").click(function () {
alert("Hi! I'm an alert");});$("#alert").click();

现在，无论页面何时加载，当我们进入或重新加载页面并显示分配的警报时，都会触发click事件。

另外，您应该更喜欢使用.on("click",...)，.click(...)因为前者可以使用更少的内存并可以为动态添加的元素工作。

常见错误

click事件仅绑定到绑定时当前在DOM中的元素，因此之后添加的任何元素都不会绑定。要绑定DOM中的所有元素，即使它们将在以后创建，请使用.on()方法。

例如，此单击方法示例：

$("element").click(function() {
alert("I've been clicked!");});

可以在方法示例中更改为：

$(document).on("click", "element", function() {
alert("I've been clicked!");});

从Click事件获取元素

这适用于jQuery和普通JavaScript，但是如果将事件触发器设置为以类为目标，则可以使用this关键字来获取触发该元素的特定元素。

jQuery碰巧使遍历DOM非常容易（并且对多浏览器友好），从而可以找到该元素的父母，兄弟姐妹和孩子。

假设我有一个充满按钮的表，并且我想定位按钮所在的行，我可以简单地将其包装this在jQuery选择器中，然后得到其parent及其父对象，parent如下所示：

$( document ).on("click", ".myCustomBtnClassInATable", function () {
var myTableCell = $(this).parent();
var myTableRow = myTableCell.parent();
var myTableBody = myTableRow.parent();
var myTable = myTableBody.parent();

//you can also chain these all together to get what you want in one line
var myTableBody = $(this).parent().parent().parent();});

签出click事件的事件数据也很有趣，您可以通过在click事件中将任何变量名传递给函数来获取。您很可能会看到一个e或event在大多数情况下：

$( document ).on("click", ".myCustomBtnClassInATable", function (e) { 
//find out more information about the event variable in the console
console.log(e);});

鼠标按下方法

当按下鼠标左键时，发生mousedown事件。要触发所选元素的mousedown事件，请使用以下语法：$(selector).mousedown();

但是，大多数情况下，mousedown方法与mousedown事件附带的函数一起使用。语法如下：$(selector).mousedown(function);例如：

$(#example).mousedown(function(){
 alert("Example was clicked");});

单击#example时，该代码将使页面警报“单击了Example”。

悬停方法

jQuery悬停方法是mouseenter和mouseleave事件的组合。语法是这样的：

$(selector).hover(inFunction, outFunction);

mouseenter事件发生时，第一个函数inFunction将运行。第二个功能是可选的，但将在mouseleave事件发生时运行。如果仅指定了一个功能，则另一个功能将针对mouseenter和mouseleave事件运行。下面是一个更具体的示例。

$("p").hover(function(){
$(this).css("background-color", "yellow");}, function(){
$(this).css("background-color", "pink");});

因此，这意味着将鼠标悬停在段落上会将其背景颜色更改为黄色，而将相反的颜色更改回粉红色。

动画方法

jQuery的动画方法使仅使用几行代码即可轻松创建简单的动画。基本结构如下：

$(".selector").animate(properties, duration, callbackFunction());

对于自properties变量，您需要传递一个JavaScript对象，该对象具有要设置为动画的CSS属性作为键，而要设置要动画的值作为值。对于duration，您需要输入动画应花费的时间（以毫秒为单位）。callbackFunction()一旦动画结束，将执行。

例

一个简单的示例如下所示：

$(".awesome-animation").animate({
	opacity: 1,
	bottom: += 15}, 1000, function() {
	$(".different-element").hide();});

隐藏方法

.hide（）以其最简单的形式立即隐藏匹配的元素，没有动画。例如：

$(".myclass").hide()

将隐藏所有类为myclass的元素。可以使用任何jQuery选择器。

.hide（）作为动画方法

由于其选项，.hide（）可以同时为匹配元素的宽度，高度和不透明度设置动画。

可以以毫秒为单位提供持续时间，也可以使用文字（慢（600毫秒）和快（200毫秒）”来提供。例如：
动画完成后，每个匹配的元素都可以指定一个函数来调用。此回调主要用于将不同的动画链接在一起。例如

$("#myobject").hide(800)

$("p").hide( "slow", function() {
$(".titles").hide("fast");
alert("No more text!");});

显示方式

.show（）以其最简单的形式立即显示匹配的元素，没有动画。例如：

$(".myclass").show();

将显示所有类为myclass的元素。可以使用任何jQuery选择器。

但是，此方法不会!important以CSS样式覆盖，例如display: none !important。

.show（）作为动画方法

由于它的选项，.show（）可以同时为匹配元素的宽度，高度和不透明度设置动画。

可以以毫秒为单位提供持续时间，也可以使用文字（慢（600毫秒）和快（200毫秒）”来提供。例如：
动画完成后，每个匹配的元素都可以指定一个函数来调用。例如

$("#myobject").show("slow");

$("#title").show( "slow", function() {
$("p").show("fast");});

jQuery Toggle方法

要显示/隐藏元素，您可以使用toggle()方法。如果元素被隐藏，toggle()将显示它，反之亦然。用法：

$(".myclass").toggle()

向下滑动方法

此方法可对匹配元素的高度进行动画处理。这会使页面的下部向下滑动，为显示的项目腾出空间。用法：

$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms.$(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms.$(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms.$(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.

加载方式

load（）方法从服务器加载数据，并将返回的数据放入选定的元素。

注意：还有一个称为Load的jQuery Event方法。哪个被调用取决于参数。

例

$("button").click(function(){
$("#div1").load("demo_test.txt");});

链式

jQuery链允许您在同一jQuery选择上执行多个方法，所有这些都在一行上。

链接使我们能够转换多行语句：

$('#someElement').removeClass('classA');$('#someElement').addClass('classB');

变成单个语句：

$('#someElement').removeClass('classA').addClass('classB');

Ajax获取方法

发送异步http GET请求以从服务器加载数据。其一般形式为：

jQuery.get( url [, data ] [, success ] [, dataType ] )

url：唯一的必需参数。此字符串包含将请求发送到的地址。如果未指定其他参数，则将忽略返回的数据。
data：随请求发送到服务器的普通对象或字符串。
success：如果请求成功，则执行一个回调函数。它以返回的数据作为参数。它还传递了响应的文本状态。
dataType：服务器期望的数据类型。默认值为Intelligent Guess（xml，json，脚本，文本，html）。如果提供此参数，则还必须提供成功回调。

例子

resource.json来自服务器的请求，发送其他数据，并忽略返回的结果：

$.get('http://example.com/resource.json', {category:'client', type:'premium'});

resource.json来自服务器的请求，发送其他数据，并处理返回的响应（json格式）：

$.get('http://example.com/resource.json', {category:'client', type:'premium'}, function(response) {
 alert("success");
 $("#mypar").html(response.amount);});

但是，$.get没有提供任何处理错误的方法。

上面的示例（带有错误处理）也可以写成：

$.get('http://example.com/resource.json', {category:'client', type:'premium'})
 .done(function(response) {
 alert("success");
 $("#mypar").html(response.amount);
 })
 .fail(function(error) {
 alert("error");
 $("#mypar").html(error.statusText);
 });

等效于Ajax GET

$.get( url [, data ] [, success ] [, dataType ] ) 是Ajax的简写功能，等效于：

$.ajax({
 url: url,
 data: data,
 success: success,
 dataType: dataType});

Ajax Post方法

发送异步http POST请求以从服务器加载数据。其一般形式为：

jQuery.post( url [, data ] [, success ] [, dataType ] )

url：这是唯一的必需参数。此字符串包含向其发送请求的地址。如果未指定其他参数，则返回的数据将被忽略
data：与请求一起发送到服务器的普通对象或字符串。
success：如果请求成功，则执行的回调函数。它以返回的数据作为参数。它还传递了响应的文本状态。
dataType：服务器期望的数据类型。默认值为Intelligent Guess（xml，json，脚本，文本，html）。如果提供了此参数，则还必须提供成功回调。

例子

$.post('http://example.com/form.php', {category:'client', type:'premium'});

form.php来自服务器的请求，发送其他数据并忽略返回的结果

$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){ 
alert("success");
$("#mypar").html(response.amount);});

form.php来自服务器的请求，发送其他数据并处理返回的响应（json格式）。该示例可以用以下格式编写：

$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
alert("success");
$("#mypar").html(response.amount);});

以下示例使用Ajax发布表单并将结果放入div中

<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body>
 <form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search"></form><!-- the result of the search will be rendered inside this div --><div id="result"></div>
 <script>// Attach a submit handler to the form$( "#searchForm" ).submit(function( event ) {
 
// Stop form from submitting normally
event.preventDefault();
 
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
 
// Send the data using post
var posting = $.post( url, { s: term } );
 
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});});</script>
 </body></html>

以下示例使用github API使用jQuery.ajax（）获取用户的存储库列表，并将结果放入div中

<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery Get demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body>
 <form id="userForm">
<input type="text" name="username" placeholder="Enter gitHub User name">
<input type="submit" value="Search"></form><!-- the result of the search will be rendered inside this div --><div id="result"></div>
 <script>// Attach a submit handler to the form$( "#userForm" ).submit(function( event ) {
 
// Stop form from submitting normally
event.preventDefault();
 
// Get some values from elements on the page:
var $form = $( this ),
username = $form.find( "input[name='username']" ).val(),
url = "https://api.github.com/users/"+username+"/repos";
 
// Send the data using post
var posting = $.post( url, { s: term } );
 
//Ajax Function to send a get request
$.ajax({
type: "GET",
url: url,
dataType:"jsonp"
success: function(response){
//if request if made successfully then the response represent the data
$( "#result" ).empty().append( response );
}
});
});</script>
 </body></html>

等效于Ajax POST

$.post( url [, data ] [, success ] [, dataType ] ) 是Ajax的简写功能，等效于：

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType});

2023-03-22 10:04:19

新人小程序+APP定制199元起

发放福利，助力中小企业发展，真正在互联网中受益

点击询问定制

广告服务展示