JQuery入门到实践（二）

JQuery HTML操作

• JQuery常用选择器

$(#id) //id选择器
$(tagname)  //标签选择器
$(.classname)  //class选择器

• JQuery常用事件方法

$("button").click(function(){效果代码片})  //单击
$("button").dbclick(function(){效果代码片}) //双击
$("button").mouseenter(function(){效果代码片}) //鼠标移至
$("button").mouseleave(function(){效果代码片}) //鼠标离开
$("button").on(“click”,效果函数名) //绑定事件
$("button").off(“click”) //解除所有绑定事件
$("button").off(“click”,效果函数名) //解除某个绑定事件
event.stopPropagation();  //阻止事件父级冒泡
event.stopImmediatePropagation(); //阻止事件所有冒泡

• JQuery对HTML DOM元素操作

$(document).ready(function(){
	$("button").click(function(){
	//捕获DOM内容
		console.log($("#text").text()); //获取文本内容
		console.log($("#text").html());//获取html内容
		console.log($("#ipt").val());//获取输入框中value
		console.log($("a").attr("href"));//获取a标签的href属性值
	
	//设置DOM内容	
	$("p").text("设置的新内容");  //设置p标签中文本内容
	$("div").html("<a href='www.baidu.com'></a>");   //div中添加a子标签
	$("input").val("输入框新内容")；  //设置输入框中内容
	$("a").attr({
		"href"："wwww.google.com"，
		"id":"new_a"
		);  // 设置a标签的属性值
	});
	
	//添加元素及内容(append,prepend添加不换行，before，after添加会自动换行)
	$("p").append("new content")  //元素后面添加内容
	var text1 = "<a href=‘baidu.com’>链接</a>"
	$("p").append(text1);  
	$("p").prepend("new content")  //元素前面添加内容
	var text2 = $("<a href=‘baidu.com’></a>").text("链接")
	$("p").prepend(text2);
	$("p").before("new content")  //元素后面添加内容
	var text3 = document.createElement("a");
	text3.innerHtml = "链接";
	$("p").before(text3);
	$("p").after("new content")  //元素后面添加内容
	
	//删除元素(remove是全部删除，empty是删除里面的子元素)
	$("p").empty();
	$("p").remove();
	
});