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. [React] Validate React Forms with Formik and Yup

    Validating forms in React can take several lines of code to build. However, Formik's ErrorMessage co ...

  2. OpenGL ES3.0

    到今天,喜欢上了非常酷的图片处理和游戏,经了解,大部分都要使用opengl es,所以准备开始学习,然后深入学习cocos2d,GPUImage.平台为IOS OpenGL ES OpenGL ES ...

  3. 解决CentOS下无法发送邮件的问题

    最近有个项目从虚拟主机迁到云主机上,换了个环境,原来用于找回密码的发送邮件功能竟然用不了了!反应极慢,导致tenginx报504网关超时错误. 5.5 or 7.0, sockets 初次百度,看了别 ...

  4. SpringBoot 启动错误搜集

    Spring Boot:The Bean Validation API is on the classpath but no implementation could be found https:/ ...

  5. asp.net正则表达式类的定义

    using System; using System.Collections; using System.Reflection; using System.Reflection.Emit; using ...

  6. 微信小程序 - async/await

    下面只是做一些介绍以及使用的原因,详情介绍还请移步博主:https://www.cnblogs.com/SamWeb/p/8417940.html regenerator-runtime下载:http ...

  7. 用Jersey构建RESTful服务7--Jersey+SQLServer+Hibernate4.3+Spring3.2

    一.整体说明 本例执行演示了用 Jersey 构建 RESTful 服务中.怎样集成 Spring3 二.环境 1.上文的项目RestDemo 2.Spring及其它相关的jar ,导入项目 三.配置 ...

  8. CTP交易函数大全

    管理接口 交易接口

  9. Vue项目的npm环境搭建

    Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...

  10. 【Zookeeper】源码分析之持久化(三)之FileTxnSnapLog

    一.前言 前面分析了FileSnap,接着继续分析FileTxnSnapLog源码,其封装了TxnLog和SnapShot,其在持久化过程中是一个帮助类. 二.FileTxnSnapLog源码分析 2 ...