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());//获取输入框中valueconsole.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();});