jQuery基础知识04

最新推荐文章于 2022-08-07 09:49:02 发布

Fallen一down

最新推荐文章于 2022-08-07 09:49:02 发布

阅读量205

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/Fallen__down/article/details/102976330

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中css()方法的使用，包括获取和设置CSS属性，以及设置多个属性。接着，文章阐述了向上遍历DOM树的parent()、parents()和parentsUntil()方法，向下遍历的children()、find()以及水平遍历的siblings()、next()、nextAll()、nextUntil()等方法。此外，还讲解了如何缩小搜索范围的first()、last()、eq()、filter()和not()方法，以及jQuery的load()方法和HTTP请求的GET与POST区别。

摘要由CSDN通过智能技术生成

1.jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：
css(“propertyname”);
下面的例子将返回首个匹配元素的 background-color 值：
实例
$(“p”).css(“background-color”);

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：
css(“propertyname”,“value”);
下面的例子将为所有匹配元素设置 background-color 值：
实例
$(“p”).css(“background-color”,“yellow”);

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：
css({“propertyname”:“value”,“propertyname”:“value”,…});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});

2.向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个元素的的直接父元素：
实例
$(document).ready(function(){ $(“span”).parent(); });

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (< html >)。
下面的例子返回所有元素的所有祖先：
实例
$(document).ready(function(){ $(“span”).parents(); });

您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有元素的所有祖先，并且它是

元素：
实例
$(document).ready(function(){ $(“span”).parents(“ul”); });//遍历+选择器
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于与

元素之间的所有祖先元素：
实例
$(document).ready(function(){ $(“span”).parentsUntil(“div”); });

3.向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()
find()

jQuery children() 方法

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

元素的所有直接子元素：
实例
$(document).ready(function(){ $(“div”).children(); });
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有

元素，并且它们是

的直接子元素：
实例
$(document).ready(function(){ $(“div”).children(“p.1”); });

jQuery find() 方法

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

后代的所有元素：
实例
$(document).ready(function(){ $(“div”).find(“span”); });
下面的例子返回

的所有后代：
实例
$(document).ready(function(){ $(“div”).find("*"); });
(20)在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 < h2> 的所有同胞元素：
实例
$(document).ready(function(){ $(“h2”).siblings(); });

您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 < h2> 的同胞元素的所有 < p> 元素：
实例
$(document).ready(function(){ $(“h2”).siblings(“p”); });

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 < h2> 的下一个同胞元素：
实例
$(document).ready(function(){ $(“h2”).next(); });

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 < h2> 的所有跟随的同胞元素：
实例
$(document).ready(function(){ $(“h2”).nextAll(); });

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 < h2> 与 < h6> 元素之间的所有同胞元素：
实例
$(document).ready(function(){ $(“h2”).nextUntil(“h6”); });

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

4.缩小搜索元素的范围

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

jQuery first() 方法

first() 方法返回被选元素的首个元素。
下面的例子选取首个 < div> 元素内部的第一个 < p> 元素：
实例
$(document).ready(function(){ $(“div p”).first(); });

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 < div> 元素中的最后一个 < p> 元素：
实例
$(document).ready(function(){ $(“div p”).last(); });

jQuery eq() 方法

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

jQuery filter() 方法

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

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 “url” 的所有 < p> 元素：
实例
$(document).ready(function(){ $(“p”).not(".url"); });

AJAX

5.jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件（“demo_test.txt”）的内容：
< h2>jQuery AJAX 是个非常棒的功能！</h 2> < p id=“p1”>这是段落的一些文本。< /p>
下面的例子会把文件 “demo_test.txt” 的内容加载到指定的 < div> 元素中：
实例
$("#div1").load(“demo_test.txt”);

也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的 < div> 元素中：
实例
$("#div1").load(“demo_test.txt #p1”);

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
实例
$(“button”).click(function(){ $("#div1").load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){ if(statusTxt==“success”) alert(“外部内容加载成功!”); if(statusTxt==“error”) alert("Error: “+xhr.status+”: "+xhr.statusText); }); });

6.HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$(“button”).click(function(){ $.get(“demo_test.php”,function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });

$.get() 的第一个参数是我们希望请求的 URL（“demo_test.php”）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示：这个 PHP 文件 (“demo_test.php”) 类似这样：
demo_test.php 文件代码:

<?php echo '这是个从PHP文件中读取的数据。'; ?>
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$(“button”).click(function(){ $.post("/try/ajax/demo_test_post.php", { name:“菜鸟教程”, url:“http://www.runoob.com” }, function(data,status){ alert(“数据: \n” + data + "\n状态: " + status); }); });

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。
然后我们连同请求（name 和 url）一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示：这个 PHP 文件 (“demo_test_post.php”) 类似这样：
demo_test_post.php 文件代码:

<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo " \ n"; echo 'URL 地址: ' .$url; ?>

7.jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
当然，您仍然可以通过全名替代简写的方式来使用 jQuery：
实例
$.noConflict(); jQuery(document).ready(function(){ jQuery(“button”).click(function(){ jQuery(“p”).text(“jQuery 仍然在工作!”); }); });

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：
实例
var jq = $.noConflict(); jq(document).ready(function(){ jq(“button”).click(function(){ jq(“p”).text(“jQuery 仍然在工作!”); }); });

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：
实例
.noConflict();jQuery(document).ready(function( .noConflict(); jQuery(document).ready(function(.noConflict();jQuery(document).ready(function(){ $(“button”).click(function(){ $(“p”).text(“jQuery 仍然在工作!”); }); });