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 09 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php防止用户重复提交表单
2015/11/02 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JS 建立对象的方法
2007/04/21 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python实现彩色图转换成灰度图
2019/01/15 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
四议两公开实施方案
2014/03/28 职场文书
产假请假条
2014/04/10 职场文书
保密工作责任书
2014/04/16 职场文书
奠基仪式策划方案
2014/05/15 职场文书
军人离婚协议书样本
2014/10/21 职场文书
法院个人总结
2015/03/03 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
学校推普周活动总结
2015/05/07 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
商务宴会祝酒词
2015/08/11 职场文书