jQuery
概述
- js的类库，开源，轻量便捷
- 引入jQuery，官网下载，开发用未压缩版，上线用压缩版
入口函数及其简写
-
标准写法
$(document).ready(function(){ //执行代码 }) -
简写
$(function(){ //执行代码 })
dom对象和jQuery对象
-
dom对象：传统js语法创建出的对象
-
jQuery对象：jQuery语法创建出的对象
//jQuery对象以数组的形式存储，因为某些选择器选择的结果不唯一，为了兼容这种情况，都用数组存储 $("#btn1") $(".txt") -
两类对象可以相互转换
-
dom -> jdom：$(dom)
-
jsom -> dom：从数组中获取第一个对象，第一个对象，就是dom对象，[0]或者get(0)
-
为什么要相互转换?
- 为了使用对应类型对象的相应方法
-
示例
<!DOCTYPE html> <html lang="en"> <head> <title>dom对象转换成jdom</title> <meta charset="UTF-8"> </head> <body> <script src="js/jquery-3.6.0.js"></script> <script> $(function(){ $("#btn").click(function(){ alert($("#btn").val()) }) }) </script> <input type="button" value="just a button" id="btn"> </body> </html><!DOCTYPE html> <html lang="en"> <head> <title>jdom对象转换成dom对象</title> <meta charset="UTF-8"> </head> <body> <script src="js/jquery-3.6.0.js"></script> <script> $(function(){ //dom -> jdom $("#btn").click(function(){ //jdom -> dom alert($("#btn")[0].value) //alert("btn").get(0).value) }) }) </script> <input type="button" value="jdom to dom" id="btn"> </body> </html>
-
jQuery选择器
- 本质：一个字符串，用来定位dom对象，然后通过jQuery的函数来操作dom对象，最后用dom对象的原生函数和属性，让这些操作真实生效
基本选择器
id选择器
- 语法：$("#dom对象id")
class选择器
- 语法：$(".class样式名")
标签选择器
- 语法：$("标签名称")
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>基本选择器</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
margin-left: 10px;
margin-bottom: 10px;
}
#div1{
width: 300px;
height: 100px;
background-color: gray;
margin-top: 10px;
}
.two{
width: 300px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
//id选择器
$("#div1").css("background", "red")
})
$("#btn2").click(function(){
//class样式选择器
$(".two").css("background", "green")
})
$("#btn3").click(function(){
//标签选择器
$("span").css("background", "blue")
//操作数组中的全部成员
})
})
</script>
<div id="div1">id图层</div>
<div class="two">样式图层1</div>
<div class="two">样式图层2</div>
<span>span标签</span><br><br>
<input type="button" value="修改id图层" id="btn1">
<input type="button" value="修改样式图层" id="btn2">
<input type="button" value="修改标签" id="btn3">
</body>
</html>
效果：
所有选择器
- 语法：$("*")
组合选择器
- 语法：$("#id, .class, 标签名")
表单选择器
-
语法：$(":type 属性值")
例如：$(":text") $(":password")等
-
与是否有form标签无关，使用input标签的type属性值来定位dom对象
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>表单选择器</title>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//获取文本框的值
$("#btn1").click(function(){
alert($(":text")[0].value)
})
//获取单选按钮的值
$("#btn2").click(function(){
for(var i = 0; i < $(":radio").length; i++){
alert($(":radio")[i].value)
}
})
//获取复选框的值
$("#btn3").click(function(){
for(var i = 0; i < $(":checkbox").length; i++){
//使用jQUery的val()
alert($($(":checkbox")[i]).val())
}
})
})
</script>
<input type="text" value="文本框的值"><br>
<input type="radio" value="1" name="sex">男<br>
<input type="radio" value="0" name="sex">女<br>
<input type="checkbox" value="linux" name="IT">linux
<input type="checkbox" value="java" name="IT">java
<input type="checkbox" value="web" name="IT">web<br>
<input type="button" id="btn1" value="获取文本框里的值">
<input type="button" id="btn2" value="获取单选按钮的值">
<input type="button" id="btn3" value="获取复选框的值">
</body>
</html>
过滤器
-
作用：选择器作用后，对已经定位的dom对象，根据条件进一步筛选，从dom数组中筛选出需要操作的对象
-
本质：一个字符串
-
出现背景：
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$("div")
</script>
<!--
此时 $("div") == [dom1, dom2, dom3]
dom数组中元素的顺序，与上面图层标签出现的顺序相同
过滤器的作用：在选择器作用之后，对选择得到的结果进一步过滤，选择目标dom元素
-->
基本过滤器
-
作用：根据位置进行过滤
-
语法：
$("选择器：first") //保留数组中第一个dom $("选择器：last") //保留数组中最后一个dom $("选择器：eq(数组索引)") //保留数组下标为指定索引的dom对象 $("选择器：lt(数组索引)") //保留数组下标<指定索引的所有dom对象 $("选择器：gt(数组索引)") //保留数组下标>指定索引的所有dom对象 -
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>基本过滤器</title> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: bisque; } div{ background-color: gray; width: 300px; } </style> </head> <body> <script src="js/jquery-3.6.0.js"></script> <script> $(function(){ //选择第一个图层 $("#btn1").click(function(){ $("div:first").css("background", "red") }) //选择最后一个图层 $("#btn2").click(function(){ $("div:last").css("background", "green") }) //选择数组下标等于3的图层 $("#btn3").click(function(){ $("div:eq(3)").css("background", "blue") }) //选择数组下标小于3的图层 $("#btn4").click(function(){ $("div:lt(3)").css("background", "pink") }) //选择数组下标大于3的图层 $("#btn5").click(function(){ $("div:gt(3)").css("background", "purple") }) //选择数组下标等于1的图层 $("#btn6").click(function(){ $("div:eq(1)").css("background", "yellow") }) }) </script> <div id="div1">图层0</div> <div id="div2">图层1 <div id="div3">图层2</div> <div id="div4">图层3</div> </div> <div id="div5">图层4</div> <input type="button" id="btn1" value="选择第一个图层"><br> <input type="button" id="btn2" value="选择最后一个图层"><br> <!-- 父级dom与子级dom，在dom数组中独立存在 --> <input type="button" id="btn6" value="选择下标等于1的图层"><br> <input type="button" id="btn3" value="选择下标等于3的图层"><br> <input type="button" id="btn4" value="选择下标小于3的图层"><br> <input type="button" id="btn5" value="选择下标大于3的图层"><br> </body> </html>效果：
表单属性过滤器
-
根据表单中dom对象的状态情况，来定位dom对象，例如：是否启用，是否选中等等
-
语法
$(":text:enabled") //所有可用的文本框 $(":text:disabled") //所有不可用的文本框 $(":check:checked") //复选框中选择的元素 选择器>option:selected //选择指定下拉列表的被选中的元素 -
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>表单属性过滤器</title> <meta charset="UTF-8"> </head> <body> <script src="js/jquery-3.6.0.js"></script> <script> $(function(){ //所有可用text，设值为 hello jQuery $("#btn1").click(function(){ for(var i = 0; i < $(":text:enabled").length; i++){ $(":text:enabled")[i].value = "hello jQuery" } }) //显示被选中的复选框的值 $("#btn2").click(function(){ for(var i = 0; i < $(":checkbox:checked").length; i++){ alert($(":checkbox:checked")[i].value) } }) //显示下拉列表选中的值 $("#btn3").click(function(){ alert("下拉列表值: " + $("select>option:selected").val()) }) }) </script> <input type="text" id="txt1" value="text1"><br> <input type="text" id="txt2" value="text2" disabled><br> <input type="text" id="txt3" value="text3"><br> <input type="text" id="txt4" value="text4" disabled><br><br> <input type="checkbox" id="check1" name="IT" value="linux" checked>linux <input type="checkbox" id="check2" name="IT" value="web">web <input type="checkbox" id="check2" name="IT" value="mysql">mysql<br><br> <select id="language"> <option value="java" selected>java</option> <option value="php">php</option> <option value="ruby">ruby</option> <option value="c">c</option> </select><br><br> <input type="button" id="btn1" value="所有可用text, 设值为 hello jQuery"><br> <input type="button" id="btn2" value="显示被选中的复选框的值"><br> <input type="button" id="btn3" value="显示下拉列表选中的值"> </body> </html>
相关文章
暂无评论...
致力于称为最好的程序员导航网站