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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
PHP通用检测函数集合
2011/02/08 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript 数组详解
2013/10/10 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
微信小程序入门之指南针
2020/10/22 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python模块文件结构代码详解
2018/02/03 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
优秀求职信范文分享
2014/01/26 职场文书
教师开学感言
2014/02/14 职场文书
大学军训感言1500字
2014/03/09 职场文书
《搭石》教学反思
2014/04/07 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
员工薪酬激励方案
2014/06/13 职场文书
职位证明模板
2015/06/23 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
实用求职信模板范文
2019/05/13 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python