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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
论JavaScript模块化编程
Mar 07 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Openlayers实现距离面积测量
Sep 28 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
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP new static 和 new self详解
2017/02/19 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
php swoft框架实例用法
2020/12/22 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python装饰器深入学习
2018/04/06 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
外贸英语毕业生自荐信
2013/11/14 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
法人任命书范本
2014/06/04 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
社会实践单位意见
2015/06/05 职场文书
同学聚会感言一句话
2015/07/30 职场文书
外出学习心得体会范文
2016/01/18 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL