13-2 jquery介绍

发布时间：2023-09-06 02:04责任编辑：彭小芳关键词：暂无标签

1 什么是 jQuery

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

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

关于jQuery的相关资料：

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

2 jQuery 的两大特点

链式编程：比如.show()和.html()可以连写成.show().html()。
隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

3 使用 jQuery 的基本步骤

（1）引包

（2）入口函数

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

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

例子：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>引入jquery</title> 6 </head> 7 <body> 8 <script src="jquery-3.3.1.min.js"></script> 9 10 <div id="app"></div>11 <div class="box"></div>12 <div class="box"></div>13 <script>14 ????console.log($(‘#app‘));15 ????console.log($(‘.box‘));16 ????console.log($(‘div‘));17 ????$(‘div‘).css({18 ??????????‘width‘: ‘200px‘,19 ????????????‘height‘: ‘200px‘,20 ????????????"background-color":‘red‘,21 ????????????‘margin-top‘:‘20px‘22 })23 ????24 </script>25 26 27 </body>28 </html>

View Code

4 入口函数

原生 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了，不用等到所有的外部资源都加载完成。

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

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 获取这些元素节点的方式是：（获取的都是数组）

1 ??//获取的是数组，里面包含着原生 JS 中的DOM对象。2 　　console.log($(‘#app‘));3 　　console.log($(‘.box‘));4 　　console.log($(‘div‘));

二者相互转换

1、 DOM 对象转为 jQuery对象：

$(js对象);

2、jQuery对象转为 DOM 对象：

 ?jquery对象[index]; ?????//方式1（推荐） ?jquery对象.get(index); ?//方式2

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

$(‘div‘)[1].style.backgroundColor = ‘yellow‘;$(‘div‘)[3].style.backgroundColor = ‘green‘;

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

13-2 jquery介绍

原文地址：https://www.cnblogs.com/huningfei/p/9332527.html

13-2 jquery介绍

1 什么是 jQuery

知识推荐