JQuery第三章选择器方法

最新推荐文章于 2021-02-20 08:45:12 发布

LW0512

最新推荐文章于 2021-02-20 08:45:12 发布

阅读量119

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/LW0512/article/details/108918898

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器方法

方法

	find()  	匹配当前元素的后代	==	$('div p')后代选择器
	children()	匹配当前元素的子元素	==	$('div>p')子选择器
	next()		匹配当前元素的下一个同级元素==	$('div+p')下一个同级选择器
	nextAll()	匹配当前元素的下的所有同级元素	==	$('div~p')
	prev()		匹配当前元素的前一个同级元素==  
	prevAll()	匹配当前元素的前的同级元素== 
	siblings()	匹配当前元素的所有同级元素
	first()		选中第一个元素   == $('li:first')
	last()		选中最后一个元素
	not()		不想选中某个元素==$('li:not(.a)')
	eq(数字)		选择当前的元素	
	index() 	返回当前元素下标
	html()		返回当前元素文本内容/修改当前元素文本内容(可以添加标签)
	text()		返回当前元素文本内容/修改当前元素文本内容(不可以添加标签)
	filter() 	筛选出和属性匹配的元素
	attr()		获取属性值/设置属性
	val() 		获取input框里面的值的方法
	var u=$('<ul></ul>')//创建一个标签
	append()  	插入节点的方法
	parent()	查找父节点
	parents()	查找祖父节点（父节点以上的所有父节点）

选择器方法

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>
				000000000000000
				<p>吞吞吐吐拖拖拖</p>
			</li>
			<li>111111111111111</li>
			<li class="oli" id="list">222222222222222</li>
			<li>333333333333333</li>
			<li>444444444444444</li>
			<li class="oli">555555555555555</li>
			<li>666666666666666</li>
		</ul>
	</body>
	<script type="text/javascript">
		$(function(){
//			$('ul').find('li').css('color','red')
//			$('ul').find('li').eq(2).css('color','red')
//			$('ul').find('p').css('color','blue')
//			$('ul').children('li').css('color','yellow')
//			$('li').eq(3).next().css('font-size','100px')
			$('li').eq(0).nextAll().css('background','red')
//			$('li').eq(3).prev().css('font-size','100px')
//			$('li').eq(3).prevAll().css('font-size','100px')
//			$('li').eq(3).siblings().css('font-size','100px')
//			$('li').first().css('border','1px solid red')
//			$('li').last().css('border','1px solid red')
//			alert($('li').last().index())
//			console.log($('li').last().html())
//			$('li').eq(2).html('吞吞吐吐拖拖拖拖拖拖拖')
//			$('li').eq(2).html(8888888888888)
//			$('li').eq(2).html('<h1>一月又一月晕晕晕晕晕晕</h1>')
//			alert($('li').eq(2).text())
//			$('li').eq(2).text('<h1>一月又一月晕晕晕晕晕晕</h1>')
//			$('li').filter('.oli').css('font-size','100px')
//			$('li').eq(1).attr('class','red')
//			$('li').eq(2).attr('class','red')
//			console.log($('li').eq(2).attr('class'))//red
//			console.log($('li').eq(2).attr('id'))//list
		})
	</script>
</html>

插入节点

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul class="oul">
			
		</ul>
		<input type="text" name="" id="" value="" />
		<button>点击</button>
	</body>
	<script type="text/javascript">
//		var oli=$('<li>00000000000000</li>');
//		$('ul').append(oli);
//		console.log($('li').parent().attr('class'))//[object Object]
//		$('button').click(function(){
//			alert($('input').val())
//		})
	</script>
</html>

插入节点方法

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div></div>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//		var op=$('<p></p>');//创建标签
//		op.text('哈哈哈');//给创建的标签添加内容
//		$('div').append(op)//创建好的p标签插入到div里面
//		----------------------------------------------------

//		var op=$('<h1>标题</h1>>');
//		$('div').parent().append(op)
		alert($('div').parents().length)//2
	</script>
</html>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery第三章选择器方法

选择器方法方法 find() 匹配当前元素的后代 == $('div p')后代选择器 children() 匹配当前元素的子元素 == $('div>p')子选择器 next() 匹配当前元素的下一个同级元素== $('div+p')下一个同级选择器 nextAll() 匹配当前元素的下的所有同级元素 == $('div~p') prev() 匹配当前元素的前一个同级元素== prevAll() 匹配当前元素的前的同级元素== siblings() 匹配当前元素的所有同
复制链接

扫一扫

专栏目录