jQuery
概述
jQuery 是一个 JavaScript 库。
使用
<!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>
<!-- 引入jQuery -->
<!--服务器本地库-->
<script src="js/jquery-3.6.0.js"></script>
<!--CDN远程库-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<script>
// 绑定文档加载完成的监听
$(function () {
// 绑定监听事件
var $btn = $("#btn");
$btn.click(function () {
var username = $("#username").val();
username && alert(username);
});
})
</script>
</head>
<body>
<input type="text" id="username" />
<button id="btn"></button>
</body>
</html>基础
<!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>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
核心函数
简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery
引入jQuery库后，直接使用即可
当函数用：$(xxx)
当对象用：$.xxx()
*/
// jQuery函数：直接可用
console.log($, typeof $); // ƒ ( selector, context ) {} function
console.log(jQuery === $); // true
/*
核心对象
简称：jQuery对象
得到jQuery对象：
执行jQuery函数返回的就是jQuery对象
使用jQuery对象：
$obj.xxx()
*/
// jQuery对象：执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true
/*
函数的使用
作为一般函数调用：$(param)
1. 参数为函数：当 DOM 加载完成后，执行此回调函数
2. 参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象
3. 参数为 DOM 对象：将 dom 对象封装成jQuery对象
4. 参数为 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
});
// 需求3.去掉“my atguigu”两端的空格
var str = " my atguigu ";
console.log('===' + str + '==='); // === my atguigu ===
console.log('===' + str.trim() + '==='); // ===my atguigu===
console.log('===' + $.trim(str) + '==='); // ===my atguigu===
})
/*
对象的使用
理解
即执行jQuery核心函数返回的对象
jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
属性和方法
基本行为：操作标签的基本方法
属性：操作内部标签的属性或值
CSS：操作标签的样式
文档：对标签进行增删改操作
筛选：根据指定的规则过滤内部的标签
事件：处理事件监听相关
效果：实现一些动画效果
基本行为
size()/length：包含的 DOM 元素个数
[index]/get(index)：得到对应位置的 DOM 元素
each()：遍历包含的所有 DOM 元素
index()：得到在所在兄弟元素中的下标
*/
// 需求1.统计一共有多少个按钮
// `size()`/`length`：包含的 DOM 元素个数
var $buttons = $('button');
console.log($buttons.length); // 4
// 需求2.取出第2个button的文本
console.log($('button:nth-child(2)').text()); // 测试二
// `[index]`/`get(index)`：得到对应位置的 DOM 元素
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML); // 测试二 测试二
// 需求3.输出所有button标签的文本
// `each()`：遍历包含的所有 DOM 元素
// $buttons.each(function (index, domEle) {
// console.log(index, domEle.innerHTML); // 0 "测试一" 1 "测试二" 2 "测试三" 3 "测试四"
// });
$buttons.each(function () {
console.log(this.innerHTML); // 测试一 测试二 测试三 测试四
});
// 需求4.输出’测试三’按钮是所有按钮中的第几个
console.log($("#btn3").index()); // 2
/*
伪数组
Object对象
length属性
数值下标属性
没有数组特别的方法：forEach()，push()，pop()，splice()
*/
// 伪数组
console.log($buttons instanceof Array); // false
//自定义一个伪数组
var weiArr = {}
weiArr.length = 0;
weiArr[0] = 'atguigu';
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i];
console.log(i, obj); // 0 "atguigu" 1 123
}
console.log(weiArr.forEach, $buttons.forEach); //undefined undefined
</script>
</head>
<body>
</body>
</html>选择器
<!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>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
选择器：
选择器本身只是一个有特定语法规则的字符串，没有实质用处
它的基本语法规则使用的就是 CSS 的选择器语法，并对基进行了扩展
只有调用$()，并将选择器作为参数传入才能起作用
$(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组（伪数组），并封装成jQuer
分类
基本选择器
ID 选择器：#id
根据给定的ID匹配一个元素
标签选择器：element
根据给定的元素名匹配所有元素
属性选择器：.class
根据给定的类匹配元素
通用选择器：*
匹配所有元素
并集选择器：selector1,selector2,selectorN
交集选择器：selector1selector2selectorN
将每一个选择器匹配到的元素合并后一起返回
层次选择器
后代元素选择器：ancestor descendant
在给定的祖先元素下匹配所有的后代元素
子元素选择器：parent > child
在给定的父元素下匹配所有的子元素
兄弟选择器：prev + next、prev ~ siblings
匹配所有紧接在 prev 元素后的 next 元素
匹配 prev 元素之后的所有 siblings 元素
过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
选择器语法中大部分是过滤选择器
基本
:first 获取第一个元素
:last 获取最后一个元素
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
内容
:contains(text) 匹配包含给定文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
可见性
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
属性
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用
表单选择器
表单
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:reset 匹配所有重置按钮
:button 匹配所有按钮
表单对象属性
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected 匹配所有选中的option元素
*/
// 1.选择id为div1的元素
// $('#div1').css('background-color', 'red');
// // 2.选择所有的div元素
// $('div').css('background-color', 'red');
// // 3.选择所有class属性为box的元素
// $('.box').css('background-color', 'red');
// // 4.选择所有的div和span元素
// $('div,span').css('background-color', 'red');
// // 5.选择所有class属性为box的div元素
// $('div.box').css('background-color', 'red');
// // 6.选择所有元素
// $('*').css('background-color', 'red');
// 1.选中ul下所有的span
// $('ul span').css('background', 'red');
// // 2.选中ul下所有的子元素span
// $('ul > span').css('background', 'red');
// // 3.选中class为box的下一个li
// $('.box + li').css('background', 'red');
// // 4.选中ul下li的class为box的元素后面的所有兄弟元素
// $('ul .box ~ *').css('background', 'red');
// 1.选择第一个div
// $('div:first').css('background', 'red');
// // 2.选择最后一个class为box的元素
// $('.box:last').css('background', 'red');
// // 3.选择所有class属性不为box的div
// $('div:not(.box)').css('background', 'red');
// // 4.选择第二个和第三个li元素
// // $('li:eq(1),li:eq(2)').css('background', 'red');
// // $('li:gt(0):lt(2)').css('background', 'red');
// $('li:lt(3):gt(0)').css('background', 'red');
// // 5.选择内容为BBBBB的li
// $('li:contains("BBBBB")').css('background', 'red');
// // 6.选择隐藏的li
// $('li:hidden').show().css('background', 'red');
// // 7.送择有title属性的li元素
// $('li[title]').css('background', 'red');
// // 8.选择所有属性title为hello的li元素
// $('li[title=hello]').css('background', 'red');
// $('#data tbody > tr:odd').css('backgroundColor', '#ccf');
// 1.选择不可用的文本输入框
$(':text:disabled').css('background-color', 'red');
// 2.显示选择的城市名称
$(':submit').click(function () {
alert($('select>option:selected').html());
});
</script>
</head>
<body>
<!-- 基本选择器 -->
<!-- <div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB(title="hello")</li>
<li class="box">CCCCC(class="box")</li>
<li title="hello">DDDDDD(title="hello")</li>
</ul> -->
<!-- 层级选择器 -->
<!-- <ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span class="box">DDDD</span></li>
<span>EEEEE</span>
</ul> -->
<!-- 过滤选择器 -->
<!-- <div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br />
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display: none">我本来是隐藏的</li>
</ul> -->
<!-- 表单选择器 -->
<form>
用户名：<input type="text" /><br>
密码：<input type="password" /><br>
爱好：
<input type="checkbox" checked="checked" />篮球
<input type="checkbox" checked="checked" />足球
<input type="checkbox" checked="checked" />羽毛球<br>
性别：
<input type="radio" name="sex" value='male' />男
<input type="radio" name="sex" value='female' />女<br>
邮箱：<input type="text" name="email" disabled="disabled" /><br>
所在地：I
<select>
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br>
<input type="submit" value="提交" />
</form>
</body>
</html>工具和属性和CSS方法
<!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>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
工具方法：
$.each(object,[callback])
通用例遍方法，可用于例遍对象和数组
$.type(obj)
检测obj的数据类型
$.isArray(obj)
测试对象是否为数组
$.isFunction(obj)
测试对象是否为函数
$.isNumeric(value)
测试对象是否为数字
$.parseJSON(json)
接受一个JSON字符串，返回解析后的对象
*/
// 1、$.each()：遍历数组或对象中的数据
var obj = {
name: 'Tom',
setName: function (name) {
this.name = name;
}
}
$.each(obj, function (key, value) {
console.log(key, value); // name Tom setName ƒ (name) {}
});
// 2、$.trim()：去除字符两边的空格
var str = ' ddd ';
console.log($.trim(str)); // ddd
// 3、$.type(obj)：得到数据的类型
console.log($.type($), $.type($())); // function object
// 4、$.isArray(obj)：判断是否是数组
console.log($.isArray($('body')), $.isArray([])); // false true
// 5、$.isFunction(obj)：判断是否是函数
console.log($.isFunction($), $.isFunction($())); // true false
// 6、$.isNumberic(obj)：判断是否是数字
console.log($.isNumeric('a'), $.isNumeric('2'), $.isNumeric(2)); // false true true
// 7、$.parseJSON(json)：解析json字符转换为js对象/数组
var jsonObj = '{"name":"Tom", "age": 18}';
console.log($.parseJSON(jsonObj)); // {name: "Tom", age: 18}
var jsonArr = '[{"name":"Tom", "age": 18}, {"name":"Jack", "age": 28}]';
console.log($.parseJSON(jsonArr)); // (2) [{…}, {…}]
/*
操作属性：
attr()
设置或返回被选元素的属性值
removeAttr()
从每一个匹配的元素中删除一个属性
prop()
获取在匹配的元素集中的第一个元素的属性值
removeProp()
用来删除由.prop()方法设置的属性集
addClass()
为每个匹配的元素添加指定的类名
removeClass()
从所有匹配的元素中删除全部或者指定的类
toggleClass()
如果存在（不存在）就删除（添加）一个类
html()
取得第一个匹配元素的html内容
text()
取得所有匹配元素的内容
val()
获得匹配元素的当前值
*/
//1.读取第一个div的title属性
console.log($('div:first').attr('title')); // one
//2.给所有的div设置name属性（value 为atguigu）
$('div').attr('name', 'atguigu');
//3.移除所有div的title属性
$('div').removeAttr('title');
//4.给所有的div设置class='guiguClass'
$('div').attr('class', 'guiguClass');
//5.给所有的div添加class='abc'
$('div').addClass('abc');
//6.移除所有div的guiguClass的class
$('div').removeClass('guiguClass');
//7.得到最后一个li的标签体文本
console.log($('ul>li:last').html()); // <span>BBBBB</span>
//8.设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$('ul>li:first').html('<h1>mmmmmmmmm</h1>');
//9.得到输入框中的value值
console.log($(':text').val()); // guiguClass
//10.将输入框的值设置为atguigu
$(':text').val('atguigu');
//11.点击’全选’按留实现全选
var $checkbox = $(':checkbox');
$('button:first').click(function () {
$checkbox.prop('checked', true);
});
//12.点击’全不选’按留实现全不选
$('button:last').click(function () {
$checkbox.prop("checked", false);
});
/*
操作CSS：
css()
访问匹配元素的样式属性
offset()
获取匹配元素在当前视口的相对偏移
position()
获取匹配元素相对父元素的偏移
scrollTop()
获取匹配元素相对滚动条顶部的偏移
scrollLeft()
获取匹配元素相对滚动条左侧的偏移
height()
取得匹配元素当前计算的高度值（px）
width()
取得第一个匹配元素当前计算的宽度值（px）
innerHeight()
获取第一个匹配元素内部区域高度（包括补白、不包括边框）
innerWidth()
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
outerHeight()
获取第一个匹配元素外部高度（默认包括补白和边框）
outerWidth()
获取第一个匹配元素外部宽度（默认包括补白和边框）
*/
// 1.得到第一个p标签的颜色
console.log($('p:first').css('color')); // rgb(0, 0, 255);
// 2.设置所有p标签的文本颜色为red
$('p').css('color', 'red');
// 3.设第2个p的字体颜色（#ffee11），背景（blue），宽（300px），高（30px）
$('p:eq(1)').css({
color: '#ffee11',
backgroundColor: 'blue',
width: 300,
height: 30
});
// 1.点击btn1
$('#btn1').click(function () {
// 打印div1相对于页面左上角的位置
var offset1 = $('.div1').offset();
console.log(offset1.left, offset1.top); // 10 20
// 打印div2相对于页面左上角的位置
var offset2 = $('.div2').offset();
console.log(offset2.left, offset2.top); // 10 70
// 打印div1相对于父元素左上角的位置
var position1 = $('.div1').position();
console.log(position1.left, position1.top); // 10 20
// 打印div2相对于父元素左上角的位置
var position2 = $('.div2').position();
console.log(position2.left, position2.top); // 0 50
});
// 2.点击btn2
$('#btn2').click(function () {
// 设置div2相对于页面的左上角的位置
$('.div2').offset({ left: 0, top: 0 });
});
// 1.得到div或页面滚动条的坐标
$('#btn1').click(function () {
console.log($('div').scrollTop()); // 400
console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()); // 200
});
// 2.让div或页面的滚动条滚动到指定位置
$('#btn2').click(function () {
$('div').scrollTop(1000);
$('html,body').scrollTop(100);
});
/*
元素的尺寸：
1.内容尺寸
height()：height
width()：width
2.内部尺寸
innerHeight()：height + padding
innerwidth()：width + padding
3.外部尺寸
outerHeight(false/true)：height + padding + border 如果是true，加上margin
outerwidth(false/true)：width + padding + border 如果是true，加上margin
*/
var $div = $('div');
console.log($div.height(), $div.width()); // 150, 100
console.log($div.innerHeight(), $div.innerWidth()); // 170 120
console.log($div.outerHeight(), $div.outerWidth()); // 190 140
console.log($div.outerHeight(true), $div.outerWidth(true)); // 210 160
</script>
</head>
<body>
</body>
</html>对象的过滤与查找
<!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>
<script src="js/jquery-3.6.1.js"></script>
<script>
/*
对象的过滤：
eq()
获取第N个元素
first()
获取第一个元素
last()
获取最后一个元素
hasClass()
检查当前的元素是否含有某个特定的类，如果有，则返回true
filter()
筛选出与指定表达式匹配的元素集合
not()
删除与指定表达式匹配的元素
is()
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
has()
保留包含特定后代的元素，去掉那些不含有指定后代的元素
*/
var $li = $('ul>li');
// 1.ul下li标签第一个
// $li[0].style.backgroundColor = 'red';
$li.first().css('background-color', 'red');
// 2.ul下li标签的最后一个
// $li[$li.length - 1].style.backgroundColor = 'red';
$li.last().css('background-color', 'red');
// 3.ul下li标签的第二个
// $li[1].style.backgroundColor = 'red';
$li.eq(1).css('background-color', 'red');
// 4.ul下li标签中title属性为hello的
$li.filter('[title=hello]').css('background-color', 'red');
// 5.ul下li标签中title属性不为hello的
// $li.filter('[title!=hello]').css('background-color', 'red');
$li.not('[title=hello]').css('background-color', 'red');
// $li.filter('[title]').filter('[title!=hello]').css('background-color', 'red');
// $li.filter('[title!=hello]').filter('[title]').css('background-color', 'red');
$li.filter('[title][title!=hello]').css('background-color', 'red');
// 6.ul下li标签中有span子标签的
$li.has('span').css('background-color', 'red');
// 7.ul下li标签中class属性为box2的
// if ($li.filter('[class=box2]').hasClass('box2')) {
// $li.filter('[class=box2]').css('background-color', 'red');
// }
if ($li.filter('[class=box2]').is('.box2')) {
$li.filter('[class=box2]').css('background-color', 'red');
}
/*
对象的查找:
children()
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
find()
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
siblings()
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
next()
取得一个包含匹配的元素集合中每一个元素紧邻的后一个同辈元素的元素集合
nextAll()
查找当前元素之后所有的同辈元素
nextUntil()
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
prev()
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll()
查找当前元素之前所有的同辈元素
prevUntil()
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent()
返回第一个匹配元素用于定位的父节点
parent()
取得一个包含着所有匹配元素的唯一父元素的元素集合
parentsUntil()
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
*/
var $ul = $('ul');
// 1.ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background-color', 'red');
// 2.ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background-color', 'red');
// 3.ul标签的父标签
$ul.parent().css('background-color', 'red');
// 3.ul标签的定位父标签
$ul.offsetParent().css('background-color', 'red');
// 4.id为cc的li标签的前一个li标签
$('#cc').prev('li').css('background-color', 'red');
// 4.id为cc的li标签的前面所有li标签
$('#cc').prevAll('li').css('background-color', 'red');
// 4.id为cc的li标签的后一个li标签
$('#cc').next('li').css('background-color', 'red');
// 4.id为cc的li标签的后面所有li标签
$('#cc').nextAll('li').css('background-color', 'red');
// 6.id为cc的li标签的所有兄弟li标签
$('#cc').siblings('li').css('background-color', 'red');
</script>
</head>
<body>
</body>
</html>
