jQuery自学（二）——jQuery选择器、元素节点操作

jQuery选择器内容过滤器

可见性过滤器

选择器中含有空格的注意事项

元素内容

对文本内容操作

对HTML内容操作

插入节点

删除节点

对节点进行包裹

jQuery选择器内容过滤器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。

:contains(text)	说明：	匹配包含给定文本的元素
示例：	$("li:contains(word) //匹配含有 "word"文本内容的li元素		:empty	说明：	匹配所有不包含子元素或者文本的空元素	示例：	$("td:empty") //匹配不包含子元素或者文本的单元格		:has(selector)	说明：	匹配含有选择器所匹配元素的元素	示例：	$("td:has(p)") //匹配表格的单元格中含有标记的单元格		:parent	说明：	匹配含有子元素或者文本的元素	示例：	$("td:parent") //匹配不为空的单元格，即在该单元格中还包括子元素或者文本

例子：寻找class为 b的，切内容中存在bbb的元素，然后设置背景颜色为黄色

<style type="text/css">
		.background{
			background-color: yellow;
		}
	</style>
<body>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccccbbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccaabbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccccccccc
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			//寻找class为 b的，切内容中存在bbb的元素，添加类background
			var $jqdiv1 = $(".b:contains('bbb')").addClass('background')
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

可见性过滤器

元素的可见状态有两种，一种是可见状态，另一种是隐藏状态。可见性过滤器就是运用元素的可见状态去匹配的

:visible	说明：匹配所有可见元素
:hidden	说明：匹配所有不可见元素	注意：在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会匹配到

例子：

<body>
	<div class="a">
		cccccccccc
	</div>
	<div class="b" style="display: none;">
		cccccbbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b" style="display: none;">
		cccaabbbcc
	</div>
	<div class="a">
		cccccccccc
	</div>
	<div class="b">
		cccccccccc
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			//寻找class为 b的，切内容中存在bbb的元素，添加类background
			var $jqdiv1 = $(":hidden").addClass('background')
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

选择器中含有空格的注意事项

在实际应用当中，选择器中含有空格也是不容忽视的，多一个空格和少一个空格也会得到截然不同的结果

例子：

<body>
	<div class="name">
		<div class="name" style="display: none;">1</div>
		<div class="name" style="display: none;">2</div>
		<div class="name" style="display: none;">3</div>
		<div class="name" style="display: none;">4</div>
		<div class="name" style="display: none;">5</div>
	</div>
	<div class="name" style="display: none;"></div>
	<div class="name" style="display: none;"></div>
	<script type="text/javascript">
		$(document).ready(function(){
			var $jqdiv1 = $(".name :hidden")
			var $jqdiv2 = $(".name:hidden")
			var len1 = $jqdiv1.length
			var len2 = $jqdiv2.length
			console.log("len1(.name ):"+len1)
			console.log("len2(.name):"+len2)
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

多了一个空格之后，只选择了后代选择器

元素内容

元素的内容是指定义元索的起始标记和结束标记之间的内容，可以分为文本内容和HTML内容

文本内容: div元素的文本内容为"sfafaafj!",文本内容不也含元素的子元素，只包含元素的文本内容

HTML内容:div元素的HTML内容为"<p>ahfiafi!</p>", HTML内容不仅包含元素的文本内容，而且还包含元素的子元素

对文本内容操作

text(): 用于获取全部匹配元素的文本的内容

注意:也可以解析XML 文档元素的文本内容

text(val):用于设置全部比配元素的文本内容
注意:元索原来的内容将被新设置的内容替换掉，包括HTML内容
注意:设置文本内容时，即使内容包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析

例子：

<body>
	<div class="name">
		<p>发生了什么事情</p>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//操作元素的文本内容
			//text()   text(val)
			var $div = $('.name')
			console.log($div.text())
			//设置div中文本内容
			$div.text("什么都没有发生")
			console.log($div.text())
		})		
	</script>
</body>

运行结果：

替换前：

jQuery自学（二）——jQuery选择器、元素节点操作

替换后：

jQuery自学（二）——jQuery选择器、元素节点操作

对HTML内容操作

html():用于获取第一个匹配元素的HTML内容

html(val)：用于设置全部匹配元素的HTML内容

注意：内容中包含HTML代码可以被浏览器解析

注意：html()和html(val)不能用于xml文档，但是可以用于xhtml文档

例子：

<body>
	<div class="name">
		<p>发生了什么事情</p>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//操作元素的文本内容
			//text()   text(val)
			var $div = $('.name')
			console.log($div.html())
			//设置div中文本内容
			$div.text("什么都没有发生")
			console.log($div.text())
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

例子：

<body>
	a<input type="radio" value="1" name="a"/>
	b<input type="radio" value="2" name="a"/>
	c<input type="radio" value="3" name="a"/>
	
	<select name="" multiple="multiple">
		<option value="列表1" selected="selected">列表1</option>
		<option value="列表2" selected="selected">列表2</option>
		<option value="列表3" selected="selected">列表3</option>
	</select>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$('input').val([2])
			$('select').val(['列表1','列表3'])
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

插入节点

append (content)为所有匹配的元素的内部追加内容

appendTo (content )将所有匹配的元素添加到另个元素集合中

prepend (content )

prependTo (content )

例子：添加节点

<body>
	<div class="div1">
	</div>
	<div class="div2">
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//元素节点
			var $jsp = $("<h1>asfaf</h1>")
			console.log($jsp)
			$(".div1").append($jsp)
			var $jsp2 = $("<p title='aaa'>没啊话说覅哈</p>")
			$(".div2").append($jsp2)
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

向元素的前面和后面添加内容的方法

after(content):在每个匹配的元素之后插入
insertafter(content)
before(content)：在每个匹配的元素之前插入
insertbefore(content)

删除节点

remove()：用于从DOM中删除匹配的元素

detach()

empty()

例子：使用remove去删除节点

<body>
	<div class="div1">
		1111
	</div>
	<div class="div2">
		aaaa
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$(".div1").remove()
		})		
	</script>
</body>

运行结果：

jQuery自学（二）——jQuery选择器、元素节点操作

对节点进行包裹

<body>
	<span>11111</span>
	<span>22222</span>
	<span>33333</span>

	<button>包裹节点</button>
	<button>去除节点</button>
	<button>整体包裹</button>
	<button>包裹内部</button>
	<script type="text/javascript">
		$(document).ready(function(){
			//wrap
			$("button:eq(0)").click(function(){
				//把匹配到每一个span标签用p标签包裹起来
				$("span").wrap("<p></p>");
			});
			
			//unwarp
			$("button:eq(1)").click(function(){
				//把匹配到每一个span标签的父节点去除掉
				$("span").unwrap();
			});
			//wrapAll
			$("button:eq(2)").click(function(){
				
				$("span").wrapAll("<p></p>");
			});
			//wrapInner
			$("button:eq(3)").click(function(){
				//
				$("span").wrapInner("<p></p>");
			});
		})		
	</script>
</body>

运行结果：

最开始：

jQuery自学（二）——jQuery选择器、元素节点操作