3.jQueryHTML
jQuery DOM操作：定义访问HTML和XML文档的标准
text():设置或返回所选元素的文本内容
html():设置或返回所选元素的内容（包含HTML标签）
val() 设置或返回表单字段的值
<script> $(document).ready(function() { $("#btn1").click(function(){ alert("Text:"+$("#test").text()); }); $("#btn2").click(function(){ alert("HTML:"+$("#test").html()); }); }); </script>
3.1 元素的增删改查
jQuery append() 增 在被元素的结尾插入内容：/ addclass() 为元素添加class属性
$("p").append(“在元素结尾追加文本”) $("button").click(function(){ //为结果字体变色加租 $("h1,h2,p").addclass("blue"); $("div").addclass("important"); });
jQuery prepend()方法在被选元素的开头插入内容
$("p").prepend(“在开头追加文本”);
jQuery after()和before()方法是在被选元素之后和之前插入内容
$("img").after(“在后面添加文本”); $("img").before("在前面添加文本·") //添加多个内容 function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }
jQuery remove() 删除被选元素及其子元素 // removeClass 方法 删除指定的class属性
$("#div1").remove(); $("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
jQuery empty() 删除被选元素的子元素
jQuery toggleClass()方法 切换元素的类的属性
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
3.2 css类及方法
设置或者返回被选元素的一个或者多个样式属性
例子：设置css属性 $("p").css("background-color"); 例子：设置多个css属性 $("p").css({"background-color","yeelow","font-size","200%"})
4.jQuery遍历
4.1 遍历 / 父辈
向上遍历DOM树：parent(),parents(),parentsUntil() 用于向上遍历
parent() 返回被选元素的直接父元素
parents() 返回被选元素的直接父元素
parentsUntil() 返回介于两个给定元素之间的所有祖先元素
举例： <script> $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <style> .ancestors * { display: block; border:2px solid lightgrey; color:lightgray; padding:5px; margin:15px; } </style>
效果图：
4.2 后代同胞过滤
后代：
向下遍历DOM树：children() ,find()方法
children()方法 返回被选元素的所有直接子元素
find()方法：返回被选元素的后的元素，一路向下直到最后一个后代
$(doucment).ready(function(){ $("div").children(); }); $(document).ready(function(){ $("div").find(); })
同胞：
在DOM树中水平遍历
siblings() 返回所有同胞元素
next() 返回下一个同胞元素
nextAll() 返回所有跟随的同胞元素
nextUntil() 返回两个参数之间所有的同胞元素
prev(),prevAll(),prevUntil方法 方向与上面相反
过滤：
缩小搜索元素的范围：first(),last(),eq()
first() 返回被选元素的首个元素
last() 返回被选元素的最后一个元素
eq() 返回带有指定索引号的元素 索引从0开始，
5.jQueryAjax
5.1 load() 、get()、post()方法
load()从服务器中加载数据，并把返回的数据放入被选元素中
get() 从指定的资源请求数据
post() 向指定的资源提交要处理的数据
get()和post()方法的区别在于：get()方法可能返回缓存数据，post()不会缓存数据，并且常用于连连同请求一起发送数据
