• Jquery学习笔记:获取jquery对象的基本方法


    jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能。

    在web页面中,所有的js操作都是围绕操作dom对象来的。而jquery对象就是对dom对象的封装。整个jquery代码的主要工作就是获取相应的jquery对象,然后调用对象的各种方法进行操作。也就是获取jquery对象是编写代码的核心和基础。

       通过jquery提供的方式,可以有很多种获取jquery对象的方法,下面会介绍一些常用的方式。

       在jquery中,是通过各式各样的选择器来获取jquery对象的。

       选择器是一个字符串,传给$函数,返回jquery对象。

    需要特别注意的, 一个jquery对象不是说就对应一个dom对象(html元素),而是包含1个或多个dom对象(即html元素)。

    1、通过html元素的id值 获取对象

    var obj = $("#userid");

    alert(obj.length);  //正常是1,因为id在html元素中必须是唯一的。即使不唯一,也只会返回包含一个元素的数组,是第一个满足id条件的元素.

    alert(obj.selector); //显示的内容为 #userid

    alert(obj.html());  //html()方法返回对应元素包含的html内容

    2、通过html元素的标签 获取对象

    如 $("body") 获取到body元素。独立采用这种方式的场景很少,因为一个html页面中标签是大量重复的。

    比如$("div") 会获取到页面上所有标签为div的元素。

    还有一种特殊的方式 $("*") 获取页面所有的元素。这个可能对一些工具有用,比如统计页面的一些数据。

    3、通过css样式值获取jquery对象

    在html页面中,每个元素的id是唯一的,而且一个元素只有1个id值。

    但对于元素的样式则不一样,一个元素可以有多个样式值(如class="btn btn-default",这里有两个样式),不同的元素可以设置相同的样式值。

    而且往往大部分场景是这样的,因为样式的设置就是可以用来共享,让不同的元素有同样风格的展示。

      var obj = $(".btn"); 

      alert(obj.length);  //显示的数目是配置了样式为btn的元素个数
      alert(obj.selector); //显示 .btn
      alert(obj.html());  //因为obj中有多个元素,这里调用html()方法返回的是第一个元素包含的html内容
      obj.each(function(index,data){ //each方法用于遍历obj中的元素
          alert(index+"="+data.innerHTML); //index是序号,从0开始;data是对应的元素,这里需要注意的是,这里的data不是jquery对象,而是dom对象
      });

    4、组合选择

    设置多个选择器,将每个选择器匹配到的元素合并在一起返回。注意,是合并的关系。不要和层次选择器混淆了。

    如:

    <div>
     <p id="pid"></p>
     <span class="cspan"></span>
     <div></div>
    </div>

    js代码

      var obj = $("#pid,.cspan");   //将id为pid 和 样式为 cspan的的元素都返回
      alert(obj.length); //2

    这种场景应用不多,完全可以分多次获取元素,合并在一起主要有时简化代码编写,比如对这些返回额元素执行一些共性的操作。

    5、jquery对象和dom对象的互相转换

    将dom对象传给$方法返回的就是jquery对象

      var obj = document.getElementById("userid");  //通过原生的dom方法获取 dom对象
      alert(obj.innerHTML);  //显示dom对象包含的html内容
      var jobj = $(obj);  //将dom对象转换为jquery对象

      alert(jobj.length); //显示1,因为只包含了1个dom对象
      alert(jobj.html());  //调用jquery的方法,显示其包含的dom对象包含的html内容

    直接通过下标引用就可以获取到jquery对象中包含的dom对象,如:

      var obj = $("#userid");
      var domObj = obj[0]; //因为这里的obj是通过id获取的,只包含一个dom元素,所以下标取0
      alert(domObj.innerHTML); //获取dom元素的内容

    如果对于包含多个dom对象的jquery对象,要想获取其中所有元素,可以通过下标获取,也可以通过前面介绍的each方法来遍历。

    6、获取jquery对象中的某个jquery对象

    通过选择器获取到的jquery对象可能包含多个dom对象。

    这时我们可以通过  jqueryObj[序号]  或 jqueryObj.get(序号)  这两种方式获取到的是 dom对象。

    要直接获取到jquery对象,需要用 jqueryObj.eq(序号) 这种方式。 或者通过 $(dom对象)将dom对象转成jquery对象。

    7、小结

       上面介绍了获取jquery对象最简单和基本的几种方式。下面的文章中会介绍更多的方法。

  • 相关阅读:
    十一周总结
    第十周课程总结
    第九周课程总结&实验报告
    第八周课程总结&实验报告
    第七周&实验报告五
    第六周&Java实验报告四
    课程总结
    第十四周课程总结
    第十三周总结
    十二周课程总结
  • 原文地址:https://www.cnblogs.com/51kata/p/5101819.html
Copyright © 2020-2023  润新知