jQuery如何选择出文章文章如何生成链接地址址?

jQuery动态修改超链接地址的方法
转载 & & 作者:niuniu
这篇文章主要介绍了jQuery动态修改超链接地址的方法,实例分析了jQuery中attr方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jQuery动态修改超链接地址的方法。分享给大家供大家参考。具体实现方法如下:
html代码如下:
&a id="jb51" href="http://www.haotu.net"&好图网&/a&
通过jQuery更换此超级链接的链接地址为http://www.jb51.net,代码如下:
$("button").click(function(){
$("#jb51").attr("href","http://www.jb51.net"));
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具您的位置: >>
  1. 如何创建嵌套的过滤器
//允许你减少集合中的匹配元素的过滤器,
//只剩下那些与给定的选择器匹配的部分。在这种情况下,
//查询删除了任何没(:not)有(:has)
//包含class为&selected&(.selected)的子节点。
.filter(":not(:has(.selected))")
  2. 如何重用元素搜索
var allItems = $("div.item");
var keepList = $("div#container1 div.item");
//现在你可以继续使用这些jQuery对象来工作了。例如,
//基于复选框裁剪&keep list&,复选框的名称
&DIV&class names:x
$(formToLookAt + " input:checked").each(function() {
keepList = keepList.filter("." + $(this).attr("name"));
  3. 任何使用has()来检查某个元素是否包含某个类或是元素
//jQuery 1.4.*包含了对这一has方法的支持。该方法找出
//某个元素是否包含了其他另一个元素类或是其他任何的
//你正在查找并要在其之上进行操作的东东。
$("input").has(".email").addClass("email_icon");
  4. 如何使用jQuery来切换样式表
//找出你希望切换的媒体类型(media-type),然后把href设置成新的样式表。
$('link[media='screen']').attr('href', 'Alternative.css'); &
  5. 如何限制选择范围(基于优化目的)
//尽可能使用标签名来作为类名的前缀,
//这样jQuery就不需要花费更多的时间来搜索
//你想要的元素。还要记住的一点是,
//针对于你的页面上的元素的操作越具体化,
//就越能降低执行和搜索的时间。
var in_stock = $('#shopping_cart_items input.is_in_stock');
&ul id="shopping_cart_items"&
&li&&input type="radio" value="Item-X" name="item" class="is_in_stock" /&Item X&/li&
&li&&input type="radio" value="Item-Y" name="item" class="3-5_days" /&Item Y&/li&
&li&&input type="radio" value="Item-Z" name="item" class="unknown" /&Item Z&/li&
  6. 如何正确地使用ToggleClass
//切换(toggle)类允许你根据某个类的
//是否存在来添加或是删除该类。
//这种情况下有些开发者使用:
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允许你使用下面的语句来很容易地做到这一点
a.toggleClass('blueButton');
  7. 如何设置IE特有的功能
if ($.browser.msie) {
// Internet Explorer其实不那么好用
  8. 如何使用jQuery来代替一个元素
$('#thatdiv').replaceWith('fnuh');
  9. 如何验证某个元素是否为空
if ($('#keks').html()) {
//什么都没有找到;
  10. 如何从一个未排序的集合中找出某个元素的索引号
$("ul & li").click(function () {
var index = $(this).prevAll().
  11. 如何把函数绑定到事件上
$('#foo').bind('click', function () {
alert('User clicked on "foo."');
  12. 如何追加或是添加html到元素中
$('#lal').append('sometext');
  13. 在创建元素时,如何使用对象字面量(literal)来定义属性
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
  14. 如何使用多个属性来进行过滤
//在使用许多相类似的有着不同类型的input元素时,
//这种基于精确度的方法很有用
var elements = $('#someid input[type=sometype][value=somevalue]').get();
  15. 如何使用jQuery来预加载图像
jQuery.preloadImages = function () {
for (var i = 0; i & arguments. i++) {
$("&img /&").attr('src', arguments[i]);
$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
  16. 如何为任何与选择器相匹配的元素设置事件处理程序
$('button.someClass').live('click', someFunction);
//注意,在jQuery 1.4.2中,delegate和undelegate选项
//被引入代替live,因为它们提供了更好的上下文支持
//例如,就table来说,以前你会用
$("table").each(function () {
$("td", this).live("hover", function () {
$(this).toggleClass("hover");
$("table").delegate("td", "hover", function () {
$(this).toggleClass("hover");
  17. 如何找到一个已经被选中的option元素
$('#someElement').find('option:selected');
  18. 如何隐藏一个包含了某个值文本的元素
$("p.value:contains('thetextvalue')").hide();
  19. 如果自动滚动到页面中的某区域
jQuery.fn.autoscroll = function(selector) {
$('html,body').animate(
{scrollTop: $(selector).offset().top},
//然后像这样来滚动到你希望去到的class/area上。
$('.area_name').autoscroll(); &
  20. 如何检测各种浏览器
if( $.browser.safari)
//检测Safari
if ($.browser.msie && $.browser.version & 6 )//检测IE6及之后版本
if ($.browser.msie && $.browser.version &= 6 )
//检测IE6及之前版本
if ($.browser.mozilla && $.browser.version &= '1.8' )
//检测FireFox 2及之后版本
  21. 如何替换串中的词
var el = $('#id');
el.html(el.html().replace(/word/ig, ''));
  22. 如何禁用右键单击上下文菜单
$(document).bind('contextmenu', function (e) {
return false;
  23. 如何定义一个定制的选择器
$.expr[':'].mycustomselector = function(element, index, meta, stack){
// element- 一个DOM元素
// index & 栈中的当前循环索引
// meta & 有关选择器的元数据
// stack & 要循环的所有元素的栈
// 如果包含了当前元素就返回true
// 如果不包含当前元素就返回false };
// 定制选择器的用法:
$('.someClasses:test').doSomething();
  24. 如何检查某个元素是否存在
if ($('#someDiv').length) {
//你妹,终于找到了
  25. 如何使用jQuery来检测右键和左键的鼠标单击两种情况
$("#someelement").live('click', function (e) {
if ((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)) {
alert("Left Mouse Button Clicked");
} else if (e.button == 2) {
alert("Right Mouse Button Clicked");
  26. 如何显示或是删除input域中的默认值
//这段代码展示了在用户未输入值时,
//如何在文本类型的input域中保留
//一个默认值
wap_val = [];
$(".swap").each(function (i) {
wap_val[i] = $(this).val();
$(this).focusin(function () {
if ($(this).val() == swap_val[i]) {
$(this).val("");
}).focusout(function () {
if ($.trim($(this).val()) == "") {
$(this).val(swap_val[i]);
  27. 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本)
//这是1.3.2中我们使用setTimeout来实现的方式
setTimeout(function () {
$('.mydiv').hide('blind', {}, 500)
//而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠)
$(".mydiv").delay(5000).hide('blind', {}, 500);
  28. 如何把已创建的元素动态地添加到DOM中
var newDiv = $('');
newDiv.attr('id', 'myNewDiv').appendTo('body');
  29. 如何限制&Text-Area&域中的字符的个数
jQuery.fn.maxLength = function (max) {
this.each(function () {
var type = this.tagName.toLowerCase();
var inputType = this.type ? this.type.toLowerCase() : null;
if (type == "input" && inputType == "text" || inputType == "password") {
this.maxLength =
else if (type == "textarea") {
this.onkeypress = function (e) {
var ob = e ||
var keyCode = ob.keyC
var hasSelection = document.selection
? document.selection.createRange().text.length & 0
: this.selectionStart != this.selectionE
return !(this.value.length &= max
&& (keyCode & 50 || keyCode == 32 || keyCode == 0 || keyCode == 13)
&& !ob.ctrlKey && !ob.altKey && !hasSelection);
this.onkeyup = function () {
if (this.value.length & max) {
this.value = this.value.substring(0, max);
$('#mytextarea').maxLength(500);
  30. 如何为函数创建一个基本的测试
//把测试单独放在模块中
module("Module B");
test("some other test", function () {
//指明测试内部预期有多少要运行的断言
expect(2);
//一个比较断言,相当于JUnit的assertEquals
equals(true, false, "failing test");
equals(true, true, "passing test");
  31. 如何在jQuery中克隆一个元素
var cloned = $('#somediv').clone();
  32. 在jQuery中如何测试某个元素是否可见
if ($(element).is(':visible') == 'true') {
//该元素是可见的
  33. 如何把一个元素放在屏幕的中心位置
jQuery.fn.center = function () {
this.css('position', 'absolute');
this.css('top', ($(window).height() - this.height())
/ +$(window).scrollTop() + 'px');
this.css('left', ($(window).width() - this.width())
/ 2 + $(window).scrollLeft() + 'px');
return this;
//这样来使用上面的函数:
$(element).center();
  34. 如何把有着某个特定名称的所有元素的值都放到一个数组中
var arrInputValues = new Array();
$("input[name='table[]']").each(function () {
arrInputValues.push($(this).val());
  35. 如何从元素中除去HTML
(function ($) {
$.fn.stripHtml = function () {
var regexp = /&("[^"]*"|'[^']*'|[^'"&])*&/
this.each(function () {
$(this).html($(this).html().replace(regexp, ""));
return $(this);
})(jQuery);
$('p').stripHtml();
  36. 如何使用closest来取得父元素
$('#searchBox').closest('div');
  37. 如何使用Firebug和Firefox来记录jQuery事件日志
// 允许链式日志记录
$('#someDiv').hide().log('div hidden').addClass('someClass');
jQuery.log = jQuery.fn.log = function (msg) {
if (console) {
console.log("%s: %o", msg, this);
return this;
  38. 如何强制在弹出窗口中打开链接
jQuery('a.popup').live('click', function () {
newwindow = window.open($(this).attr('href'), '', 'height=200,width=150');
if (window.focus) {
newwindow.focus();
return false;
  39. 如何强制在新的选项卡中打开链接
jQuery('a.newTab').live('click', function () {
newwindow = window.open($(this).href);
jQuery(this).target = "_blank";
return false;
  40. 在jQuery中如何使用.siblings()来选择同辈元素
// 不这样做
$('#nav li').click(function () {
$('#nav li').removeClass('active');
$(this).addClass('active');
//替代做法是
$('#nav li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
  41. 如何切换页面上的所有复选框
var tog = false;
// 或者为true,如果它们在加载时为被选中状态的话
$('a').click(function () {
$("input[type=checkbox]").attr("checked", !tog);
  42. 如何基于一些输入文本来过滤一个元素列表
//如果元素的值和输入的文本相匹配的话
//该元素将被返回
$('.someClass').filter(function () {
return $(this).attr('value') == $('input#someId').val();
  43. 如何获得鼠标垫光标位置x和y
$(document).ready(function () {
$(document).mousemove(function (e) {
$('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  44. 如何把整个的列表元素(List Element,LI)变成可点击的
$("ul li").click(function () {
window.location = $(this).find("a").attr("href");
return false;
&li&&a href="#"&Link 1&/a&&/li&
&li&&a href="#"&Link 2&/a&&/li&
&li&&a href="#"&Link 3&/a&&/li&
&li&&a href="#"&Link 4&/a&&/li&
  45. 如何使用jQuery来解析XML(基本的例子)
function parseXml(xml) {
//找到每个Tutorial并打印出author
$(xml).find("Tutorial").each(function () {
$("#output").append($(this).attr("author") + "");
  46. 如何检查图像是否已经被完全加载进来
$('#theImage').attr('src', 'image.jpg').load(function () {
alert('This Image Has Been Loaded');
  47. 如何使用jQuery来为事件指定命名空间
//事件可以这样绑定命名空间
$('input').bind('blur.validation', function (e) {
//data方法也接受命名空间
$('input').data('validation.isValid', true);
  48. 如何检查cookie是否启用
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if (!cookiesEnabled) {
//没有启用cookie
  49. 如何让cookie过期
var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });
  50. 如何使用一个可点击的链接来替换页面中任何的URL
$.fn.replaceUrl = function () {
var regexp =
/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/
this.each(function () {
$(this).html(
$(this).html().replace(regexp, '&a href="$1"&$1&/a&')
return $(this);
$('p').replaceUrl();
  终于完了,排版也是个体力活.资源整理自网络,送给那些没有送藏的童鞋,如果你已经收藏过了,请不要扔砖头。
Web前端热门文章
Web前端最新文章他的最新文章
他的热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了。
  一、jQuery选择器
在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形式。&#te st&选取id属性为&test&的元素。&blockquote&选取文档中的所有&blockquote&元素,而&div.note& 则选取所有class属性为&note&的&blockquote&元素。简单选择器可以组合成&组合选择器&,比如 &div.note&p&和&blockquote i&,只要用组合字符做分隔符就行。简单选择器和组合选择器还可以分组成逗号分隔的列表。这种选择器组是传递给$()函数最常见的形式。在解释组合选择器 和选择器组之前,我们必须先了解简单选择器的语法。
1、简单选择器
简单选择器的开头部分(显式或隐式地)是标签类型声明。例如,如果只对&P&元素感兴趣,简单选择器可以用&P&开头。如果选取的元素和标签名无关,则可以使用通配符&*&号来代替。如果选择器没有以标签名或通配符开头,则隐式含有一个通配符。
标签名或通配符指定了备选文档元素的一个初始集。在简单选择器中,标签类型声明之后的部分由零个或多个过滤器组成。过滤器从左到右应用,和书写顺序一致,其中每一个都会缩小选中元素集。下表列举了jQuery支持的过滤器。
jQuery选择过滤器
匹配id属性为id的元素。在有效的}ITML文档中,永远不会出现多个元素拥有相同的ID,因此该过滤器通常作为独立选择器来使用
匹配class属性(是一串被解析成用空格分隔的单词列表)含有class单词的所有元素
匹配拥有attr属性(和值无关)的所有元素
[attr=val]
匹配拥有attr属性且值为val的所有元素
[attr!=val]
匹配没有attr属性、或attr属性的值不为val的所有元素((jQuery的扩展)
[attr^=val]
匹配attr属性值以val开头的元素
[attr$=val]
匹配attr属性值以val结尾的元素
[attr*=val]
匹配attr属性值含有val的元素
[attr~=val]
当其attr属性解释为一个由空格分隔的单词列表时,匹配其中包含单词val的元素。因此选择器&div.note&与&div&[class~=note]&相同
[attr|=val]
匹配attr属性值以val开头且其后没有其他字符,或其他字符是以连字符开头的元素
匹配正在动画中的元素,该动画是由jQuery产生的
匹配&button&type=&button&&和&input&type=&button&&元素(jQuery的扩展)
匹配&input&type=&checkbox&&元素(&jQuery的扩展),当显式带有input标签前缀&input:checkbox&时,该过滤器更高效
匹配选中的input元素
:contains(text)
匹配含有指定text文本的元素(jQuery的扩展)。该过滤器中的圆括号确定了文本的范围&无须添加引号。被过滤的元素的文本是由textContent或innerText属性来决定的&这是原始文档文本,不带标签和注释
匹配禁用的元素
匹配没有子节点、没有文本内容的元素
匹配没有禁用的元素
匹配基于文档顺序、序号从0开始的选中列表中的第n个元素(jQuery的扩展)
匹配列表中偶数序号的元素。由于第一个元素的序号是0,因此实际上选中的是第1个、第3个、第5个等元素(jQuery的扩展)
匹配&input&type=&file&&元素(jQuery的扩展)
匹配列表中的第一个元素。和&:eq(0)&相同(jQuery的扩展)
:first-child
匹配的元素是其父节点的第一个子元素。注意:这与&:first&不同
匹配基于文档顺序、序号从0开始的选中列表中序号大于n的元素(&jQuery的扩展)
匹配的元素拥有匹配内嵌选择器sel的子孙元素
匹配所有头元素:&h1&,&&h2&,&&h3&,&&h4&,&&h5&或&h6&&(jQuery的扩展)
匹配所有在屏幕上不可见的元素:大体上可以认为这些元素的offsetWidth和offsetHeight为0
匹配&input&type=&image&&元素。注意该过滤器不会匹配&img&元素(&jQuery的扩展)
匹配用户输入元素:&input&,&&textarea&,&&select&和&button&(&jQuery的扩展)
匹配选中列表中的最后一个元素((&jQuery的扩展)
:last-child
匹配的元素是其父节点的最后一个子元素。注意:这与&:last&不同
匹配基于文档顺序、序号从0开始的选中列表中序号小于n的元素(&jQuery的扩展)
匹配的元素不匹配内嵌选择器sel
与&:eq(n)&相同(jQuery的扩展)
:nth-child(n)
匹配的元素是其父节点的第n个子元素。。可以是数值、单词even,单词odd或计算公式。 使用&:nth-child(even)&来选取那些在其父节点的子元素中排行第2或第4等序号的元素。使用&:nth-child(odd)&来选取那 些在其父节点的子元素中排行第1、第3等序号的元素。
更常见的情况是,n是xn或x&n+y这种计算公式,其中x和y是整数,n是字面量n。因此可以用nth-child(3n+1)来选取第1个、第4个、第7个等元素。
注意该过滤器的序号是从1开始的,因此如果一个元素是其父节点的第一个子元素,会认为它是奇数元素,匹配的是3n+1,而不是3n。要和&:even以及&:odd&过滤器区分开来,后者匹配的序号是从0开始的。
匹配列表中奇数(从0开始)序号的元素。注意序号为1和3的元素分别是第2个和第4个匹配元素(&jQuery的扩展)
:only-child
匹配那些是其父节点唯一子节点的元素
匹配是父节点的元素,这与&:empty&相反(jQuery的扩展)
匹配&input&type=&password&&元素(jQuery的扩展)
匹配&input&type=&radio&&元素(&j&Query的扩展)
匹配&input&type=&reset&&和&button&type=&reset&&元素(jQuery的扩展)
匹配选中的&option&元素。使用&:checked&来选取选中的复选框和单选框(jQuery的扩展)
匹配&input&type=&submit&&和&button&type=&submit&&元素(jQuery的扩展)
匹配&input&type=&text&&元素(jQuery的扩展)
匹配所有当前可见的元素:大体上可以认为这些元素的offsetWidth和offsetHeight的值不为0,这和&:hidden&相反
注意:表中列举的部分选择器在圆括号中接受参数。例如,下面这个选择器选取的元素在其父节点的子元素中排行第1或第2等,只要它们含有&JavaScript&单词,就不包含元素。
p:nth-child(3n+1): text (JavaScript):not(:has(a))
通常来说,指定标签类型前缀,可以让过滤器的运行更高效。例如,不要简单使用&:radio&来选取单选框按钮,使用&input:radio&会
更好。ID过滤器是个例外,不添加标签前缀时它会更高效。例如,选择器&#address&通常比更明确的&form#address&更高效。
2、组合选择器
使用特殊操作符或&组合符&可以将简单选择器组合起来,表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。
下面是组合选择器的一些例子:
"blockquote i"&&&&&&&&&&&&&
"ol & li"&&&&&&&&&&&&&&&&&&
"#output+*"&&&&&&&&&&&&&&&&
"div.note & h1+p"&&&&&&&&&&
注意组合选择器并不限于组合两个选择器:组合三个甚至更多选择器也是允许的。组合选择器从左到右处理。
3、选择器组
传递给$()函数(或在样式表中使用)的选择器就是选择器组,这是一个逗号分隔的列表,由一个或多个简单选择器或组合选择器构成。选择器组匹配的元
素只要匹配该选择器组中的任何一个选择器就行。对我们来说,一个简单选择器也可以认为是一个选择器组。下面是选择器组的一些例子:
"h1, h2,h3"&&&&&&&&&&&&
"#p1, #p2, #p3"&&&&&&&&
"div.note, p.note"&&&&&
"body&p,div.note&p"&&&&
注意:CSS和jQuery选择器语法允许在简单选择器的某些过滤器中使用圆括号,但并不允许使用圆括号来进行更常见的分组。例如,不能把选择器组或组合选择器放在圆括号中并且当成简单选择器:
(h1, h2, h3)+p&&&&&&&&&
h1+p, h2+p, h3+p&&&&&&&
  二、选取方法
除了$()函数支持的选择器语法,jQuery还定义了一些选取方法。本章中我们已看到过的大部分jQuery方法都是在选中元素上执行某种操作。选取方法不一样:它们会修改选中元素集,对其进行提取、扩充或仅作为新选取操作的起点。
本节描述这些选取方法。你会注意到这些选取方法中的多数提供的功能与选择器语法的功能是一样的。
提取选中元素最简单的方式是按位置提取。first()返回的jQuery对象仅包含选中元素中的第一个,last()返回的jQuery对象则只
包含最后一个元素。更通用的是,eq()方法返回物Query对象只包含指定序号的单个选中元素。(在jQuery
1.4中,负序号也是允许的,会从选区的末尾开始计数。)注意这些方法返回的jQuery对象只含有一个元素。这与常见的数组序号是不一样的,数组序号返
回的单一元素没有经过jQuery包装:
var paras=$("p");
paras.first()&&&&&&&&&&
paras.last()&&&&&&&&&&&
paras.eq(1)&&&&&&&&&&&&
paras.eq(-2)&&&&&&&&&&
paras[1]&&&&&&&&&&&&&&&
通过位置提取选区更通用的方法是slice()o
jQuery的slice()方法与Array.slice()方法类似:前者接受开始和结束序号(负序号会从结尾处计算),返回的jQuery对象包含
从开始到结束序号(但不包含结束序号)处的元素集。如果省略结束序号,返回的对象会包含从开始序号起的所有元素:
$("p").slice(2,5)&&&&&&
$("div").slice(-3)&&&&&
filter()是通用的选区过滤方法,有3种调用方式:
  传递选择器字符串给filter(),它会返回一}jQuery对象,仅包含也匹配该选择器的选中元素。
  传递另一个jQuery对象给filter(),它会返回一个新的jQuery对象,该对象包含这两们Query对象的交集。也可以传递元素数组甚至单一文档元素给filter()。
  传递判断函数给filter(),会为每一个匹配元素调用该函数,filter()则返回一个jQuery对象,仅包含判断函数为true(或任意真值)的元素。在调用判断函数时,this值为当前元素,参数是元素序号。
$("div").filter(".note")&&&&&&&
$("div").filter($(".note"))&&&&
$("div").filter(function(idx){return idx%2 == 0})&&&&&&&&
not()方法与filter()一样,除了含义与filter()相反。如果传递选择器字符串给not()它会返回一个新的jQuery对象,该
对象只包含不匹配该选择器的元素。如果传递jQuery对象、元素数组或单一元素给not(),它会返回除了显式排除的元素之外的所有选中元素。如果传递
判断函数给not(),该判断函数的调用就与在filter()中一样,只是返回的jQuery对象仅包含那些使得判断函数返回false或其他假值的元
$("div").not("#header, #footer");&&&&&&&
  在jQuery 1.4中,提取选区的另一种方式是has()方法。如果传入选择器,has()会返回一个新的jQuery对象,仅包含有子孙元素匹配该选择器的选中元素。如果传入文档元素给has(),它会将选中元素集调整为那些是指定元素祖先节点的选中元素:
$("p").has("a[href]")&&&&&&&&
add()方法会扩充选区,而不是对其进行过滤或提取。可以将传给$()函数的任何参数(除了函数)照样传给add()方法。add()方法会返回
原来的选中元素,加上传给$()函数的那些参数所选中(或创建)的那些元素。add()会移除重复元素,并对该组合选区进行排序,以便里面的元素按照文档
中的顺序排列:
$("div, p")&&&&&&&&&&&&
$("div").add(p)&&&&&&&&
$("div").add($("p"))&&&
var paras = document.getElementsByTagName("p");&&&&&&
$("div").add(paras);&&&&&&&
1.将选中元素集用做上下文
上面描述的filter().
add()、和not()方法会在各自的选中元素集上执行交集、并集和差集运算。jQuery还定义一些其他选取方法可将当前选中元素集作为上下文来使
用。对选中的每一个元素,这些方法会使用该选中元素作为上下文或起始点来得到新的选中元素集,然后返回一个新的jQuery对象,包含所有新的选中元素的
并集。与add()方法类似,会移除重复元素并进行排序,以便元素会按照在文档中出现的顺序排列好。
该类别选取方法中最通用的是find()。它会在每一个当前选中元素的子孙元素中寻找与指定选择器字符串匹配的元素,然后它返回一个新的
jQuery对象来代表所匹配的子孙元素集。注意这些新选中的元素不会并入已存在的选中元素集中。同时注意find()和filter()不
同,filter()不会选中新元素,只是简单地将当前选中的元素集进行缩减:
$("div").find("p")&&&&&&&&&&&
该类别中的其他方法返回新的jQuery对象,代表当前选中元素集中每一个元素的子元素、兄弟元素或父元素。大部分都接受可选的选择器字符串作为参数。不传入选择器时,它们会返回所有子元素、兄弟元素或父元素。传入选择器时,它们会过滤元素集,仅返回匹配的。
children()方法返回每一个选中元素的直接子元素,可以用可选的选择器参数进行过滤:
$("#header, #footer").children("span")
contents()方法与children()方法类似,不同的是它会返回每一个元素的所有子节点,包括文本节点。如果选中元素集中
有&iframe&元素,contents()还会返回该&iframe&内容的文档对象。注意contents()不接受可选
的选择器字符串参数&因为它返回的文档节点不完全是元素,而选择器字符串仅用来描述元素节点。
next()和prev()方法返回每一个选中元素的下一个和上一个兄弟元素(如果有的话)。如果传入了选择器,会只选中匹配该选择器的兄弟元素:
$("h1").next("p")&&&&&
$("h1").prev()&&&&&&&&
nextAll()和prevAll()返回每一个选中元素前面或后面的所有兄弟元素(如果有的话)。siblings()方法则返回每一个选中元素的所有兄弟元素(选中元素本身不是自己的兄弟元素)。如果给这些方法传人选择器,则只会返回匹配的兄弟元素:
$("#footer").nextAll("p")&&&&&&
$("#footer").prevAll()&&&&&&&&&
1.4开始,nextUntil()和prevUntil()方法接受一个选择器参数,会选取选中元素后面或前面的所有兄弟元素,直到找到某个匹配该选择
器的兄弟元素为止。如果省略该选择器,这两个方法的作用就和不带选择器的nextAll()和prevAll()一样。
parent()方法返回每一个选中元素的父节点:
$("li").parent()&&&&&&&
parents()方法返回每一个选中元素的祖先节点(向上直到元素)。parent()和parents()都接受一个可选的选择器字符串参数:
$("a[href]").parents("p")&&&&&&&&&&&
parentsUntil()返回每一个选中元素的祖先元素,直到出现匹配指定选择器的第一个祖先元素。closest()方法必须传人一个选择器
字符串,会返回每一个选中元素的祖先元素中匹配该选择器的最近一个祖先元素(如果有的话)。对该方法而言,元素被认为是自身的祖先元素。在jQuery
1.4中,还可以给closest()传入一个祖先元素作为第二个参数,用来阻止jQuery往上查找时超越该指定元素:
$("a[href]").closest("div")&&&&&&&&
$("a[href]").parentsUntil(":not(div)")&&&&&
2、恢复到之前的选中元素集
为了实现方法的链式调用,很多jQuery对象的方法最后都会返回调用对象。然而本节讲述的方法都返回新的jQuery对象。可以链式调用下去,但必须清晰地意识到,在链式调用的后面所操作的元素集,可能已经不是该链式调用开始时的元素集了。
实际情况还要复杂些。当这里所描述的选取方法在创建或返回一个新的ejQuery对象时,它们会给该对象添加一个到它派生自的旧jQuery对象的
内部引用。这会创建一个jQuery对象的链式表或栈。end()方法用来弹出栈,返回保存的jQuery对象。在链式调用中调用end()会将匹配元素
集还原到之前的状态。考虑以下代码:
var divs = $("div");
var paras = div.find("p");
paras.addClass("highlight");
divs.css("border", "solid black 1px");
$("div").find("p").addClass("highlight").end().css("border", "solid black 1px");
$("div").css("border", "solid block 1px").find("p").addClass("highlight");
如果想手动定义选中元素集,同时保持与end()方法的兼容,可以将新的元素集作为数组或类数组对象传递给push5tack()方法。指定的元素会成为新的选中元素,之前选中的元素集则会压入栈中,之后可以用end()方法还原它们:
var sel = $("div");&&&&&&&&&&&&
sel.pushStack(document.getElementsByTagName("p"));&&&&&
sel.end();&&&&&&&&&&&&&&&&&&&&&
既然我们已经讲解了end()方法及其使用的选区栈,就有最后一个方法需要讲解。andSelf()返回一个新的jQuery对象,包含当前的所有
选中元素,加上之前的所有选中元素(会去除重复的)。andSelf()和add()方法一样,或许&addPrev&是一个更具描述性的名字。作为例
子,考虑上面代码的下述变化:高亮显示&P&元素及其父节点中的&div&元素,然后给这些&div&元素添加边
$("div").find("p").andSelf().&&&&&&&&&&
addClass("highlight").&&&&&&&&&&&&&
end().end().&&&&&&&&&&&&&&&&&&&&&&&&&&&
css("border", "solid black 1px");&&&&&&
阅读(...) 评论()}

我要回帖

更多关于 微信文章链接地址 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信