查找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. Redis命令学习-Transaction（事务）

    DISCARD ​DISCARD :取消事务,放弃运行事务块内的全部代码.假设在使用WATCH命令监视某个key.则取消监视,等同于UNWATCH. ​返回值:总是返回ok.    ​     ​ ...

  2. xml中控件调用构造方法

    系统控件view有三个构造方法,分别如下 public DrawView(Context context) { super(context); } public DrawView(Context co ...

  3. ASPNET 页面编码

    转自:http://www.cnblogs.com/libingql/archive/2009/04/11/1433771.html 设置ASPNET页面编码格式 1.Web.Config设置 < ...

  4. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  5. XHTML是什么？XHTML与HTML的区别

    经常看到web前端开发人员口中提到XHTML,相信很多web前端开发的新手们感到很疑惑,甚至有些时候认为XHTML就是HTML,这个观点是错误的,今天零度就给大家好好说道说道XHTML和HTML的区别 ...

  6. js对象基础写法练习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 去除inline-block元素间距

  8. python之-字符编码

    1.内存和硬盘都是用来存储的. CPU:速度快 硬盘:永久保存 2.文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就可以启动一个进程,是在内存中的,所以在编辑器编 ...

  9. Myeclipse集成Maven（图文说明）

    myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.2.5 myeclipse 2013 安装 Maven 之前要求先确定你的 JDK 已经安装配置完毕.Maven是 ...

  10. battery-获取手机电量信息

    我们如果想要获得手机的电池电量信息,可以借助广播来实现.因为当手机电池电量发生变化的时候,系统会发送一个广播.具体代码如下 //注册 intentFilter.addAction(Intent.ACT ...