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页面添加到收藏夹的简单方法
Aug 07 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python操作Jira库常用方法解析
2020/04/10 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python 调整图片亮度的示例
2020/12/03 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
医药销售自荐书
2014/05/29 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
美术教师个人总结
2015/02/06 职场文书
幼儿园六一主持词
2015/06/30 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Go语言基础函数基本用法及示例详解
2021/11/17 Golang