jQuery基础(1)

阅读原文时间：2023年07月14日阅读：1

一、jQuery的介绍

在用js写代码时，会遇到一些问题，如下：

　　　　1）window.onload 事件有事件覆盖的问题，因此只能写一个事件；

　　　　2）代码容错性差；

　　　　3）浏览器兼容性问题；

　　　　4）书写很繁琐，代码量多；

　　　　5）代码很乱，各个页面到处都是；

　　　　6）动画效果很难实现；

关于window.onload,举一个例子:

例子

网址访问:

发现1 被覆盖了!

jQuery的出现,可以解决以上问题.

jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率.

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

关于jQuery的相关资料:

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

打开官网网址，看图标下面的英文说明

意思是写少量代码，实现更多的功能

j表示 JavaScript

query 表示查询

在前端里面，一个js文件，就是一个模块，这样更容易维护。

但是导入模块的时候，代码比较长。

<``script type="text/javascript" src="js/index.js"></``script``>

在python中，导入一个模块，直接import加模块名就可以了。

ECMAScript第五个版本，简称es5，目前的浏览器都支持。在es6中，有import。但是目前的浏览器不识别这个import，这是硬伤！

为了解决这个问题，出现了一个插件bebel，它能将es6的代码转换为es5，这样浏览器就能识别了，官方链接：

http://babeljs.io/

中文版官方链接

https://www.babeljs.cn/

打开网页，点击试用

左边是es6语法，右边会自动转换为es5语法

回顾之前js学的面向对象，新建文件index.js，内容如下：

function Student() {

this.name = 'easy';

this.age = 20;

}

Student.prototype.alertName = function(){

alert(this.name);

};

var stu1 = new Student();  //原型的模式创建对象

window.$ = window.jQuery = stu1;  //window.$和window.jQuery的值为stu1

导入index.js文件，使用console查看变量

网页查看console

其实jquery是基于原生js，封装了大量的方法，方便开发者使用。

打开官方网址，目前最新版本是3.3.1，点击下载

点击生产环境，就直接打开一个js页面，里面的代码是看不懂的。它经过压缩了！

开发环境是可以看，它没有压缩。压缩是根据分号进行的。所以写js代码的时候，结尾一定要加分号。

开发环境，打开网址后，没有下载按钮，怎么下载呢？很简单，将鼠标放到内容区域，右键另存为，就可以下载了。

文件名带min的，表示是进过压缩的。它把多余的空格都删除了，整个文件只有一行代码。

下载开发环境的js，简单的看一下源码

搜索getElementById

这里面的this，就是jquery对象。

3.学习jQuery，主要是学什么

初期,主要学习如何使用jQuery操作DOM,其实就是学习jQuery封装好的那些API

这些AOI的共同特县是:几乎全是方法.所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同.

4.jQuery的第一个代码

用原生js来实现下面代码效果

<script type="text/javascript">  
    window.onload = function(){  
        var oBtn = document.getElementsByTagName('button')\[0\];  //获取第一个button  
        var divArr = document.getElementsByTagName('div');  //获取所有div标签  
        oBtn.onclick = function () {  
            for (var i = 0; i < divArr.length; i++) {  
                divArr\[i\].style.display = "block";  //显示div  
                divArr\[i\].innerHTML = "赵丽颖";  //增加文字  
            }  
        }  
    }  
</script>

网页效果：

如果用jQuery写,保持其他的代码不变,<script>部分的代码修改为：（需要提前引入）

网页效果：

出现以下错误，表示没有加载jquery

5.jQuery 的两大特点

　　a.链式编程: 对同一个对象调用方法.show和.html可以连写成.show().html();

　　b.隐式迭代: 隐士对应的是显示.隐式迭代的意思是: 在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用.

链式编程举例:

访问网页，点击操作之后，效果如下：

查看console

二、jQuery的使用

1. 使用 jQuery 的基本步骤

（1）引包

（2）入口函数

（3）功能实现代码（事件处理）

如图：

主要：导包的代码一定要放在js代码的最上面。

2.jQuery 的版本

jQuery有两个大版本:

　　a. 1.x版本: 最新版为 v1.113

　　b. 2.x版本: 最新版为 v2.1.4（不再支持IE6、7、8）。

　　c. 3.x版本

下载jQuery包之后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js

它们的区别是：

　　a. 第一个是未压缩版,第二个是压缩版

　　b. 平时开发过程中,可以使用任意一个版本;但是,项目是上线的时候,推荐使用压缩版.

三、jQuery的入口函数和$符号

1. 入口函数（重要）

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

//原生 js 的入口函数。页面上所有内容加载完毕，才执行。

//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。

window.onload = function () {

alert(1);

}

而 jQuery的入口函数，有以下几种写法：

写法一：

//原生 js 的入口函数. 页面上所有内容加载完毕,才执行.
//不仅要等文本加载完毕,而且要等图片也要加载完毕,才执行函数.

window.onload = function(){
alert(1);
}

写法二：（写法一的简洁版）推荐

//2.文档加载完毕,图片不加载的时候,就可以执行这个函数
$(document).ready(function(){
alert(1)
})

写法三：

//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})

这个写法，相当于window.onload()

2. jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

　　a.JS 的入口函数只能出现一次,出现多次会存在时间覆盖的问题

　　b.jQuery 的入口函数,可以出现任意多次,并不存在时间覆盖问题

区别二: 执行时机不同:

　　a. Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

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

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

3. jQuery的`$`符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

<``script src="jquery-3.3.1.js"></``script``>

<``script``>

console.log($);

console.log(jQuery);

console.log($===jQuery);

</``script``>

打印结果：

从打印结果可以看出，$ 代表的就是 jQuery。

那怎么理解jQuery里面的 $ 符号呢？

$ 实际上表示的是一个函数名 如下：

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

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

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

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

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

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。

jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

四、js的DOM对象和 jQuery对象比较(难点,重点)

1. 二者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。它是一个伪数组，举例：

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

<``div``></``div``>

<``div id="app"></``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 获取这些元素节点的方式是：（获取的都是数组）

//获取的是数组，里面包含着原生 JS 中的DOM对象。

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

console.log($('.box'));

console.log($('div'));

查看结果：

设置当前4个div的样式：

$('div').css({

'width': '200px',

'height': '200px',

"background-color":'red',

'margin-top':'20px'

})

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

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

2. 二者的相互转换

(1)、 DOM 对象转为 jQuery对象：

$(js对象);

举例:

Document

哈哈哈

网页查看console

2、jQuery对象转为 DOM 对象：

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

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

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';

$('div')[3].style.backgroundColor = 'green';

举例：

Document

哈哈哈

网页效果：

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

3.隔行换色

举例：

juan
juan
juan
juan
juan

效果如下:

二、jQuery的选择器　　　　　　　　　　　　　　　　　　

我们以前在CSS中学习的选择器有：

*表示html里面的所有标签，包括head，meta，title….等等。这个很少用到！

今天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

下面的$("div1")写错了，应该是$("div")

代码如下：

效果如下:

使用如下代码，可以判断jquery是否导入，需要写在jquery入口函数前面一行

!window.jQuery && alert('jQuery未导入!请确认路径是否正确');

代码如下：

效果如下

代码如下：

属性元素器

分手应该体面
分手应该体面
分手应该体面
分手应该体面

效果如下：

代码如下：

我是第一个span标签我是第二个span标签我是第三个span标签

效果如下：

鼠标悬停换色效果

重点掌握siblings

哈哈哈哈哈哈

我是第一个span标签我是第二个span标签我是第三个span标签

网页效果：

你操作的是谁，那么this就是谁
比如操作li，那么this是li

选择器介绍完毕，内容比较多，大家根据之前学习到的css选择器可以更好的使用jquery选择器的用法

推荐一个网站，提供了选择器的所有方法，链接如下：

http://jquery.cuishifeng.cn/child.html

html，css，js，jquery关系图

三、jQuery动画效果　　　　　　　　　　　　　　　　

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

方式一：

$("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

举例：

访问网页，点击显示按钮，就显示红块

方式二：

$('div').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

网页效果

方式三：

$("div").show("slow");

参数可以是：

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示.

网页效果：

方式四：

//show(毫秒值，回调函数;

$("div").show(5000,function () {

alert("动画执行完毕！");

});

解释：动画执行完后，立即执行回调函数。

网页效果：

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

方式参照上面的show()方法的方式。如下：

$(selector).hide();

$(selector).hide(1000);

$(selector).hide("slow");

$(selector).hide(1000, function(){});

代码如下：

网页效果：

$('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

代码如下：

效果同上

原理就是给div添加了样式，动态的修改属性。打开控制台，查看网页代码，效果如下：

紫色区域，就是动态样式。

它是添加的行内样式，它的优先级最高

1、滑入动画效果：（类似于生活中的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

网页效果：

2、滑出动画效果：

$(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

网页效果：

3、滑入滑出切换动画效果：

$(selector).slideToggle(speed, 回调函数);

代码如下：

<script src="jquery-3.3.1.js"></script>  
<script>  
    $(function () {  
        //点击按钮后产生动画  
        $("button:eq(0)").click(function () {

            //滑入动画： slideDown(毫秒值，回调函数\[显示完毕执行什么\]);  
            $("div").slideDown(2000, function () {  
                alert("动画执行完毕！");  
            });  
        })

        //滑出动画  
        $("button:eq(1)").click(function () {

            //滑出动画：slideUp(毫秒值，回调函数\[显示完毕后执行什么\]);  
            $("div").slideUp(2000, function () {  
                alert("动画执行完毕！");  
            });  
        })

        $("button:eq(2)").click(function () {  
            //滑入滑出切换（同样有四种用法）  
            $("div").slideToggle(1000);  
        })

    })  
</script>

网页效果：

1、淡入动画效果：

$(selector).fadeIn(speed, callback);

作用：让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果：

$(selector).fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果：

$(selector).fadeToggle('fast', callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码如下：

<script src="js/jquery-3.3.1.min.js"></script>  
<script>  
    !window.jQuery && alert('jQuery未导入!请确认路径是否正确');  
    $(function () {  
        //点击按钮后产生动画  
        $("button:eq(0)").click(function () {

// //淡入动画用法1: fadeIn(); 不加参数
$("div").fadeIn();

// //淡入动画用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通过控制透明度和display

            //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms

// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");

            //淡入动画用法4:   fadeIn(毫秒值，回调函数\[显示完毕执行什么\]);

// $("div").fadeIn(5000,function () {
// alert("动画执行完毕！");
// });
})

        //滑出动画  
        $("button:eq(1)").click(function () {

// //滑出动画用法1: fadeOut(); 不加参数
$("div").fadeOut();

// //滑出动画用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通过这个方法实现的：display: none;
// //通过控制透明度和display

            //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms

// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");

            //滑出动画用法1:   fadeOut(毫秒值，回调函数\[显示完毕执行什么\]);

// $("div").fadeOut(2000,function () {
// alert("动画执行完毕！");
// });
})

        $("button:eq(2)").click(function () {  
            //滑入滑出切换  
            //同样有四种用法  
            $("div").fadeToggle(1000);  
        })

        $("button:eq(3)").click(function () {  
            //改透明度  
            //同样有四种用法  
            $("div").fadeTo(1000, 0.5, function () {  
                alert(1);  
            });  
        })  
    })  
</script>

网页效果：

语法：

$(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码如下：

jQuery基础(1)

一、jQuery的介绍

3.学习jQuery，主要是学什么

4.jQuery的第一个代码

5.jQuery 的两大特点

二、jQuery的使用

1. 使用 jQuery 的基本步骤

2.jQuery 的版本

三、jQuery的入口函数和$符号

1. 入口函数（重要）

2. jQuery入口函数与js入口函数的区别：

3. jQuery的$符号

四、js的DOM对象 和 jQuery对象 比较(难点,重点)

1. 二者的区别

2. 二者的相互转换

3.隔行换色

二、jQuery的选择器

属性元素器

三、jQuery动画效果

方式一：

方式二：

方式三：

方式四：

1、滑入动画效果：（类似于生活中的卷帘门）

2、滑出动画效果：

3、滑入滑出切换动画效果：

1、淡入动画效果：

2、淡出动画效果：

3、淡入淡出切换动画效果：

3. jQuery的`$`符号

四、js的DOM对象和 jQuery对象比较(难点,重点)

二、jQuery的选择器　　　　　　　　　　　　　　　　　　

三、jQuery动画效果　　　　　　　　　　　　　　　　