jQuery基本操作
简介
jQuery是一个快速,简洁的JavaScript框架,是继承Prototype之后又一个优秀的JavaScript代码库(框架)。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作,事件处理,动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的 插件。jQuery兼容各种主浏览器.
jQuery的使用方式
在使用之前需要先下载库文件
https://jquery.com/
将下载好的js文件放到项目中,并引入到需要的HTML文件中
使用:
注意:jQery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。
<script src="js/jquery-3.6.3.js"></script>
就绪函数:
<!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.3.js"></script>
<script>
//就绪函数:当前页面加载完成后,自动执行的函数
//一个页面上可以创建多个就绪函数
$(function(){
var demo=document.getElementById("test");
console.log(demo.innerText);
});
</script>
</head>
<body>
<div id="test">
这是DIV
</div>
</body>
</html>
DOM对象与jQuery对象
DOM对象:就是通过原生JavaScript方法获取到的对象就是DOM对象。
jQuery对象:就是通过jQuery方法获取到的对象
jQuery对象和DOM对象可以进行相互转换,但是两种对象的属性和函数不能彼此混搭使用
DOM对象转换jQuery对象,语法:jQuery(DOM对象);或者$(DOM对象);
jQuery对象DOM对象,语法:jQuery对象[index];或者jQuery对象.get(index);
<!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.3.js"></script>
<script>
$(function(){
var demo=document.getElementById("test");
demo.innerText;
console.log(demo.innerText);
//使用jQuery来获取id为test的标签的内容
//使用js方式获取的对象叫做js对象,使用jQuery来获取的对象叫做jQuery对象
var demo2 = $("#test");//用jQuery获取的id为test的标签对象
console.log(demo2.text());//使用jQuery获取对象获取其中的对象的text
//将js对象转换为jQuery对象
console.log($(demo).text());//将js对象转换为jQuery对象并获取其中的文本
//将jQuery对象转换为js对象
console.log(demo2[0].innerText);
//默认的index=0的是test标签的内容
});
</script>
</head>
<body>
<div id="test">
这是DIV
</div>
</body>
</html>
jQuery选择器
基本选择器
层次选择器
1、基本选择器
使用最多的选择器
分别是:标签选择器,ID选择器,类选择器,全局选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
//获取id为test的标签,将其文本颜色改为红色
//$("#test").css("color","red");
//获取class为test的标签,将其文本颜色改为红色
//$(".test").css("color","red");
//获取所有的div标签,将其文本颜色改为红色
//$("div").css("color","red");
//获取所有的标签,将其文本颜色改为红色
$("*").css("color","red");
});
</script>
</head>
<body>
<div>第一个DIV</div>
<div id="test">第二个DIV</div>
<div>第三个DIV</div>
<div class="test">第四个DIV</div>
<p class="test">第一个P</p>
</body>
</html>
2、层次选择器
根据元素与元素之间的关系来查找元素
分别是:后代选择器 ,子元素选择器>,同辈元素选择器~,同辈相邻元素选择器+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
//获取id为out的标签里面的span标签,将其背景颜色改为红色
//$("#out span").css("background-color","red");
//获取id为out的标签里面的span子标签,将其背景颜色改为红色
//$("#out>span").css("background-color","red");
//获取id为out的标签的后面的同级span标签,将其背景颜色改为红色
//$("#out~span").css("background-color","red");
//获取id为out的标签的后面的同级且相邻span标签,将其背景颜色改为红色
$("#out+span").css("background-color","red");
});
</script>
</head>
<body>
<span>这是out前面的span</span>
<div id="out">
<span>这是out里面的span</span>
<p>
<span>这是out里面的p里面的span</span>
</p>
</div>
<span>这是out后面的span</span>
<span>这是out后面的span再后面的span</span>
<p>这是out后面的后面的的P</p>
</body>
</html>
3、this的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
// function test(a){
// console.log(a.value);
// }
$(function(){
$("#btn").click(function(){
console.log($(this).val());
});
});
</script>
</head>
<body>
<input type="button" value="测试1" id="btn">
<!-- <input type="button" value="测试2" οnclick="test(this)">
<input type="button" value="测试3" οnclick="test(this)"> -->
</body>
</html>
jQuery属性操作
prop()
prop(“属性名”);获取指定属性的值。
prop(“属性名”,”属性值”);设置指定属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
$("#all").click(function(){
var checkedValue = $(this).prop("checked");
$("[name=hobby]").prop("checked",checkedValue);
});
});
</script>
</head>
<body>
<input type="checkbox" id="all">全选<br>
<input type="checkbox" name="hobby">篮球<br>
<input type="checkbox" name="hobby">足球<br>
<input type="checkbox" name="hobby">排球<br>
<input type="checkbox" name="hobby">乒乓球<br>
</body>
</html>
jQuery样式操作
1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#test{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
$("#css").click(function(){
$("#test").css({"width":"200px","height":"200px","background-color":"yellow"});
});
});
</script>
</head>
<body>
<div id="test"></div>
<input type="button" value="css" id="css">
</body>
</html>
jQuery内容操作
html();设置或返回所选元素的内容(包括 HTML 标记),相当于JS的innerHTML
text();设置或返回所选元素的文本内容,相当于JS的innerText
val();设置或返回表单域的值,相当于JS的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
$("#html").click(function(){
console.log($("#test").html());
$("#test").html("<a href='http://www.taobao.com'>淘宝</a>");
});
$("#text").click(function(){
console.log($("#test").text());
$("#test").text("<a href='http://www.taobao.com'>淘宝</a>");
});
$("#val").click(function(){
console.log($("#username").val());
console.log($("#username").val("mary"));
});
});
</script>
</head>
<body>
<div id="test">
<h1>这是DIV</h1>
</div>
<input type="text" id="username" value="陈微"><br>
<input type="button" value="html" id="html">
<input type="button" value="text" id="text">
<input type="button" value="val" id="val">
</body>
</html>
jQuery文档操作
$();创建标签
append();在指定的标签中后置添加
prepend();在指定的标签中前置添加
after();在指定标签的后面添加
before();在指定标签的前面添加
remove();移除指定标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//创建一个能够跳转到B站的超链接
var newEle = $("<a href='http://www.bilibili.com'>B站</a>");
//将新建的标签放到id为test的标签中的最后
//$("#test").append(newEle);
//将新建的标签放到id为test的标签中的最前面
//$("#test").prepend(newEle);
//将新建的标签放到id为test的标签的后面
//$("#test").after(newEle);
//将新建的标签放到id为test的标签的前面
//$("#test").before(newEle);
//将id为test的标签删除掉
$("#test").remove();
});
});
</script>
</head>
<body>
<div id="test" style="background-color: red;">
<h1>这是DIV</h1>
</div>
<input type="button" value="测试" id="btn">
</body>
</html>
案例:省市联动
分析:
1、使用一维数组来存放省份信息,使用二维数组存放城市信息
2、页面加载完成,将省份信息读取出来形成放到省份的下拉列表中
3、省份发生改变的时候,读取该省份的城市信息形成放到城市下拉列表中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
var pros = ["四川","云南","贵州","重庆"];
var cities = [
["成都","达州","宜宾"],
["昆明","丽江","大理"],
["贵阳","遵义","六盘水"],
["渝中","江北","万州"]
];
//页面加载完成,读取省份信息,每一个省对应一个option标签,放到省份下拉列表中
for (var i = 0;i < pros.length;i++) {
var option = $("<option>"+pros[i]+"</option>");
$("#pro").append(option);
}
//用户选择了某省,读取该省份的城市信息,每一个城市对应一个option标签,放到城市下拉列表中
$("#pro").change(function(){
//将之前加载的城市信息清除了
$("#city option").remove();
//获取用户选择的省份
var proValue = $("#pro").val();
//获取用户选择的省份在数组中的索引
var index = -1;
for (var i = 0;i < pros.length;i ++) {
if (pros[i] == proValue) {
index = i;
break;
}
}
//获取省份对应的城市
var city = cities[index];
for (var i = 0;i < city.length;i ++) {
var option = $("<option>"+city[i]+"</option>");
$("#city").append(option);
}
});
});
</script>
</head>
<body>
<select id="pro">
<option>...请选择...</option>
</select>省
<select id="city">
<option>...请选择...</option>
</select>市
</body>
</html>
jQuery循环遍历
each();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
var pros = ["四川","云南","贵州","重庆"];
for (var i = 0;i < pros.length;i ++){
console.log(pros[i]);
}
console.log("---------------------------");
//方式一:
$.each(pros,function(index,content){
console.log(content);
});
console.log("---------------------------");
$(pros).each(function(index,content){
console.log(content);
});
});
</script>
</head>
<body>
</body>
</html>
jQuery动画
显示与隐藏
show(time,function);显示
hide(time,function);隐藏
toggle(time,function);在显示与隐藏之间相互切换
time:显示与隐藏的时间,单位是毫秒
function:回调函数。显示与隐藏完毕之后自动调用的函数。
两个参数都是可选参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
$("#show").click(function(){
$("#img").show(1000,function(){
alert("显示出来了");
});
});
$("#hide").click(function(){
$("#img").hide(1000,function(){
alert("隐藏起来了");
});
});
$("#toggle").click(function(){
$("#img").toggle(1000,function(){
alert("切换了");
});
});
});
</script>
</head>
<body>
<input type="button" value="show" id="show">
<input type="button" value="hide" id="hide">
<input type="button" value="toggle" id="toggle"><br>
<img src="img/gouza.png" width="300" id="img">
</body>
</html>