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 相关文章推荐
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
php返回json数据函数实例
2014/10/09 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
PHP中的self关键字详解
2019/06/23 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python Merge函数原理及用法解析
2020/09/16 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
学校募捐倡议书
2014/05/14 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
名人传读书笔记
2015/06/26 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL