JQuery

1.为什么要使用JQuery

　　JQuery的火是有它的原因的,我们在用js写代码的时候会遇到一下一些问题:

　　　　1.window.onload事件的覆盖问题,只能写一个事件

　　　　2.代码的容错性差.

　　　　3.浏览器的兼容性问题

　　　　4.书写很繁琐,代码量多.

　　　　5.代码很乱,各个页面到处都是

　　　　6.动画系效果很难实现

jquery这些问题统统解决

　　要明确的是jquery是js的一个库,封装了我们开发过程中场常用的一些功能,方便我们调用

js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可

关于jquery的相关资料:

官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/

2.jquery的使用

使用步骤:

　　1.引包

　　2.入口函数

　　3.功能实现代码(事件处理)

引入的包的代码一定放在js代码的最上面

3.jquery的两个版本

　　一个是没有压缩版本一个是压缩版本.一般在开发的过程中使用任意一个都可以,但是在项目上线的时候就推荐使用压缩版

4.jquery的入口函数和$符号

　　4.1入口函数(重要)

　　　　原生js的入口函数的指的是:window.onload=function() {}

//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
       window.onload = function () {
           alert(1);
       }

　　　　jquery的入口函数写法有三种:

　　1.文档加载完毕.图片不加载的时候,就可以执行这个函数

$(document).ready(function () {
           alert(1);
       })

　　2.文档加载完毕,图片不加载的时候.就可以执行这个函数 (比较简洁)功能与一相似)

$(function () {
           alert(1);
       });

　　3.文档加载完毕,图片也加载完毕的时候,在执行这个函数

 $(window).ready(function () {
           alert(1);
       })

jquery入口函数与js入口函数的区别:

　　区别一:书写的个数不同:

　　　　js的入口函数只能出现一次,出现多次会存在事件覆盖的问题

　　　　jquery的入口函数.可以出现任意多次.并不存在事件覆盖问题

　　区别二: 执行时机不同　　

　　　　js的入口函数是在所有的文资源加载完毕后,才执行,这些文件资源包括:页面文档,外部的js文件,外部的css文件,图片

　　　　jquery的入口函数,是在加载文档完成后,就执行.文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完毕

　　　　文档加载的顺序: 从上往下边解析边执行

$实际上是表示一个函数名

 $(); // 调用上面我们自定义的函数$

 $(document）.ready(function(){}); // 调用入口函数

 $(function(){}); // 调用入口函数

 $(“#btnShow”) // 获取id属性为btnShow的元素

 $(“div”) // 获取所有的div标签元素

5.js中的DOM对象和jQuery对象的比较(重点难点)

　　二者的区别:

　　　　通过JQuery获取的元素是一个数组,数组中包含这原生JS中的DOM对象.

针对下面这样一个div结构:

<div></div>
    <div id="app"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div

通过原生的js获取这些元素节点的方式是:

 var myBox = document.getElementById("app");           //通过 id 获取单个元素
 var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
 var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过jquery获取这些元素节点的方式是: (获取的都是数组)

console.log($('#app'));
console.log($('.box'));
console.log($('div'));

设置当前四个div的样式:

$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

由于jquery自带了css()的方法,我们还可以直接在代码中给div设置css属性

总结:jquery就是把DOM对像重新包装了一下,让其具有了jquery方法

6.二者的相互转换　　

　　1.DOM对象转换成jquery对象

$(js对象);

　　2.jquery对象转换为DOM对象

jquery对象[index];      //方式1（推荐）

jquery对象.get(index);  //方式2

总结:如果想要用哪种方式设置属性或方法,必须转换成该类型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函数
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery对象，转换成了js对象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
</ul>
</body>
</html>

隔行换色代码

效果如下:

7.jquery的选择器

8.基本过滤选择器

9.属性选择器

10.筛选选择器