您的位置:首页 > Web前端 > JQuery

jquery学习进阶使用

2016-07-12 00:00 471 查看
Jquery的遍历

Jquery的遍历-获取父节点

举例:

<div>div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

<span>span</span>

</li>

</ul>

</div>

parent() 方法返回被选元素的直接父元素。$("span").parent();获得li

parents() 方法返回被选元素的所有祖先元素(包括父节点和html),它一路向上直到文档的根元素 (<html>)。$("span"). parents (); 获得 html-body-div-ul-li

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

$("span").parentsUntil("div");返回ul-li

Jquery的遍历-获取同级节点

siblings() 方法返回被选元素的所有同胞元素。

next() 方法返回被选元素的下一个同胞元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 (不包括h2和h6)

$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});意思是说h3-h4-h5加上红线外边框

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

Jquery的遍历-过滤

first() 方法返回被选元素的首个元素。$("div p").first();返回div的节点

last() 方法返回被选元素的最后一个元素。 $("div p").last();返回p的节点

eq() 方法返回被选元素中带有指定索引号的元素。$("p").eq(1);返回的是从body上面向下,以0为索引的第二个p元素的节点

也就是说,第二个p标签的节点

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。$("p").filter(".test");返回带有test类的p标签的节点

not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。 $("p").not(".test");返回p标签不带test的类的节点

Jquery的遍历-AJAX技术

在不加载全部网页的情况下更新部分网页部分的内容 如 视频网站

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据:

Jquery noConfict()方法

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

<script>

$.noConflict();

jQuery(document).ready(function(){

jQuery("button").click(function(){

jQuery("p").text("jQuery 仍在运行!");

});

});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: