- 比如: $(“#test”).html() 意思是指: 获取id为test的元素内的html代码. 其中html()是jQuery里的方法
- 这段代码等同于用DOM实现代码:
document.getElementById(“id”).innerHTML;
- var $variable : jQuery 对象
- var variable : DOM对象
- $(“#id”) 等价于 document.getElementById(“id”);
- $(“tagName”) 等价于 document.getElementsByTagName(“tagName”);
- 完善的事件处理机制
基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过id, class和标签名来查找DOM对象
种类 | 用法 | 返回值 | 说明 |
---|---|---|---|
id | $(“#myDiv”) | 单个元素组成的集合 | 直接选择html中的id=“myDiv” |
Element | $(“div”) | 集合元素 | element翻译过来的意思就是元素, 所有element其实就是html已经定义的标签元素, 比如div, p, a, input等 |
class | $(“.myClass”) | 集合元素 | 直接选择html代码中class="myClass"的元素或元素组(因为在同一html中, class是可以存在多个同样的值的) |
* | $(“*”) | 集合元素 | 匹配所有的元素, 包括, 多用于结合上下文来搜索 |
selector1, selector2… selectorN | $(“div, span, p.myClass”) | 集合元素 | 将每一个选择器匹配到的元素合并后一起返回, 你可以指定任意多个选择器, 并将匹配到的元素合并到集合中, p.myClass是表示匹配元素 p class=“myClass” |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
//1.改变id为one的元素的背景色为yellow
$("#btn01").click(
function () {
$("#one").css("background", "yellow");
}
);
//2.改变class为mytag的的所有元素的背景色为red
$("#btn02").click(
function () {
$(".mytag").css("background", "red");
}
);
//3.改变元素名为div的的所有元素的背景色为black
$("#btn03").click(
function () {
$("div").css("background", "black");
}
);
//4.改变所有元素的背景色为pink
$("#btn04").click(
function () {
$("*").css("background", "pink");
}
);
//5.改变所有的元素和id为two, class为mytag 的元素的背景色为blue
$("#btn05").click(
function () {
$("span.c1, #two, .mytag").css("background", "blue");
}
);
});
script>
head>
<body>
<button id="btn01">改变id为one的元素的背景色为yellowbutton>
<button id="btn02">改变class为mytag的所有元素的背景色为redbutton>
<button id="btn03">改变元素名为<div>的所有元素的背景色为blackbutton>
<button id="btn04">改变所有元素的背景色为pinkbutton>
<button id="btn05">改变所有的<span>元素和id为two, class为mytag 的元素的背景色为bluebutton>
<hr/>
<div style="height: 200px; width: 300px; background-color: chartreuse" id="one">id=onediv>
<div style="height: 200px; width: 300px; background-color: pink" id="two" class="mytag">id=twodiv>
<div style="height: 200px; width: 300px; background-color: blueviolet" id="three" class="mytag">id=threediv>
<div style="height: 200px; width: 300px; background-color: blue" id="four" class="mytag">id=fourdiv>
<span style="background-color: chartreuse" class="c1">id=fivespan>
<span style="background-color: chartreuse" class="c2">id=sixspan>
body>
html>
如果想要通过DOM元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器
种类 | 用法 | 返回值 | 说明 |
---|---|---|---|
ancestor descendant | $(“form input”) | 集合元素 | 在给定的祖先元素下匹配所有后代元素 |
parent > child | $(“form > input”) | 集合元素 | 在给定的父元素下匹配所有子元素(注意区分后代元素和子元素) |
prev + next | $(“label + input”) | 集合元素 | 匹配所有紧跟在prev元素后的next元素 |
prev ~ siblings | $(“form ~ input”) | 集合元素 | 匹配prev元素之后的所有siblings元素. 注意: 是匹配之后的元素, 不包含该元素在内, 并且匹配的是和prev同级的元素, 其后辈元素不被匹配 |
注意: (“prev ~ div”)选择器只能选择"#prev"元素后面的同辈元素; 而jQuery中的siblings方法与位置无关, 只要是同辈节点就可以选取
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
//1.改变内所有元素的背景色为green
$("#btn01").click(
function () {
$("div").css("background-color", "green");
}
);
//2.改变内子元素(第一层级的div)的背景色为red
$("#btn02").click(
function () {
$("body > div").css("background", "red");
}
);
//3.改变id为one的下一个紧接着的div元素(必须是紧跟着)的背景色为yellow
$("#btn03").click(
function () {
$("#one + div").css("background", "yellow");
}
);
//4.示例: 改变id为two的元素后面所有的div元素(满足兄弟元素[处于同一层级]即可)的背景色为brown
$("#btn04").click(
function () {
$("#two ~ div").css("background", "brown");
}
);
//5.改变id为two的元素的所有兄弟元素[同级元素]中的div元素的背景色为white
$("#btn05").click(
function () {
$("#two").siblings("div").css("background-color", "white");
}
);
});
script>
head>
<body>
<input type="button" value="改变内所有元素的背景色为green" id="btn01"/>
<input type="button" value="改变内子元素的背景色为red" id="btn02"/>
<input type="button" value="改变id为one的下一个元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变id为two的元素后面所有的兄弟元素(即div元素)的背景色为brown" id="btn04"/>
<input type="button" value="改变id为two的元素所有兄弟元素的背景色为white" id="btn05"/>
<hr/>
<div id="one" class="mytag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=one
div>
<div id="two" class="mytag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=two
<div id="two01" style="background-color: lightpink; width: 100px;height: 100px;">
id two01
div>
<div id="two02" style="background-color: lightpink; width: 100px;height: 100px;">
id two02
div>
div>
<div id="three" class="mytag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=three
<div id="three01" style="background-color: lightpink; width: 100px;height: 100px;">
id three01
div>
div>
body>
html>
1.5.3 基础过滤选择器
基础过滤选择器介绍:
种类
用法
返回值
说明
:first
$(“tr:first”)
单个元素组成的集合
匹配找到的第一个元素
:last
$(“tr:last”)
集合元素
匹配找到的最后一个元素
:not(selector)
$(“input:not(:checked)”)
集合元素
去除所有与给定选择器匹配的元素, 意思是没有被选中的input(当 input type=“checkbox”)
:even
$(“tr:even”)
集合元素
匹配所有索引值为偶数的元素, 从0开始计数.js的数组都是从0开始计数的, 例如要选择table的行, 因为是从0开始计数, 所以table中的第一个tr就为偶数0
:odd
$(“tr:odd”)
集合元素
匹配所有索引值为奇数的元素, 从0开始计数
:eq(index)
$(“tr:eq(0)”)
集合元素
匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素, 括号里面的是索引值, 不是元素排放数
:gt(index)
$(“tr:gt(0)”)
集合元素
匹配所有大于给定索引值的元素
:lt(index)
$(“tr:lt(0)”)
集合元素
匹配所有小于给定索引值的元素
:header
$(“:header”).css(“background”, “red”)
集合元素
匹配所有h1, h2, h3之类的标题元素, 这个是专门用来获取h1, h2这样的元素
:animated
集合元素
匹配所有正在执行动画效果的元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础过滤选择器title>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
$("#btn01").click(
function () {
//1.改变第一个元素的背景色为green
$("div:first").css("background", "green");
$("div:eq(0)").css("background", "green");
}
);
$("#btn02").click(
function () {
//2.改变最后一个元素的背景色为red
//所谓最后一个是指从上到下, 从外层到内层的最后一个
$("div:last").css("background", "red");
}
);
$("#btn03").click(
function () {
//3.改变class不为myTag的所有元素的背景色为yellow
$("div:not(.myTag)").css("background", "yellow");
}
);
$("#btn04").click(
function () {
//4.改变索引值为偶数的的背景色为brown
//冒号:可以理解为过滤
$("div:even").css("background", "brown");
}
);
$("#btn05").click(
function () {
//5.改变索引值为奇数的的背景色为blue
$("div:odd").css("background", "blue");
}
);
$("#btn06").click(
function () {
//6.改变索引值大于3的的背景色为white
$("div:gt(3)").css("background", "white");
}
);
$("#btn07").click(
function () {
//7.改变索引值等于3的的背景色为pink
$("div:eq(3)").css("background", "pink");
}
);
$("#btn08").click(
function () {
//8.改变索引值小于3的的背景色为gray
$("div:lt(3)").css("background", "gray");
}
);
$("#btn09").click(
function () {
//9.改变所有的标题元素背景色为purple
$(":header").css("background", "purple");
}
);
})
script>
head>
<body>
<input type="button" value="改变第一个元素的背景色为green" id="btn01"/>
<input type="button" value="改变最后一个元素的背景色为red" id="btn02"/>
<input type="button" value="改变class不为myTag的所有元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变索引值为偶数的的背景色为brown" id="btn04"/>
<input type="button" value="改变索引值为奇数的的背景色为blue" id="btn05"/>
<input type="button" value="改变索引值大于3的的背景色为white" id="btn06"/>
<input type="button" value="改变索引值等于3的的背景色为pink" id="btn07"/>
<input type="button" value="改变索引值小于3的的背景色为gray" id="btn08"/>
<input type="button" value="改变所有的标题元素背景色为purple" id="btn09"/>
<hr/>
<hr/>
<div id="one" class="myTag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=one
div>
<div id="two" class="myTag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=two
<div id="two01" class="yourTag" style="background-color: lightpink; width: 100px;height: 100px;">
id two01
div>
<div id="two02" class="yourTag" style="background-color: lightpink; width: 100px;height: 100px;">
id two02
div>
div>
<div id="three" class="myTag" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=three
<div id="three01" class="yourTag" style="background-color: lightpink; width: 100px;height: 100px;">
id three01
div>
div>
<h1>标题一h1>
<h2>标题二h2>
<h3>标题三h3>
body>
html>
1.5.4 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
种类
用法
返回值
说明
:contains(text)
$(“div:contains(‘John’)”)
集合元素
匹配包含给定文本的元素, 这个选择器比较有用, 当我们要选择的不是dom标签元素时, 它就派上用场了, 它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的(子元素包含也算)
:empty
$(“td:empty”)
集合元素
匹配所有不包含子元素或者文本的空元素
:has(selector)
$(“div:has( p)”).addClass(“test”)
集合元素
匹配含有选择器所匹配的元素的元素. 给所有包含p元素的div标签加上class=“test”
:parent
$(“td:parent”)
集合元素
匹配包含子元素或者文本的元素, 注意: 这里是":parent", 不是".parent", 与":empty"含义相反
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容过滤选择器title>
<style>
div {
background-color: darkgray;
width: 300px;
height: 300px;
float: left;
}
div > div {
background-color: lightpink;
width: 100px;
height: 100px;
}
style>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
$("#btn01").click(
function () {
//1.改变含有文本 'di' 的元素的背景色为green
//子div含有文本'di', 父div也会被选中
$("div:contains('di')").css("background", "green");
}
);
$("#btn02").click(
function () {
//2.改变不包含子元素或文本的元素的背景色为red
$("div:empty").css("background", "red")
}
);
$("#btn03").click(
function () {
//这个写法是选择有class='yourTag'的div
$("div.yourTag").css("background", "yellow");
//3.改变含有class为yourTag元素的所有元素的背景色为yellow
//这个写法是选择有class='yourTag'的div的父元素(div)
// $("div:has(.yourTag)").css("background", "yellow");
}
);
$("#btn04").click(
function () {
//4.改变含有子元素(或者文本元素)的所有元素的背景色为brown
$("div:parent").css("background", "brown");
}
);
$("#btn05").click(
function () {
//5.改变不含有文本 'di' 的的背景色为blue
$("div:not(:contains('di'))").css("background", "blue");
}
);
})
script>
head>
<body>
<input type="button" value="改变含有文本 'di' 的元素的背景色为green" id="btn01"/>
<input type="button" value="改变不包含子元素或文本的元素的背景色为red" id="btn02"/>
<input type="button" value="改变含有class为yourTag的所有元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变含有子元素(或者文本元素)的所有元素的背景色为brown" id="btn04"/>
<input type="button" value="改变不含有文本 'di' 的的背景色为blue" id="btn05"/>
<hr/>
<hr/>
<div id="one" class="myTag">
<div id="one01" class="yourTag">
div id=one01
div>
div>
<div id="two" class="myTag">
div id=two
<div id="two01" class="yourTag">
id two01
div>
<div id="two02" class="yourTag">
id two02
div>
div>
<div id="three" class="myTag">
div id=three
<div id="three01" class="yourTag">
id three01
div>
div>
<div id="four" class="myTag">
XXXXXXXXXXXX
div>
<div id="five" class="myTag">div>
<div id="mover" class="yourTag">
执行动画
div>
body>
html>
1.5.5 可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
种类
用法
返回值
说明
:hidden
$(“input:hidden”)
集合元素
匹配所有的不可见元素, input元素的type属性为"hidden"会被匹配到, css中display:none和input type="hidden"都会被匹配到
:visible
$(“tr:visible”)
集合元素
匹配所有的可见元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见度过滤选择器title>
<style>
.visible {
display: none;
}
style>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
$("#btn01").click(
function () {
//1.改变所有可见的元素的背景色为green
$("div:visible").css("background", "green");
}
);
$("#btn02").click(
function () {
//2.选取所有不可见的元素, 利用jQuery中的show()方法将它们显示出来, 并设置背景色为red
$("div:hidden").css("background", "red");
$("div:hidden").show();
}
);
$("#btn03").click(
function () {
//1.先得到所有隐藏的input元素
// $input是一个jquery对象, 而且是数组对象
var $inputs = $("input:hidden");
//2.遍历
//方式1 - for循环
for (var i = 0; i < $inputs.length; i++) {
//这里input就是一个dom对象
var input = $inputs[i];
alert("值是=" + input.value);
}
//方式2 - jquery each() 可以实现数组遍历
//说明:
//(1)each方法遍历时, 会将 $inputs数组的元素取出,
// 传给function() {} -> this
$inputs.each(function () {
//这里可以使用this获取每次遍历的对象
//this对象是一个dom对象
console.log("值(dom方式)是=" + this.value);
//也可以将this转成jquery对象, 使用jquery方法取值
console.log("值(jquery方式)是=" + $(this).val());
});
}
);
})
script>
head>
<body>
<input type="button" value="改变所有可见的元素的背景色为green" id="btn01"/>
<input type="button" value="选取所有不可见的元素, 利用jQuery中的show()方法将它们显示出来, 并设置背景色为red"
id="btn02"/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="btn03"/>
<input type="button" value="改变含有子元素(或者文本元素)的所有元素的背景色为brown" id="btn04"/>
<input type="button" value="改变不含有文本 'di' 的的背景色为blue" id="btn05"/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<hr/>
<div id="one" class="visible" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=one
div>
<div id="two" class="visible" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=two
div>
<div id="three" class="hidden" style="background-color: darkgray; width: 300px;height: 300px;float: left">
div id=three
div>
body>
html>
1.5.6 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
种类
用法
返回值
说明
[attribute]
$(“div[id]”)
集合元素
匹配包含给定属性的元素, 例子中是选取了所有带id属性的div标签
[attribute=value]
$(“input[name=‘zzw’]”)
集合元素
匹配给定的属性是某个特定值的元素, 例子中选取了所有name属性是’zzw’的input元素
[attribute!=value]
$(“input[name!=‘zzw’]”)
集合元素
匹配不含有指定属性的元素, 或者属性不等于特定值的元素, 此选择器等价于:not([attrubute=value]), 要匹配含有特定属性但不等于特定值的元素, 请使用[attrubute]:not([attribute=value])
[attribute^=value]
$(“input[name^=‘zzw’]”)
集合元素
匹配给定的属性是以某些值开始的元素
[attribute$=value]
$(“input[name$=‘zzw’]”)
集合元素
匹配给定的属性是以某些值结尾的元素
[attribute*=value]
$(“input[name*=‘zzw’]”)
集合元素
匹配给定的属性是以包含某些值的元素
[attibuteFilter1][attrubuteFilter2][attributeFilter3]
$(“input[id][name$=‘zzw’]”)
集合元素
复合属性选择器, 需要同时满足多个条件使用, 是一个组合, 这个例子中选择的是含有id属性, 并且name属性是以’zzw’结尾的元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性过滤选择器title>
<style>
/*css布局级层级关系 https://www.jianshu.com/p/8cd81ca91ec8*/
div {
background-color: darkgray;
width: 300px;
height: 300px;
float: left;
}
div > div {
background-color: lightpink;
width: 100px;
height: 100px;
}
style>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
$("#btn01").click(
function () {
//1.含有属性title的div元素
$("div[title]").css("background", "green");
}
);
$("#btn02").click(
function () {
//2.属性title='two'的div元素
$("div[title='two']").css("background", "red");
}
);
$("#btn03").click(
function () {
//3.属性title!='two'的div元素
$("div[title!='two']").css("background", "yellow");
}
);
$("#btn04").click(
function () {
//4.属性title以'te'开始的div元素
$("div[title^='te']").css("background", "brown");
}
);
$("#btn05").click(
function () {
//5.属性title以'est'结尾的div元素
$("div[title$='est']").css("background", "blue");
}
);
$("#btn06").click(
function () {
//6.属性title含有'es'的div元素
$("div[title*='es']").css("background", "white");
}
);
$("#btn07").click(
function () {
//7.选取有属性id的div元素, 然后在结果中选取属性title的值含有'es'的div元素
$("div[id][title*='es']").css("background", "purple");
}
);
})
script>
head>
<body>
<input type="button" value="改变含有属性title的元素的背景色为green" id="btn01"/>
<input type="button" value="改变属性title='two'的元素的背景色为red" id="btn02"/>
<input type="button" value="改变属性title!='two'的元素的背景色为yellow" id="btn03"/>
<input type="button" value="改变属性title以'te'开始的元素的背景色为brown" id="btn04"/>
<input type="button" value="改变属性title以'est'结尾的的背景色为blue" id="btn05"/>
<input type="button" value="改变属性title含有'es'的的背景色为white" id="btn06"/>
<input type="button" value="改变有属性id, 并且属性title含有'es'的的背景色为purple" id="btn07"/>
<hr/>
<div id="one" title="test">
div id=one
<div id="one01" title="one">
id one01
div>
div>
<div id="two" title="test">
div id=two
<div id="two01" title="two">
id two01
div>
<div id="two02" title="two">
id two02
div>
div>
<div title="test">
div id=three
<div id="three01">
id three01
div>
div>
body>
html>
1.5.7 子元素过滤选择器
子元素过滤选择器介绍:
种类
用法
返回值
说明
:nth-child(index/even(偶数)/odd(奇数)/equation)
$(“ul li:nth-child(2)”)
集合元素
匹配其父元素下的第N个子元素或奇偶元素. 这个选择器和之前说过的基础过滤选择器中的eq()有些类似, 不同之处在于前者从0开始, 这里的索引是从1开始
:first-child
$(“ul li:first-child”)
集合元素
匹配第一个子元素, ':first’只匹配一个元素, 而这里的选择符将为每个父元素匹配一个子元素
:last-child
$(“ul li:last-child”)
集合元素
匹配最后一个子元素, ':last’之匹配一个元素, 而这里的选择符将为每个父元素匹配一个子元素
:only-child
$(“ul li:only-child”)
集合元素
如果某个元素是父元素中唯一的子元素, 那么此元素将会被匹配, 如果父元素中含有其它元素, 那将不会被匹配
nth-child() 选择器详解
- :nth-child(even/odd): 选取每个父元素下的索引值为偶(奇)数的元素
- :nth-child(2): 选取每个父元素下的索引值为2的元素
- :nth-child(3n): 选取每个父元素下的索引值是3的倍数的元素
- :nth-child(3n+1): 选取每个父元素下的索引值是3n+1的元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素过滤选择器title>
<style>
div {
background-color: darkgray;
width: 300px;
height: 300px;
float: left;
}
div > div {
background-color: lightpink;
width: 100px;
height: 100px;
}
style>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
$("#btn01").click(
function () {
//1.每个class为one的div父元素下的第2个子元素
$("div .one:nth-child(2)").css("background", "green");
}
);
$("#btn02").click(
function () {
//2.每个class为one的div父元素下的第一个子元素
// $("div .one:nth-child(1)").css("background", "red");
$("div .one:first-child").css("background", "red");
}
);
$("#btn03").click(
function () {
//3.每个class为one的div父元素下的最后一个子元素
$("div .one:last-child").css("background", "yellow");
}
);
$("#btn04").click(
function () {
//4.每个class为one的div父元素下的仅仅只有一个子元素, 那么选中这个元素
$("div .one:only-child").css("background", "brown");
}
);
})
script>
head>
<body>
<input type="button" value="每个class为one的div父元素下的第2个子元素的背景色为green" id="btn01"/>
<input type="button" value="每个class为one的div父元素下的第一个子元素的背景色为red" id="btn02"/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素的背景色为yellow" id="btn03"/>
<input type="button" value="每个class为one的div父元素下的仅仅只有一个子元素, 那么选中这个元素, 设置背景色为brown" id="btn04"/>
<hr/>
<div class="one">
<div id="one" class="one">
XXXXXXXXXXXX id=one
div>
<div id="two" class="one">
XXXXXXXXXXXX id=two
div>
<div id="three" class="one">
XXXXXXXXXXXX id=three
div>
<div id="four" class="one">
XXXXXXXXXXXX id=four
div>
div>
<div class="one">
<div id="five" class="one">
XXXXXXXXXXXX id=five
div>
div>
body>
html>
1.5.8 表单属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
种类
用法
返回值
说明
:enabled
$(“input:enabled”)
集合元素
匹配所有可用元素. 此例中查找所有input中不带有disabled="disabled"的input
:disabled
$(“input:disabled”)
集合元素
匹配所有不可用元素
:checked
$(“input:checked”)
集合元素
匹配所有被选中的元素(复选框, 单选框, 不包括下拉框)
:selected
$(“select option:selected”)
集合元素
匹配所有选中的option元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单对象过滤选择器title>
<style>
div {
background-color: darkgray;
width: 300px;
height: 300px;
float: left;
}
div > div {
background-color: lightpink;
width: 100px;
height: 100px;
}
style>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
$(function () {
$("#btn01").click(
function () {
//1.说明: jquery对象.val(), 如果()内是空的, 表示返回value值
// jquery对象.val('值'), 表示给该对象设置值
$("input[type='text']:enabled").val("台球");
}
);
$("#btn02").click(
function () {
//2.利用jquery对象的val()方法改变的值
$("input[type='text']:disabled").val("足球");//只要是选中的,值都会被改变
}
);
$("#btn03").click(
function () {
//3.利用该jquery对象的length属性获取复选框选中的个数
alert($("input[type='checkbox']:checked").length);
var $inputs = $("input[type='checkbox']:checked");
$inputs.each(function () {
//this是一个dom对象, $(this)转成jquery对象
alert(this.value);
alert($(this).val());
})
}
);
$("#btn04").click(
function () {
//4.利用jquery对象的text()方法获取下拉框选中的内容
var $selects = $("select[multiple='multiple'] option:selected");
$selects.each(function () {
//jquery对象的text()方法获取的是下拉框选中的内容
alert("被选中的是=" + $(this).text());
//.value是获取下拉框选中的option对应的值
alert("被选中的是=" + this.value);
})
}
);
})
script>
head>
<body>
<input type="button" value="利用jquery对象的val()方法改变的值" id="btn01"/>
<input type="button" value="利用jquery对象的val()方法改变的值" id="btn02"/>
<input type="button" value="利用该jquery对象的length属性获取复选框选中的个数" id="btn03"/>
<input type="button" value="利用jquery对象的text()方法获取下拉框选中的内容" id="btn04"/>
<hr/>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/><br/>
<h1>选择你的爱好h1>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4<br/>
<h1>选项如下:h1>
<select name="job" size="6" multiple="multiple">
<option value="选项1">选项1~~option>
<option value="选项2">选项2~~option>
<option value="选项3">选项3~~option>
<option value="选项4">选项4~~option>
<option value="选项5">选项5~~option>
<option value="选项6">选项6~~option>
<option value="选项7">选项7~~option>
<option value="选项8">选项8~~option>
<option value="选项9">选项9~~option>
select><br/>
<h1>你的学位h1>
<select id="zzw" name="zpz">
<option value="博士">博士option>
<option value="硕士">硕士option>
<option value="学士">学士option>
<option value="九年义务教育">九年义务教育option>
select>
body>
html>
1.5.9 表单选择器
种类
用法
返回值
说明
:input
$(“:input”)
集合元素
匹配所有input, textarea, select 和 button元素
:text
$(“:text”)
集合元素
匹配所有的单行文本框
:password
$(“:password”)
集合元素
匹配所有密码框
:radio
$(“:radio”)
集合元素
匹配所有单选按钮
:checkbox
$(“:checkbox”)
集合元素
匹配所有复选框
:submit
$(“:submit”)
集合元素
匹配所有提交按钮
image
$(“:image”)
集合元素
匹配所有图像域
:reset
$(“:reset”)
集合元素
匹配所有重置按钮
:button
$(“:button”)
集合元素
匹配所有按钮, 这个包括直接写的button
:file
$(“:file”)
集合元素
匹配所有文件域
:hidden
$(“input:hidden”)
集合元素
匹配所有不可见元素, 或者type为hidden的元素, 这个选择器不仅限于表单, 除了匹配input, 那些style为hidden的也会被匹配. 注意: 要选取input中为hidden的元素就是$(“input:hidden”), 但是直接使用":hidden"就是匹配页面中所有不可见元素, 包括宽度和高度为0的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器title>
<script type="text/javascript" src="script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
//这里不绑定事件, 直接演示
$(function () {
//1.选择所有的button
// 不仅会选择
// 还会选择
var $button = $(":button");
alert("页面内button的个数: " + $button.length);
//2.得到type='button'的元素
// 这样的方式只会得到
//
// 这样的button
var $button = $("input[type='button']");
alert("页面内type='button'的个数: " + $button.length);
//3.得到,按照元素标签获取
// 属于基本选择器
var $button = $("button");
alert("页面内buttion标签的个数(): " + $button.length);
})
script>
head>
<body>
<form>
<input type="text"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="image" src="image/beautiful.jpg" width="100"/><br/>
<input type="file"/><br/>
<input type="submit"/><br/>
<input type="reset"/><br/>
<input type="password"/><br/>
<input type="button" value="按钮1"/><br/>
<select>
<option/>
select><br/>
<textarea>文本域不支持单标签textarea><br/>
<button>按钮2button>
<button>按钮3button>
<br/>
form>
body>
html>
选择器作业布置
题目1: 给页面中所有的p标签加上onclick事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器作业1title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
//题目:给页面中所有的p标签加上onclick事件
//思路:绑定事件-函数-获取p元素的文本
$(function () {
//方式1
$("p").click(function () {
//当我们点击p元素时,会隐式的传入this对象(dom对象)
//即当前点击的p元素对应的dom对象
alert("p元素文本内容=" + this.innerText);
alert("p元素文本内容(jquery方式)=" + $(this).text());
})
//方式2
$("p").each(function () {
//遍历执行内部的function, 依然会隐式的传入this对象(表示当前p标签的dom对象)
//每遍历出一个p标签对象, 就绑定一个事件
this.onclick = function () {
alert("p元素文本内容=" + this.innerText);
alert("p元素文本内容(jquery方式)=" + $(this).text());
}
})
for (var i = 0; i < $("p").length; i++) {
$("p")[i].onclick = function () {
alert("p元素文本内容=" + this.innerText);
alert("p元素文本内容(jquery方式)=" + $(this).text());
}
}
})
script>
head>
<body>
<h1>给页面中所有的<p>标签加上onclick事件h1>
<p>段落1p>
<p>段落2p>
<p>段落3p>
body>
html>
题目2:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器作业2title>
<style>
td {
border: 1px solid;
width: 400px;
}
style>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js">script>
<script type="text/javascript">
//使用jquery选择器完成对表格隔行变色的功能
$(function () {
//方式一
$("table:first tr:nth-child(odd)").css("background", "yellow");
$("table:first tr:nth-child(even)").css("background", "blue");
$("table:eq(1) tr:nth-child(odd)").css("background", "red");
$("table:eq(1) tr:nth-child(even)").css("background", "pink");
//方式二
//1.先选择到table
//2.得到 tr
//3.得到even/odd的tr元素
//4.得到指定的table:eq(index), 可以得到指定index的table
$("table:eq(0) tr:odd").css("background", "yellow");
$("table:eq(0) tr:even").css("background", "blue");
$("table:eq(1) tr:odd").css("background", "red");
$("table:eq(1) tr:even").css("background", "pink");
});
script>
head>
<body>
<h1>第一个表格h1>
<table>
<tr>
<td>1td>
<td>1td>
tr>
<tr>
<td>2td>
<td>2td>
tr>
<tr>
<td>3td>
<td>3td>
tr>
<tr>
<td>4td>
<td>4td>
tr>
<tr>
<td>5td>
<td>5td>
tr>
<tr>
<td>6td>
<td>6td>
tr>
table>
<h1>第二个表格h1>
<table>
<tr>
<td>1td>
<td>1td>
tr>
<tr>
<td>2td>
<td>2td>
tr>