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


Posted in Javascript onSeptember 08, 2013

本人是一名小白,应届毕业生,以前没用过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>

jquery选择器、属性设置用法经验总结 
比如我们要选择偶数个文本标签,即:写着even的文本框。我们可以这样来选择:

首先选中这个div,然后再选中p,然后再选中type=“text”的文本框,最后再选中偶数个位置:

$("#attrValueTab p input[type='text']:even");

组合选择在开发中是非常有用的。可以用下面这种方法来选中被勾选的button或者是checkbox元素:
$("input[name='avDefValue_input']:checked");
Javascript 相关文章推荐
js 创建书签小工具之理论
Feb 25 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
layui导出所有数据的例子
Sep 10 Javascript
javascript实现放大镜功能
Dec 09 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 #Javascript
将Datatable转化成json发送前台实现思路
Sep 06 #Javascript
json数据的列循环示例
Sep 06 #Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 #Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 #Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 #Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 #Javascript
You might like
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
JsDom 编程小结
2011/08/09 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
分享python数据统计的一些小技巧
2016/07/21 Python
机器学习10大经典算法详解
2017/12/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
高一军训的心得体会
2014/09/01 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2014最新实习证明模板
2014/10/02 职场文书
教师节校长致辞
2015/07/31 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Linux中如何安装并部署Redis
2022/04/18 Servers