Jquery第二步

Jquery学习第二步，对Html元素的一些操作，并作如下的学习笔记

Jquery的html捕获与操作

1.html的捕获

$(document).ready(function(){

	$("#btn1").click(function(){
		$("#text").text();//获取标签里面的内容
	})
	$("#btn1").click(function(){
		$("#text").html();//获取标签里面的内容包含html标签
	})
	$("#btn1").click(function(){
		$("#text").val();//获取表单输入框里面的值
	})
	$("#btn1").click(function(){
		$("#aid").attr("href");//获取a标签的href属性的值
	})
});

2.html标签内的值设置

$(document).ready(function(){

	$("#btn1").click(function(){
		$("#p1").text("wyy");//把p1的内容修改为wyy
	});

	$("#btn1").click(function(){
		$("#p1").html("<a href='www.baidu.com'>wyy</a>");//设置成a标签的格式
	});

	$("#btn1").click(function(){
		$("#inputText").val("wyy");//设置输入框的内容
	});

	$("#btn1").click(function(){
		$("#aid").attr({
			"href":"www.baidu.com",
			"title":"hello"
		});//设置更换标签内部属性的值
	});

	//回掉方法，循环让原来的标签元素内容叠加上新的内容
	$("#btn1").click(function(){
		$("#p5").text(function(i,ot){//i是索引默认是0，ot是老的内容
			return "old:"+ot+" new:新内容"+(i);
		});
	});
});

3.元素追加内容
/**
*append
*preappend
*after
*before
**/

$(document).ready(function(){

	$("#btn1").click(function(){
		$("#p1").append("this is my append text");//p元素内的后面追加内容
		$("#p1").prepend("this is my append text");//p元素内的前面追加内容
	})

	
	$("#btn1").click(function(){
		$("#p2").before("this is my append text");//与append和prepend的区别就是会先换行
		$("#p2").after("this is my append text");//
	})
});
//元素追加
function appendText(){
	var text1 = "<p>html</p>"；
	var text2 = $("<p></P>").text("jquery");
	var text3 = document.createElement("p");
	text3.innerHtml = "acely";
	$("body").append(text1,text2,text3);
}

4.元素清空与删除
remove empty

$(document).ready(function(){

	$("#btn1").click(function(){
		$("#div").remove();//整个div全部删除
		$("#div").empty();//清空里面的子元素
	})
});