查找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. server环境信息【C#代码获取】

    server环境信息[C#代码获取] public class ServicesMessage { [DllImport("kernel32", CharSet = CharSet ...

  2. js---12数据类型,数据类型转换，NaN,

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. Elasticsearch之源码编译

    前期博客 Elasticsearch之下载源码 步骤 (1)首先去git下载源码 https://github.com/elastic/elasticsearch/tree/v2.4.3 下载下来,得 ...

  4. spark读写mysql

    spark读写mysql除官网例子外还要指定驱动名称 travels.write .mode(SaveMode.Overwrite) .format("jdbc") .option ...

  5. hadoop常用指令

    1.格式化名称节点:hadoop namenode -format 2.操作hadoop文件系统:hadoop fs -ls / 3.设置ubuntu默认以命令行方式启动 sudo gedit /et ...

  6. java种instanceof方法和getclass方法的区别

    在比较一个类是否和另一个类属于同一个类实例的时候,我们通常可以采用instanceof和getClass两种方法通过两者是否相等来判断,但是两者在判断上面是有差别的,下面写个测试类. public c ...

  7. 00084_Map接口

    1.Map接口概述 通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同. (1)Collection中的集合,元素是孤立存在的(理解为单身),向集 ...

  8. 虚拟机上的Ubuntu开机显示“无法应用原保存的显示器配置”

    如图: 解决方法: 删除monitors.xml 文件 rm ~/.config/monitors.xml

  9. 关于bat的变量赋值和解析机制

    以下的演示涉及几个知识点: 1. 怎样把命令输出内容保存到变量中? 2. 多次改变变量值,为什么在for或是if的()中的无效,怎样变通? 3. bat的function实现? 见代码,和代码凝视 : ...

  10. 【MySQL】常见错误与经常使用命令的集锦

    [背景介绍]     在使用SQL Server数据库期间,想必大家一定都有过解决各种问题的经历了.非常多时候,都会在大家的博客中看到问题与解决方式. 如今开发使用的是MySQL数据库.如今来看,发现 ...