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实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
js实现模糊匹配功能
Feb 15 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
小程序日历控件使用方法详解
Dec 29 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
PHP代码加密的方法总结
2020/03/13 PHP
PHP反射基础知识回顾
2020/09/10 PHP
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
python for循环remove同一个list过程解析
2019/08/14 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python实现电子词典
2020/03/03 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
高一生物教学反思
2014/01/17 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
大学生安全责任书
2014/07/25 职场文书
不同意离婚答辩状
2015/05/22 职场文书
小学生教师节广播稿
2015/08/19 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
python百行代码实现汉服圈图片爬取
2021/11/23 Python