jQuery学习(上)
jQuery介绍
- 什么是jQuery?
就是JavaScript和Query的结合,是辅助JS开发的JS类库 - jQuery的核心思想
核心思想是write less ,do more 。所以实现了很多浏览器的兼容问题。
jQuery初体验
需求:使用jQuery给一个按钮绑定单击事件(onclick)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery来绑定onclick事件</title>
<!-- 使用JS的动态绑定实现 -->
<script type="text/javascript">
window.onload = function () {
var button = document.getElementById("button01");
button.onclick = function () {
alert("使用js语言的动态绑定实现");
}
}
</script>
<!-- 使用jQuery来进行绑定实现 -->
<!-- 使用src来导入jQuery库,使用jQuery一定要导入jQuery库,但是 -->
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {//$表示页面加载完成之后所做的操作,相当于window.onload = function()
var button = $("#button02")//表示按照id查询标签变量,相当于document.getElementById("button02");
//注意,这里的button不是DOM对象,而是jQuery对象,因此不能使用DOM对象的方法
button.click(function () {
alert("使用jQuery来实现")
})
})
</script>
</head>
<body>
<button id="button01">使用js语言的动态绑定实现</button>
<button id="button02">使用jQuery来实现</button>
</body>
</html>
- 使用jQuery时一定要引入jQuery库
- jQuery就是一个函数,使用$调用表示
- 使用jQuery查询到标签对象后,使用标签对象.函数名来进行操作的绑定
jQuery核心函数
$是jQuery的核心函数,能完成jQuery的绝大部分功能。$()就是调用$这个函数。当传入的参数不同时,所做的操作也不同。
- 当$函数的参数列表中传入参数为函数时:该函数表示当页面加载完成后执行某些操作,相当于
window.onload = function(){}
- 当传入的参数为HTML字符串时:该函数表示根据这个字符串创建元素节点对象
- 传入的参数为选择器字符串时:该函数表示根据这个字符串查找元素节点对象
- 传入参数为DOM对象时:该函数表示将DOM对象包装为jQuery对象返回
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery的核心函数</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
//jQuery的核心函数是$函数,当传入该函数的参数不同时,该函数所做的操作也不相同
/*
* 当传入的参数为函数时,该函数表示在HTML页面加载完成后执行相应操作,相当于
* js语言中的window.onload = function(){}
* */
$(function () {
alert("这是当传入的参数为函数时所做的操作----页面加载完成后自动调用。")
/*
* 当传入函数为HTML字符串时,该函数表示根据这个字符串在内存中创建元素节点对象
* 使用appendTo将其添加至某个节点作为其子节点
* */
$("<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>\n" +
"</body").appendTo("body");
/*
* 当传入的参数为选择器字符串时,该函数表示根据该字符串在页面中选择指定节点对象
*
*/
$("#id001").click(function () {
alert("这是id属性为id001的按钮,当传入参数为选择器字符串时,会选择该节点对象")
})
$(".class001").click(function () {
alert("这是class属性为class001的按钮,当传入参数为选择器字符串时,会选择该节点对象")
})
$(document.getElementById("id003")).click(function () {
alert("这是id属性为id003的按钮,当传入参数为DOM对象时,该函数会自动返回jQuery对象。")
})
});
</script>
</head>
<body>
<button id="id001">id001按钮</button>
<button class="class001">class001按钮</button>
<button id="id003">id003按钮</button>
</body>
</html>
区分DOM对象和jQuery对象
- 什么是DOM对象
- 通过getElementById查询出来的标签对象是DOM对象
- 通过getElementsByName查询出来的集合中的所有标签对象都是DOM对象
- 通过getElementsByTagName查询出来的集合中的所有标签对象都是DOM对象
- 通过createElement创建出来的标签对象是DOM对象
- 什么是jQuery对象
- 通过jQuery提供的API创建的对象是jQuery对象
- 通过jQuery包装的DOM对象是jQuery对象
- 通过jQuery提供的API查询到的对象是jQuery对象
而且,DOM对象alert出来结果是:[object HTML 标签名 Element]
jQuery对象alert出来的结果是:[object Object]
-
jQuery对象的本质
jQuery对象是DOM对象数组加上一系列jQuery提供的功能函数 -
jQuery对象和DOM对象在使用上有什么区别
DOM对象无法使用jQuery对象的属性与方法,jQuery对象也无法使用DOM对象的属性与方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>区分DOM对象和jQuery对象</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
window.onload = function () {
document.getElementById("div001").innerHTML = "innerHTML是DOM对象的属性。"
document.getElementById("div001").click(function () {
alert("同样的,DOM对象也无法使用jQuery对象的属性与方法。")
})
$("#div002").innerHTML = "jQuery对象无法使用DOM对象的属性以及方法。"
}
</script>
</head>
<body>
<div id="div001"></div>
<div id="div002"></div>
</body>
</html>
- DOM对象和jQuery对象的互相转换
使用$()
核心函数可以将DOM对象转换为jQuery对象,再对jQuery对象使用下标即可以将jQuery对象转换为DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象jQuery对象互转</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {
//button001是DOM对象,转换为jQuery对象
var button001 = document.getElementById("button001");
$(button001).click(function () {
alert("这是jQuery方式的点击事件。")
});
//button002是jQuery对象,转换为DOM对象
var $button002 = $(document.getElementById("button002"));
$button002[0].onclick = function () {
alert("这是DOM方式的点击事件")
}
}) </script>
</head>
<body>
<button id="button001">DOM对象转换为jQuery对象</button>
<br/>
<button id="button002">jQuery对象转换为DOM对象</button>
</body>
</html>
jQuery选择器
- 基本选择器
- #ID选择器:根据节点的id属性值来查找标签对象
- .class选择器:根据标签的class属性值来查找标签对象
- element选择器:根据标签名选择标签对象
- *选择器:表示选择任意的、所有的元素
- selector1,selector2组合选择器:合并选取选择器123的结果并返回
- 注意:当出现
$("p.myClass")
时,表示选取标签名为p,标签class属性为“myClass”的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<style>
div,span,p{
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#button01").click(function () {
//css方法可以用来修改标签的显示样式
$("#one").css("background-color","#bbffaa");
})
$("#button02").click(function () {
$(".mini").css("background-color","#bbffaa");
})
$("#button03").click(function () {
$("div").css("background-color","#bbffaa");
})
$("#button04").click(function () {
$("*").css("background-color","#bbffaa");
})
$("#button05").click(function () {
$("span,#two").css("background-color","#bbffaa")
})
$("#button06").click(function () {
$("*").css("background-color","white")
})
})
</script>
</head>
<body>
<button id="button01">选择id为one的元素</button>
<button id="button02">选择class为mini的元素</button>
<button id="button03">选择元素名是div的所有元素</button>
<button id="button04">选择所有的元素</button>
<button id="button05">选择所有的span元素和id为two的元素</button>
<button id="button06">复位</button>
<!-- ------------------------------ -->
<br/>
<div id="one" class="one">
id 为 one,class 为 one 的div
<div class="mini">
class为mini
</div>
</div>
<div id="two" class="one" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div style="display: none;" class="none">style的display属性为none的div</div>
<div class="hide">class为hide的div</div>
<div>
包含input的type属性为hidden的div<input type="hidden" size="8">
</div>
<span class="one" id="span">
^^span元素^^
</span>
</body>
</html>
- 层级选择器
- ancestor descendant——后代选择器:在给定的祖先元素下匹配所有的后代元素
- parent>child——子元素选择器:在给定的父元素下匹配所有的子元素
- prev+next——相邻元素选择器:匹配所有紧接在prev元素后的next元素
- prev~sibings——之后的兄弟元素选择器:匹配prev元素之后所有的sibings元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div,span,p{
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
//层级选择器
/*
* ancestor descendant 后代选择器
* parent > child 子元素选择器
* prev + next 相邻元素选择器
* prev ~ siblings 之后的兄弟元素选择器
*
* */
$(function () {
$("#button01").click(function () {
$("body div").css("background-color","#bbffaa");
})
$("#button02").click(function () {
$("body > div").css("background-color" , "#bbffaa");
})
$("#button03").click(function () {
$("#one + div").css("background-color" , "#bbffaa")
})
$("#button04").click(function () {
$("#two ~ div").css("background-color" , "#bbffaa")
})
$("#button05").click(function () {
$("*").css("background-color" , "white")
})
})
</script>
</head>
<body>
<button id="button01">选择body中的所有div元素</button>
<button id="button02">在body内选择div元素</button>
<button id="button03">选择id为one的下一个div元素</button>
<button id="button04">选择id为two的元素后面的所有div兄弟元素</button>
<button id="button05">复位</button>
<br/>
<div id="one" class="one">23
id 为 one,class 为 one 的div
<div class="mini">
class为mini
</div>
</div>
<div id="two" class="one" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div style="display: none;" class="none">style的display属性为none的div</div>
<div class="hide">class为hide的div</div>
<div>
包含input的type属性为hidden的div<input type="hidden" size="8">
</div>
<span class="one" id="span">
^^span元素^^
</span>
</body>
</html>
- 过滤选择器
- 基本过滤器
:first
:获取第一个元素:last
:获取最后一个元素:not(selector)
:去除所有与给定选择器匹配的元素:even
:匹配所有索引值为偶数的元素,从0开始计数:odd
:匹配所有索引值为奇数的元素,从0开始计数:eq(index)
:匹配一个给定索引值的元素:gt(index)
:匹配所有大于给定索引值的元素:lt(index)
:匹配所有小于给定索引值的元素:header
:匹配如h1,h2,h3之类的标题元素:animated
:匹配所有正在执行动画效果的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(function () {
$("#btn1").click(function () {
$("div:first").css("background-color" , "#bbffaa")
})
$("#btn2").click(function () {
$("div:last").css("background-color" , "#bbffaa")
})
$("#btn3").click(function () {
$("div:not(#one)").css("backgound-color" , "#bbffaa")
})
$("#btn4").click(function () {
$("div:even").css("background-color" , "#bbffaa")
})
$("#btn5").click(function () {
$("div:odd").css("background-color" , "#bbffaa")
})
$("#btn6").click(function () {
$("div:gt(3)").css("background-color" , "#bbffaa")
})
$("#btn7").click(function () {
$("div:eq(3)").css("background-color" , "#bbffaa")
})
$("#btn8").click(function () {
$("div:lt(3)").css("background-color" , "#bbffaa")
})
$("#btn9").click(function () {
$(":header").css("background-color" , "#bbffaa")
})
$("#btn10").click(function () {
$(":animated").css("background-color" , "#bbffaa")
})
$("#btn11").click(function () {
$("div:not(:animated):last").css("background-color" , "#bbffaa")
})
$("#btn12").click(function () {
$("*").css("background-color" , "white")
})
})
</script>
</head>
<body>
<input type="button" value="选择第一个 div 元素" id="btn1" />
<input type="button" value="选择最后一个 div 元素" id="btn2" />
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
<input type="button" value="选择所有的标题元素" id="btn9" />
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
<input type="button" value="复位" id="btn12" />
<h3>基本选择器.</h3>
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
- 过滤选择器
- 内容过滤器
:contains(text)
:匹配包含给定文本的元素:empty
:匹配所有不包含子元素或者文本的空元素:parent
:匹配含有子元素或者文本的元素:has(selector)
:匹配含有选择器所匹配的元素的元素
- 内容过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容过滤器</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
/*
* 选择含有指定文本元素的标签 :contains(text)
* 选择所有不包含文本或元素的标签 :empty
* 选择含有子元素或者文本的标签 :parent
* 选择含有选择器所偶匹配的元素的标签 :has(selector)
* */
$(function () {
$("#btn1").click(function () {
$("div:contains('di')").css("background-color","#bbffaa")
})
$("#btn2").click(function () {
$("div:empty").css("background-color","#bbffaa")
})
$("#btn3").click(function () {
$("div:has(.mini)").css("background-color","#bbffaa")
})
$("#btn4").click(function () {
$("div:parent").css("background-color","#bbffaa")
})
})
</script>
</head>
<body>
<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
<input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
<input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
<input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
- 过滤选择器
- 属性过滤器
[attribute]
:匹配包含给定属性的元素[attribute = value]
:匹配给定的属性是某个特定值的元素[attribute!=value]
:匹配所有不含有指定的属性,或者属性不等于特定值的元素[attribute ^= value]
:匹配给定的属性是以某些值开始的元素[attribute $= value]
:匹配给定的属性是以某些值结尾的元素[attribute *= value]
:匹配给定的属性是包含某些值的元素[attrSel1][attrSel2][attrSelN]
:复合属性选择器,需要同时满足多个条件时使用
- 属性过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性过滤器</title>
<style>
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
//属性过滤器
/*
* 1.[attribute]:匹配包含给定属性的元素
* 2.[attribute = value]:匹配给定属性是特定值的元素
* 3.[attribute != value]:匹配所有不包含给定属性或者给定属性不为特定值的元素
* 4.[attribute ^= value]:匹配给定属性是以某些值开始的元素
* 5.[attribute $= value]:匹配给定属性是以某些之结尾的元素
* 6.[attribute *= value]:匹配给定属性是包含某些值的元素
* */
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(function () {
//选取含有 属性title 的div元素.
$("#btn1").click(function () {
$("div[title]").css("background-color","#bbffaa")
})
//选取 属性title值等于'test'的div元素.
$("#btn2").click(function () {
$("div[title = 'test']").css("background-color","#bbffaa")
})
//选取 属性title值不等于'test'的div元素(没有属性title的也将被选中).
$("#btn3").click(function () {
$("div[title!='test']").css("background-color","#bbffaa")
})
//选取 属性title值 以'te'开始 的div元素.
$("#btn4").click(function () {
$("div[title^='te']").css("background-color","#bbffaa")
})
//选取 属性title值 以'est'结束 的div元素.
$("#btn5").click(function () {
$("div[title$='est']").css("background-color","#bbffaa")
})
//选取 属性title值 含有'es'的div元素.
$("#btn6").click(function () {
$("div[title*='es']").css("background-color","#bbffaa")
})
//组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素.
$("#btn7").click(function () {
$("div[id][title*='es']").css("background-color","#bbffaa")
})
//选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素.
$("#btn8").click(function () {
$("div[title][title!='test']").css("background-color","#bbffaa")
})
})
</script>
</head>
<body>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" style="display: none;"/>
<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
<input type="button"
value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
<input type="button"
value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素."
id="btn7" />
<input type="button"
value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
<br>
<br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" value="123456789"
size="8">
</div>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
- 过滤选择器
- 表单过滤选择器
:input
:匹配所有input、textarea、select和button元素:text
:匹配所有的文本输入框:password
:匹配所有密码输入框:radio
:匹配所有的单选框:checkbox
:匹配所有的复选框:submit
:匹配所有的提交按钮:image
:匹配所有的image标签:reset
:匹配所有的重置按钮:button
:匹配所有的<input type=button>按钮:file
: 匹配所有的<input type=file>文件上传域:hidden
: 匹配所有的<input type=hidden>隐藏域
- 表单过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单过滤器</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {
//匹配所有的input元素
$("#button001").click(function () {
$(":input").css("background-color","#bbffaa")
})
//匹配所有的文本输入框
$("#button002").click(function () {
$(":text").css("background-color","#bbffaa")
})
//匹配所有的密码输入框
$("#button003").click(function () {
$(":password").css("background-color","#bbffaa")
})
//匹配所有的单选框
$("#button004").click(function () {
$(":radio").css("background-color","#bbffaa")
})
//匹配所有的复选框
$("#button005").click(function () {
$(":checkbox").css("background-color","#bbffaa")
})
//匹配所有的提交按钮
$("#button006").click(function () {
$(":submit").css("background-color","#bbffaa")
})
//匹配所有的image标签
$("#button007").click(function () {
$(":image").css("background-color","#bbffaa")
})
//匹配所有的重置按钮
$("#button008").click(function () {
$(":reset").css("background-color","#bbffaa")
})
//匹配所有的button按钮
$("#button009").click(function () {
$(":button").css("background-color","#bbffaa")
})
//匹配所有的文件上传域
$("#button010").click(function () {
$(":file").css("background-color","#bbffaa")
})
//匹配所有的隐藏域
$("#button011").click(function () {
$(":hidden").show()
})
})
</script>
</head>
<body>
<button id="button001">匹配所有的input元素</button>
<button id="button002">匹配所有的文本输入框</button>
<button id="button003">匹配所有的密码输入框</button>
<button id="button004">匹配所有的单选框</button>
<button id="button005">匹配所有的复选框</button>
<button id="button006">匹配所有的提交按钮</button>
<button id="button007">匹配所有的image标签</button>
<button id="button008">匹配所有的重置按钮</button>
<button id="button009">匹配所有的button按钮</button>
<button id="button010">匹配所有的文件上传域</button>
<button id="button011">匹配所有的隐藏域</button>
<form>
文本框1<input type="text">
文本框2<input type="text">
文本框3<input type="text">
<br/>
密码框1<input type="password">
密码框2<input type="password">
密码框3<input type="password">
<br/>
单选框1<input name="4" type="radio">
单选框1<input name="a" type="radio">
单选框1<input name="a1" type="radio">
<br/>
复选框1<input type="checkbox" name="b">
复选框2<input type="checkbox" name="b">
复选框3<input type="checkbox" name="b">
复选框4<input type="checkbox" name="b">
<br/>
下拉列表1<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
下拉列表2<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<br/>
<input type="submit">
<br/>
<input type="reset">
<br/>
<input type="image">
<br/>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
<br/>
<input type="file">
<input type="file">
<input type="file">
<br/>
<input type="hidden">
<input type="hidden">
<input type="hidden">
</form>
</body>
</html>
- 过滤选择器
- 表单对象属性过滤选择器
:enabled
: 匹配所有的可用元素:disabled
: 匹配所有的不可用元素:checked
: 匹配所有选中的单选,复选:selected
: 匹配所有选中的option
- 表单对象属性过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单对象属性过滤选择器</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {
//对表单内 可用input 赋值操作.
$("#btn1").click(function () {
$(":text:input:enabled").val("赋值操作")
})
//对表单内 不可用input 赋值操作.
$("#btn2").click(function () {
$(":text:input:disabled").val("赋值操作")
})
//获取多选框选中的个数.
$("#btn3").click(function () {
var options = $(":checkbox:checked")
alert(options.length)
})
//获取多选框选中的内容.
$("#btn4").click(function () {
var options = $(":checkbox:checked")
for (var i = 0; i < options.length; i++) {
alert(options[i].value)
}
//也可以使用jQuery中的each函数来遍历元素
//在遍历的function函数中,有一个this对象,就是当前遍历到的dom对象
//options.each(function(){
// alert(this.value)
//})
})
//获取下拉框选中的内容.
$("#btn5").click(function () {
var options = $("select option:selected")
for (var i = 0; i < options.length; i++) {
alert(options[i].value)
}
})
})
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文本框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
可用元素: <input name="che" value="可用文本框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
<br>
多选框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<!-- 由于multiple属性的存在,下拉列表可以实现多重选择 -->
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">辽宁</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>辽宁</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
- 元素筛选方法
eq(index)
:获取给定索引的元素first()
:获取第一个元素last()
:获取最后一个元素filter(exp)
:留下匹配的元素is(exp)
:判断是否匹配给定的选择器,只要有一个匹配就返回truehas(exp)
:返回包含有匹配选择器的元素的元素not(exp)
:删除匹配选择器的元素child(exp)
:返回匹配给定选择器的子元素find(exp)
:返回匹配给定选择器的后代元素next()
:返回当前元素的下一个兄弟元素nextAll()
:返回当前元素后面所有的兄弟元素nextUntil(exp)
:返回当前元素到指定匹配的元素位置的后面元素parent()
:返回当前元素的父元素prev()
:返回当前元素的上一个兄弟元素prevAll()
:返回当前元素前面所有的兄弟元素prevUntil(exp)
:返回当前元素到指定匹配的元素位置的前面所有元素sibling(exp)
:返回所有兄弟元素add()
:把add匹配的选择器的元素添加到当前jQuery对象中、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery元素筛选方法</title>
<style>
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
$(function () {
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//eq()选择索引值为等于 3 的 div 元素
$("#btn1").click(function () {
$("div").eq(3).css("background-color","#bbffaa")
})
//first()选择第一个 div 元素
$("#btn2").click(function () {
$("div").first().css("background-color","#bbffaa")
})
//last()选择最后一个 div 元素
$("#btn3").click(function () {
$("div").last().css("background-color","#bbffaa")
})
//filter()在div中选择索引为偶数的
$("#btn4").click(function () {
$("div").filter(":even").css("background-color","#bbffaa")
})
//is()判断#one是否为:empty或:parent
$("#btn5").click(function () {
alert($("#one").is(":empty")|$("#one").is(":parent"))
})
//has()选择div中包含.mini的
$("#btn6").click(function () {
$("div").has(".mini").css("background-color","#bbffaa")
})
//not()选择div中class不为one的
$("#btn7").click(function () {
$("div").not(".one").css("background-color","#bbffaa")
})
//children()在body中选择所有class为one的div子元素
$("#btn8").click(function () {
$("body").children("div.one").css("background-color","#bbffaa")
})
//find()在body中选择所有class为mini的div后代元素
$("#btn9").click(function () {
$("body").find("div.mini").css("background-color","#bbffaa")
})
//next()#one的下一个div
$("#btn10").click(function () {
$("#one").next("div").css("background-color","#bbffaa")
})
//nextAll()#one后面所有的span元素
$("#btn11").click(function () {
$("#one").nextAll("span").css("background-color","#bbffaa")
})
//nextUntil()#one和span之间的元素
$("#btn12").click(function () {
$("#one").nextUntil("span").css("background-color","#bbffaa")
})
//parent().mini的父元素
$("#btn13").click(function () {
$(".mini").parent().css("background-color","#bbffaa")
})
//prev()#two的上一个div
$("#btn14").click(function () {
$("#two").prev("div").css("background-color","#bbffaa")
})
//prevAll()span前面所有的div
$("#btn15").click(function () {
$("span").prevAll("div").css("background-color","#bbffaa")
})
//prevUntil()span向前直到#one的元素
$("#btn16").click(function () {
$("span").prevUntil("#one").css("background-color","#bbffaa")
})
//siblings()#two的所有兄弟元素
$("#btn17").click(function () {
$("#two").siblings().css("background-color","#bbffaa")
})
//add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function () {
$("span").add("#two").css("background-color","#bbffaa")
})
});
</script>
</head>
<body>
<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
<input type="button" value="first()选择第一个 div 元素" id="btn2" />
<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
<input type="button" value="has()选择div中包含.mini的" id="btn6" />
<input type="button" value="not()选择div中class不为one的" id="btn7" />
<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
<input type="button" value="next()#one的下一个div" id="btn10" />
<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="prev()#two的上一个div" id="btn14" />
<input type="button" value="prevAll()span前面所有的div" id="btn15" />
<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
<h3>基本选择器.</h3>
<br /><br />
文本框<input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other"><b>class为mini,title为other</b></div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="span1">^^span元素 111^^</span>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>