jquery快速入门(二)选择器和过滤器

最新推荐文章于 2022-11-03 19:13:49 发布

kyyius

最新推荐文章于 2022-11-03 19:13:49 发布

阅读量111

点赞数

文章标签： jquery js javascript html

本文链接：https://blog.csdn.net/kyyius/article/details/109781338

版权

选择器

参考css规则
id选择器：语法 $(’#dom对象id值’)
class选择器：语法 $(’.class样式名’)
标签选择器：语法 $(‘标签名字’)
全选： $(’*’)
组合： $(’#id, .class, 标签’)
表单选择器： $(’:type属性值’) 例如 $(’:text’)选取所有的单行文本框；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin-bottom: 5px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="one">one</div>
		<div class="two">two</div>
		<div></div>
		<br/>
		<span>span</span>
		<br/>
		<input type="button" value="获取id是one的" />
		<input type="button" value="获取class是two的" />
		<input type="button" value="获取div标签1" id="btn3"/>
		<input type="button" value="获取div标签2" id="btn4"/>
		<input type="text" value="type=text1" >
		<input type="text" value="type=text2" >
		<input type="radio" value="男">man
		<input type="radio" value="女">woman
		<input type="checkbox" value="1">1
		<input type="checkbox" value="2" checked>2
		<input type="checkbox" value="3">3
		<script type="text/javascript">
			$(function(){
				// jq的操作都是操作数组中的所有成员
				// 最好接收jq对象的变量以$开头,方便阅读理解
				let $obj = $('input')
				// dom的方法绑定事件
				$obj[0].onclick = function (){
					let $o = $('#one')
					// 用jq的css方法改变样式
					$o.css('background','red')
				}
				$obj[1].addEventListener('click',function (){
					let $o = $('.two')
					// 设置多个样式
					$o.css({'background':'yellow','font-size':'1px'})
				})
				// jq的方式绑定事件
				$('#btn3').click(function(){
					let $o = $('div')
					$o.css('background','blue')
				})
				$('#btn4').on('click',function(){
					let $o = $('div')
					$o.css('background','purple')
				})
			})
		</script>
		<script type="text/javascript">
			// 按下f12,console中查看
			// 获取type为text的元素
			let o = $(':text')
			// type为text的有两个,这里为什么只输出了一个呢,后面的函数将会解答
			console.log(o.val())
			// 获取type为radio的元素
			let $radio = $(':radio')
			console.log($radio)
			//遍历jq对象中的每一项键值对中的值{k:v} i相当于里面的v
			for (let i of $radio){ 
			    //因为jq对象中的内容是dom对象，使用jq方法需要转换成jq对象
				console.log($(i).val())
			}
			// 获取type为checkbox并且被勾选的元素
			let $check = $(':checkbox:checked')
			console.log($check.val())
		</script>
	</body>
</html>

过滤器

在得dom后，根据一些条件筛选dom
不能单独使用，必须和选择器一起使用
$(‘选择器:first’) 第一个dome对象
$(‘选择器:last’) 最后一个dom对象
$(‘选择器:eq(下标)’)获取指定下标dom
$(‘选择器:lt(下标)’) 获取小于下标的所有dom
$(‘选择器:gt(下标)’) 获取大于下标的所有dom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #ccc;
				height: 30px;
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<div>0</div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<input type="button" value="1">
		<input type="button" value="2">
		<input type="button" value="3">
		<input type="button" value="4">
		<script type="text/javascript">
			$(function(){
				let $btn = $(':button')
				$($btn[0]).click(function(){
					let $obj = $('div:first')
					// 将第一个div变成红色
					$obj.css('background','red')
				})
				$($btn[1]).click(function(){
					let $obj = $('div:last')
					//将最后一个div变成绿色
					$obj.css('background','green')
				})
				$($btn[2]).click(function(){
					let $obj = $('div:eq(3)')
					//将下标为3（从0开始数，即第四个）的div变成蓝色
					$obj.css('background','blue')
				})
				$($btn[3]).click(function(){
					let $obj = $('div:lt(3)')
					//将下标小于3（0，1，2）变成橘色
					$obj.css('background','orange')
				})
			})
		</script>
	</body>
</html>

表单对象属性过滤器

选择可用的文本框
$(’:text:enabled’)

选择不可用的文本框
$(’:text:disabled’)

复选框选中的元素
$(’:checkbox:checked’)

选择下拉列表的被选中元素
select>option:selected $(‘select>option:selected’)
选择器>otpion:selected 例如 $(’#id>option:selected’)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<input type="text" value="text1" id="txt1">
		<input type="text" value="text2" id="txt2" disabled>
		<input type="text" value="text3" id="txt3">
		<input type="text" value="text4" id="txt4" disabled>
		
		<input type="checkbox" value="c1">1
		<input type="checkbox" value="c2">2
		<input type="checkbox" value="c3">3
		
		<select name="" id="lang">
			<option value="java">java</option>
			<option value="go" selected>go</option>
			<option value="python">python</option>
		</select>
		<input type="button" value="将可用文本框value变成hello" id="btn1">
		<input type="button" value="输出勾选项的value" id="btn2">
		<input type="button" value="输出选中项" id="btn3">
		<script type="text/javascript">
			$(function(){
				$('#btn1').click(function(){
					let $obj = $(':text:enabled')
					// 设置可用文本框的值
					$obj.val('hello')
				})
				$('#btn2').click(function(){
					let $obj = $(':checkbox:checked')
					console.log($obj)
					for(let i of $obj){
						console.log($(i).val())
					}
				})
				$('#btn3').click(function(){
					// let $obj = $('select>option:selected')
					// <select name="" id="lang">
					let $obj = $('#lang>option:selected')
					console.log($obj.val())
				})
				
			})
		</script>
	</body>
</html>

链接: jquery快速入门(三)常用函数.

kyyius

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery快速入门(二)选择器和过滤器

选择器参考css规则id选择器：语法 $(’#dom对象id值’)class选择器：语法 $(’.class样式名’)标签选择器：语法 $(‘标签名字’)全选： $(’*’)组合： $(’#id, .class, 标签’)表单选择器： $(’:type属性值’) 例如 $(’:text’)选取所有的单行文本框；<!DOCTYPE html><html> <head> <meta charset="utf-8"> <tit
复制链接

扫一扫