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写的一个链表实现代码
Oct 25 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
javascript的hashCode函数实现代码小结
Aug 11 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php实现的农历算法实例
2015/08/11 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python全局变量操作详解
2015/04/14 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python文件拆分与重组实例
2018/12/10 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
自主实习接收函
2014/01/13 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
成绩报告单家长评语
2014/12/30 职场文书
英文产品推荐信
2015/03/27 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书