前端之jQuery

一.选择器和筛选器

选择器

基本选择器

$("*") $("#id") $(".class") $("element") $(".class,p,div")

层级选择器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

筛选选择器

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

属性选择器

$('[id="div1"]') $('["hantao="sb"][id]')

表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签

筛选器

过滤筛选器

$("li").eq(2) $("li").first() $("ul li").hasclass("test")

查找筛选器

查找子标签：         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   
 查找所有兄弟标签：    $("div").siblings()  
              
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil()

二.操作元素

文本操作

<p class="p1">PPP</p>
<p class="p1">PPP</p>
<p class="p1">PPP</p>
<p class="p1">PPP</p>

<script src="jquery-3.2.1.min.js"></script>
<script>
    $("p").click(function () {
        console.log($(this));
        $(this).html()
    })
</script>

    <div class="outer">
        <span class="num">23</span>
    </div>
    <button>click</button>

    <script src="jquery-3.2.1.min.js"></script>

    <script>
        $("button").click(function () {
            var $val=$(".outer .num").html();
            $(".outer .num").html(parseInt($val)+1)
        })

    </script>

属性操作

$().attr(属性名)
$().attr(属性名, 属性值)
// 针对 checked  select
$().prop(属性名)
$().prop(属性名, 属性值)
 $(":checkbox").prop("checked",false)
class操作
$("").addClass(class|fn)
$("").removeClass([class|fn])

value操作

针对input,textarea,select

取值操作：
$("").val()
赋值操作：
$("").val("")

each循环

    //循环1
    var arr=[111,222,333]
//    $.each(循环对象，function () {
//
//    })
    $.each(arr,function (i,j) {
        console.log(i);   //索引
        console.log(j);   //值
    })

    //循环2
    $("p").each(function () {
        console.log($(this).html())
    })

表格操作

<body>
    <button class="select_all">全选</button>
    <button class="cancel">取消</button>
    <button class="reverse">反选</button>
    <hr>
    <table>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>张三</td>
            <td>18</td>
            <td>s1</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>李四</td>
            <td>8000</td>
            <td>s1</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>王五</td>
            <td>10000</td>
            <td>s1</td>
        </tr>
    </table>

    <script src="jquery-3.2.1.min.js"></script>

    <script>
        $(".select_all").click(function () {
            $(":checkbox").prop("checked",true)
        });
        $(".cancel").click(function () {
            $(":checkbox").prop("checked",false)
        })
        $(".reverse").click(function () {
            $(":checkbox").each(function () {
//                if ($(this).prop("checked")){
//                    $(this).prop("checked",false)
//                }
//                else {
//                    $(this).prop("checked",true)
//                }

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

            })
        })


    </script>

</body>

View Code

事件委派

        $("ul li").click(function () {
            alert($(this).html())
        })
        $("button").click(function () {
            $("ul").append("<li>444</li>")
        })
        //事件委派
        $("ul").on("click","li",function () {
            alert($(this).html())
        })

节点操作

对象转换

DOM对象转换jQuery对象：

$()

jQuery对象转换DOM对象：

$()[0]

创建标签

$("")

插入节点

//内部插入

 $("").append(content|fn) ----->$("p").append("Hello");
 $("").appendTo(content) ----->$("p").appendTo("div");
 $("").prepend(content|fn) ----->$("p").prepend("Hello");
 $("").prependTo(content) ----->$("p").prependTo("#foo");

//外部插入

 $("").after(content|fn) ----->$("p").after("Hello");
 $("").before(content|fn) ----->$("p").before("Hello");
 $("").insertAfter(content) ----->$("p").insertAfter("#foo");
 $("").insertBefore(content) ----->$("p").insertBefore("#foo");

    <script>
        $(".add").click(function () {
            //创建标签
            var $img=$("<img>");
            $img.attr("src","egon.jpg");
            //添加节点
            $(".outer").append($img);
            //$img.appendTo(".outer");    同上
            //$(".outer").after($img)     添加到标签下面做为兄弟标签
        })
    </script>

删除节点

        //删除标签
        $(".delete").click(function () {
            //remove
//            $(".outer h4").remove()
            //empty
            $(".outer h4").empty()
        })

替换节点

        //替换节点
        var $img=$("<img>");
        $img.attr("src","egon.jpg");
        $(".replace").click(function () {
            $(".outer p").eq(1).replaceWith($img)
        })

克隆节点

        //clone节点
        var $copy=$(".outer").clone();

<body>
    <div class="style_box">
        <div class="item">
            <button class="add">+</button>
            <input type="text">
        </div>
    </div>

    <script src="jquery-3.2.1.min.js"></script>

    <script>
        $(".item .add").click(function () {
            var $clone=$(this).parent().clone();
            $clone.children(".add").html("-").attr("class","del");
            $(".style_box").append($clone);
        })
        $(".style_box").on("click",".del",function () {
            $(this).parent().remove()
        })

    </script>
</body>

View Code

动画效果

        //用n秒的时间显示或隐藏
        $(".xianshi").click(function () {
//            $(".c1").removeClass("hide")
            $(".c1").show(2000);
        });
        $(".yincang").click(function () {
//            $(".c1").addClass("hide")
            $(".c1").hide(2000);
        })

        $(".qiehuan").click(function () {
            $(".c1").slideToggle(2000);
        })

    <script>
        //用n秒的时间显示或隐藏(滑动)
        $(".xianshi").click(function () {
            $(".c1").slideDown(2000);
        });
        $(".yincang").click(function () {
            $(".c1").slideUp(2000);
        })
    </script>

    <!--淡入淡出-->
    <script>
        $(".xianshi").click(function () {
            $(".c1").fadeIn()
        })
        $(".yincang").click(function () {
            $(".c1").fadeOut()
        })
        $(".qiehuan").click(function () {
            $(".c1").fadeToggle()
            //$(".c1").fadeto(1000,.02)
        })
    </script>

CSS操作

$("").offset([coordinates])
$("").position()

        console.log($(".c1").offset().top);
        console.log($(".c1").offset().left);
        console.log($(".c2").offset().top);
        console.log($(".c2").offset().left);
        console.log($(".c1").position().top);
        console.log($(".c1").position().left);

        $(".c2").offset({top:200,left:200});

滚动条返回顶部实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             100%;
            height: 2000px;
            background-color: darkgray;
        }
        .return_top{
             100px;
            height: 60px;
            background-color: yellow;
            color: white;
            text-align: center;
            line-height: 60px;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="return_top hide">返回顶部</div>

    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(window).scroll(function () {
            var $current_position=$(window).scrollTop();
            if ($current_position>200){
                $(".return_top").show();
            }
            else {
                $(".return_top").hide();
            }
        })
        $(".return_top").click(function () {
            $(window).scrollTop(0)
        })
    </script>
</body>
</html>

View Code