JQuery选择器

bug敲得飞起

已于 2022-04-27 11:44:31 修改

阅读量278

点赞数

分类专栏： web # 工具文章标签： jquery

于 2020-12-18 17:59:34 首次发布

本文链接：https://blog.csdn.net/Ling_fung/article/details/111380145

版权

工具同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web

3 篇文章 0 订阅

订阅专栏

JQuery选择器语法

什么是选择器语法:

1、就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名定位
2、jquery中只有三种选择器

一、基本选择器:

<body>
		<script src="js/jquery-3.4.1.js"></script>
		<h2>今天星期二</h2><br><br><br>
		第一个文本框:<input type="text" class="mytxt" id="one" value="这是第一个文本框" /><br><br>
		第二个文本框:<input type="text" class="mytxt" id="one1" value="这是第二个文本框" /><br><br>
		<input type="button" value="one点" onclick="fun1()"/>
		<input type="button" value="two点" onclick="fun2()"/>
	</body>

1、【定位条件】:可以根据ID编号，根据标签类型名，根据标签采用样式选择器
2、【使用】:

id选择器：

$(“#id编号”):代替document.getElementByID(“”)
根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中
并返回。返回这个数据就是【jquery对象】

<script type="text/javascript">
	function fun1(){
		//使用javaScript完成功能
		// var one = document.getElementById(one)
		// alert(one.value)
		//使用jQuery完成相同的功能
		alert($("#one").val())
	}
</script>

类选择器

$(“.样式选择器名称”):代替 document.getElmentByClassName(“样式选择器名”)
将使用了指定的样式选择器的dom对象保存到同一个数组中，并返回。返回
这个数组就是【jquery对象】

	function fun2(){
		//使用JavaScript完成功能
		// var txts = vadocument.getElementsByClassName("text");
		// alert(txts[1].val());
		alert($(".mytxt").val());
	}

标签选择器：

$(“标签类型名”):代替document.getElmentByTagName()
将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回，返回这个
数组就是【jquery对象】

function fun3(){
				var inputs = $("input");
				for (var i = 0; i < inputs.length; i++) {
				//此处jQuery对象的inputs在添加了索引后变为dom对象，所以可以使用innerHTML
					alert(inputs[i].innerHTML)
				}
			}

全选选择器

$(“*”):定位浏览器中所有的DOM对象保存到同一个数组中并返回。
返回的这个数组就是【jquery对象】

function fun4(){
			//选中所有元素
			$("*").css("background","blue");
		}

组合选择器

$(“条件1,条件2”):只要DOM对象满足其中的一种条件，就会被定位到数组中
相当于mysql or where sal >=3000 or job = ‘manger’

function fun5(){
			//组合选择
			$("#one,.two").css("background","pink");
		}

二、层级选择器:

【定位条件】:可以根据标签之间父子/（兄弟）关系定位
【标签之间的关系】:

					<!--
					input是body的直接子标签
					div是body的间接子标签
					input和script是兄弟关系（没有包含关系，有着共同的父标签）
					-->
						<body>
							<form>
								<input type="butten"></input>
								<input type="butten"></input>
								<script type="text/javascript">
									<div></div>
							</script>
							</form>		
							<input type="butten"></input>	
							<input type="butten"></input>
						</body>
			//var v=$("form>input");// 仅仅是本form元素下的不在其他容器包裹中的的input子元素才可以，
            //如果input元素又被放到本from下另一个div的容器中，则不被选择
			//var v=$("form+input");//只取form元素一个同辈份的紧挨着的input元素,一定是同级元素
			//var v=$("form~input");//只取form元素所有同辈份的兄弟input元素,一定是同级元素,挨不挨着无所谓

三、表单属性选择器

		文本框:<input id="txt" type="text" value="我是type=text"><br/>
		性别：<br />
		<input type="radio" name="sex" value="man" >男<br>
		<input type="radio" name="sex" value="woman" >女<br>
		爱好：<br />
		<input type="checkbox" name="hobby"  value="bike">骑行<br />
		<input type="checkbox" name="hobby" value="football">足球<br />
		<input type="checkbox" name="hobby" value="music">音乐<br>
		<br><p>功能按钮</p>
		<input type="button" value="读取text的值" onclick="fun1()"><br />
		<input type="button" value="读取radio的值" onclick="fun2()"><br />
		<input type="button" value="读取checkbox的值" onclick="fun3()"><br />

【定位条件】:可以根据表单的type属性进行定位
表单元素与非表单元素的区别:
表单元素用来与客户进行数据交互的,是提交到服务器的元素.
非表单元素就是用来呈现数据的.

只有input元素的type属性值可以做为表单属性选择器
不可以做为表单属性选择器: (下拉列表框) (多行文框)

选择方式如下：

function fun1(){
			//读取text的值
			alert($(":text").val())
		}
		function fun2(){
			//读取radio的值，":checked"表示只有勾选的才可以被选中
			var radios = $(":radio:checked");
			for (var i = 0; i < radios.length; i++) {
				alert(radios[i].value);
			}
		}
		function fun3(){
			//读取checkbox的值
			var checkboxs = $(":checkbox:checked");
			for (var i = 0; i < checkboxs.length; i++) {
				alert(checkboxs[i].value);
			}
		}

bug敲得飞起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery选择器

JQuery选择器语法一、什么是选择器语法:1、就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名2、jquery中只有三种选择器二、基本选择器:1、【定位条件】:可以根据ID编号，根据标签类型名，根据标签采用样式选择器2、【使用】: 1）$("#id编号"):代替document.getElementByID("") 根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中并返回。返回这个数据就是【jquery对象】 2）$(".样式选择器名称"):
复制链接

扫一扫