jQuery选择器及属性设置

前端之家收集整理的这篇文章主要介绍了jQuery选择器及属性设置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近用到了许多jQuery选择器相关,所以回顾总结下:

(一)

直接父级:.parent();方法返回被选元素的直接父元素
所有父级:.parents();  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素html
(二)
同级:.siblings() 方法返回被选元素的所有同胞元素
    例子:$("h2").siblings("p");  返回属于<h2>的同胞元素的所有<p>元素
所有同级:nextAll() 方法返回被选元素的所有跟随的同胞元素
区域同级:nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
(三)
直接子元素:children() 方法返回被选元素的所有直接子元素
所有子元素:find() 方法返回被选元素的后代元素,一路向下直到最后一个后代

(例子)

当前元素的上一个元素:$("").parent().prev().css("background","red")

当前元素的下一个元素:$("").parent().next().css("background","red")

当前元素父元素:$("").parent().css("background","red")

当前元素子元素:$("").children().css("background","red")

 

 

样式相关:增加样式.addClass();设置/改变样式:$(".logo").css("border","none")

 

属性与样式之.attr()与.removeAttr(),通过一定的触发事件来使一些元素上增加或者删除一些属性
例子:禁用与激活按钮

$("#btnSendCode").attr("disabled","true");   //禁用
$("#btnSendCode").removeAttr("disabled");  //启用按钮,启用激活

.attr():

1、获取匹配元素的属性,例如:$("img").attr("src");
2、设置匹配元素的属性,例如:
                                单一属性的设置:$("img").attr("src","test.jpg");
                                 多个属性的设置:$("img").attr({ src: "test.jpg",alt: "Test Image" });
3、$("img").attr("title",function() { return this.src });

 

.removeAttr():

1.从每一个匹配的元素中删除相应的属性
          删除一个属性:$("img").removeAttr("src");
          删除多个属性:$("img").removeAttr("src alt");//img的src和alt都会被删除

 

2.平常的使用中我们还可以通过如下这种方法来进行删除
           $("img").attr("src","");      

           $("img").attr({src:"",alt:""});
.removeAttr()和.attr()使用这两方法的区别在于页面html的结构不同
      removeAttr直接将这个属性删除,在页面中看到的就是这个结果<img>
      attr不会删除这个属性,只是将这个属性的值置为空,在页面中看到的就是<img src alt>,实际上和<img src="" alt=""> 的效果是一样的

 

猜你在找的jQuery相关文章