jquery 修改元素内容和样式

attr(“属性名”,”属性值”) 获取或修改元素的属性值

注意,当值为true或false时不需要加引号

[cce_js]
<h3>attr()方法设置元素属性</h3>
        <a href="http://127.0.0.1" 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>
[/cce_js]

html()和text() 获取或修改元素内容

区别:html()会将内容中html语句做为html输出,text()会将内容中的html语句做为文本输出

[cce_js]
 <h3>html()和text()方法设置元素内容</h3>
        <div id="html"></div>
        <div id="text"></div>
        
        <script type="text/javascript">
            var $content = "<b>唉,我又变胖了!</b>";
            $("#html").html($content);//唉,我又变胖了!
            $("#text").text($content);//<b>唉,我又变胖了!</b>
        </script>
[/cce_js]

addClass() 和 css() 修改元素样式。

addClass(样式表class名称)

css(“属性”,”值”):设置单个样式

css({“属性1″:”值1″,”属性2″:”值2”});设置多个样式

[cce_js]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style>
    .aa {
        color:red;
    }
    </style>
</head>
<body>
<p>我爱祖国</p>
<span>我爱祖国</span>
    <script>
    $("p").addClass("aa");
    $("span").css("color","green");
    </script>
</body>
</html>
[/cce_js]

removeAttr(name)和removeClass(class) 移除属性和样式

[cce_js]
<h3>removeClass()方法移除元素样式</h3>
        <div id="content" class="blue white">我脱下了一件蓝色外衣</div>
        
        <script type="text/javascript">
            $("#content").removeClass("blue white");
        </script>
[/cce_js]

append(content) 追加元素内容

content可以是HTML语句也可以是返回HTML语句的函数。

[cce_js]
<h3>append()方法追加内容</h3>
        
        <script type="text/javascript">
            function rethtml() {
                var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
                return $html;
            }
            $("body").append(rethtml());
        </script>
[/cce_js]

appendTo() 向被选中的元素内插入内容

$(content).appendTo(selector)

content是需要插入的内容,selector是选中的元素,默认是尾部

[cce_js]
 <h3>appendTo()方法插入内容</h3>
        <div>
            <span class="green">小乌龟</span>
        </div>
        
        <script type="text/javascript">
            var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>
[/cce_js]

before()和after() 在元素前后插入内容

$(selector).before(content) 在元素前插入

$(selector).after(content) 在元素后插入

其中content是需要插入的内容,selector是选中的元素

[cce_js]
 <h3>after()方法在元素之后插入内容</h3>
        <span class="green">我们交个朋友吧!</span>
        
        <script type="text/javascript">
            var $html = "<span class='red'>兄弟。</span>"
            $("span").after($html);
        </script>
[/cce_js]

clone()复制一个元素

$(selector).clone()

selector可以是一个元素或HTML内容

[cce_js]
 <h3>使用clone()方法复制元素</h3>
        <span class="red" title="hi">我是美猴王</span>
        
        <script type="text/javascript">
            $("body").append($(".red").clone());
        </script>
[/cce_js]

replaceWith()和replaceAll() 替换元素内容

$(selector).replaceWith(content)

$(content).replaceAll(selector)

content 是替换内容,selector是被替换的元素

[cce_js]
 <h3>使用replaceAll()方法替换元素内容</h3>
        <span class="green" title="hi">我是屌丝</span>
        
        <script type="text/javascript">
            var $html = "<span class='red' title='hi'>我是土豪</span>";
            $($html).replaceAll("span");
        </script>
[/cce_js]

wrap()和wrapInner()包裹元素和包裹元素内容

$(selector).wrap(wrapper)//包裹元素

$(selector).wrapInner(wrapper)//包裹元素内容

[cce]
<h3>使用wrapInner()方法包裹元素</h3>
        <span class="red" title='hi'>我的身体有点歪</span>
        
        <script type="text/javascript">
            $(".red").wrapInner("<i></i>");
        </script>
[/cce]

each()遍历元素

$(selector).each(function(index))

function 是回调函数,index是遍历元素的序号,从0开始

[cce_js]
 <h3>使用each()方法遍历元素</h3>
        <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");//$(this)调用自身。
                }
            });
        </script>
[/cce_js]

remove()和empty() 删除元素

remove(“条件”)删除元素本身和子元素

empty(“条件”)删除元素子元素

[cce_js]
   <h3>使用empty()方法删除元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>
        
        <script type="text/javascript">
            $("span").empty();
        </script>
[/cce_js]

发表评论

邮箱地址不会被公开。