提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery选择器、属性设置用法经验总结

jQuery属性 设置 用法 选择器 经验总结
2023-06-13 09:15:05 时间
本人是一名小白，应届毕业生，以前没用过jquery，最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些用法，供大家参考：

最基本的选择器语法包括：id、class、标签、属性，这和css选择器是一致的。

ID选择器要在ID前加#，比如要选择一个ID为myDivID的div元素（<divid="myDivID"></div>）可以这样写:
复制代码代码如下:

$("#myDivID");

D是不能重复的，所以ID选择器选出来的是一个jquery对象。

class选择器要在class前加点（.），比如要选择一个class为myInputClass的input元素（<inputtype="text"class="myInputClass"/>）可以这样写：
复制代码代码如下:

$(".myInputClass");

class是可以重复的，所以class选择器选出来的可以是一类元素，即好多个元素，所以jquery选出来的是个数组，可以引用下标来选择每个元素：比如
复制代码代码如下:
for(vari=0;i<$(".myInputClass").length;i++){$(".myInputClass")[i];}

这样可以迭代出每个元素。

标签选择器直接写标签类型即可，比如要选择一个段落p标签（<p></p>）即可这样写：
复制代码代码如下:
$("p");

标签选择器选出来的也是一个数组，选出所有的p标签元素，也可以用上面的方法迭代出所有的元素。

属性选择器要在前面加方括号（[]），比如要选择含有name="xxName"的元素，可以这样写：
复制代码代码如下:
$("[xxName]");

这样来选择，选择出的也是一个数组，因为name是可以重复的。

ID选择器可以精确的选出一个元素来，但在开发中我们可能更多的要选择出一组元素，怎样才能精确的选择出我们想要的元素呢，其实几种选择器是可以混合使用的：
复制代码代码如下:
<divid="attrValueTab">
<spanstyle="white-space:pre"></span><p>
<spanstyle="white-space:pre"></span><inputtype="button"value="确定"/><inputtype="text"value="odd"/><inputtype="text"value="even"/>
<spanstyle="white-space:pre"></span></p>
<spanstyle="white-space:pre"></span><p>
<spanstyle="white-space:pre"></span><inputtype="button"value="取消"/><inputtype="text"value="odd"/><inputtype="text"value="even"/>
<spanstyle="white-space:pre"></span></p>
</div>

 
比如我们要选择偶数个文本标签，即：写着even的文本框。我们可以这样来选择：

首先选中这个div，然后再选中p，然后再选中type=“text”的文本框，最后再选中偶数个位置：
复制代码代码如下:
$("#attrValueTabpinput[type="text"]:even");

组合选择在开发中是非常有用的。可以用下面这种方法来选中被勾选的button或者是checkbox元素：
复制代码代码如下:
$("input[name="avDefValue_input"]:checked");

相关文章