这篇文章介绍了jQuery的基本概念，包括它的轻量级特性、为何使用以及如何引入。接着详细讲解了jQuery的选择器，如基本选择器、层级选择器、过滤选择器，以及jQuery的核心函数和对象。文中还提到了jQuery的闭包结构和链式编程的应用，并给出了实际的案例展示。
目录
一、jQuery基本介绍
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
1.1 JavaScript 库
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
常见的JavaScript 库
- Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
- Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
- YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
- Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
- Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
- jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
- 移动端的zepto
这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。
What?
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质： 就是学习调用这些函数（方法）。
jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
jQuery官网：：jQuery- 一个优秀的 JS 函数库
- 使用了
jQuery的网站超过 90% - 中大型 WEB 项目开发首选
Write Less，Do More！！！
Why?
-
轻量级。核心文件才几十kb，不会影响页面加载速度
-
跨浏览器兼容。基本兼容了现在主流的浏览器
-
HTML 元素选取（选择器）
-
HTML 元素操作
-
CSS 操作
-
HTML 事件处理
-
JS 动画效果
-
链式调用 a().b().c()...
-
读写合一
-
浏览器兼容
-
易扩展插件
-
ajax 封装
Where？
-
中大型网站开发
-
是一些前端框架的基础，比如EasyUI，Bootstrap
How?
1. 引入jQuery库
2. 使用jQuery
二、jQuery基本使用
1. jQuery版本
- 1.x 版本：能够兼容 IE6, 7, 8 浏览器（不再更新版本）
- 2.x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）
-
3.x版本：不兼容 IE6, 7, 8，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8）
2.jQuery下载
官网：jQuery
-
production （压缩过的版本，体积小，上线用）——生产版（压缩版）
-
develepment（未压缩版本，开发时使用，适合查找）——开发版（测试版）
3.使用 jQuery
-
在页面中引入 jQuery 库
<script src="js/jquery-3.6.0.js"></script>
(项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担)
-
在 script 标签中使用 jquery 语法即可，如：
<div id="odiv">Content</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$('#odiv').hide();
</script>
4. jQuery 闭包结构
// jQuery加载函数
( function( global, factory ) {
} )();
- 用一个函数域包起来，就是所谓的沙箱
- 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
- 把当前沙箱需要的外部变量通过函数参数引入进来
- 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。
5.jQuery 的 2 把利器
// jQuery核心代码
(function(window){
var jQuery = function(){
return new jQuery.fn.init();
}
window.$ = window.jQuery = jQuery
})(window)jQuery 核心函数
简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery
引入jQuery库后，直接使用即可
- 当函数用：
$(xxx) - 当对象用：
$.xxx()
jQuery 核心对象
简称：jQuery对象
得到jQuery对象：执行jQuery函数返回的就是jQuery对象
使用jQuery对象：$obj.xxx()
// jQuery对象：执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object);// jQuery.fn.init {} "object" true
5.1 jQuery 函数的使用
作为一般函数调用：$(param)
-
参数为函数：当 DOM 加载完成后，执行此回调函数
-
参数为选择器字符：查找所有匹配的标签并将它们封装成
jQuery对象 -
参数为 DOM 对象：将 dom 对象封装成
jQuery对象 -
参数为 html 标签字符串（用得少）：创建标签对象并封装成
jQuery对象
作为对象使用：$.xxx()
-
$.each()：隐式遍历数组 -
$.trim()：去除两端的空格
三、选择器
jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素
1. 基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $('#id'); | 获取指定ID的元素 |
| 类选择器 | $('.class'); | 获取同一类class的元素 |
| 标签选择器 | $('div'); | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li'); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $('div.redClass'); | 获取class为redClass的div元素 |
| 属性选择器 | $('input[name=username]') | 获取 input 标签中 name 属性为 username 的元素 |
<script type="text/javascript">
//常用选择器
//根据id获取元素 获取到的结果：类数组对象
console.log( $('#div0') );
console.log( $('#div0')[0] );
//根据class获取元素
console.log( $('.div_1') );
//根据标签名称来获取元素
console.log( $('div') );
//根据属性获取元素
console.log( $('input[name=username]') );
//根据表单元素属性获取元素
console.log( $(':checked') );
</script>2. 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $('ul > li'); | 使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $('ul li'); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
3. 过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $('li:eq(2)').css('color', 'red'); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $('li:odd').css('color', 'red'); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even').css('color', 'red'); | 获取到的li元素中，选择索引号为偶数的元素 |
4. jQuery 筛选方法
-
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') | 相当于$('ul>li')，子类选择器 |
| find(selector) | $('ul').find('li'); | 相当于$('ul li'),后代选择器 |
| siblings(selector) | $('#first').siblings('li'); | 查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent(); | 查找父亲 |
| parents() | $('li').parents(); | 查找祖先元素 |
| eq(index) | $('li').eq(2); | 相当于$('li:eq(2)'),index从0开始 |
| next() | $('li').next() | 找下一个兄弟 |
| prev() | $('li').prev() | 找上一次兄弟 |
| closest | $('li').closest('ul') | 找最近一个祖先元素 |
5. this 和 当前索引
在对象的事件中，$(this) 表示当前操作的 jQuery 对象，$(this).index() 表示当前元素的索引号
$("li").click(function () {
console.log($(this).index());
}6. 案例
案例：点击按钮获取输入框中的值（JS对比jQuery）
案例：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）
案例：使用层次选择器，选择某个元素下面的所有元素和子元素
案例：使用过滤选择器，选择li中的元素
案例：表格隔行换色
案例：获取表单中的单选、多选、下拉值
案例：下拉菜单
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav > li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav > li > a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #fecc5b;
border-right: 1px solid #fecc5b;
}
.nav ul li {
border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover {
background-color: #fff5da;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
</ul>
</li>
</ul>
<script src="./jquery-3.6.0.js"></script>
<script>
$(function () {
// 鼠标经过
$(".nav>li").mouseover(function () {
// 显示元素（this 表示当前元素）
$(this).children("ul").show();
});
// 鼠标离开
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
});
});
</script>
</body>
</html>案例：排他思想
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
</script>
</body>链式编程
$(this).css("color", "red").siblings().css("color", "");
扫一扫
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
