13-2 jquery介绍
1 什么是 jQuery
jQuery 是 js 的一个库，封装了咱们开发过程当中经常使用的一些功能，方便咱们调用，提升开发效率。css
js库是把咱们经常使用的功能放到一个单独的文件中，咱们用的时候，直接引用到页面里便可。html
关于jQuery的相关资料：jquery
官网：http://jquery.com/编程
官网API文档：http://api.jquery.com/api
汉化API文档：http://www.css88.com/jqapi-1.9/数组
2 jQuery 的两大特色app
链式编程：好比.show()和.html()能够连写成.show().html()。ide
隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用咱们本身再进行循环，简化咱们的操做，方便咱们调用。函数
3 使用 jQuery 的基本步骤htm
（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'));
两者相互转换
一、 DOM 对象 转为 jQuery对象：
$(js对象);
二、jQuery对象 转为 DOM 对象：
jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
jQuery对象转换成了 DOM 对象以后，能够直接调用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结：若是想要用哪一种方式设置属性或方法，必须转换成该类型。
- 1. 22.jQuery介绍
- 2. jQuery Validate 介绍
- 3. jQuery 介绍
- 4. jQuery介绍
- 5. jQuery介绍（上篇）
- 6. jquery入门介绍
- 7. jQuery 模块介绍
- 8. JQuery简要介绍
- 9. jQuery 3教程(一)：jQuery介绍
- 10. jquery的each()详细介绍
- 更多相关文章...
- • 网站主机 介绍 - 网站主机教程
- • jQuery Mobile 简介 - jQuery Mobile 教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
- • 三篇文章了解 TiDB 技术内幕 —— 说计算
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 22.jQuery介绍
- 2. jQuery Validate 介绍
- 3. jQuery 介绍
- 4. jQuery介绍
- 5. jQuery介绍（上篇）
- 6. jquery入门介绍
- 7. jQuery 模块介绍
- 8. JQuery简要介绍
- 9. jQuery 3教程(一)：jQuery介绍
- 10. jquery的each()详细介绍