• jquery及jquery常用选择器使用


    本文为博主原创,未经允许不得转载:

    1.jquery强大之处:
       容易上手,强大的选择器,解决浏览器的兼容
       完善的时间机制,出色的ajax封装,丰富的ui
       
    2.jquery是一个javascript脚本库,不需要特别的安装,只需要我们在页面<head>标签内中,
      通过script标签引入jquery库即可。
      <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    3.jquery对象与dom对象的区别

      jquery对象与dom对象是不一样的,

      通过一个简单的例子,简单来区分下dom对象与jquery对象:
       <p id="imooc"> </p>
      我们要获取页面上这个id为imooc的p元素,然后给这个文本节点增加一
      段文字:“您好!欢迎学习jquery”,并且让文字的颜色变成红色。

      普通处理,通过标准的javascript处理
      var p = document.getElementById("imooc");
      p.innerHTML= '您好!欢迎学习jquery';
      p.style.coloe='red';

      通过原生dom模型提供的decument.getElementById("imooc")方法获取的dom元素就是一个dom对象,
      再通过innerHTML与style属性处理文本与颜色。

      jquery处理:
      var p = $("#imooc");
      p.html("您好,欢迎学习jquery").css('color','red');

      通过$("imooc")方法会得到一个p的jquery对象,p是一个类数组对象,这个对象里面包含了dom对象
    的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的javascript处理
    结果一致。

      通过jquery方法包装后的对象,是一类数组对象,它与dom对象完全不同,唯一相似的是他们都能
    操作dom。
     
       通过jquery处理dom的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个dom
    节点有哪些方法,也不需要关注浏览器的兼容问题,且代码也会更简洁。


    4.jquery对象转化成dom对象
      jquery库本质上还是javascript代码,它只是对javascript语言进行包装处理,为的是提供更好
    更方便快捷的dom处理与开发经常使用的功能。我们使用jquery的同时也能混合javascript原生代码
    一起使用。在很多场景中,我们需要jquery与dom能够相互的转换,他们都是可以操作的dom元素,
    jquery是一个类数组对象,而dom对象就是一个单独的dom元素。

      如何把jquery对象转成dom对象?
     
      利用数组下标的方式读取到jquery中的dom对象
      html代码:
               <div>元素一</div>
               <div>元素二</div>
               <div>元素三</div>
      javascript代码:
       var div = $('div')  //jquery对象
       var div1 = div[0]   //转化成dom对象
       div1.style.color = 'red'  //操作dom对象的属性
       
       用jquery找到所有的div元素,因为jquery对象也是一个数组结构,可以通过下标索引找到第一个
    div元素,通过返回的div对象,调用它的style属性,修改第一个div元素的颜色。这里需要注意的
    一点是,数组的索引是从0开始的,也就是第一个元素下标是0.
     
      通过jquery自带的get()方法
      jquery对象自身提供一个.get()方法允许我们直接访问jquery对象中相关的dom节点,get()方法中
    提供一个元素的索引:
       var div = $('div')  //jquery对象
       var div1 = div.get(0);   //通过get方法,转化成dom对象
       div1.style.color = 'red'  //操作dom对象的属性

       其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get
    方法.


    000000000000::

    jquery选择器值id选择器:


       页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发的一个重点.
    jquery提供了一系列的选择器帮助开发者达到这一目的.让开发者可以更少的处理复杂选择过程与性能
    优化,更多专注业务逻辑的编写.

    id选择器:一个用来查找的id,即元素的id属性.

       $("#id")

    id选择器也是基本的选择器,jquery内部使用javascript函数document.getElementById()来处理id
    的获取。原生语法的支持总是非常搞笑的,所以在操作dom的获取上,如果能采用id的话尽然考虑用
    这个选择器。


      注意:
          id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该
    id选择集合中的第一个dom元素。但这种行为不应该发生。有超过一个元素的页面使用相同的id是无效的。


    111111111111::
       
       jquery选择器值之类选择器
       
       类选择器,顾名思义,通过class样式类名来获取节点描述:
       
      $(".class");

      类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选。
      同样的jquery事项,对于类选择器,如果浏览器支持,jquery使用javascript的原生getelementByClassName()
    函数来实现的。


    22222222222::

        jquery选择器之元素选择器

       元素选择器:更具给定(html)标记名称选择所有的元素
       
       描述:  $("element");
       
       搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getelementByTagName()
    函数支持。
       var divs = document.getElementByTagName('div');
       得到页面所有的div元素。

    333333333::

        jquery选择器之全选择器(*选择器)
        
        在css中,经常会在第一行写下这样一段样式:

        *{padding:0px; margin :0px; }

        通配符*意味着给所有的元素设置默认的编剧。jquery中我们也可以通过传递*选择器来选中文档页面中的元素。
       
        描述: $("*");


    44444444444::

       jquery选择器之层级选择器

       文档中的所有的节点之间都是有这样活着那样的关系。我们可以吧节点之间的关系可以用传统的
    家族关系来描述。可以吧文档树当做一个家谱,那么节点与节点直接就会存在斧子,兄弟,祖孙的关系了。。

       选择其中的层级选择器就是用来处理这种关系的
       子元素  后代元素  兄弟元素 相邻元素

        通过一个列表,对比层级选择器的区别:


    通过一个列表,对比层级选择器的区别


             选择器                                描述
       $("parent > child")           子选择器::选择所有指定“parent”元素中指定的“child”的直接子元素

       $("ancestor descendant")     后代选择器:选择给定的祖先元素的所有后代元素,一个元素的后代可能是该元素的一个孩子,孙子等

       $("prev +next")           相邻兄弟选择器:选择所有紧接在“prev”元素后的“next” 元素

       $("prev ~ siblings")      一般兄弟选择器:匹配“prev”元素之后的所有兄弟元素,具有相同的父元素,并匹配过滤“siblings”选择器。


    异同点::

       层级选择器都有一个参考节点。
       后代选择器包含了子选择器的选择的内容。
       一般兄弟选择器包含相邻兄弟选择器所选择到的元素,必须在同一个父元素下。。。   
       

     


















  • 相关阅读:
    移动端如何强制页面横屏
    css实现内容渐变隐藏效果,手机网页版知乎内容隐藏效果的实现
    css3中样式计算属性calc()的使用和总结
    如何使用JS操纵伪元素
    HTML5全局属性汇总
    20 个 CSS高级样式技巧汇总
    网页开发中利用CSS以图换字的多中实现方法总汇
    html/css解决inline-block内联元素间隙的多种方法总汇
    [算法] 泊松分布、指数分布
    [算法] 递归
  • 原文地址:https://www.cnblogs.com/zjdxr-up/p/9083248.html
Copyright © 2020-2023  润新知