jQuery操作dom

一、改变背景透明度
opacity：
透明度设置，值域（0-1之间），越小，透明度越高。

HTML代码：

<div id="div"></div>

css代码：

<style type="text/css">
			#div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>

js代码：

<script>
			$(function(){
				$("#div").css("opacity","0.5");
			});
		</script>

二、列表的鼠标悬停样式
toggleClass()：
如果存在（不存在）就删除（添加）一个类。

HTML代码：

<ul>
			<li>标题1</li>
			<li>标题2</li>
			<li>标题3</li>
			<li>标题4</li>
			<li>标题5</li>
		</ul>

css代码：

<style type="text/css">
			li{
				list-style: none;
				
			}
			
			.show{
				background-color: aqua;
			}
		</style>

js代码：

<script>
			$(function(){
				$("li").hover(
					function(){
						$(this).toggleClass("show");
					}
				);			
			});
		</script>

三、html()和text()的区别及使用
1、html()：
取得第一个匹配元素的html内容。

2、text()：
取得所有匹配元素的内容。

html()代码演示：

html代码：

		<div id="div">
			<p>Hello World！</p>
		</div>
		<input type="button" value="点我换内容" />

js代码：

		<script>
			$(function(){
				$("[type=button]").on("click",function(){
					$("#div").html("<p>你好世界！</p>");//更改div中的内容(内容为除去html元素的文本)
				});
		</script>

text()代码演示：
html代码：

		<div id="div">
			<p>Hello World！</p>
		</div>
		<input type="button" value="点我换内容" />

js代码：

		<script>
			$(function(){
				$("[type=button]").on("click",function(){
					$("#div").text("<p>你好世界！</p>");//更改div中的内容(内容为text()中的所有文本)
				});
		</script>

四、获取输入框的内容（.val()）
val()：
获得匹配元素的当前值。

html代码：

<input type="text" id="name" value="西瓜" />

js代码：

		<script>
			$(function(){
				alert($("#name").val());
			});
		</script>

五、文档处理
append()： 向每个匹配的元素内部追加内容（追加内容的位置是在末尾）。
appendTo()： 把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend()： 向每个匹配的元素内部前置内容。（追加内容的位置是在首行）
prependTo()： 把所有匹配的元素前置到另一个、指定的元素元素集合中。
after()： 在每个匹配的元素之后插入内容。
insertAfter()： 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
before()： 在每个匹配的元素之前插入内容。
insertBefore()： 把所有匹配的元素插入到另一个、指定的元素或元素集合的前面。
remove()： 从DOM中删除所有匹配的元素。(不会把匹配的元素从jQuery对象中删除；其他的比如绑定的事件，附加的数据等都会被移除。)
detach()： 从DOM中删除所有匹配的元素。(不会把匹配的元素从jQuery对象中删除；与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。)
empty()： 删除匹配的元素集合中所有的子节点。
replaceWith()： 将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll()： 用匹配的元素替换掉所有 selector匹配到的元素。（selector用于查找所要被替换的元素）
clone()： 克隆匹配的DOM元素并且选中这些克隆的副本。（可以添加true或者false来指示事件处理函数是否会被复制。）
attr()： 设置或返回被选元素的属性值。
removeAttr()： 从每一个匹配的元素中删除一个属性