第二章《jQuery选择器(一)》

  在学习jQuery前,先要弄明白DOM对象与jQuery对象的区别:简单通俗理解的话可以认为DOM对象就是页面中的某一个具体的文本标签,而jQuery对象是基于DOM对象之上的,我们可以把某个DOM对象转化为jQuery对象。只有是jQuery对象才能使用jQuery中的方法以及属性。

  例:document.getElementById("xx")得到的是一个 id为的DOM对象。

        $("#xx")得到的是一个 jQuery对象。

  一.jQuery工厂函数的语法

  我们一般会使用通配符“$”来调用jQuery工厂函数如:

  jQuery("#xx")<==>$("#xx")<==>$(document.getElementById("xx"));

  二.jQuery对象访问

  使用工厂函数可将DOM元素包装成jQuery对象,从而可使用jQuery属性和方法对其进行操作。但是有时候可能需要从jQuery对象中获取或搜索所需要的DOM元素,以便直接使用JavaScript脚本来操作这些DOM元素。所以在jQuery中提供了丰富的对象访问方法。

  (1).get()、.get([index])  //用于获取所有陪陪的DOM元素集合,其中index参数可选,用于指定元素在集合中的位置索引从0开始,若指定的索引为负数则从匹配集合的末尾开始计数。

  例:$("li").get(1) //获取所有li标签中的第二个li标签。

  (2).index()、index(selector)、index(element) //用于在匹配的元素中搜索指定元素并范围其索引值。

  selector是一个选择器,表示在其中查找元素的jQuery集合;

  element表示在DOM元素或在jQuery对象中查找的第一个元素。

  若没有参数则返回的值指的是第一个元素在jQuery对象中相对于其同辈元素的位置。

  例:$("li").index(document.getElementById("xx")); //查找XX在 所有li中的索引

   $("li").index($("#xx")); //查找xx在所有li中的索引

   $("#xx").index("li");//查找xx在所有li中的索引

     $("#xx").index();//查找xx在同辈中的索引

  (3).each(function(){}) //遍历一个jQuery对象,以每个匹配元素做为上下文来执行一个行数。

  例:$("li").each(function(){

    alert($(this).text());

  });

  (4).selector 和context

  selector 该属性值为一个字符串,表示使用什么选择器来找到这个元素的。

  context 返回一个HTML对象,表示传给$()的原始的DOM 节点内容.

  例子:$("<ul></ul>").appendTo(document.body);

    $("ul").context   将得到:[object HTMLDocument]

    $("ul",document.body).context.nodeName.toLowerCase() 将得到body

    $("ul").selector 将得到ul

  三、jQuery与其他库共存

  在Web开发中可能会同事使用多个JavaScript库。除了jQuery之外,其他Javascript库也会使用$别名来创建对象。那么如何解决这一冲突就是一个必须考虑并加以解决的问题。由此jQuery便提供了noConflict方法用于专门解决这一问题。

  jQuery.noConflict()//将变量$的控制权让渡给第一个实现它的那个JavaScript库。

  介绍如何在局部使用$

  例:jQuery.noConflict();

      (function($){

       $(function(){

      alert($("#XX").text());//使用$作为jQuery的别名代码

    });  

  })(jQuery);

  在下一章节中会讲到jQuery的常用基本选择器,敬请期待。

原文地址:https://www.cnblogs.com/zyj469470971/p/2354075.html