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的面向对象方法以及差别
Mar 31 Javascript
js处理表格对table进行修饰
May 26 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Javascript实现基本运算器
Jul 15 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
vue路由教程之静态路由
Sep 03 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
我的论坛源代码(四)
2006/10/09 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python学生管理系统学习笔记
2019/03/19 Python
浅析Python的命名空间与作用域
2020/11/25 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
毕业生自荐书
2014/02/03 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
员工保密承诺书
2014/05/28 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2014年除四害工作总结
2014/12/06 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
自我推荐信格式模板
2015/03/24 职场文书
家长意见书
2015/06/04 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python