一、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", "");