一、jQuery简介
1、JS的onload事件只能实现一次，而且实现的是最后一次
2、jQ可以实现多次，按代码顺序实现
3、基本语法 通过$ 符定义jQuery， $( 选择器 ) . 方法 ( )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<script>
// JS onload事件只能实现一次，而且是最后一次
window.onload = function(){
alert("hello js");
}
window.onload = function(){
alert("hello js--1");
}
window.onload = function(){
alert("hello js--2");
}
// jQuery 可以实现多次加载
$(document).ready(function(){
alert("hello jQuery");
})
$(document).ready(function(){
alert("hello jQuery--1");
})
$(document).ready(function(){
alert("hello jQuery--2");
})
// 基本语法
// 通过$符定义jQuery
// $(选择器).方法()
</script>
</body>
</html>
4、在jQuery中声明变量需在变量前加$
5、Jq转为JS对象 var jsDiv = $jqObj[0];
6、js转为jq var $jqDiv = $(jsdiv);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<div id="box"></div>
<script>
$(document).ready(function(){
// $区别 jQ和JS的变量
var $jqObj = $("#box");
$jqObj.html("hello");
// jq转换为JS对象,函数不能转
var jsDiv = $jqObj[0];
// JS转为jQ对象
var $jqdiv = $ (jsDiv)
})
</script>
</body>
</html>
7、Jquery的三种书写方法
①$(document).ready( function () {} )
②$().ready( function () {} )
③$( function () {} )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<div id="box"></div>
<div class="cls"></div>
<script>
// 页面加载函数
// 第一种方法
$(document).ready(function (){
})
// 第二种方法
$().ready(function(){
})
// 第三种方法
$(function(){
})
</script>
</body>
</html>
二、jQuery选择器
Ⅰ、基本选择器
①ID选择器
语法 $(“#id”)
相当于JS中的document.getElementById(“id”)
②元素选择器
语法 $(“标签名称”)
相当于JS中的document.getElementsByTagName(“标签名称”)
③类名选择器
语法 $(“.class”)
相当于JS中的document.getElementsByClassName(“class”)
④复合选择器
语法$(“selector1, selectpr2, ... ”)
⑤通配符选择器
语法 $(“ * ”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 基本选择器 </title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<div id="box"></div>
<div class="cls"></div>
<span> </span>
<p></p>
<script>
$(function () {
// id选择器
var $jqDiv = $("#box");
$jqDiv.html("ID选择器");
// 元素选择器
var $jqDiv1 = $("div");
$jqDiv1.html("元素选择器");
// 类选择器
var $jqDiv2 = $(".cls");
$jqDiv2.html("类选择器");
// 复合选择器
var $jqfh = $("span, p");
$jqfh.html("复合选择器");
// 通配符选择器
var $jqt = $("*");
$jqt.html("通配符选择器");
})
</script>
</body>
</html>
Ⅱ、层次选择器
①父子（先辈后辈）选择器
语法 $(“ancestor descendant”)
②父子选择器
语法 $(“parent>child”)
③兄弟选择器
语法 $(“prev+next”)
④同级选择器
语法 $(“prev ~ siblings”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 层次选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<div id="box">
<p> HELLO </p>
<div>
<p> WORLD</p>
</div>
</div>
<ul id="l">
<li> 111 </li>
<li> 222 </li>
</ul>
<div id="d"> aaa </div>
<div > bbb </div>
<div > ccc </div>
<div > ddd </div>
<script>
$(function(){
// 先辈后辈选择器(父子选择器)
var $jqObj = $("#box p");
console.log($jqObj.html());
// 父子选择器
var $jqObj1 = $("ul>li");
console.log($jqObj1.html());
var $jqObj2 = $("#l>li");
console.log($jqObj2.html());
// 兄弟选择器，只匹配一个
var $jqObj3 = $("#d+div");
console.log($jqObj3.html());
// 同级选择器
var $jqObj4 = $("#d~div");
$jqObj4.html("---");
})
</script>
</body>
</html>
Ⅲ、过滤选择器
①简单过滤器
:first 只匹配第一个元素
:last 只匹配最后一个元素
:even 所有的奇数
:odd 所有的偶数
:eq(index) 指定元素（从0开始）
:gt(index) 比...大
:lt(index) 比...小
:header 匹配标签
:not() 去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery简单过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<p class="p1"> aaa </p>
<p class="p1"> bbb </p>
<p class="p1"> ccc </p>
<p class="p1"> ddd </p>
<p class="p1"> eee </p>
<p class="p2"> fff </p>
<h2> 二级标题 </h2>
<script>
$(function(){
// :first,只匹配第一个元素
$(".p1:first").html("first");
// :last,只匹配最后一个
$(".p1:last").html("last");
// :even,所有的奇数
$(".p1:even").html("even");
// :odd，所有的偶数
$(".p1:odd").html("odd");
// :eq(index),指定元素，从0开始
$(".p1:eq(2)").html("第三个");
// :gt(index),比...大
$(".p1:gt(2)").html("比第三个大");
// :lt(index)，比...小
$(".p1:lt(2)").html("比第三个小");
// :header,匹配标签
$(":header").html("标题过滤");
// :not(),去除
$("p:not(.p1)").html("hello");
})
</script>
</body>
</html>
②内容过滤器
contains(xx) 匹配包含的元素
empty 匹配空的，有空格则不是空
has(xx) 匹配含有的元素
parent 匹配父标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery内容过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<p class="p1"> aaa </p>
<p class="p1"> bbb </p>
<p class="p1"> ccc </p>
<p class="p1"></p>
<table>
<tr>
<td>
<p>this is a text</p>
</td>
<td>
<p> today is a good day</p>
<span></span>
</td>
</tr>
</table>
<script>
$(function(){
// contains(xx) 匹配包含的元素
$(".p1:contains('b')").html("包含b");
// empty 匹配空的，有空格则不是空的
$(".p1:empty").html("空的");
// has(xx) 匹配含有的元素
console.log($("td:has(span)"));
// parent 匹配父标签的元素
$(".p1:parent").html("haha");
})
</script>
</body>
</html>
③可见性过滤器
:visible 匹配可见元素
:hidden 匹配不可见元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery可见性过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<input type="text" value="aaa"/>
<input type="hidden" value="bbb"/>
<input type="text" style="display: none" />
<script>
$(function(){
// :visible 匹配可见元素
console.log($("input:visible").val());
// :hidden 匹配不可见元素
console.log($("input:hidden").val());
// 匹配最后一个不可见元素
console.log($("input:hidden:last").val());
})
</script>
</body>
</html>
④表单过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery表单过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<form>
<input type="checkbox" checked="checked" value="复选框1"> 选框1
<input type="checkbox" checked="checked" value="复选框2"> 选框2
<input type="checkbox" value="复选框3"> 选框3
<input type="button" value="不可用按钮" disabled> 按钮
<select>
<option selected="selected"> aaa </option>
<option> bbb </option>
</select>
</form>
<script>
$(function(){
// :checked 匹配所有选中的标签
console.log($("input:checked:eq(0)").val());
// :disabled
console.log($("input:disabled").val());
})
$(function(){
console.log($("select option:selected").val());
})
</script>
</body>
</html>
⑤子元素过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery子元素过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$(function(){
// first-child
$("ul li:first-child").html("first-child");
// last-child
$("ul li:last-child").html("last-child");
// nth-child 从1开始
$("ul li:nth-child(2)").html("2th-child");
})
</script>
</body>
</html>
Ⅳ、属性选择器
[attr] 匹配指定属性的元素
[attr=val] 选择指定值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery属性过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
<style>
div{
width: 100px;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<div name="div1"></div>
<div name="div2"></div>
<div name="div3"></div>
<div name="div4"></div>
<div name="div1"></div>
<div name="div1hello"></div>
<div name="div1world"></div>
<div ></div>
<script>
$(function(){
// [attr] 匹配指定属性的元素
$("div[name]").css("background-color", "blue");
// [attr=var] 选择指定值的元素
$("div[name='div2']").css("background-color", "red");
// $("div[name!='div1']").css("background-color", "green");
// 全部匹配
$("div[name*='div1']").css("background-color", "green");
// 匹配以div开头的
$("div[name^='div1']").css("background-color", "green");
// 完全匹配div1
$("div[name$='div1']").css("background-color", "green");
})
</script>
</body>
</html>
Ⅴ、表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery表单过滤选择器</title>
<script type="text/javascript" src="js/jQuery3.6.0.js"></script>
</head>
<body>
<form>
<input type="checkbox" >
<input type="radio" >
<input type="file" >
<input type="image" >
<input type="password" >
<input type="text" >
<input type="reset" >
<input type="submit" >
<input type="button" >
</form>
<script>
$(function(){
var $jqObj1 = $(":checked")
var $jqObj1 = $(":password")
})
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
