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 prototype 原型链
Mar 12 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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和ACCESS写聊天室(五)
2006/10/09 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
线程和进程的区别及Python代码实例
2015/02/04 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
django orm模块中的 is_delete用法
2020/05/20 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
人事经理岗位职责
2014/04/28 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
人事局接收函
2015/01/31 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电