一：jQuery是什么?
jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作 jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。
jQuery的理念：write less,do more.
二:为什么要学习JQuery？
使用javascript开发过程中，缺点有：
1.有兼容性问题。
2.代码冗余
使用jQuery开发过程中，优点有:
-
没有兼容性问题。 -
实现动画非常简单，功能更加的强大。 -
代码干净、利落。
三：jQuery有什么作用?
1 .可以获取页面中的元素。
2.可以进行相关的css样式操作。
3.可以制作特效和动画。
四：如何使用jQuery？
下载后导入
<script src="jquery-3.5.1/jquery-3.5.1.min.js"></script>
五:jQuery选择器有哪些？
1.基本选择器
①.$("#id"): 根据给定的ID匹配一个元素。
②.$("dom元素名")：根据给定的元素名匹配所有元素
③.$(".Class类名"): 根据给定的类匹配元素。
④.$("*") ：匹配所有元素。
⑤.$("dom元素，class类名")：选择所有class属性为指定类名的dom元素。
获取多个选择器选中的所有元素
⑥.$(".tab tr"): 获取class属性为tab的table元素下的所有行tr 。
2. 层级选择器：
①.$("选择器1，选择器2") 并集选择器---- 获取多个选择器选中的所有元素
②. $("选择器1 选择器2") 交集选择器-----选择选择器1内部的所有选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//改变操作方法
//改变p1的背景
function change_p1(){
//css("属性名，属性值")
//获取id
var pid=$("#p1");
//改变背景颜色
pid.css("background","blue");
}
//改变p2的背景
function change_p2(){
//方法一
//获取class属性
//var pclass=$(".p2");
//pclass.css("background","red");
//方法二
//dom元素无法调用jquery的方法
//将一个元素从dom -> jquery
//使用$()进行包裹起来
//$(".p2")[0]-----dom元素(集合)
//[0]-----相同class属性名的位置下标
$($(".p2")[1]).css("background","red");
}
//改变p标签的背景
function change_p(){
//获取所有的p标签----$("p")
$("p").css("background","pink");//背景颜色
$("p").css("color","red")//文字颜色
$("p").css("font-size","20px")//字体大小
}
//改变div里面的p标签的背景
function change_div(){
// div p div里面的所有的p标签(子元素和子子...元素)
// div>p div里面的所有的p标签(子元素)
$("div p").css("background","yellow");
}
//改变p2,p3标签的背景
function change_p23(){
//使用多个选择器,用逗号隔开$里面的内容(属性名)
$(".p2,.p3").css("background","gray");
}
</script>
</head>
<body>
<div>
<p id="p1">我是p1</p>
<p class="p2">我是p2</p>
<p class="p2">我是p3</p>
<p>我是p4</p>
</div>
<p class="p3">我是div外面的p</p>
<button onclick="change_p1()">点击我改变p1的背景</button>
<button onclick="change_p2()">点击我改变p2的背景</button>
<button onclick="change_p()">点击我改变p标签的背景</button>
<button onclick="change_div()">点击我改变div里面的p标签的背景</button>
<button onclick="change_p23()">点击我改变p2,p3标签的背景</button>
</body>
</html>
3.过滤选择器
①. 首元素选择器：${选择器：first} 获得指定选择器的元素中的第一个元素
②.尾元素选择器：${选择器：last} 获得指定选择器的元素中的最后一个元素
③.偶数选择器：${选择器：even} 获得指定选择器的元素中索引为偶数的元素，索引从0开始计数
④.奇数选择器：${选择器：odd} 获得指定选择器的元素中索引为奇数的元素，索引从0开始计数
⑤.等于索引选择器：${选择器：eq(index)} 获得指定选择器的元素中等于指定索引的元素，索引 从0开始计数
⑥.大于索引选择器：${选择器：gt(index)} 获得指定选择器的元素中大于指定索引的元素，索引 从0开始计数
⑦.小于索引选择器：${选择器：lt(index)} 获得指定选择器的元素中小于指定索引的元素，索引从 0开始计数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色</title>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//要求:有李世民姓名的一行变成红色
// 有曹操姓名的一行变成黄色
//加载事件
$(function(){
//第一个li标签
//$("li:first").css("background","red");
//最后一个li标签
//$("li:last").css("background","yellow");
//大于0
//$("li:gt(0)").css("background","blue");
//小于0---li:lt(0)
//li:lt(2)---小于下标为2的标签
//$("li:lt(2)").css("background","gray");
//奇数
$("li:odd").css("background","pink");
//偶数
$("li:even").css("background","green");
})
</script>
</head>
<body>
<ul>
<li>李世民</li>
<li>曹操</li>
<li>李世民</li>
<li>曹操</li>
<li>李世民</li>
<li>曹操</li>
<li>李世民</li>
<li>曹操</li>
<li>李世民</li>
<li>曹操</li>
</ul>
</body>
</html>
4.表单选择器
①. 单复选框：${:checked} 获得单选/复选框选中的元素
②.下拉框：${:selected} 获得下拉框选中的元素
③.$("select option:selected") 匹配所有选中的option元素
④.$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
⑤.$(":input") 查找所有的input元素
⑥.$("text") 匹配所有的单行文本框
⑦.$(":password") 匹配所有密码框
⑧$("radio") 匹配所有单选按钮
⑨$("checkbox") 匹配所有复选框
⑩$("submit") 匹配所有提交按钮
⑩①.("image") 匹配所有图像域
⑩②.$("button") 匹配所有按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<script src="js/jquery-3.5.1.js"></script>
</head>
<style type="text/css">
body {
font-size: 10px;
text-align: center;
}
.img {
padding: 2px;
border: solid 1px #ccc;
}
.div {
border: solid 1px #ccc;
background-color: #eee;
}
</style>
<script type="text/javascript">
$(function() {
console.log($("#form1 :text").val());
console.log($("#form1 :password").val());
console.log($("#form1 :radio").val());
console.log($("#form1 :checkbox").val());
console.log($("#form1 :submit").val());
console.log($("#form1 :reset").val());
console.log($("#form1 :button").val());
})
</script>
<body>
<form id="form1">
<textarea class="txt"> 好好学习</textarea>
<select>
<option value="0">okok</option>
</select>
<input type="text" value="Text" class="txt" />
<input type="password" value="password" class="txt" />
<input type="radio" /><span id="Span1">Radio</span>
<input type="checkbox" /><span id="Span2">checkbox</span>
<input type="submit" value="Submit" class="btn" />
<input type="image" title="Image" src="img/小姐姐.jpg" class="img" />
<input type="reset" value="reset" class="btn" />
<input type="button" value="button" class="btn" />
</form>
</body>
</html>
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
