1.jQuery简介
1.1什么是jQuery
流行的JavaScript类库
为了简化JavaScript的开发,一些JavsScript.库就诞生了。JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面,并且兼容各大浏览器。
1.2jQuery特点
轻量级:封装后的库只有不到100k,下载的时候很快
强大选择器:方便快速查找DOM元素
隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数
链式调用:可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容
丰富的插件支持
1.3jQuery入口函数
<script>
//第一种
$(document).ready(function(){
console.log("aa");
})
//第二种
$().ready(function(){
console.log("bb");
})
//第三种
$(function(){
console.log("cc");
})
</script>
2.基本选择器的使用
2.1什么是jQuery选择器
jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意: jQuery选择器返回的是jQuery对象。
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。
jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
2.2基本选择器
名称 | 用法 | 描述 |
ID选择器 | $("#id"); | 获取指定ID的元素 |
类选择器 | $(".class); | 获取同一类class的元素 |
标签选择器 | $("div"); | 获取同一类标签的所有元素 |
并集选择器 | $("div,p.li"); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $("div.redClass"); | 获取class为redClass的div元素 |
总结:跟css的选择器用法一样,外层加$()
<body>
<input type="text" id="one">+
<input type="text" id="two">=
<input type="text" id="result" disabled>
<input type="button" value="计算" class="btn">
<hr>
<input type="button" value="改变" id="btn2"><br>
<div class="div_0">这是一个标签</div>
<p class="div_0">这是一个标签</p>
<script>
$(function(){
$(".btn").click(function(){
var first=$("#one").val()
var second=$("#two").val()
var result=parseInt(first)+parseInt(second)
$("#result").val(result)
})
$("#btn2").click(function(){
$("div,p").css("color","white")
$("p,div_0").css("background-color","blue")
})
})
</script>
</body>
2.3层次选择器
名称 | 用法 | 描述 |
子代选择器 | $("ul>li"); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $("ul li); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
跟CSS的选择器一模一样
$(".myu1 1i").css("height", "50px").css("background" , "#9dd3a8");$(".myu1>1i").css("height" , "30px").css("background", "#d9d9f3");
$(".myu1 1i").css("height", "50px").css("background" , "#9dd3a8");$(".myu1>1i").css("height" , "30px").css("background", "#d9d9f3");
3.属性选择器的使用
3.1基本属性选择器
名称 | 用法 | 描述 |
[attribute] | $('input[checked]').attr('checked ,false); | 匹配包含给定属性的元素。常用于单选或复选的checked |
[attribute=value] | $('input[name="username"T').val("); | 匹配给定的属性是某个特定值的元素。常用于选择指定的input标签。 |
[attribute!=value] | $('div[namel="box"J).html(""); | 匹配给定的属性是不包含某个特定值的元素。 |
[attribute =value] | $('div[class=“b"T).css("background","red"); | 匹配给定的属性是以某些值开始的元素。 |
[attribute*=value] | $('div[class=“b"T).css("background","red"); | 匹配给定的属性是以包含某些值的元素。 |
<!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.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
</style>
</head>
<body>
<button id="btn1">所有含class的标签</button>
<button id="btn2">所有含class是box1的标签</button>
<button id="btn3">所有含class不是box1的标签</button>
<button id="btn4">所有含class是以b开始的标签</button>
<button id="btn5">所有含class包含0的标签</button>
<hr>
<div>div标签</div>
<div class="box1">box1</div>
<div class="box1">box1</div>
<div class="bex2">bex2</div>
<div class="pox1">pox1</div>
<div class="pox2">pox2</div>
<script>
$(function(){
$("#btn1").click(function(){
$("[class]").css("background-color","red")
})
$("#btn2").click(function(){
$("[class='box1']").css("background-color","yellow")
})
$("#btn3").click(function(){
$("div[class!='box1']").css("background-color","blue")
})
$("#btn4").click(function(){
$("[class^='b']").css("background-color","green")
})
$("#btn2").click(function(){
$("[class*='o']").css("background-color","orange")
})
})
</script>
</body>
</html>