• 【JavaWeb】第五章 jQuery（中篇）

    🍁【JavaWeb】第五章 jQuery（上篇）

    文章目录

    9、内容过滤选择器

    1）：contains(text) 匹配包含给定文本的元素

    //查找所有包含code的div元素
$("div:contains("code")");

    • 1
    • 2

    2）：empty 匹配所有不包含子元素或者文本的空元素

    //空元素即起始标签和结束标签中间没有东西
$("div:empty")

    • 1
    • 2

    3）：parent 匹配含有子元素或者文本的元素

    //即找非空的
$("div:parent")

    • 1
    • 2

    4）：has(selector) 匹配含有选择器所匹配的元素的元素

    <div><p>Hello</p></div>
<div>Hello again!</div>

    • 1
    • 2
    //给所有包含p元素的div元素加上一个text类
$("div:has(p)").addClass("text");

    • 1
    • 2

    结果：

    <div class="text"><p>Hello</p></div>

    • 1

    10、属性过滤选择器

    1）[attribute] 匹配包含给定属性的元素

    //查找所有含有id属性的div元素

$("div[id]");

    • 1
    • 2
    • 3

    2）[attribute=value] 匹配给定的属性是某个特定值的元素

    //查找所有id属性值为sletter的div元素

$("div[id='sletter']");

    • 1
    • 2
    • 3

    3）[attribute!=value] 匹配所有不包含指定的属性，或者属性不等于特定值的元素

    //查找所有name属性不是newsletter或者没有name属性的input元素

$("input[name!='newsletter']").attr("checked",true);

    • 1
    • 2
    • 3

    4）[attribute^=value] 匹配给定的属性是以某些值开始的元素

    //查找所有name以news开始的input元素

$("input[attribute^='news']");

    • 1
    • 2
    • 3

    5）[attribute$=value] 匹配给定的属性是以某些值结尾的元素

    //查找所有name以letter结尾的input元素

$("input[name$='letter']");

    • 1
    • 2
    • 3

    6）[attribute*=value] 匹配给定的属性值是以包含某些值的元素

    //查找所有name包含man的input元素

$("input[name*='man']");

    • 1
    • 2
    • 3

    7）[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同事满足多个条件时使用

    //查找所有含有id属性，并且它的name属性是以man结尾的input元素

$("input[id][name$='man']");

    • 1
    • 2
    • 3

    11、表单过滤器

    1）：input
    匹配所有的input、textarea、select和button元素

    $(":input");

    • 1

    2）：text
    匹配所有的单行文本框，即找

    $(":text");

    • 1

    3）：password
    查找所有的密码框元素

    $(:"password");

    • 1

    4）：radio
    查找所有的单选按钮

    $(":radio");

    • 1

    5）：checkbox
    查找所有的复选框

    $(":checkbox");

    • 1

    6）：submit
    查找所有的提交按钮

    $(":submit");

    • 1

    7）：image
    查找所有的图像

    $(":image"):

    • 1

    8）：reset
    查找所有的重置按钮

    $(":reset");

    • 1

    9）：button
    查找所有的按钮

    $(":button");

    • 1

    10）：file
    查找所有的文件域

    $(":file");

    • 1

    11）：hidden
    匹配所有不可见的元素，或者type为hidden的元素

    //不可见元素，如style="display:none"...

$(":hidden");

    • 1
    • 2
    • 3

    12）：enabled
    匹配所有可用元素。所谓可用不可用，如给input标签加一个disabled=“disabled”，如此本来能输入的框框就变的不能输入了

    //查找所有可用的input元素
$("input:enabled");

    • 1
    • 2

    13）：disabled
    匹配所有不可用元素

    $(":disabled");

    • 1

    14）：checked
    匹配所有选项中的被选中元素（单选框、复选框等，不包括select中的option）

    $(":checked");

    • 1

    15）：selected
    匹配所有选中的option元素

    $("select option:selected");

    • 1

    在这里插入图片描述
    综合练习：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单过滤练习</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //对表单内可用的input文本框赋值
            $("#btn01").click(function(){
                //val()方法可以操作表单项的value属性值
                //传值就是设置，不传就是获取
                $(":text:enabled").val("变变变");
            });
            //对表单内不可用的input文本框赋值
            $("#btn02").click(function(){
                $(":text:disabled").val("变！");
            });
            //获取多选框选中的个数
            $("#btn03").click(function(){
                alert($(":checkbox:checked").length);
            });
            //获取多选框，每个选中的value值
            $("#btn04").click(function(){
                //获取全部选中的复选框标签对象
                var $checkObjs = $(":checkbox:checked");
                //老式遍历
                for(var i=0; i<$checkObjs.length;i++){
                    alert($checkObjs[i].value);
                }
                //each方法是jquery对象提供的用来遍历元素的方法
                //在遍历的function函数中，有一个this对象，这个this就是遍历到的dom对象
                $checkObjs.each(function(){
                    alert(this.value);
                });
            });
            //获取下拉框选中的内容
            $("#btn05").click(function(){
                //获取选中的option对象
                var $options = $("select option:selected");
                //遍历，获取option标签中的文本内容
                $options.each(function(){
                    alert(this.value);
                });
            });
        });
    </script>
</head>
<body>
    <button id="btn01">对表单内可用的input文本框赋值</button><br/>
    <button id="btn02">对表单内不可用的input文本框赋值</button><br/>
    <button id="btn03">获取多选框选中的个数</button><br/>
    <button id="btn04">获取多选框，每个选中的value值</button><br/>
    <button id="btn05">获取下拉框选中的内容</button><br/>
    可用：<input type="text" value="可用的文本框"/><br/>
    不可用：<input type="text" value="不可用的文本框" disabled="disabled"/><br/>
    可用：<input type="text" value="可用的文本框"/><br/>
    <input type="checkbox"/>test1<input type="checkbox" />test2<input type="checkbox"/>test3<br/>
    下拉框测试<select>
        <option>test1</option>
        <option>test2</option>
        <option selected="selected">test3</option>
    </select><br/><br/>
    多选下拉框
    <!--multiple="multiple"是多选下拉框的属性-->
    <select multiple="multiple">
        <option selected="selected">加油</option>
        <option>努力</option>
        <option>奋斗</option>
        <option selected="selected">牛的</option>
    </select>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    each方法是jquery对象提供的用来遍历元素的方法，在遍历的function函数中，有一个this对象，这个this就是遍历到的dom对象。

    运行效果：
    在这里插入图片描述

    12、元素的筛选

    • eq(index)，功能跟 :eq() 一样，即获取给定索引的元素
    //获取匹配到的第二个p元素

$("p").eq(1);

    • 1
    • 2
    • 3
    • first()，功能跟 :first 一样
    //获取匹配的第一个li元素

$("li").first();

    • 1
    • 2
    • 3
    • last()，功能跟 :last 一样
    //获取最后一个li标签

$("li").last()

    • 1
    • 2
    • 3
    • filter(exp) ，留下匹配的元素
    //保留带有selected类的p元素（class筛选）

$("p").filter(".selected");

    • 1
    • 2
    • 3
    • is(exp)，判断是否匹配给定的选择器，只要有一个匹配就返回true
    //判断复选框的父元素是不是form

$("input[type='checkbox']").parent().is("form");

//true

    • 1
    • 2
    • 3
    • 4
    • 5
    • has(exp)，功能跟.has一样，返回包含有匹配选择器的元素的元素
    //测试素材代码
<div>div1</div>
<div>div2</div>
<div>div3 <span>div中的span</span></div>

//查找含有span标签的div标签的长度
$(function(){
	alert( $("div").has("span").length );
}
);
//1

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • not(exp)，删除匹配选择器的元素，功能跟 :not 一样
    //从p元素中删除带有selected的id的元素
<p>Hello</p>
<p id="selected">Hello again</p>
--------
$("p").not($("#selected")[0]);
//这里的[0]是变成dom对象，但测试了一下，加不加都能成功

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • children(exp)，返回匹配给定选择器的子元素，功能跟parent>child一样
    //查找body中的每个class为one的div子元素

$("body").children("div.one");

    • 1
    • 2
    • 3
    • find(exp)，返回给定选择器的后代元素，功能跟”祖先 后代“选择器一样
    //从所有段落开始，搜索下面的class为min的span元素
//复习：
//$("p span");
$("p").find("span.min");

    • 1
    • 2
    • 3
    • 4
    • next()，返回当前元素的下一个兄弟元素，功能跟prev + next一样
    //找到每个段落后面紧邻的同辈div元素

$("p").next("div");

    • 1
    • 2
    • 3
    • nextAll()，返回当前元素后面的所有兄弟元素，功能跟prev~siblings一样
    //给第一个div元素后面的所有兄弟元素加个类
<div></div>
<div></div>

$("div:first").nextAll().addClass("addClass");

    • 1
    • 2
    • 3
    • 4
    • 5

    运行结果：
    在这里插入图片描述

    • nextUntil()，返回当前元素到指定元素为止的元素（开区间）
    <div></div>
<div></div>
<div></div>
<span></span>
<div></div>
------------
$(function(){
	$("div":first).nextUntil("span").addClass("addClass");
}):

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    运行：
    在这里插入图片描述

    • parent()返回父元素
    //查找每个段落元素的父元素

$("p").parent():

    • 1
    • 2
    • 3
    • prev()，返回当前元素的上一个兄弟元素
    //返回每个段落的前一个同辈元素

$("p").prev();

    • 1
    • 2
    • 3
    • prevAll()，返回当前元素前面的所有兄弟元素
    //给最后一个div之前的所有兄弟元素加上class属性

$("div:last").prevAll().addClass("9527");

    • 1
    • 2
    • 3
    • prevUntil()，返回当前元素到指定匹配的元素为止的元素，向上匹配，和nextUntil()方向相反
    //给最后一个span元素，到前面的h2元素之间的元素加class属性

$("span":last).prevUntil("h2").addClass("addClass");

    • 1
    • 2
    • 3
    • siblings(exp)，返回所有兄弟元素
    //返回span元素的所有兄弟元素，即前后都算

$("span").siblings();

    • 1
    • 2
    • 3
    • add()，把add匹配的选择器元素加到当前的jQuery对象中
    //本来只返回div元素，加入add后，返回的元素中多了span，可以用下标取出验证

$("div").add("span");

    • 1
    • 2
    • 3
    //查找所有的span元素和id为two的元素

$("span").add("#two").css("background-color","#bfa");

    • 1
    • 2
    • 3

    13、jQuery属性操作之html()、text()、val()方法

    • html()方法：
      设置和获取起始标签和结束标签之间的内容，跟dom属性innerHTML一样

    • text()方法：
      设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样

    • val()方法：
      设置和获取表单项的value属性值，跟dom属性的value一样

    不传参数是获取，传递参数是设置

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	//获取内容
    	alert( $("div").html() );
    	//设置内容
    	$("div").html("
    div中的标题
    "    );
    	//获取文本
    	alert( $("div").text() );
    	//设置文本
    	$("div").text("
    div中的标题
    "    )
    	//获取表单项value
    	$("button").click(function(){
    		alert( $("#usernameId").val() );
    		$("#usernameId").val("这里是value属性的显示");
    	});
    });
    
    
    
    </script>
</head>
<body>
	<div>divTag <span>div中的span</span></div>
	<input type="text" name="username" id="usernameId" />
	<button>获取表单项内容并重新赋值</button>
</body>
</html>   

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    运行效果：
    在这里插入图片描述

    val方法还能同时设置多个表单项的选中状态：

    <body>
	单选：
	<input name="radio" type="radio" value="radio1"/>radio1
	<input name="radio" type="radio" value="radio2"/>radio2
	<br/>
	多选：
	<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
	<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
	<input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
	<br/>
	下拉多选：
	<select id="multiple" multiple="multiple" size="4">
		<option value="mul1">mul1</option>
		<option value="mul2">mul2</option>
		<option value="mul3">mul3</option>
		<option value="mul4">mul4</option>
	</select>
	<br/>
	下拉单选：
	<select id="single">
		<option value="sin1">sin1</option>
		<option value="sin2">sin3</option>
		<option value="sin3">sin3</option>
	</select>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    <script type="text/javascript" src="../js/jquery.js"></script>
<script>
	$(function(){
		//操作单选框，使得value="radio2"的单选框被选中
		$(":radio").val(["radio2"]);
		//批量操作复选框
		$(":checkbox").val(["checkbox2","checkbox3"]);
		//批量操作下拉框
		$("#multiple").val(["mul2","mul4"]);
		//单选下拉框
		$("#single").val(["sin3"]);
	});
	
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    运行效果：
    在这里插入图片描述

    当然也可一起来操作，不分单选、多选、下拉

    $(":radio,:checkbox,#multiple,#single").val(["radio2","checkbox1","checkbox3","mul2","sin3"]);

    • 1

    14、jQuery属性操作之attr()和prop()

    二者都可以设置和获取属性的值，区别如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script>
	$(function(){
	    //传一个key是获取
        alert($(":checkbox:first").attr("name"));
        //传两个是设置
        $(":checkbox:first").attr("name","9527");
        //使用attr获取未选中状态
        alert( $(":checkbox:last").attr("checked") );  //返回一个undefined
        //使用prop获取未选中状态
        alert( $(":checkbox:last").prop("checked") );  //返回false
        //操作选中状态（由checked属性决定）
        $(":checkbox:last").attr("checked","checked");
        //使用attr获取选中状态
        alert( $(":checkbox:last").attr("checked") );  //返回checked
        //使用prop获取选中状态
        alert( $(":checkbox:last").prop("checked") );  //返回true
	});

</script>

</head>
<body>

<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
<input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
<br/>

</select>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    所以：
    二者都可以设置和获取属性的值，区别如下：

    • attr()方法不推荐操作checked、readOnly、selected、disabled……
    • prop()方法只推荐操作checked、readOnly、selected、disabled，它的出现就是弥补了attr()
    //使用prop操作全部不选中
$(":checkbox").prop("checked",falsse);

    • 1
    • 2

    此外，attr方法还可以操作非标准的属性，比如设置和获取自定义属性abc

    //设置
$(":checkbox:first").attr("abc","abcvalue");

    • 1
    • 2

    小练习–全选、全不选

    //给全选绑定单击事件
//全不选则prop为false

$(function(){
	$("#checkedAllBtn").click(function(){
		$(":checkbox").prop("checked",true);
	});
});

//反选
$(function(){
	$("#checkedNoBtn").click(function(){
		//each函数遍历
		$(":checkbox").each(function(){
			//this代表当前遍历到的dom对象
			this.checked = !this.checked;	
	});
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    //实现：当所有name=items的复选框被选中的时候，全选框被自动选中

//获取全部复选框个数
var allCount = $(":checkbox[name='items']").length
//获取被选中的复选框个数
var checkedCount = $(":checkbox[name='items']:checked").length

if(allCount == checkedCount){
	$("#checkedAllBox").prop("checked",true);
}else{
	$("#checkedAllBox").prop("checked",false);
}
//后面这个if语句整体优化：
$("#checkAllBox").prop("checked",allCount == checkedCount);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    之间旧的实现思路复习：
    在这里插入图片描述

  • 相关阅读:
    【社保—五险一金科普】
    Java之juc旅途-atomic(五)
    【通义千问】大模型Qwen GitHub开源工程学习笔记（4）-- 模型的量化与离线部署
    小红书多账号管理平台哪个好用？可以快速监测多个小红书账号的数据吗？
    （七）Python函数和lambda表达式
    Java解析微信获取手机号信息
    [NOTE] PuTTYgen generate PublicKey and Configure SSH on RedHat7
    Tcache Stashing Unlink Attack 原理详解
    使用Java对书籍照片进行字符分割
    图像处理ASIC设计方法 笔记27 红外非均匀校正的两点定标校正算法
  • 原文地址：https://blog.csdn.net/llg___/article/details/127810591