Jquery中获取内容和属性、删除元素、添加元素、jQuery遍历----------(遍历、祖先、后代、同胞、过滤)、jQuery - AJAX 简介

科技2022-08-05 112

Jquery中获取内容和属性

Jquery拥有可操作HTML元素和属性的强大方法。常用的方法有：

text()/设置或返沪所选元素的文本内容html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记）val()/返回表单字段的值（理解为value的简写）attr()/设置或返回所选属性的值 text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记） <!DOMTYPE> <html> <mete charset="utf-8"/> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("#btn1").click(function(){ alert($("#test1").text());}); $("#btn2").click(function(){ alert($("#test1").html());}); }); </script> </head> <body> <p id="test1">这是个测试的<b>文本</b>.</p> <button id="btn1">显示文本（text)</button> <button id="btn2">显示html（html)</button> </body> </html>

text() html() val()/返回表单字段的值（理解为value的简写）

<!DOMTYPE> <html> <mete charset="utf-8"/> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("#btn1").click(function(){ alert($("#test1").val());}); }); </script> </head> <body> <p ><input id="test1" value="ccc"/></p> <button id="btn1">显示输入值</button> </body> </html>

执行val，显示出输入框的值如上所示，改val()方法显示出了输入框的值

attr()/设置或返回所选属性的值

这个方法，相对前面三个方法来说，相对复杂一点，可以根据参数的不同，分为以下三个方法：（1）attr(属性名）返回被选元素中属性的值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("button").click(function(){ alert($("#t1").attr("class")); }); }); </script> </head> <body> <p id="t1" class="t2">显示p中的class值</p> <button>点击</button> </body> </html>

(2)attr(属性名，属性值）设置被选元素中属性名的属性值属性值可以为数值，也可以为函数返回值即可

<!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("#btn1").click(function(){ $("#t1").attr("class","modifyClass"); alert($("#t1").attr("class")); }); $("#btn2").click(function(){ $("#t1").attr("class",function(n,v){ return v+"modify";}); alert($("#t1").attr("class")); }); }); </script> </head> <body> <p id="t1" class="t2">显示p中的class值</p> <button id="btn1">点击1</button> <button id="btn2">点击2</button> </body> </html>

点击1：点击2： (3)attr({属性名:值，属性名:值})，当设置多个属性的时候，以键值对的形式进行赋值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("#btn1").click(function(){ $("#t1").attr({class:"modifyClass",width:"300"}); alert($("#t1").attr("width")); }); }); </script> </head> <body> <p id="t1" class="t2" width="200">显示p中的class值</p> <button id="btn1">点击1</button> </body> </html>

jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 这是 div 中的一些文本。 <p>这是在 div 中的一个段落。</p> <p>这是在 div 中的另外一个段落。</p> </div> <br> <button>移除div元素</button> </body> </html>

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 这是 div 中的一些文本。 <p>这是在 div 中的一个段落。</p> <p>这是在 div 中的另外一个段落。</p> </div> <br> <button>清空div元素</button> </body> </html>

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的例子删除 class=“italic” 的所有

元素：实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p class="italic"><i>这是另外一个段落。</i></p> <p class="italic"><i>这是另外一个段落。</i></p> <button>移除所有 class="italic" 的 p 元素。</button> </body> </html>

jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>追加文本</b>。"); }); $("#btn2").click(function(){ $("ol").append("<li>追加列表项</li>"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加列表项</button> </body> </html>

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>在开头追加文本</b>。 "); }); $("#btn2").click(function(){ $("ol").prepend("<li>在开头添加列表项</li>"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <ol> <li>列表 1</li> <li>列表 2</li> <li>列表 3</li> </ol> <button id="btn1">添加文本</button> <button id="btn2">添加列表项</button> </body> </html> ```## 标题通过 append() 和 prepend() 方法添加若干新元素在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）： **实例** ```javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> function appendText(){ var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } </script> </head> <body> <p>这是一个段落。</p> <button onclick="appendText()">追加文本</button> </body> </html>

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。jQuery before() 方法在被选元素之前插入内容。实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>之前</b>"); }); $("#btn2").click(function(){ $("img").after("<i>之后</i>"); }); }); </script> </head> <body> <img src="/images/logo.png" > <br><br> <button id="btn1">之前插入</button> <button id="btn2">之后插入</button> </body> </html>

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 } </script> </head> <body> <img src="/images/logo2.png" > <br><br> <button onclick="afterText()">之后插入</button> </body> </html>

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。 jQuery AJAX 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div> <button>获取外部内容</button> </body> </html>

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

您可以在我们的 jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。

您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery遍历----------(遍历、祖先、后代、同胞、过滤)

jQuery 遍历

jQuery 遍历，以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

jQuery 遍历 - 祖先

祖先是父、祖父或曾祖父等等。通过 jQuery，能够向上遍历 DOM 树，以查找元素的祖先。这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent()、parents()、parentsUntil()。 parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个元素的的直接父元素：

$(document).ready(function(){ $("span").parent(); });

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

下面的例子返回所有元素的所有祖先：

$(document).ready(function(){ $("span").parents(); });

也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有元素的所有祖先，并且它是

元素：

$(document).ready(function(){ $("span").parents("ul"); });

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于与

元素之间的所有祖先元素：

$(document).ready(function(){ $("span").parentsUntil("div"); });

jQuery 遍历 - 后代

后代是子、孙、曾孙等等。通过 jQuery，能够向下遍历 DOM 树，以查找元素的后代。下面是两个用于向下遍历 DOM 树的 jQuery 方法：children()、find()。

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个

元素的所有直接子元素：

$(document).ready(function(){ $("div").children(); });

也可以使用可选参数来过滤对子元素的搜索。下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div>的直接子元素

$(document).ready(function(){ $("div").children("p.1"); });

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function(){ $("div").find("span"); });

下面的例子返回

的所有后代：

$(document).ready(function(){ $("div").find("*"); });

jQuery 遍历 - 同胞(siblings)

同胞拥有相同的父元素。通过 jQuery，能够在 DOM 树中遍历元素的同胞元素。有许多有用的方法可以用在 DOM 树进行水平遍历：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()。 siblings() 方法返回被选元素的所有同胞元素。下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){ $("h2").siblings(); });

也可以使用可选参数来过滤对同胞元素的搜索。下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){ $("h2").siblings("p"); });

next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function(){ $("h2").next(); });

nextAll() 方法返回被选元素的所有跟随的同胞元素。下面的例子返回 <h2> 的所有跟随的同胞元素：

$(document).ready(function(){ $("h2").nextAll(); });

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function(){ $("h2").nextUntil("h6"); });

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

jQuery 遍历- 过滤

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

$(document).ready(function(){ $("div p").first(); });

last() 方法返回被选元素的最后一个元素。下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function(){ $("div p").last(); });

eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(document).ready(function(){ $("p").eq(1); });

filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。下面的例子返回带有类名 “url” 的所有 <p> 元素：

$(document).ready(function(){ $("p").filter(".url"); });

not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。下面的例子返回不带有类名 “url” 的所有 <p> 元素：

$(document).ready(function(){ $("p").not(".url"); });

Processed: 0.019, SQL: 8