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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 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 分页类实现代码
2009/12/03 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
layUI实现三级导航菜单效果
2019/07/26 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python ATM功能实现代码实例
2020/03/19 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python设计密码强度校验程序
2020/07/30 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
房地产项目策划书
2014/02/05 职场文书
幼儿园小班评语
2014/04/18 职场文书
团队拓展训练感想
2015/08/07 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
js Proxy的原理详解
2021/05/25 Javascript
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
Python中三种花式打印的示例详解
2022/03/19 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL