查找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. openssl之BIO系列之25---结束语

    (作者:DragonKing, Mail: wzhah@263.net ,公布于:http://openssl.126.com之ope nssl专业论坛) 经过半个月左右,最终将BIO的结构和各个分支 ...

  2. ajax ---- json 和 xml 区别

    2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...

  3. CSS的导入方式：link与import方式的区别

    在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...

  4. oracle取随机结果测试

    http://www.2cto.com/database/201307/227524.html

  5. [REASONML] Using Javascript npm package from REASON

    For example, we want to use moment.js inside our ReasonML code. What we can do is create a module fi ...

  6. OPENSSL 制作 Ikev2证书

    OPENSSL 制作 Ikev2证书 在一个 VPS 上配置 IKEV2 VPN 服务器时,用 OPENSSL 制作了所需的数字证书,奇怪的怎么弄都无法连接服务器,一直提示 "IKE_SA ...

  7. JavaScript--数据结构与算法之排序

    排序总结————常见的排序 常见的9中排序(冒泡,选择,插入(二分插入,希尔),归并,快速,堆,计数,基数,桶排序)可分为两类 比较排序:冒泡,选择,插入(二分插入,希尔),归并,堆,快速 非比较排序 ...

  8. Vue框架学习笔记

    <div id="app"> </div> var app = new Vue({ el:"#app", // 绑定的元素 data:{ ...

  9. Git安装及密钥的生成并上传本地文件到GitHub上

    之前用的GitHub,不太熟练,一直在上传的过程中遇到了一些问题,看了网上诸多教程,总觉得很乱,特参考一些资料,总结了一篇完整的操作步骤,从下载安装到上传文件,亲测有效 1.下载Git软件:https ...

  10. STL中erase()的陷阱

    最近在刷stl源码剖析这本书时,对于vector的erase()函数引起了我的注意 在删除单个元素时是这样定义的: iterator erase(iterator position){ !=end() ...