jQuery基础使用与样式篇

原创于 2020-05-18 23:52:29 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery基础专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨jQuery选择器的功能，包括ID选择器的高效使用，以及jQuery对象与DOM对象的区别。介绍了如何通过jQuery简化DOM操作，提高前端开发效率。

1.0 jQuery选择器

        页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。
        jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。
        jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起:
   
   1.1 ID选择器   $("#id");
   
        id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
        原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
        注意:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，
             将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

1.2 么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，jQuery还提供了大量的插件

    1.3 何使用jQuery
    
        jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过<script>标签引入jQuery库即可
        jQuery下载地址：https://jquery.com/download/
    
    1.4 Query的语法
   
        jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作
        基础语法：$(selector).action();
            - $美元符号定义jQuery
            - selector 选择符需要查找的元素  支持css1~css3中的主流选择器
            - action() 执行对元素的操作
        例如：
            $("p").hide();//隐藏所有 <p> 元素

1.5 ery对象

        在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象
        $(".box");//jQuery对象

1.6 OM对象与jQuery对象的区别

        1.DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性
        2.jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。
          jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法

通过jQuery语法获取id为jqBox的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式

JS对象只能调用JS中提供的方法和属性，不能使用jquery中的方法和属性
jquery对象只能使用jQuery的方法和属性，不能使用JS提供的方法和属性

        通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：
             通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
             通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，
             而不需要我们具体知道哪个DOM节点有那些方法，
             也不需要关心不同浏览器的兼容性问题，
             我们通过jQuery提供的API进行开发，代码也会更加精短。
    
    1.7 OM对象与jQuery对象之间的转换  //JS对象包含 DOM对象
  
        jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，
        为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。
        我们使用jQuery的同时也能混合JavaScript原生代码一起使用。
        在很多场景中，我们需要jQuery与DOM能够相互的转换，
        它们都是可以操作的DOM元素，jQuery是一个类数组对象，
        而DOM对象就是一个单独的DOM元素。

        相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，
        通过传递不同的参数而产生不同的作用。
        如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
        通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了