一.jQuery基本介绍
(其实jQuery就是基于JS的一个类库,很多JS手写的方法,jQuery都已经封装好了只需调用就行,点击下方官网下载,然后导入jQuery库就可以啦~)
jQuery是一个快速,简介的JavaScript库,其设计的宗旨是“Write Less,Do More”
,即倡导写的更少的代码,做更多的事情,且使用jQuery的网站超过了90%,是中大型WEB项目开发首选
jQuery官网:http://jQquery.com/
1.1JavaScript库
即library,是一个封装好的特定的集合(方法和函数),这样就可以快速高效的使用这些封装好的功能
常见的JavaScript库
Prototype:是最早成型的JS库之一,碎玉JS的内置对象做了大量扩展。
Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。
YUI:是由Yahoo公司开发的一套完整的,扩展性良好的富交互网页程序工作集。
Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。 Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。
jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。
1.2 jQuery的作用
- 轻量级。核心文件几十KB,不会影响页面加载速度
- 跨浏览器兼容。
-
HTML 元素选取(选择器)
-
HTML 元素操作
-
CSS 操作
-
HTML 事件处理
-
JS 动画效果
-
链式调用 a().b().c()...
-
读写合一
-
浏览器兼容
-
易扩展插件
-
ajax 封装
二.基本使用
2.1 jQuery版本
- jQuery版本分为1.x,2.x,3.x
- 1.x版本:能够兼容IE6,7,8浏览器
- 2.x版本:不兼容IE6,7,8浏览器
- 3.x:不兼容IE6,7,8浏览器
目前只更新3.x版本,其他两种不再更新
2.2jQuery的两把利器
// jQuery核心代码
(function(window){
var jQuery = function(){
return new jQuery.fn.init();
}
window.$ = window.jQuery = jQuery
})(window)
jQuery核心函数
简称:jQuery函数,jQuery库向外直接暴露的就是$ / jQuery
引入jQuery库后,直接使用即可
- 当前函数:$(xxx)
- 当对象用:$.xxx( )
jQuery核心对象
简称:jQuery
对象
得到jQuery
对象:执行jQuery
函数返回的就是jQuery
对象
使用jQuery
对象:$obj.xxx()
2.2.1jQuery函数的使用
作为一般函数调用:$(param)
-
参数为函数:当 DOM 加载完成后,执行此回调函数
-
参数为选择器字符:查找所有匹配的标签并将它们封装成
jQuery
对象 -
参数为 DOM 对象:将 dom 对象封装成
jQuery
对象 -
参数为 html 标签字符串(用得少):创建标签对象并封装成
jQuery
对象
作为对象使用:$.xxx()
-
$.each()
:隐式遍历数组 -
$.trim()
:去除两端的空格
// 需求1.点击按钮:显示按钮的文本,显示一个新的输入框
// 1、参数为函数:当 DOM 加载完成后,执行此回调函数
$(function () { // 绑定文档加藏完成的监听
// 2、参数为选择器字符:查找所有匹配的标签并将它们封装成`jQuery`对象
$("#btn").click(function () {
// alert(this.innerHTML); // this是什么?发生事件的dom元素(<button>)
// 3、参数为 DOM 对象:将 dom 对象封装成`jQuery`对象
alert($(this).html());
// 4、参数为 html 标签字符串(用得少):创建标签对象并封装成`jQuery`对象
$('<input type="text" name="msg3"><br/>').appendTo("div");
});
// 需求2.遍历输出数组中所有元素值
var arr = [3, 7, 4];
$.each(arr, function (index, item) {
console.log(index, item); // 0 3 1 7 2 4
});
})
2.2.2jQuery对象的使用
即执行jQuery
核心函数返回的对象
jQuery
对象内部包含的是 dom 元素对象的伪数组(可能只有一个元素)
jQuery
对象拥有很多有用的属性和方法,让程序员能方便的操作 dom
三.选择器
jQuery 选择器是 jQuery 为我们提供的一组方法,让我们更加方便的获取到页面中的元素
3.1基本选择器
名称 | 用法 | 描述 |
ID选择器 | $(“#id”) | 获取指定ID的元素 |
类选择器 | $(“.class”) | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 使用逗号分开,只要符合条件之一就可 |
交集选择器 | $(“div,redClass”) | 获取class为redClass的div元素 |
属性选择器 | $(“input【name=username】”) | 获取input标签中name属性为username的元素 |
注:jQquery选择器返回的是jQuery对象
<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>
3.2层级选择器
名称 | 用法 | 描述 |
子代选择器 | $(“ul>li”) | 使用>号,获取儿子层级的元素,注意并不会获取孙子层级的元素 |
后代选择器 | $(“ul li ”) | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
3.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元素中,选择索引号为偶数的元素 |
3.4筛选方法
-
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 用法 描述 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') 找最近一个祖先元素 3.5 案例
-
下拉菜单
<!DOCTYPE html>
<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>
-
排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<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>
</html>