Jquery 选择器 详解

 

在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery

各种在线工具地址:http://www.ostools.net/

一、基本选择器

1 $("#div1").html("hello world 1"); //根据id匹配元素(a)
2 $(".c1").html("hello  world 2"); //根据Yclass匹配元素(b)
3 $("span").html("hello world 3"); //根据元素名称匹配 (c)
4 $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div(b c)
5 $("*").html("hello world 5"); //匹配页面所有元素,也包含body

二、层级选择器

1 $("body span").html("hello world 1"); //选取body中所有的span(a b d)
2 $("body>span").html("hello world 2"); //选取body元素的子span元素(a b)
3 $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素,注意是同级元素
4 $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)
5 $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div
6 $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)

三、基本过滤选择器

1 $("div:first").html("hello world 1"); //选取所有div中的第一个div
2 $("span:last").html("hello world 2"); //选取所有span中的最后一个
3 $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span
4 $("span:even").html("hello world 4"); //选取索引为偶数的span,索引从0开始
5 $("span:odd").html("hello world 5"); //选取索引为奇数的span,索引从0开始
6 $("span:eq(2)").html("hello world 6"); //选取指定索引的span,索引从0开始
7 $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span,不包含指定索引
8 $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span,不包含指定索引
9 $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...

四、内容过滤选择器

1 $("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素
2 $("span:empty").html("hello world 2"); //选取空的span元素
3 $("div:has(span)").html("hello world 3"); //选取包含span的div元素
4 $("span:parent").html("hello world 4"); //选取包含子元素的span元素,包含文本

五、属性过滤选择器

1 $("span[id]").html("hello world 1"); //选取有属性id的span元素
2 $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素
3 $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素
4 $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素
5 $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素
6 $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素
7 $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素

六、子元素过滤选择器

1 $("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素
2 $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素
3 $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素
4 $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素
5 $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素
6 $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素

七、表单对象属性过滤选择器

1 $("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框
2     $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框
3     $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框
4     $("select option[selected]").each(function () {  //选取 下拉框 选中的 option
5         alert($(this).val());
6     });

八、选择器要注意的地方

 1 <body>
 2     <div id="div#1">aaaaaaaaaaa</div>
 3     <div class="c[1]">bbbbbbbbb</div>
 4     <div class="c1">
 5         <div name="div">ccccccccc</div>
 6         <div name="div">ddddddddd</div>
 7         <div name="div">eeeeeeeee</div>
 8         <div class="c1" name="div">fffffffff</div>
 9     </div>
10     <div class="c1" name="div">gggggggg</div>
11     <div class="c1" name="div">hhhhhhhh</div>
12 </body>
13
14 $(function () {
15     //有时在id或是class中有一些特殊字符如 [ 等,需要用反斜杠进行转义
16     $("#div\\#1").html("hello world 1");
17     $(".c\\[1\\]").html("hello world 2");
18     //有没有空格的区别
19     //有空格是选取class等于c1的div里面的name等于div的div(c d e f)
20     $(".c1 [name=div]").html("hello world 3");
21     //没有空格是选取class等于c1并且name等于div的div (f g h)
22     $(".c1[name=div]").html("hello world 4");
23 });

js 判断字符串是否包含另外一个字符串

 

示例代码:

1     <script type="text/javascript">
2         var str = "测试一个字符串(ehtrzes)是否包含另外一个字符串";
3         if (str.indexOf("(ehtrzes)") >= 0) {
4             alert('字符串中包含(ehtrzes)字符串');
5         } else {
6             alert('字符串中 不包含(ehtrzes)字符串');
7         }
8     </script>

indexOf用法详解:
        返回 String 对象内第一次出现子字符串的字符位置。 
        JavaScript的indexOf忽略大小写
           str.indexOf(subString, startIndex) 
           参数
           strObj 
           必选项。String 对象或文字。 
           subString 
           必选项。要在 String 对象中查找的子字符串。 
           starIndex 
           可选项。该整数值指出在 String 对象内开始查找的索引。如果省略,则从字符串的开始处查找。 
           说明
           indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。 
           如果 startindex 是负数,则 startindex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。 
        indexOf函数方法返回一个整数值,指出 String 对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。如果 startindex 是负数,则 startindex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。

对于JavaScript的indexOf忽略大小写
        JavaScript中indexOf函数方法返回一个整数值,指出 String 对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。如果 startindex 是负数,则 startindex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。
        indexOf函数是从左向右执行查找。否则,该方法与 lastIndexOf 相同。

Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串的更多相关文章

  1. js 判断字符串是否包含另外一个字符串

    示例代码: <script type="text/javascript"> var str = "测试一个字符串(ehtrzes)是否包含另外一个字符串&qu ...

  2. jQuery选择器详解及实例---《转载》

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  3. [置顶] Jquery学习总结(二) jquery选择器详解

    1.基本选择器 l ID 根据元素ID选择 l Elementname 根据元素名称选择 l Classname 根据元素css类名选择 举例: <input type=”text” id=”I ...

  4. jQuery选择器详解

    根据所获取页面中元素的不同.可以将jQuery选择器分为:四大类,其中过滤选择器在分为六小类 jQuery选择器 基本选择器   层次选择器   过滤选择器 简单过滤选择器 内容过滤选择器 可见性过滤 ...

  5. JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) ? 1 2 var str = "123" console.log(str.indexOf("2&qu ...

  6. 关于前端JS判断字符串是否包含另外一个字符串的方法总结

    RegExp 对象方法 test() var str = "abcd"; var reg = RegExp(/d/); console.log(reg.test(str)); // ...

  7. js判断某个字符串是否包含另一个字符串

    1.indexOf():推荐,可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. var str = "123" console. ...

  8. java中如何判断一个字符串是否包含另外一个字符串的方法

    indexOf(String s)的使用,如果包含,返回的值是包含该子字符串在父类字符串中起始位置: 如果不包含必定全部返回值为-1 package my_automation; public cla ...

  9. jQuery-强大的jQuery选择器 (详解)[转]

      1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(&quo ...

随机推荐

  1. 【python】使用py3-bencode打开torrent文件

    没想到这个原始版本访问量超过了后继版本,估计有些流量是搜索引擎带来的,有些人并不会点击左边“我的随笔”去找新的版本. 现把后继版本地址贴一下:http://www.cnblogs.com/xiande ...

  2. memory拷贝与string拷贝的区别

    1.memory拷贝,根据拷贝的字节个数,从src一个一个字节拷贝到dst,拷贝过程不管src的取值,也不管dst是否能容纳.2.因此,对于memory拷贝,src中NULL字符(取值为0的字符)后面 ...

  3. python抓取数据,python使用socks代理抓取数据

    在python中,正常的抓取数据直接使用urllib2 这个模块: import urllib2 url = 'http://fanyi.baidu.com/' stream = urllib2.ur ...

  4. android中RecyclerView控件实现长按弹出PopupMenu菜单功能

    之前写过一篇文章:android中实现简单的聊天功能 现在是在之前功能的基础上,添加一个长按聊天记录,删除对应聊天记录的功能 RecyclerView控件,没有对应的长按事件,我们需要自己手工添加,修 ...

  5. android中实现简单的聊天功能

    这个例子只是简单的实现了单机版的聊天功能,自己跟自己聊,啦啦~~ 主要还是展示RecyclerView控件的使用吧~ 参考我之前写的文章: android中RecyclerView控件的使用 andr ...

  6. performSelector 多个参数

    [self performSelector:@selector(callFooWithArray) withObject:[NSArray arrayWithObjects:@"first& ...

  7. LintCode: Longest Words

    C++ class Solution { public: /** * @param dictionary: a vector of strings * @return: a vector of str ...

  8. fread/fwrite

    fread/fwrite第二个参数和第三个参数的区别以及与返回值的关系 size_t fwrite_unlocked(const void * __restrict ptr, size_t size, ...

  9. Nginx 与Tomcat 实现动静态分离、负载均衡

    Nginx 与Tomcat 实现动静态分离.负载均衡 一.Nginx简介: Nginx一个高性能的HTTP和反向代理服务器, 具有很高的稳定性和支持热部署.模块扩展也很容易.当遇到访问的峰值,或者有人 ...

  10. SpringMVC学习笔记二:常用注解

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6831976.html  参考:http://www.cnblogs.com/leskang/p/5445698 ...