jquery选择器、属性设置用法经验总结

本人是一名小白，应届毕业生，以前没用过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>

 
比如我们要选择偶数个文本标签，即：写着even的文本框。我们可以这样来选择：

首先选中这个div，然后再选中p，然后再选中type=“text”的文本框，最后再选中偶数个位置：


代码如下:

$("#attrValueTab p input[type='text']:even");

组合选择在开发中是非常有用的。可以用下面这种方法来选中被勾选的button或者是checkbox元素：


代码如下:

$("input[name='avDefValue_input']:checked");

赞 (0)

相关推荐

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • jQuery 选择器详解

    jQuery 选择器详解

    $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本

  • 老生常谈jquery id选择器和class选择器的区别

    实例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" rel="external nofollow" rel="external nofollow" rel=&

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1．简化代码的编写2．隐式迭代3．无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • jQuery选择器之基本选择器与层次选择器

    基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能使用一次,class允许重复使用.        选择器       描述 返回                示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 e

  • jQuery选择id属性带有点符号元素的方法

    本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

  • jquery选择器、属性设置用法经验总结

    jquery选择器、属性设置用法经验总结

    本人是一名小白,应届毕业生,以前没用过jquery,最近做项目用到了jquery.在做的过程中走了很多弯路,不停的搜索.总结出了一些用法,供大家参考: 最基本的选择器语法包括:id.class.标签.属性,这和css选择器是一致的. ID选择器要在ID前加#,比如要选择一个ID为myDivID的div元素(<div id="myDivID"></div>)可以这样写: 复制代码 代码如下: $("#myDivID"); D是不能重复的,所以I

  • jQuery子属性过滤选择器用法分析

    jQuery子属性过滤选择器用法分析

    本文实例讲述了jQuery子属性过滤选择器用法.分享给大家供大家参考.具体分析如下: 1. :first-child选择器 用于选择其父级的第一个子元素的所有元素,格式: 复制代码 代码如下: $("selector:first-child") 如: 复制代码 代码如下: $("ul:first-child").css("text-decoration", "underline").css("color",

  • JQuery中属性过滤选择器用法实例分析

    本文实例讲述了JQuery中属性过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery元素属性操作实例(设置、获取及删除元素属性)

    jQuery元素属性操作实例(设置、获取及删除元素属性)

    本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

  • jQuery选择器用法实例详解

    本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: jQuery 使用两种方式来选择 html 的 element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a")):第二种是用jQuery对象的几个methods(方法).这两种方式还可以联合起来混合使用. 使用 CSS 和 XPath 选择器选择的方法有许多种用法,关于详细的 CSS 选择器可参考本站相关文章. 首先来看通过元素的 ID

  • JQuery样式与属性设置方法分析

    本文实例讲述了JQuery样式与属性设置方法.分享给大家供大家参考,具体如下: Jquery属性的获取与设置 //找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性 $("inp

  • jQuery选择器用法介绍

    jQuery选择器用法介绍

    目录 一.jQuery选择器 二.基本选择器 三.层次选择器 四.属性选择器 五.过滤选择器 1.基本过滤选择器 2.可见性过滤选择器 3.内容过滤器 六.表单选择器 七.补充 1.特殊符号的转义 2.选择器中的空格 jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red"); 说明: 获取并设置网页中所有<h3>元素的背景色. “h3”为选择器语法,

  • jQuery表单域属性过滤器用法分析

    jQuery表单域属性过滤器用法分析

    本文实例讲述了jQuery表单域属性过滤器用法.分享给大家供大家参考.具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从文档中查找表单域. 1. :checked选择器 用于选择所有被选中的表单域.格式: 复制代码 代码如下: $("selector:checked") 可以是input,radio和checkbox 2. :enabled选择器 用于选择所有可用的表单域,格式: 复制代码 代码如下:

  • jQuery选择器简明总结（含用法实例,一目了然）

    本文现在对所有已知的 jquery 选择器做一个总结,深刻而熟练的掌握这些选择器,对我们快速的写各种 jquery 效果大有帮助!下面就对 jquery 各种选择做一个罗列吧!由于 jquery 用法非常简单,这里就不再举各种例子加深理解了. 选择器 实例 选取 * $("#item *") 选择 id 属性为 item 下的所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".int

  • jQuery使用之设置元素样式用法实例

    本文实例讲述了jQuery使用之设置元素样式用法.分享给大家供大家参考.具体分析如下: css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面文章中有使用过 addClass()为元素添加css样式风格.这里主要介绍jQuery如何设置页面的样式风格.包括添加.删除.动态切换等. 1. 添加.删除css类别. 复制代码 代码如下: $(function() {     //同时添加多个CSS类别     $("img").addClass("css

随机推荐