jQuery小结

1.jQuery简介

1.1什么是jQuery？

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

1.2 如何使用jQuery

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

jQuery下载地址：https://jquery.com/download/

1.3 jQuery的语法

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

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

                - $美元符号定义jQuery

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

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

            例如：

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

2.jQuery对象与JS中的DOM对象

2.0 JavaScript中的DOM对象

例如：document.getElementById("box");DOM对象

2.1 jQuery对象

在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象

$(".box");jQuery对象

2.2 DOM对象与jQuery对象的区别

1.DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性

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

js中window.onload

window.onload = function () {

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

var box = document.getElementById("box");

console.log(box);js中的DOM对象

通过对象的属性修改对象的样式

box.style.width = "400px";

box.innerHTML = "这是一个JS对象";

        }jQuery中页面加载事件

        $(document).ready(function () {

通过jQuery语法获取id为jqBox的元素获得一个jQuery对象

调用该对象的html()方法进行更改内容

调用该对象的css()方法进行更改颜色样式

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

            console.log($box);

            $box.css("width", "400px");

            $box.html("这是一个jQuery对象");

 链式写法

            $("#jqBox").css("width", "400px").html("这是一个jQuery对象");

        })

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

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

   通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

                 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

                 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，

                 而不需要我们具体知道哪个DOM节点有那些方法，

                 也不需要关心不同浏览器的兼容性问题，

                 我们通过jQuery提供的API进行开发，代码也会更加精短。

2.3 DOM对象与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的方法了

            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);

        })

3.jQuery基本选择器

3.0 jQuery选择器

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。

     jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

    jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起:

3.1 ID选择器   $("#id");

id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。

原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

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

通过ID选择器获取元素

        var box = $("#box");

3.2 class选择器 $(".classname");

     类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

通过类选择器获取元素

        var wrap = $(".wrap");

3.3 element元素选择器 $("标签名称");

元素选择器，根据给定html标记名称选择所有的元素

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持，根据div标签的名称获取所有的div元素

        var divs = $("div");

3.4 全选择器  $("*")

       全选择器,也就是 *选择器

       在CSS中，经常会在第一行写下这样一段样式

       * {padding: 0; margin: 0;}

            通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素

输出所有页面元素

     var allElement = $("*");

3.5 层级选择器

      文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，

      可以把文档树当作一个家谱，那么节点与节点之间就会存在父子，兄弟，祖孙的关系了。选择器中的层级选择器就是用来处理这种关系子元素，后代元素，兄弟元素，相邻元素通过一个列表，对比层级选择器的区别

               选择器                                      描述

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

               $("parent > child") 子选择器：parent的直接子元素

               $("prev + next") 相邻兄弟选择器：匹配所有紧接在 prev 元素后的 next 元素

               $("prev ~ siblings")一般兄弟选择器：匹配 prev 元素之后的所有 siblings 元素

例：

        $("body div");//选择body中的所有div元素

        $("body>div");//选择body中直接的子元素div

        $("#box+div");//选择div#box紧跟后面的一个元素

        $("#box~div");//选择div#box元素的兄弟元素

4.jQuery其他的选择器 基本筛选选择器 属性选择器等

4.0 jQuery选择器之基本筛选选择器

            很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，

            为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。

            筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

        筛选选择器的用法与CSS中的伪元素相似，选择器用冒号":"开头，基本筛选器的描述见jQuery API文档：

            选择器

            $(":first") 获取匹配第一个元素      例如:$('li:first');

            $(":last") 获取匹配的最后个元素    例如:$('li:last');

            $(":not(selector)") 去除所有与给定选择器匹配的元素 例如:$("input:not(:checked)")

            $(":even")  匹配所有索引值为偶数的元素，从 0 开始计数 例如:$("li:even")

            $(":odd")  匹配所有索引值为奇数的元素，从 0 开始计数 例如:$("li:odd")

            $(":eq(index)")  匹配一个给定索引值的元素，从 0 开始计数 例如:$("li:eq(1)")

            $(":gt(index)")  匹配所有大于给定索引值的元素，从 0 开始计数 例如:$("li:gt(0)")

            $(":lt(index)")  匹配所有小于给定索引值的元素，从 0 开始计数 例如:$("li:gt(2)")

            $(":header")  匹配如 h1, h2, h3之类的标题元素 例如:$(":header").css("background", "#EEE");

            $(":animated")  匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)

            例如:$(":header").css("background", "#EEE");

            $(":focus")  匹配当前获取焦点的元素。

            $(":root")  选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。

                示例:设置<html>背景颜色为黄色

                $(":root").css("background-color","yellow");

        $(document).ready(function () {

            $("li:first").css("backgroundColor", "red");

            $("li:last").css("backgroundColor", "red");

            $("li:even").css("backgroundColor", "red");

            $("li:eq(1)").css("backgroundColor", "blue");

            var input = $("input[type='text']");

            console.log(input);

        })