前端jQuery 各种方法

1.样式设置方法：

设置获取样式：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        alert($(xxx").css("background-color")); //获取
        $("xxx").css("background-color","red"); //设置
    });
</script>

追加移除样式addClass() removeClass()：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("xxx").click(function(){
            $("xxx").addClass("aaa bbb"); //追加
        });
        // $("xxx").click(function(){
        //     $("xxx").removeClass("aaa bbb"); //移除
        // });
    });
</script>

追加移除样式的时候，可以添加多个样式，中间用空格隔开

切换样式toggleClass()：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("xxx").click(function(){
            $("xxx").toggleClass("aaa bbb");
        });
    });
</script>

判断样式：hasClass()

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        alert($("xxx").hasClass("aaa"));
    });
</script>

2.内容设置方法：

设置获取html元素：html()

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        alert($("xxx").html());
        $("xxx").html("<b>迪丽热巴</b>");
    });
</script>

设置获取text文本元素：text()

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("xxx").text("<b>迪丽热巴</b>");
    });
</script>

两种区别，一种可以识别html标签，但是text不能识别到html标签

设置/获取元素属性值：val()

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button").click(function(){
            alert($("input").val());
            $("input").val("吴宣仪");
            alert($("input").val());
        });
    });
</script>

3.设置节点方法：

元素内部插入子节点：

append appendTo

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").append("<b>吴宣仪</b>");
            $("<b>吴宣仪</b>").appendTo("p")
        });
        $("button.two").click(function(){
            $("ul").append("<li>吴宣仪</li>");
            $("<li>吴宣仪</li>").appendTo("ul")
        });
    });
</script>

两个都能插入子节点，appendTo的前后和append内容相反，并且appendTo需要添加标签

插入，在标签内部，可以识别html标签，插入列表要识别到ul

等同于append，只是将前后内容对换一下

prepend prependTo

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").prepend("<b>吴宣仪</b>");
            $("<b>吴宣仪</b>").prependTo("p")
        });
        $("button.two").click(function(){
            $("ul").prepend("<li>吴宣仪</li>");
            $("<li>吴宣仪</li>").prependTo("ul")
        });
    });
</script>

四个添加，append，appendTo是末尾添加，perpend，prependTo是首位添加

每组添加相互等价，只是前后内容相互兑换

两组添加都是在元素标签内部

元素外部插入同辈节点：

after() insertAfter()

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").after("<p>吴宣仪</p>");
            $("<b>吴宣仪</b>").insertAfter("p")
        });
        $("button.two").click(function(){
            $("ul").after("<li>吴宣仪</li>");
            $("<li>吴宣仪</li>").insertAfter("ul")
        });
    });
</script>

插入，在外部后面插入

before insertBerfore

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").before("<p>吴宣仪</p>");
            // $("<b>吴宣仪</b>").insertBefore("p")
        });
        $("button.two").click(function(){
            $("ul").before("<li>吴宣仪</li>");
            // $("<li>吴宣仪</li>").insertBefore("ul")
        });
    });
</script>

插入，在前面插入

四个插入分两组，after insertAfter 和before insertBefore 一组后面插入，一组前面插入

两组插入的都是在标签外部

删除节点：

remove empty detach

remove删除全部，标签都没了，empty删除内容，标签还在，detach删除全部，但是还能恢复，还能获取回收的值

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").remove();
        });
        $("button.two").click(function(){
            $("li").empty();
        });
        $("button.three").click(function(){
            var a = $("li").detach();
            $("button.four").click(function(){
                $("ul").append(a);
            });
        });   
    });
</script>

替换节点：replaceWith replaceAll

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").replaceWith("吴宣仪");
        });
        $("button.two").click(function(){
            $("<p>吴宣仪<p>").replaceAll("p");
            // $("p").replaceAll("吴宣仪"); 标签必须设置
        });
    });
</script>

复制节点：clone

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("button.one").click(function(){
            $("p").clone().appendTo("P");
        });
    });
</script>

4.属性设置方法：

<script>
    $(function(){
        $("button.one").click(function(){
            $("div").attr("color","yellow"); //点击使得div标签添加属性
        });
    });
</script>

5.遍历实战

遍历子元素children() 查找直接子元素

遍历子元素next() 查找同级下一个

遍历子元素prev() 查找同级上一个

遍历子元素parent() 查找直接父级元素

遍历子元素parents() 查询父元素，一直到根元素

遍历子元素siblings() 查找同级除自己的元素

遍历子元素each() 遍历每一个该元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>after insertAfter</title>
    <style type="text/css">
        body{
            width: 600px;
        }
        *{
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="a1">吴宣仪
        <div>杨幂
            <p>迪丽热巴</p>
        </div>
        <div>
            <ul>
                <li>吴宣仪2</li>
                <li class="a2">杨幂2<div>杨幂3号</div></li>
                <li>迪丽热巴2</li>
            </ul>
        </div>
    </div>
    <button class="one">children</button>
    <button class="two">next</button>
    <button class="three">prev</button>
    <button class="four">siblings</button>
    <button class="five">parent</button>
    <button class="six">parents</button>
    <button class="seven">each</button>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $(".one").click(function(){
            $(".a1").children().css("border","yellow 1px solid");
        });
        $(".two").click(function(){
            $("li.a2").next().css("background","red");
        });
        $(".three").click(function(){
            $("li.a2").prev().css("background","green");
        });
        $(".four").click(function(){
            $("li.a2").siblings().css("color","blue");
        });
        $(".five").click(function(){
            $("p").parent().css("background","pink");
        });
        $(".six").click(function(){
            $("li.a2").parents().css("border","3px solid orange");
        });
        $(".seven").click(function(){
            $("li").each(function(){
                $(this).css("border","3px solid orange")
            });
        });
    });
</script>
</html>