（MC嘉）jQuery基础使用与样式篇

                                        jQuery基础使用与样式篇

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：曾维嘉

撰写时间：2020年05月02日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

什么是 jQuery ？

      

            jQuery是一个JavaScript函数库。

            jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

            jQuery库包含以下功能：

                HTML 元素选取

                HTML 元素操作

                CSS 操作

                HTML 事件函数

                JavaScript 特效和动画

                HTML DOM 遍历和修改

                AJAX

                Utilities

            提示： 除此之外，jQuery还提供了大量的插件

       

        1.2 如何使用jQuery

      

jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过<script>标签引入jQuery库即可

       

        1.3 jQuery的语法

       

            jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作

            基础语法：$(selector).action();

                - $美元符号定义jQuery

                - selector 选择符需要查找的元素  支持css1~css3中的主流选择器

                - action() 执行对元素的操作

            例如：

                $("p").hide();//隐藏所有 <p> 元素

      

        $(".box").hide();

 

 

 

 

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的方法了

       

            1.DOM对象转换为jQuery对象

                var box = document.getElementById("box");//DOM对象

                $(box);//jQuery对象

            2.jQuery对象转换为一个DOM对象

                var $divs=$("div");//jQuery对象  divs中包含所有的$divs元素

                var div=$divs[0];//div为DOM对象

                使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

                var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

       

$(document).ready(function () {

            通过原生的JS代码获取DOM对象

            var box = document.getElementById("box");//dom对象

            console.log(box);

            var jqBox = $(box);//jquery对象

            console.log(jqBox);

            var $box = $("#jqBox");//jQuery中的对象

            var div = $box[0];//DOM对象

            var div = $box.get(0);//DOM对象

            console.log(div);

        })