jquery选择器、属性设置用法经验总结
更新时间：2013年09月08日 14:53:44 作者：
最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些jquery选择器、属性设置用法，供大家参考
本人是一名小白，应届毕业生，以前没用过jquery，最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些用法，供大家参考：
最基本的选择器语法包括：id、class、标签、属性，这和css选择器是一致的。
ID选择器要在ID前加#，比如要选择一个ID为myDivID的div元素（<div id="myDivID"></div>）可以这样写:
$("#myDivID");
D是不能重复的，所以ID选择器选出来的是一个jquery对象。
class选择器要在class前加点（.），比如要选择一个class为myInputClass的input元素（<input type="text" class="myInputClass"/>）可以这样写：
$(".myInputClass");
class是可以重复的，所以class选择器选出来的可以是一类元素，即好多个元素，所以jquery选出来的是个数组，可以引用下标来选择每个元素：比如
for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}
这样可以迭代出每个元素。
标签选择器直接写标签类型即可，比如要选择一个段落p标签（<p></p>）即可这样写：
$("p");
标签选择器选出来的也是一个数组，选出所有的p标签元素，也可以用上面的方法迭代出所有的元素。
属性选择器要在前面加方括号（[]），比如要选择含有name="xxName"的元素，可以这样写：
$("[xxName]");
这样来选择，选择出的也是一个数组，因为name是可以重复的。
ID选择器可以精确的选出一个元素来，但在开发中我们可能更多的要选择出一组元素，怎样才能精确的选择出我们想要的元素呢，其实几种选择器是可以混合使用的：
<div id="attrValueTab">
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="确定" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="取消" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
</div>
比如我们要选择偶数个文本标签，即：写着even的文本框。我们可以这样来选择：
首先选中这个div，然后再选中p，然后再选中type=“text”的文本框，最后再选中偶数个位置：
$("#attrValueTab p input[type='text']:even");
组合选择在开发中是非常有用的。可以用下面这种方法来选中被勾选的button或者是checkbox元素：
$("input[name='avDefValue_input']:checked");
最基本的选择器语法包括：id、class、标签、属性，这和css选择器是一致的。
ID选择器要在ID前加#，比如要选择一个ID为myDivID的div元素（<div id="myDivID"></div>）可以这样写:
复制代码 代码如下:
$("#myDivID");
D是不能重复的，所以ID选择器选出来的是一个jquery对象。
class选择器要在class前加点（.），比如要选择一个class为myInputClass的input元素（<input type="text" class="myInputClass"/>）可以这样写：
复制代码 代码如下:
$(".myInputClass");
class是可以重复的，所以class选择器选出来的可以是一类元素，即好多个元素，所以jquery选出来的是个数组，可以引用下标来选择每个元素：比如
复制代码 代码如下:
for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}
这样可以迭代出每个元素。
标签选择器直接写标签类型即可，比如要选择一个段落p标签（<p></p>）即可这样写：
复制代码 代码如下:
$("p");
标签选择器选出来的也是一个数组，选出所有的p标签元素，也可以用上面的方法迭代出所有的元素。
属性选择器要在前面加方括号（[]），比如要选择含有name="xxName"的元素，可以这样写：
复制代码 代码如下:
$("[xxName]");
这样来选择，选择出的也是一个数组，因为name是可以重复的。
ID选择器可以精确的选出一个元素来，但在开发中我们可能更多的要选择出一组元素，怎样才能精确的选择出我们想要的元素呢，其实几种选择器是可以混合使用的：
复制代码 代码如下:
<div id="attrValueTab">
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="确定" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
<span style="white-space:pre"> </span><p>
<span style="white-space:pre"> </span><input type="button" value="取消" /> <input type="text" value="odd" /> <input type="text" value="even" />
<span style="white-space:pre"> </span></p>
</div>
比如我们要选择偶数个文本标签，即：写着even的文本框。我们可以这样来选择：
首先选中这个div，然后再选中p，然后再选中type=“text”的文本框，最后再选中偶数个位置：
复制代码 代码如下:
$("#attrValueTab p input[type='text']:even");
组合选择在开发中是非常有用的。可以用下面这种方法来选中被勾选的button或者是checkbox元素：
复制代码 代码如下:
$("input[name='avDefValue_input']:checked");
相关文章
这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈2015-03-03
本文将结合实例使用jquery背景动画插件，将数字作为背景图片，定时让背景图片滚动起来，从而实现了滚动数字的效果，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery中show与hide方法用法,结合实例形式分析了jQuery使用show与hide方法控制页面元素显示与隐藏的简单实现技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了Jquery 实现table样式的设定方法的相关资料,需要的朋友可以参考下2015-01-01
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择，由于前端不是很熟练，所以做了一个简单的Demo，其中遇到一些小问题，特记录下来，希望能帮到遇到类似问题的同学们2013-11-11
这篇文章主要介绍了jQuery弹出遮罩层效果,结合完整实例形式分析了jQuery遮罩层的动态创建与使用技巧,需要的朋友可以参考下2016-09-09
下面小编就为大家分享一篇使用jQuery 操作table 完成单元格合并的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了基于JQuery的购物车添加删除以及结算功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
easyui messager alert 三秒后自动关闭提示的实例
下面小编就为大家带来一篇easyui messager alert 三秒后自动关闭提示的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了jquery实现两个div中的元素相互拖动的方法,结合实例形式分析了jQuery基于鼠标事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2020-04-04
最新评论