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();

});