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实现 在光标处插入指定内容
May 25 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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 数组的指针操作实现代码
2011/02/08 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
node内置调试方法总结
2018/02/22 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python实现一次创建多级目录的方法
2015/05/15 Python
快速入手Python字符编码
2016/08/03 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python 检查文件mime类型的方法
2018/12/08 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
django中related_name的用法说明
2020/05/20 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
个人自我鉴定范文
2013/10/04 职场文书
电子商务专业自荐信
2014/06/02 职场文书
班级口号大全
2014/06/09 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2019思想汇报范文
2019/05/21 职场文书