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 相关文章推荐
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
前端如何实现动画过渡效果
Feb 05 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python中的编码知识整理汇总
2016/01/26 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
委托协议书范本
2014/04/22 职场文书
户外宣传策划方案
2014/05/25 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
个人专业技术总结
2015/03/05 职场文书
单独二胎证明
2015/06/24 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
业余无线电通联Q语
2022/02/18 无线电
mysql sock文件存储了什么信息
2022/07/15 MySQL