20200320jQuery

Posted 2021-03-03 l-dongf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20200320jQuery相关的知识，希望对你有一定的参考价值。

jquery基础语法：$(selector).action()

<body>
<div>hello</div>
<script src="jquery-3.4.1.js"></script>
<script>
    $("div").css("color","red")
</script>
</body>

1、选择器

基本选择器

$("*")  //选择所有
$("#id")  //根据id选择
$(".class")  //根据class选择
$("element")  //根据标签名字选择
$("div,p")  //选择多个标签

层级选择器

$("div1 div2")  //后代选择器，选择所有div中的div2标签
$("div1 > div2")  //子代选择器，选择div1中的第一层为div2的标签
$("div1 + div2")  //匹配div1下紧挨着的div2
$("div1 ~ div2")  //匹配div1下相邻的div2

属性选择器

$(‘[id="abc"][name="dongfei"]‘)  //选择属性是name="dongfei"的元素

基本筛选器

$("div:first")  //筛选第一个，另一种写法：$("div").first() (推荐)
$("div:last")  //筛选最后一个
$("div:eq(3)")  //筛选第三个
$("div:even")  //筛选偶数
$("div:odd")  //筛选基数
$("div:gt(2)")  //索引大于2的
$("div:lt(2)")  //索引小于2的

表单选择器

$(":text")  //选择text类型的input标签，$("[‘type‘=‘text‘]")

查找筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<div class="outer">
    <div class="inner">inner
    <p class="p2">p2</p>
    </div>
    outer
    <p class="p1">p1</p>
</div>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li id="end">555</li>
    <li>666</li>
</ul>
<script src="jquery-3.4.1.js"></script>
<script>
    $(".outer").children("p").css("color","blue");  //只查找子标签
    $(".outer").find("p").css("color","blue");  //查找.outer下所有的标签
    $("li").eq(2).next().css("color","red");  //此标签以下一个标签
    $("li").eq(2).nextAll().css("color","red");  //此标签以下所有
    $("li").eq(1).nextUntil("#end").css("color","red");  //直到遇到id="end"的标签
    $("li").eq(2).prev().css("color","red");  //此标签以上，prevAll和prevUntil同next
    $(".p2").parent().css("color","red");  //查找父标签
    $(".p2").parents().css("color","red");  //查找所有父标签
    $(".p2").parentsUntil(".outer").css("color","red");  //查找所有父标签，直到".outer"
    $("ul").siblings().css("color","red");  //反选
</script>
</body>
</html>

2、菜单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }
        .menu{
            float: left;
            background-color: beige;
            width: 30%;
            height: 500px;
        }
        .content{
            float: left;
            background-color: firebrick;
            width: 70%;
            height: 500px;
        }
        .title{
            background-color: darkorange;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="show(this)">菜单一</div>
                <div class="con">
                    <div>子选项1</div>
                    <div>子选项2</div>
                    <div>子选项3</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">菜单二</div>
                <div class="con hide">
                    <div>子选项1</div>
                    <div>子选项2</div>
                    <div>子选项3</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">菜单三</div>
                <div class="con hide">
                    <div>子选项1</div>
                    <div>子选项2</div>
                    <div>子选项3</div>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>
    <script src="jquery-3.4.1.js"></script>
    <script>
        function show(self) {
            $(self).next().removeClass(‘hide‘);
            $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
        }
    </script>
</body>
</html>

3、属性操作

<body>

<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见2
<div id="id1">
    <p>ppp</p>
</div>
<input type="text" value="abc">
<div value="123"></div>

<script src="jquery-3.4.1.js"></script>

<script>
// attr,removeAttr, prop,removeProp
    console.log($("div").hasClass("div1"));  //判定div标签中是否有div1的class
    console.log($(‘div‘).attr(‘con‘));  //获取con值
    console.log($(‘div‘).attr(‘con‘,‘c2‘));  //修改con值
    // checkbox不建议用attr，建议使用prop
    console.log($(":checkbox:first").attr("checked"));  //checked
    console.log($(":checkbox:last").attr("checked"));  //undefined
    console.log($(":checkbox:first").prop("checked"));  //true
    console.log($(":checkbox:last").prop("checked"));  //false

// addClass,removeClass
    $(‘div‘).addClass("div2");  //添加class
    $(‘div‘).removeClass("div1");  //删除class

// html,text,val(针对标签固有的value值)
    console.log($("#id1").html());  //<p>ppp</p>
    console.log($("#id1").html("<h1>h1</h1>"));  //修改HTML内容
    console.log($("#id1").text());  //ppp
    console.log($("#id1").text("<h1>h1</h1>"));  //修改文本内容
    console.log($(":text").val());  //abc
    $(":text").val("defg");  //修改value值
    console.log($(":text").next().val());  //<empty string>

// css
    $("div").css("color","red");  //添加单个css
    $("div").css({"color":"red","background-color":"green"});  //添加多个css
</script>

</body>

4、遍历循环

<body>

<p>001</p>
<p>002</p>
<p>003</p>

<script src="jquery-3.4.1.js"></script>
<script>
    var arr = [11,22,33];
//    for (var i=0;i<arr.length;i++){
//        $("p").eq(i).html(arr[i]);
//    }
// 遍历数组
    $.each(arr,function (x,y) {
        console.log(x);  //下标
        console.log(y);  //值
    });
// 遍历标签
    $("p").each(function () {
        console.log($(this));  //标签
        $(this).html(‘hello‘);
    })
</script>

</body>

5、正反选

<body>

    <button onclick="selectall();">全选</button>
    <button onclick="cancel();">取消</button>
    <button onclick="reverse();">反选</button>
    <hr>
    <table border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>001</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>002</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>003</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>004</td>
        </tr>
    </table>

<script src="jquery-3.4.1.js"></script>
<script>
    function selectall() {
        $(":checkbox").each(function () {
            $(this).prop("checked",true);
        })
    }
    function cancel() {
        $(":checkbox").each(function () {
            $(this).prop("checked",false);
        })
    }
    function reverse() {
        $(":checkbox").each(function () {
            $(this).prop("checked",!$(this).prop("checked"));
        })
    }
</script>

</body>

6、模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }
        .hide{
            display: none;
        }
        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    function action1(self){
        $(self).parent().siblings().removeClass("hide");
    }
    function action2(self){
        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")
    }
</script>
</body>
</html>

7、文档处理

<body>

<div class="c1">
    <p>ppp</p>
</div>
<button>add</button>

<script src="jquery-3.4.1.js"></script>
<script>
// append,appendTo,prepend(从上边追加),prependTo：内部插入
    $("button").click(function () {
        // $(".c1").append("<h1>hello</h1>")
        var $ele = $("<h1>");  //创建jQuery对象的标签
        $ele.html("hello");
        $ele.css("color","red");
        $(".c1").append($ele);  // == $ele.appendTo($(".c1"));
    })

// after,insertAfter,before,insertBefore：外部插入

// replaceWith：替换

// empty,remove：删除

// clone：复制
</script>

</body>

clone练习示例

<body>

<div class="outer">
    <div class="item">
        <button onclick="add_obj(this);">+</button>
        <input type="text">
    </div>
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    function add_obj(self) {
        var $obj = $(self).parent().clone();
        $obj.children("button").text("-");
        $obj.children("button").attr("onclick","remove_obj(this)");
        $(".outer").append($obj);
    }
    function remove_obj(self) {
        $(self).parent().remove();
    }
</script>

</body>

8、css操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1,.div2{
            width: 200px;
            height: 100px;
        }
        .div1{
            border: 5px solid rebeccapurple;
            padding: 20px;
            margin: 2px;
            background-color: antiquewhite;
        }
        .div2{
            background-color: rebeccapurple;
        }
        /*.outer{*/
            /*position: relative;*/
        /*}*/
    </style>
</head>
<body>

<div class="div1"></div>
<div class="outer">
    <div class="div2"></div>
</div>

<script src="jquery-3.4.1.js"></script>
<script>
// offset：获取相对于视口的偏移量
    console.log($(".div1").offset().top);
    console.log($(".div1").offset().left);
    console.log($(".div2").offset().top);
    console.log($(".div2").offset().left);
// position：获取相对于已经定位的父标签的偏移量
    console.log($(".div1").position().top);
    console.log($(".div1").position().left);
    console.log($(".div2").position().top);
    console.log($(".div2").position().left);
// height,width
    console.log($(".div1").height());  //获取height像素
    console.log($(".div1").height("250px"));  //修改height像素
    console.log($(".div1").width());  //获取width像素
    console.log($(".div1").innerHeight());  //包括padding，不包括border
    console.log($(".div1").outerHeight());  //包括padding和border
    console.log($(".div1").outerHeight(true));  //包括padding、border和margin
    
</script>

</body>
</html>

9、返回顶部按钮示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1,.div2{
            width: 100%;
            height: 800px;
        }
        .div1{
            background-color: antiquewhite;
        }
        .div2{
            background-color: rebeccapurple;
        }
        .returnTop{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 90px;
            height: 50px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>

<script src="jquery-3.4.1.js"></script>
<script>
    window.onscroll = function () {
        console.log($(window).scrollTop());
        if($(window).scrollTop()>100){
            $(".returnTop").removeClass("hide")
        }else {
            $(".returnTop").addClass("hide")
        }
    };

    function returnTop() {
        $(window).scrollTop(0);  //滚轮返回顶部
    }

</script>

</body>
</html>

10、事件绑定和事件委托

简写

    $(".returnTop").click(function () {
        $(window).scrollTop(0);
    })

全写

    $("ul li").bind("click",function () {
        alert("123")
    })

解绑

$("ul li").unbind("click");

事件绑定

<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button>add</button>

<script src="jquery-3.4.1.js"></script>
<script>
    $("ul").on("click","li",function () {  //ul将事件委托给li
        alert("123")
    });

    $("button").click(function () {
        var $ele=$("<li>");
        var len=$("ul li").length;
        $ele.html((len+1)*111);
        $("ul").append($ele);
    });
</script>
</body>

11、动画效果

显示和隐藏

<body>

<div>hello world</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>

<script src="jquery-3.4.1.js"></script>
<script>
    function f1() {
        $("div").show(1000);  //显示
    }

    function f2() {
        $("div").hide(1000);  //隐藏
    }
</script>

</body>

淡入淡出：fadein/fadeout/fadeToggle/fadeTo
滑入滑出：slideDown/slideUp/slideToggle

12、回调函数

    function f1() {
        $("div").show(1000,function () {
            alert(1000)
        });
    }

13、扩展方法

<script>
    $.extend({
        Myalert:function () {
            alert("警告")
        }
    });
    $.Myalert()
</script>

    $.fn.extend({
        GetText:function () {
            console.log($(this).text());
        }
    });
    $("p").GetText();

以上是关于20200320jQuery的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器