jquery $选择器使用方法

1.$。在jquery 中$("<span>"),这个语法等同于$(document.createelement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下:
html代码
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jquery 代码:
$("input[name$='letter']")
结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
2.!。选择器:[attribute!=value],匹配所有不含有指定的属性,或者属性不等于特定值的元素,此选择器等价于:not([attr=value])。
例子说明一下:
html代码
<input type="checkbox" name="newsletter" value="hot fuzz" />
<input type="checkbox" name="newsletter" value="cold fusion" />
<input type="checkbox" name="accept" value="evil plans" />
jquery 代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="accept" value="evil plans" checked="true" /> ]
3.*。选择器:[attribute*=value],匹配给定的属性是以包含某些值的元素。举个例子说明一下:
html 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jquery 代码:
$("input[name*='man']")
结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含给定属性的元素。注意,在jquery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即
可。
5.^。选择器:[attribute^=value],匹配给定的属性是以某些值开始的元素,下面举个例子来说明一下:
html 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jquery 代码:
$("input[name^='news']")
结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]

在jquery中,当使用$("input[name='metaid']“).val()不能直接获得被选择的radio的值,只是获得 radio标签的第一个值,这可能jquery使用xpath语言了进行查找有关,而我们通常是想获得被选中的radio的值,有以下几种方法:
1,使用$("input[name='metaid']:checked").val()获得 //name代表radio中name属性名
2,使用$(":radio:checked").val()获得 //限制页面只有一组radio标签

语法总结和注意事项
1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
2、jquery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如:$(document.getelementbyid("msg"))则为jquery对象,可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用jquery的方法。以下几种写法都是正确的:$("#msg").html();$("#msg")[0].innerhtml;$("#msg").eq(0)[0].innerhtml;$("#msg").get(0).innerhtml;

29.children(expr)取得子节点,当expr为空时,取得所有的子节点

eg: <div><span>hello</span><p class="selected">hello again</p><p>and again</p></div>

$("div").children() ==>> [<span>hello</span><p class="selected">hello again</p><p>and again</p> ]

$("div").children(".selected") ==>> [ <p class="selected">hello again</p> ]
children纯选择功能.当无参数是是选择所有子元素.当有条件时,按条件所选.例二是选择class为selected的节点!

30.add(params) 在$所取到的节点数组中添加新的节点.

参数可以是expr, html,element

eg: 1.<p>hello</p><span>hello again</span>

$("p").add("span") ==>> [ <p>hello</p>, <span>hello again</span> ]

eg: 2.<p>hello</p>

$("p").add("<span>again</span>") ==> [ <p>hello</p>, <span>again</span> ]

eg: 3.<p>hello</p><p><span id="a">hello again</span></p>

$("p").add(document.getelementbyid("a") ) ==>> [ <p>hello</p>, <span id="a">hello again</span> ]
增加元素或是html内容.增加到搜索的元素之后.例三,是提取id为a的子元素到p元素之后,这时子元素的地位改变,与p元素并列

 

31.contains(str)找出字节点中包含有str的节点,str起到过滤做用

eg: <p>this is just a test.</p><p>so is this</p>

$("p").contains("test") ==>> [ <p>this is just a test.</p> ]

contains也纯选择功能.参数是str类型.即选择test中包括有test内容的节点

32.filter(expression)过滤找出符合expression的节点

eg:<p>hello</p><p>hello again</p><p class="selected">and again</p>

$("p").filter(".selected") ==>> <p class="selected">and again</p>

$("p").filter(".selected, :first") ==>> [ <p>hello</p>, <p class="selected">and again</p> ]
属于多条件查询.selected应该是class为selected的节点.:first应该是第一个节点!

 

filter(filter_func)通过函数来选择是否过滤,filter_func返回true表示过滤

<p><ol><li>hello</li></ol></p><p>how are you?</p>

$("p").filter(function(index) { return $("ol", this).length == 0; })==>[ <p>how are you?</p> ]
filter 还可以以函数为条件!

33.find(expr)从子节点找出符合expr的.与filter的区别是filter过滤掉$数组中的节点find过滤到的是子节点

eg: <p><span>hello</span>, how are you?</p>

$("p").find("span") ==>> [ <span>hello</span> ]
与filter相反,感觉都差不多

34.is(expr) 判断是否符合条件,如果$数组的所有节点都不符合条件返回false,只要有一个符合条件就返回true

eg: <form><p><input type="checkbox" /></p></form>

$("input[@type='checkbox']").parent().is("form") ==>> false

$("input[@type='checkbox']").parent().is("p") ==>> true
条件判断!

35.next(expr) 取得最近节点那个节点.expr为空时取得所有节点

eg:1.<p>hello</p><p>hello again</p><div><span>and again</span></div>

$("p").next() ==>> [ <p>hello again</p>, <div><span>and again</span></div> ]

eg:2.<p>hello</p><p class="selected">hello again</p><div><span>and again</span></div>

$("p").next(".selected") ==>>[ <p class="selected">hello again</p> ]
感觉没什么特别的.

36. not(el),not(expr),not(elems)与add相反,删除符合条件的节点.

eg:1. <p>hello</p><p id="selected">hello again</p>

$("p").not($("#selected")[0]) ==>> [ <p>hello</p> ]

$("p").not("#selected") ==>> [ <p>hello</p> ]

eg:2.<div><p>hello</p><p class="selected">hello again</p></div>

$("p").not($("div p.selected")) ==>> [ <p>hello</p> ]
删除条件中的节点,反回删除后的结果

37 parent(expr) 取得父节点

eg:1.<html><body><div><p><span>hello</span></p><span>hello again</span></div></body></html>

$("span").parents() ==>> [ <body>...</body>, <div>...</div>, <p><span>hello</span></p> ]
参数为空时取得所有父节点

eg:2.<html><body><div><p><span>hello</span></p><span>hello again</span></div></body></html>

$("span").parents("p") ==>>[ <p><span>hello</span></p> ]
有条件时取得第一个父节点.

38.prev(expr) 与next相反,next取得是与节点相邻后面的.prev取得相邻前面的

eg:1.<div><span>hello</span></div><p class="selected">hello again</p><p>and again</p>

$("p").prev(".selected") ==>> [ <div><span>hello</span></div> ]

eg:2.<p>hello</p><div><span>hello again</span></div><p>and again</p>

$("p").prev() ==>> [ <div><span>hello again</span></div> ]
这个很明显,取得条件之前的节点.next没那么明显,

39.siblings(expr) 取得相邻两边的节点是.next,与prev的结合体
这两个把next和prev整合了

时间: 2025-01-27 14:19:58

jquery $选择器使用方法的相关文章

JQuery中上下文选择器实现方法

  本文实例讲述了JQuery中上下文选择器实现方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

ios-从UIButton选择器调用方法

问题描述 从UIButton选择器调用方法 怎么从按钮选择器中调用方法? 有如下代码: - (void)displayEditorForImage:(UIImage *)imageToEdit { AFPhotoEditorController *editorController = [[AFPhotoEditorController alloc] initWithImage:imageToEdit]; [editorController setDelegate:self]; [self pre

JQuery中上下文选择器实现方法_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"> &

javascript实现根据3原色制作颜色选择器的方法_javascript技巧

本文实例讲述了javascript实现根据3原色制作颜色选择器的方法.分享给大家供大家参考.具体如下: document.write('<div id="msecolor"><div class="aa"><div class="ab"><div class="ab1"><select onchange="T.f(this.value)"><

Android开发实现布局中为控件添加选择器的方法

本文实例讲述了Android开发实现布局中为控件添加选择器的方法.分享给大家供大家参考,具体如下: 在开发过程中,动态交互的一些展示效果可以通过布局中添加选择器实现,这样就可减少Activity等的代码数量,MVP开发中降低耦合性,使开发人员在写代码时只需要关注逻辑处理. 比如:一个按钮,原本背景图片为红色,字体为黑色,点击时候背景图片为黄色,字体改为白色. 这类简单效果在布局时就可以实现: <Button android:id="@+id/btn_start" android:

常见的原始JS选择器使用方法总结

 常见的原始JS选择器有getElementById,getElementsByName,getElementsByTagName,就使用上为大家总结下 常见的getElementById,getElementsByName,getElementsByTagName.但外国人不满意这些API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择.    1.getElementById    这是最常用的选择器,通过id来定位:   

常见的原始JS选择器使用方法总结_javascript技巧

常见的getElementById,getElementsByName,getElementsByTagName.但外国人不满意这些API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择. 1.getElementById 这是最常用的选择器,通过id来定位: 例: var test=document.getElementById("test").value;//获取文档中id为test的元素的值,并赋值给test变脸

jQuery过滤选择器:not()方法使用介绍_jquery

jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

jquery 选择器使用方法详解

先看几个实例 选择器允许您对 HTML 元素组或单个元素进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. jQuery 属性选择器