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 05 Javascript
JQuery toggle使用分析
Nov 16 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 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代码
2006/12/06 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python放大图片和画方格实现算法
2018/03/30 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
青年教师培训方案
2014/02/06 职场文书
校园活动宣传方案
2014/03/28 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
淘宝好评语句大全
2014/12/31 职场文书
皇城相府导游词
2015/02/06 职场文书
横店影视城导游词
2015/02/06 职场文书
教师聘用意向书
2015/05/11 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP