一、attr()
attr()方法设置或返回元素的属性。
attr(属性名):获取元素属性名的值。
attr(属性名,属性值):设置元素属性名的值。
例子:
<a href=”http://127.0.01” id =”a1”>点我就变</a> <div>我改变后的地址是:<span id=”tip”></span></div> <script type=”text/javascript”> $("#a1").attr(“href”,”www.imooc.com”); var $url = $(“a1”).attr(“href”); $("#tip").html($url); </script>
二、html()、text()
html():获取元素的html内容，原文的格式代码也被抓取
text():获取元素的html内容，原文的格式代码没有抓取。
如果方法中包含参数，则表示将参数值设置为元素内容。
例子:
<div id=”html”></div> <div id=”text”></div> <script type=”text/javascript”> var $content=”<b>你好</b>”; $(“#html”).html($content); $(“#text”).text($content); </script>
三、addClass()、css()
addClass():操作元素中的样式，参数为增加元素的样式名称。
css():直接将样式的属性内容写在括号中。
例子:
<div id=”content” class="content">我穿了一件红衣</div> <style type="text/css"> .content { background-color:red; color:white; } </style> <script type="text/javascript> $(".content").addClass("content"); $("#content").css({“background-color”:”red”,”color”:”white”}); </script>
四、removeAttr()、removeClass()
removeAttr(name):实现移除元素的属性名。
removeClass(class):实现移除元素的样式名。
例子:
<div id=”content” class=”blue white”>我脱下了一件蓝衣</div>
<div id=”content” style="color:blue">我脱下了一件蓝衣</div>
<script type="text/javascript">
$(“#content”).removeAttr(“style”);
$(“#content”).removeClass(“blue”,”white”);
</script>
四、append()、appendTo()
append(content):向指定的元素中国追加内容,content参数可以是字符、HTML元素标记、或者一个返回字符串内容函数。
appendTo():向指定的元素内插入内容,使用格式:$(content).appendTo(selelctor),content表示需要插入的内容，参数selector表示被选的元素。
例子:
<script type="text/javascript>
function rethtml(){ var $html = “<div id=”test” title=”hi”>我是调用函数创建的</div>” return $html; } $(“body”).append(rethtml()); </script> <div> <span class=”green”>小乌龟</span> </div>
<script type="text/javascript"> var $html = “<span class=”red”>小青蛙</span> $($html).appendTo(“div”);
</script/>
五、before()、after()
before():在元素前面插入内容，格式:$(selector).before(content)。
after():在元素后面插入内容，格式:$(selector).after(content)。
例子:
<span class=”green”>交个朋友吧!</span> <script type="text/javascript"> var $html = “<span class=”red”>兄弟</span>” $(“.green”).before($html); $(“.green”).after($html); </script>
五、clone()
clone():生成一个被选元素的副本，格式:$(selector).clone(),selector可以是一个元素或HTML内容。
例子:
<span class=”green”>交个朋友吧!</span>
<script type="text/javascript">
$(“body”).append($(“.green”).clone());
</script>
六、replaceWith()、replaceAll()
replaceWith():替换元素或元素中的内容,格式:$(selector).replaceWith(content)。
replaceAll():替换元素或元素中的内容,格式:$(content).replaceAll(selector)。
例子:
<span class=’green’ title=’hi’>我是屌丝</span> <script type="text/javascript"> var $html = “<span class=’red’ title=’hi’>我是土豪</span>”; $($html).repalceWith(“.green”); $($html).repalceAll(“.green”); </script>
七、wrap()、wrapInner()
wrap():用于包裹元素本身，格式:$(selector).wrap(wrapper)。
wraplnner():用于包裹元素中的内容，格式：$(selector).wrapInner(wrapper),wrapper参数为包裹元素的格式。
例子:
<span class=”red” title=’hi’>我的身体有点歪</span>
<script type="text/javascript">
$(“.red”).wrap(“<b></b>”);
$(“.red”).wrapInner(“<b></b>”);
</script>
八、each()
each():遍历指定的元素集合，通过回调函数返回遍历元素的序列号，格式：$(selector).each(function(index)),参数function为遍历时的回调函数，index为遍历元素的序列号，从0开始。
例子:
<span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <span class=”green”>香蕉</span> <script type="text/javascript"> $(“span”).each(function(index){ if(index == 1){ $(this).attr(“class”,”red”); } }); </script>
九、remove()、empty()
remove():删除元素本身和子元素，通过添加过滤参数指定需要删除的某些元素。
empty():只删除所选元素的子元素。
例子:
<div id="fruit">
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
</div>
<script type="text/javascript">
$(“span”).remove(“#fruit”);
$(“span”).empty(“.green”);
</script>
