zoukankan      html  css  js  c++  java
  • 第二章《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的常用基本选择器,敬请期待。

  • 相关阅读:
    Jquery zTree 插件实现简单的省市下拉
    requestAnimationFrame
    浏览器请求与域名的关系
    斐波那契数列 算法实现
    重置 bootstrap-fileinput
    Python 不定长参数 *args, **dictargs
    IPMITOOL常用操作指令
    IPMI 配置BMC用户设置
    图床折腾记
    [算法总结] 20 道题搞定 BAT 面试——二叉树
  • 原文地址:https://www.cnblogs.com/zyj469470971/p/2354075.html
Copyright © 2011-2022 走看看