JQuery选择器

2021-10-24 19:00:59 阅读：186 来源： 互联网

标签：JQuery solid 元素 input border 选择器 red

JQuery作用

JQuery选择器可用于快速选定需要的HTML元素，并对其进行后续处理。

JQuery的下载和使用

1、通过JQuery官网进行下载：https://jquery.com
2、JQuery实质是JavaScript文件，和其他js文件一样，使用前用户可以HTML文档首部标签和之间添加JQuery引用声明。
语法如下：

<script src="js/jquery-2.1.0.min.js"></script>

一、基础选择器：

选择器	用法实例	描述
*	$("*")	选择文档中所有元素
element	$(“element”)	选择指定标签名称的元素
#id	$("#id")	选择指定id的元素
.class	$(".class")	选择具有指定class的所有元素
sel1,sel2…	$(“sel1,.sel2”)	选择符合条件的所有元素

*JQuery CSS选择器：可以方便的修改指定HTML元素的CSS属性。如$.(" * ").css(“border”,“5px solid red”)可以为文档中所有元素添加宽度为5像素的红色实线边框。

测试代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq基础选择器</title>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
	<h3>jq选择器实例</h3>
	<div id="div01">这是id选择器</div>
    <div class="div02">这是类选择器</div>
<script>
        $(document).ready(function(){

            //1、全局选择
            //$("*").css("border","5px solid red");

            //2、元素选择
            //$("div").css("border","5px solid red");

            //3、id选择
            //$("#div01").css("border","5px solid red");

            //4、类选择器
            //$(".div02").css("border","1px solid red");

            //5、多重选择器
            //$("h3 ,#div01 ,.div02").css("border","1px solid red");
</body>
</html>

二、层次选择器

选择器	语法结构	作用
子元素选择器	$(“parent>child”)	选取指定父元素的第一层子元素
后代选择器	$(“ancestor descendant”)	选取指定父元素中任意后代元素
后相邻选择器	$(“prev+next”)	选取与指定元素相邻的后一个元素
后兄弟选择器	$(“prev~siblings”)	选取指定元素后所有符合条件的兄弟元素

测试代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq层次选择器</title>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
	<h3>jq选择器实例</h3>
	<div id="div01">
    	<p>
        	这是一个
        	<strong>
            测试
        	</strong>
        	段落。
    	</p>
	</div>
	<div id="div02">div02</div>
	<div id="div03">div03</div>

<script>
    $(document).ready(function(){

        //层次选择器
        //1、子选择器
        //$("#div01>p").css("border","1px solid red");

        //2、后代选择器
        //与子选择器不同，后代选择器可以选择符元素后的任意元素
        //$("#div01 strong").css("border","1px solid red");

        //3、相邻选择器
        //$("#div01+div").css("border","1px solid red");

        //4、后兄弟选择器
        //$("#div01~div").css("border","1px solid red");
    });
</script>
        
</body>
</html>

*表单选择器

用于选择指定类型或处于指定状态的表单元素。

用法实例	描述
$(":input")	选择所有的input元素
$(":text")	选择type="text"的input元素
$(":password")	选择type="password"的input元素
$(":radio")	选择type="radio"的input元素
$(":checkbox")	选择type="checkbox"的input元素
$(“input:submit”)	选择type="submit"的input元素和button元素
$(":reset")	选择type="reset"的input元素
$(":button")	选择type="button"的input元素
$(":image")	选择type="image"的input元素
$(":file")	选择type="file"的input元素

选择指定装态的表单元素：

用法实例	描述
$(":enabled")	所有启用的input元素和button元素
$(":disabled")	所有被禁用的input元素和button元素
$(":selected")	下拉列表中处于选中装态的元素
$(":checked")	所有被选中的单选按钮或复选框

标签：JQuery,solid,元素,input,border,选择器,red
来源： https://blog.csdn.net/m0_50814738/article/details/120934851