查找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. 在 Android 应用程序中使用 SQLite 数据库以及怎么用

    part one : android SQLite 简单介绍 SQLite 介绍 SQLite 一个非常流行的嵌入式数据库.它支持 SQL 语言,而且仅仅利用非常少的内存就有非常好的性能.此外它还是开 ...

  2. C语言的有符号与无符号,二进制整数的扩展与截断

    C语言的有符号与无符号,二进制整数的扩展与截断 前一节说了整数的表示方式,,也就是无符号编码与补码编码.这一届说一下二进制整数的扩展与截断,这部分内容与C语言挂钩.so,我们先看下面C语言的有符号和无 ...

  3. Objective-C_类的扩展

    一Category的定义和使用 二Extension的定义和使用 三Protocol的定义和使用 delegate的使用 一.Category的定义和使用 Category,分类或类目.主要作用是为没 ...

  4. solrj简介

    SolrJ基于httpClient: 使用SolrJ操作Solr会比利用httpClient来操作Solr要简单. SolrJ是封装了httpClient方法,来操作solr的API的. SolrJ底 ...

  5. js全局的解析与执行过程

    先看下面实例的执行结果: alert(a);//undefined alert(b);//报错 alert(f);//输出f函数字符串 alert(g);//undefined var a = 1; ...

  6. 5个jvm命令

    本文是Neward & Associates的总裁Ted Neward为developerworks独家撰稿“你不知道5个……”系列中的一篇,JVM是多数开发人员视为理所当然的Java功能和性 ...

  7. node搭建服务器

    创建简单的服务器,可以简单连接 var http = require("http"); var server = http.createServer(); server.on(&q ...

  8. 多行文本溢出显示...的方法(-webkit-line-clamp)

    限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为了实现该 ...

  9. Highcharts使用的一些总结

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...

  10. 洛谷 P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver

    P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver 题目描述 The cows are out exercising their hooves again! There are N ...