index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <!--jQuery UI 依赖于jQuery-->
    <script src="js1.js"></script>
    <style>
        div{
            float: left;
            background:#ece023;
            width: 50px;
            height: 50px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <p>1111111</p>
    <p id ="pid">2222222</p>
    <p class ="pid" >3333333</p>
    <button id="mybtn">click me</button>
    <button id="toggle">隐藏/显示</button>
    <button id="btn1">新增</button>
    <p id="p1">btn5附带内容</p>
    <br>
    <script>
        for(var i=0;i<5;i++){
            $("<div>").appendTo(document.body);
        }//依次将<div>添加至document的body中
        $("div").click(function(){
            $(this).hide(2000, function () {
                $(this).remove();
            })
        })
    </script>
    <div id="flipshow" style="padding: 5px;text-align: center;background-color: #ece023;border: solid 1px #ece999">出现</div>
    <div id="content" value="value" style="padding: 50px;display: none">Hello world</div>
    <br><br><br><br>
    <button id="btn2" οnclick="appendText()">append增加</button>
    <button id="btn3" οnclick="appendText()">append删除</button>
    <button id="btn4">Ajax测试</button>
    结果：<span id="result"></span>
</body>
</html>


js1.js:

/**
 * Created by Vodka on 2017/4/29.
 */
//$("p")是通过$加元素 来定位到那个元素 然后用.api(function{})来写函数
$(document).ready(function(){
    $("#mybtn").click(function(){
        $("p").text("0");
        $("#pid").text("1");
        $("#pid").html("<a href='index.html'>更改为了标签</a>")
        $(".pid").text("2");
        console.log("更改前id:"+$(".pid").attr({
            "class":"ppid",
            "href":"index.html"
        }));
        $(".pid").attr("class","ppid");//更改id
        console.log("更改后id:"+$(".ppid").attr("class"));
    })
    $("#mybtn").bind("click",clickHandle);//bind绑定事件
    $("#mybtn").dblclick(function(event){
        $(this).toggle(1000);//缓慢淡出
    })

    $("#btn1").click(function(){
        $("#p1").text(function(i,ot){
            return "old:"+ot+"  new:new thing"+(i);
        })
    })

//  众多方法请查看官网API
    function clickHandle(e){
    //    使用stopPropagation可以阻止事件的发生（阻止冒泡）
        var ee =jQuery.Event("事件名称");
        $("#pid").trigger(ee);
        console.log("加载完毕");
        var text = $("#content").text();
        console.log(text);
        console.log($("#content").html());
        console.log($("#content").val());
        console.log("id:"+$("#content").attr("id"));
    //  text()用来获取文本信息
    }
    $("#toggle").click(function(){
        $("p").fadeToggle(1000);
    })
    //  fadeTo 设置透明度过渡
    $("#flipshow").click(function(){
        $("#content").slideToggle(1000);
    })


//    append prepend before after
    $("#btn2").click(function(){
        $("#btn2").prepend("prepend somthing");
        $("#btn2").after("after somthing");
        $("#btn2").before("before somthing");
    })
    $("#btn3").click(function(){
        $("#btn2").remove();
        $("#btn2").empty();
    })
    function appendText(){
        var text1 = "<p>hhh</p>>"
        var text2 = $("<p></p>").text("555哇");
        var text3 = document.createElement("p");
        text3.innerHTML = "666哇";
        $("body").append(text1,text2,text3);
    }

    $("xxx").css({
        width:"110px",height:"110px"
    })
    //向下遍历
    $("parent").find("针对所有子孙类").xxx();
    $("parent").children("只针对儿子").xxx();
    //向上遍历
    $("xxx").parent("只针对父亲").xxx();
    $("xxx").parent("针对所有祖先类").xxx();
    $("xxx").parentsUntil("从xxx到该元素之间的所有").xxx();
    //同级遍历
    $("xxx").siblings("除该元素其他与它同级的元素都修改").xxx();
    $("xxx").next("同级的下一个元素修改").xxx();
    $("xxx").nextAll("同级的下边的所有都元素修改").xxx();
    $("xxx").nextUntil("同级的向下从xxx到该元素之间的所有修改").xxx();
    $("xxx").pre("同级的上一个元素修改").xxx();
    $("xxx").preUntil("同级的向上从xxx到该元素之间的所有修改").xxx();

    $("#divv p").filter("条件").xxx();//满足这个条件（可以是类型名、id名之类的）的div里面的p可以被过滤获取

    //Ajax异步处理
    $("#btn4").on("click",function(){
        $.get("Server.php",{name:$("#namevalue").val()},function(data){
            $("#result").text(data);
        })
    })

})