jQuery系列（一）：jQuery介绍
1、为什么要使用jQuery
（1）什么是jQuery
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
官网API文档：http://api.jquery.com/
（2）jQuery的第一个代码
使用原生js来实现下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
margin-top: 20px;
display: none;
}
</style> <script type="text/javascript">
window.onload = function(){
let oBtn = document.getElementsByTagName('button')[0];
let divArr = document.getElementsByTagName('div');
oBtn.onclick = function () {
for (let i = 0; i < divArr.length; i++) {
divArr[i].style.display = "block";
divArr[i].innerHTML = "赵云";
}
}
}
</script> </head>
<body> <button>操作</button>
<div></div>
<div></div>
<div></div> </body>
</html>
如果使用jQuery来写，保持其他代码不变，<script>部分的代码修改为：（需要导入jQuery）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<button>操作</button>
<div></div>
<div></div>
<div></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 获取dom元素
let oBtn = $('button'); //根据标签名获取元素
let oDiv = $('div'); //根据标签名获取元素
oBtn.click(function(){
oDiv.show(1000);//显示盒子
oDiv.html('赵云'); // 设置内容
});//事件是通过方法绑定的
})
</script> </body>
</html>
（3）：jQuery的两大特点
链式编程：比如
.show()和.html()可以连写成.show().html()。隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
2、jQuery的使用
（1）jQuery的基本使用：
a、导包 b、入口函数 （3）：功能实现代码（事件处理）
注意：导包的代码一定要放在js代码的最上面
（2）jQuery代码会有两个版本，一个是.min.js，一个是.js文件。
他们的区别是：
第一个是未压缩版，第二个是压缩版。
平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。
3、jQuery的入口函数和$符号
（1）入口函数（重要）
原生js的入口函数指的是：windows.onload = function(){};如下：
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
window.onload = function () {
alert(1);
}
jQuery的入口函数，有如下几种写法：
写法1：
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
}) 写法2：
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
}); 写法3：
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
注意：
jQuery入口函数与js入口函数的区别：
区别一：书写个数不同：
Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
（2）jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>
执行效果：
从打印结果可以看出，$代表的就是jQuery。
4、js中的DOM对象和jQuery对象比较
（1）二者区别
通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div
通过原生js获取这些元素节点的方式：
let myBox = document.getElementById("app"); //通过 id 获取单个元素
let boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
let 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 方法。
5、DOM对象和jQuery对象互相转换
（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';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
6、一个实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<script>
//入口函数
$(function () {
let jqLi = $("li");
for (let 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>felix</li>
<li>felix</li>
<li>felix</li>
<li>felix</li>
<li>felix</li>
<li>felix</li>
</ul>
</body>
</html>
效果图：
jQuery系列（一）：jQuery介绍的更多相关文章
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- Jquery 系列（2） 选择元素
Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...
- jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
- Jquery系列教程
最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...
- jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍
这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...
- jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍
jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
随机推荐
- opencv实现人脸识别（四） 人脸识别模块
到这一步就是进行人脸识别了. 流程图: 代码: import cv2 def recognize(cam): recognizer = cv2.face.LBPHFaceRecognizer_crea ...
- visual studio 用 vs code 的 hot key
记得 2 年多前开始用 vs code, 一开始非常不适应它的 hot key 一心想把 vs code 的 hot key 全改成 visual studio 的,但一直没有找到比较方便的办法 (总 ...
- Python如何将字符和Unicode编码转变
小小总结一下,以防过几天忘记,自己的复习资料,如果能帮到大家,也是有所作用!! 1,字符转化为Unicode编码方法: ord("字符") ord("A") o ...
- js组合继承
//组合继承指的是将原型链和借用构造函数(call.apply)的技术组合到一起,从而发挥二者之长的一种继承模式,//其背后的思路就是使用原型链实现对原型属性和方法的继承://而通过借用构造函数来实现 ...
- SP338ROADS题解--最短路变式
题目链接 https://www.luogu.org/problemnew/show/SP338 分析 联想到不久前做过的一道题\(Full\) \(Tank\),感觉可以用优先队列做,于是写了\(d ...
- caffe训练时报错
转自:https://www.cnblogs.com/haiyang21/p/7614669.html F0717 :: math_functions.cu:] Check failed: statu ...
- LeetCode：196.删除重复的电子邮箱
题目链接:https://leetcode-cn.com/problems/delete-duplicate-emails/ 题目 编写一个 SQL 查询,来删除 Person 表中所有重复的电子邮箱 ...
- 【Day2】4.第三方模块的安装与使用
课程目标 1. 使用模块 2. 安装第三方模块 使用模块 • 一个.Py文件称之为一个模块(Module) • 好处: 1. 便于代码维护,把很多函数放到不同文件,一个.py文件 的 代码数量少 2. ...
- 目标检测之RefineDet
RefineDet 一.相关背景 中科院自动化所最新成果,CVPR 2018 <Single-Shot Refinement Neural Network for Object Detectio ...
- 二：MVC之LINQ查询语法
LINQ(Language Integrated Query)语言集成查询是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以操作内存数据的方式,查询数 ...