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{

            width: 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>

2 JQ的循环实现

3 实现效果

相关文章