jquery第二篇

1 操作元素（属性，css，文档处理）

--------------------------属性

$("").attr();


$("").removeAttr();


$("").prop();


$("").removeProp();

attr和prop的区别：

attr对自定义属性使用

prop对固有属性使用

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr])

val更改固有属性的值

------------------------文档处理

（1）创建一个标签对象

$(“<p>”)

（2）内部插入

$("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

$("").appendTo(content)       ----->$("p").appendTo("div");

$("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

$("").prependTo(content)      ----->$("p").prependTo("#foo");

<div>

</div>

</body>

$("button").click(function () {

$("div").append("<h1>hello</h1>")##插入在标签的后面

$("div").prepend ("<h1>hello</h1>")##插入在标签的上面

var $ele=$("<p>hello</p>")//创建一个新的标签

$ele.appendTo("div")##在div中插入新标签，新标签在原始标签后面

});

</script>

（3）外部插入

$("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

$("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

$("").insertAfter(content)    ----->$("p").insertAfter("#foo");

$("").insertBefore(content)   ----->$("p").insertBefore("#foo");

（4）替换

$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>")；

（5）删除

$("").empty()##清除自己的子集

$("").remove([expr])##完全清除

（6）复制

$("").clone([Even[,deepEven]])

2 JQ的循环实现

方式一：

格式 $.each(arr,funtion(){})

arr=[15,99,"hello"];

$.each(arr,function (i,j) {

//console.log(i);下标

// console.log(j);值

    });

方式二：

格式 $("tr").each(function(){

console.log($(this).html())

})

$("table :checkbox").each(function(){

$(this).prop("checked",!$(this).prop("checked"));

if ($(this).prop("checked")){

$(this).prop("checked",false)

}else {$(this).prop("checked",true) }

3 实现效果

1.动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello world</p>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">toggle</button>
<img src="doe.jpeg">
</body>
<script src="jquery-3.2.1.js"></script>
<script>
    //标签对象.事件（function(){}）
//    $("#show").click(function () {
//        alert(123)
//    })
//    $("#hide").click(function () {
//        $("p").hide(1000)
//    });
//    $("#show").click(function () {
//        $("p").show(1000)
//    })
    $("#show").click(function () {
        $("img").show(1000)
    });
    $("#hide").click(function () {
        $("img").hide(1000)
    });
        $("#toggle").click(function () {
        $("img").toggle(1000)
    });
        //回调函数：当某一个动作执行完成之后自动触发的函数
</script>
</html>

2 滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #con{
            line-height: 80px;
            background-color: darkblue;
            color: #cccccc;
            text-align: center;
        }

    </style>
</head>
<body>
<button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="toggle">toggle</button>
<div id="con">滑动效果</div>
</body>
<script src="jquery-3.2.1.js"></script>

<script>
    $("#slideDown").click(function () {
        $("#con").slideDown(1000)
    });
    $("#slideUp").click(function () {
        $("#con").slideUp(1000)
    });
    $("#toggle").click(function () {
        $("#con").toggle(1000)
    });
</script>
</html>

3 淡入淡出效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .con{
             200px;
            height: 200px;
            background-color: aquamarine;

        }
    </style>
</head>
<body>
<div class="con"></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button>
<script src="jquery-3.2.1.js"></script>
<script>
    $("#fadeIn").click(function () {
        $(".con").fadeIn(2000)
    });
        $("#fadeOut").click(function () {
        $(".con").fadeOut(2000)
    });
        $("#fadeToggle").click(function () {
        $(".con").fadeToggle(2000)
    });
     $("#fadeTo").click(function () {
        $(".con").fadeTo(2000,0.4)
    })
</script>
</body>
</html>