查找API，jQuery选择器，定位标签

1.基本选择器

  • id定位标签
  • class属性定位标签
  • 标签名定位标签

2.举例

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

  </head>

  <body>

      <div id="div1ID">div1</div>

      <div id="div2ID">div2</div>

      <span class="myClass">span</span>

      <p>p</p>

      <script type="text/javascript">

       //1)查找ID为"div1ID"的元素个数

         $(“#divID”.size())

      //2)查找DIV元素的个数

         $(“div”).size();

      //3)查找所有样式是"myClass"的元素的个数

          $(“.myClass”).size();

      //4)查找所有DIV,SPAN,P元素的个数 ,多个属性定位的时候，可以使用逗号隔开3

          $(“div,span,p”).zize();

      //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数

          $(“#div,.class,p”)

      </script>

  </body>

</html>

多个是可以使用，将他们隔开

2.层次选择器

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

  </head>

  <body>

    <form>

        <input type="text" value="a"/>

        <table>

            <tr>

                <td>

                    <input type="checkbox" value="b"/>

                </td>

            </tr>

        </table>

    </form>

    <input type="radio" value="c"/>

    <input type="radio" value="d"/>

    <input type="radio" value="e"/>

    <script type="text/javascript">

     //1)找到表单form下所有的input元素的个数

      $(“form input”).size();

      //2)找到表单form下所有的子级input元素个数

      $(“form> input”).size();
      第一个和第二个是区别：第一个是所有的input标签。第二个是form的子一代，子二代不包括在内。

      //3)找到表单form同级第一个input元素的value属性值

      $(“form+input ”).val();

      //4)找到所有与表单form同级的input元素个数
       alert( $("form ~ input").size() )
 </script>
  </body>

</html>

总结：form标签下的标签

$("form input"）.size();

form标签下子一代的标签

　　  $("form > input").size()

form标签的同一级的第一个标签

$("form +input"）

form标签同一级的标签

　　 $("form ~ input")

3.增强基本选择器

格式：$("ul li ：XX").text();

$(":header"),css("XX","XX").css("XX","XX")……当有很多的css样式的时候，可以使用一直，的方式向下添加。

//1)查找UL中第一个元素的内容

alert( $("ul li:first").text() );

//2)查找UL中最后个元素的内容

alert( $("ul li:last").text() );

//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始

alert( $("table tr:odd").size() );

//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始

alert( $("table tr:even").size() );

//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式

alert( $("table tr td:eq(1)").text() );

//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大

alert( $("table tr:gt(0)").size() );

//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小

alert( $("table tr:lt(2)").size() );

//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色

$(":header").css("background-color","red").css("color","blue");

//3)查找所有未选中的input为checkbox的元素个数

alert( $(":checkbox:NOT(:checked)").size() );

5.内容选择器

//1)查找所有包含文本"John"的div元素的个数

 alert( $("div:contains('John')").size() );

//2)查找所有p元素为空的元素个数

 alert( $("p:empty").size() );

//3)给所有包含p元素的div元素添加一个myClass样式

 $("div:has(p)").addClass("myClass");

//4)查找所有含有子元素或者文本的p元素个数,即p为父元素

 alert( $("p:parent").size() );

7.使用jQuery的作用是，可以方便的操作web页面的标签和样式参数。

  • val()：获取标签的value属性值【假定有value属性】
  • html（）：获取标签之间的内容，不用于xml文件。
  • text():获取标签之间的内容，用于任何格式的参数（推荐）
  • css（）：使用key-value的方式，给标签添加样式。
  • addClass():加已经定义好的样式。
  • size（）获取到属性的个数。
  • length:获取对象和数组中的对象个数。

jQuery笔记---选择器的更多相关文章

  1. jQuery笔记——选择器

    jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性 常规选择器 根据id选择元素就是 ...

  2. jQuery笔记---选择器(三)

    1.1查找隐藏的tr元素的个数 $(“table tr:hidden”).size() 查找所有可见的tr元素的个数 $(“table tr:not(:hidden)”).size()   一般是不使 ...

  3. jQuery笔记---选择器(二)

    1.选择器练习: 1)查找UL中的元素的内容 格式:$(“ul li:XX”).text() XX:代表方法 比如:获取到第一元素,然后获取当中的值 $(“ul li:first”).text() 获 ...

  4. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  5. jQuery笔记（一）jQuery选择器

    一.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含tes ...

  6. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  7. jQuery学习笔记——jQuery常规选择器

    一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

  8. Jquery笔记和ajax笔记

    Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...

  9. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

随机推荐

  1. Levmar:Levenberg-Marquardt非线性最小二乘算法

    Levmar:Levenberg-Marquardt非线性最小二乘算法 eryar@163.com Abstract. Levmar is GPL native ANSI C implementati ...

  2. javaweb三、JDBC访问数据库

    JDBC是J2SE的内容,是由java提供的访问数据库的接口,但没有提供具体的实现方法,需要数据库厂商提供,就是对应的数据库驱动. 这样的好处是可以方便的更换数据库,提高了扩展性.这也是面向接口编程的 ...

  3. Gym 100952 F. Contestants Ranking

    http://codeforces.com/gym/100952/problem/F F. Contestants Ranking time limit per test 1 second memor ...

  4. C_数组详解

    数组: 一 一维数组 1.1 一维数组的定义: 类型符 数组名[常量表达式]; int a[10]; 说明: 1.数组的命名规则遵循标识符命名规则. 2.定义时需要指定元素的个数.方括号里的常量表达式 ...

  5. eclipse个人插件

    1.SVN eclipse markets 安装m2e-subversion.svnkit 2.maven 本地装好mvn prefences导入maven安装目录和配置 3.单元测试覆盖率 EclE ...

  6. 洛谷P1316 丢瓶盖

    题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...

  7. NOIP2015运输计划（二分答案）

    题目描述 公元2044年,人类进入了宇宙纪元. L国有n个星球,还有n-1条双向航道,每条航道建立在两个星球之间,这n-1条航道连通了L国的所有星球. 小P掌管一家物流公司,该公司有很多个运输计划,每 ...

  8. 开发板Ping不通虚拟机和主机

    Ubuntu 16.04      win7 笔记本连接学校的无线网 开发板S3c2440与笔记本仅通过COM连接 问题描述: 设置了桥接,主机与虚拟机IP在同一网段后,主机与虚拟机可以Ping,但是 ...

  9. C#如何调用非托管的C++Dll

    现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...

  10. SSO单点登录学习总结（2）——基于Cookie+fliter单点登录实例

    1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...