jQuery学习之HTML 捕获

一、捕获

注意text（）方法要加括号！

$("#btn1").click(function(){
	//点击按钮获取P元素中的内容
	alert("text:"+$("#text").text());
	});
$("#btn1").click(function(){
	//点击按钮获取HTML的内容
	alert("text:"+$("#text").html());
	});

.text()和.html()方法的区别就是HTML标签能否被获取
jQuery学习之HTML 捕获
.text()只能获取内容不能获取标签

2. 获取输入框的内容：

<!--HTML-->
<p id="text">哈哈哈哈<a>这是一个a标签</a></p>
<p><input type="text" id="it" value="即可许愿"/></p>
<button id="btn1">Click Me </button>
//js
$("#btn1").click(function(){
	//点击按钮获取P元素中的内容
	alert("text:"+$("#it").val());
	
	});

3.获取属性值


<p><a id="aid" href="http://www.baidu.com">极客学院</a></p>

$("#btn1").click(function(){
	//点击按钮获取a标签中的href属性的值
	alert("text:"+$("#aid").attr("href"));
	
	});

二、设置HTML
1、点击按钮修改内容


<p id="p1">hello world</p>
<button id="btn2">点击修改内容</button>

$("#btn2").click(function(){
	$("#p1").text("极客学院");
	});

2、点击修改HTML样式


<p id="p2">hello world</p>
<button id="btn3">点击</button>

$("#btn3").click(function(){
	$("#p2").html("<a>极客学院</a>");
	});

3、修改一个属性

<a id="a1" href="http://www.baidu.com">最初是百度接下来是极客学院</a>
<button id="btn5">点击修改属性</button>

$("#btn5").click(function(){
	$("#a1").attr("href","http://www.jikexueyuan.com");
	});

4、修改多个属性

<a title="ninini" id="a1" href="http://www.baidu.com">最初是百度接下来是极客学院</a>

arrt（）方法以数组的形式修改
“属性名1”：“要修改的值”，
“属性名2”：“要修改的值”，

$("#btn5").click(function(){
	$("#a1").attr({
		"href":"http://www.jikexueyuan.com",
		"title":"Hello",
		});
	});

以上都有回调属性

<p id="p5">Hello World</p>
<button id="btn6">按钮</button>

$("#btn6").click(function(){
	//i:当前元素的下标 ot：当前要修改的内容即原始内容
	$("#p5").text(function(i,ot){
		return "old:"+ot+"New:这是新的内容"+i;
		});
	});

三、添加元素
添加元素的方法
1、append：在被选中元素的结尾来插入内容
2、prepend:在被选中元素的开头来插入内容
3、before:在被选中元素之前
4、after：在被选中元素之后来插入内容
区别：使用before和after会换行
添加元素的方式：
1、HTML
2、jQuery
3、JS即DOM

<p >Hello World</p>
<button  onClick="appendText()">按钮</button>
<p id="p6">Hello World</p>
<button  id="btn7">按钮</button>

function appendText(){
	
	var text1="<p>ime</p>";
	var text2 = $("<p></p>").text("ime");
	var text3 =document.createElement("p");
	text3.innerHTML="acely";
	$("body").append(text1,text2,text3);
	
	};	
$(document).ready(function() {	
$("#btn7").click(function(){
	//$("#p6").append("this IS my bebpage");
	//$("#p6").prepend("this IS my bebpage");
	$("#p6").before("this IS my bebpage");
	});
	
});

四、删除元素
常用的两种删除的方法remove和empty
区别： remove直接移除标签
empty清空内容，保留标签

$("#btn").click(function(){
		//$("p").empty();
		$("p").remove();
		});

jQuery学习之HTML 捕获

相关推荐