jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

HHarvey

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/HHarvey/article/details/89789764

版权

基础语法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello div</div>
<a href="">走你</a>
<p id="p1" age = 18>ppp1</p>
<p id="p2" age = 18>ppp2</p>
<div class="outer">outer
    <div class="inner">inner
        <p>inner p</p>
    </div>
    <p>harvey</p>
</div>
<div class="outer2">Y</div>
<p>哈哈</p>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//    基本选择器
//    $('div').css('color','red');     //通过标签名选择
//    $('*').css('color','red');       //所有标签变红色
//    $('#p1').css('color','red');     //通过id选择
//    $('.outer').css('color','red');  //通过class选择
//    $('.inner,p').css('color','red');//可以批量选择

//    层级选择器
//    $(".outer p").css("color","red"); //选择所有p标签后代
//    $(".outer>p").css("color","red"); //只选择下一代的p标签
//    $(".outer+p").css("color","red"); //选择紧挨着的p标签（同级）
//    $(".outer~p").css("color","red"); //选择下边的所有p标签（同级）

//    基本筛选器
//    $("li:first").css("color","red"); //筛选第一行li标签
//    $("li:eq(0)").css("color","red"); //类似索引的方式筛选
//    $("li:gt(2)").css("color","red"); //类似索引，匹配第2个（不包括第2个）以后的所有li标签
//    $("li:lt(2)").css("color","red"); //类似索引，匹配第2个（不包括第2个）以前的所有li标签

//    属性筛选器
    $("[age = 18][id = 'p1']").css('color','red'); //匹配自定义的属性

//    表单筛选器
    $("[type='text']").css("width","200px");
    $(":text").css("width","400px"); //注意，只有input标签的type属性可以用此方法简写

</script>

</body>
</html>

基础语法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello div</div>
<a href="">走你</a>
<p id="p1" age = 18>ppp1</p>
<p id="p2" age = 18>ppp2</p>
<div class="outer">outer
    <p>harvey</p>
</div>
<div class="outer2">Y</div>
<p>哈哈</p>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    //筛选器
//    $("li").eq(2).css("color","red");   //建议用此方法，跟标签名分离，不写死
//    $("li").first().css("color","red"); //第一个li标签
//    $("li").last().css("color","red");  //最后一个li标签
//    $(".outer").children("p").css("color","red"); //只匹配下一代
//    $(".outer").find("p").css("color","red");   //匹配所有后代p标签

//    $("li").eq(2).next().css("color","red");    //匹配索引为2的下一个li标签
//    $("li").eq(2).nextAll().css("color","red"); //匹配索引为2的之后的所有li标签
//    $('li').eq(4).prevAll().css('color','red'); //匹配索引为4的之前的所有li标签
//    $("li").eq(4).prevUntil("li:eq(0)").css("color","red");//匹配索引为4之前一直到索引为0时停止([0]不匹配)
//    console.log($(".outer .inner p").parent().html());//inner <p>inner p</p> 拿到父级标签打印父级标签的内容
//    $(".outer .inner p").parents().css("color","red");//无上限找父级标签，能找到最外层，一般不用
//    $(".outer .inner p").parentsUntil("body").css("color","red");//可以限制不让他无限找，此处限制到body
    $(".outer").siblings().css("color","red");//上下找兄弟，除了自己其他同级全匹配
</script>

</body>
</html>

菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            height: 800px;
            width:100%;
        }
        .menu{
            float: left;
            background-color: dodgerblue;
            width: 30%;
            height: 500px;
        }
        .content{
            float: left;
            background-color: rebeccapurple;
            width: 70%;
            height: 500px;
        }
        .title{
            background-color: aquamarine;
            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>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>
    <div class="content"></div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    function show(self) {
        $(self).next().removeClass('hide');
        $(self).parent().siblings().children(".con").addClass("hide");
    }
</script>

</body>
</html>

属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
<input type="text" value="123">
<div value="456"></div>

<div id="id1">
    uuuuu
    <p>ppppp</p>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//    console.log($("div").hasClass("div11"));//false 判断是否有此标签
//    console.log($("div").attr("con"));      //c1,attr可以查看自定义属性
//    console.log($("div").attr("con","c2"));
//    console.log($("div").attr("con"));      //c2,attr可以修改值
//
//    console.log($(":checkbox:first").attr("checked"));//checked
//    console.log($(":checkbox:last").attr("checked")); //undefined,原有属性没有声明是无法被attr找到的
//    console.log($(":checkbox:first").prop("checked"));//true,直接返回布尔值
//    console.log($(":checkbox:last").prop("checked")); //false,prop方法可以查找没有被声明的固定属性
//
//    console.log($("div").prop("con"));//undefined,prop方法不能操作自定义属性
//    console.log($("div").prop("class"));//div1,可以操作原有属性
//
//    console.log($("#id1").html());// uuuuu <p>ppppp</p>
//    console.log($("#id1").text());// uuuuu ppppp
//    console.log($("#id1").html("<h1>YUAN</h1>"));//<div id="id1"><h1>YUAN</h1></div>
//    console.log($("#id1").text("<h1>YUAN</h1>"));//<div id="id1"><h1>YUAN</h1></div>，纯文本，无渲染


    //原有属性
    console.log($(":text").val());//123，拿到value
    console.log($(":text").next().val());//自定义的value拿不到
    $(":text").val("789");
    console.log($(":text").val());//789，覆盖
    
    //css控制多个属性
    $("div").css({"color":"red","background-color":"green"})
</script>

</body>
</html>

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<p>123</p>
<p>456</p>
<p>789</p>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    arr = [11,22,33];
    //循环方法一
    $.each(arr,function (x,y) {
        console.log(x);//x为索引
        console.log(y);//y为索引对应的值
    });
    //循环方法二
    $('p').each(function () { //这样就已经自动循环了
        console.log($(this)); //三个p标签对象拿到了
        $(this).html("hello");//p标签内容修改为三个hello
    })
</script>

</body>
</html>

正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="selectAll();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<hr>
    <table border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>444</td>
        </tr>
    </table>
<script src="https://code.jquery.com/jquery-3.3.1.min.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 () {
            if ($(this).prop('checked')){
               $(this).prop('checked',false)
            }
            else {
                $(this).prop('checked',true)
            }
        })
    }
</script>

</body>
</html>

模态对话框

<!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="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    function action1(self) {
        $(self).parent().siblings().removeClass('hide');
    }
    function action2(self) {
        $(self).parent().parent().children('.shade,.models').addClass('hide');
//or    $(self).parent().addClass("hide").prev().addClass("hide");
    }
    
</script>

</body>
</html>

增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="c1">
    <p>PPP</p>
</div>
<button>add</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $('button').click(function () { //唯一的不同就在不需要onclick
        var $ele = $('<h1></h1>');
        $ele.html('hello world');
        $ele.css("color","red");
    });
    //内部插入
    //$(".c1").append($ele); //从最后一行开始插入
    //$ele.appendTo(".c1")
    //$(".c1").prepend($ele);//从第一行开始插入
    //$ele.prependTo(".c1")

    //外部插入
    //$(".c1").after($ele)  //插入到这个标签之后（同级）
    //$ele.insertAfter(".c1")
    //$(".c1").before($ele) //插入到这个标签之前（同级）
    //$ele.insertBefore(".c1")

    //替换
    //$("p").replaceWith($ele)

    //删除与清空
    //$(".c1").empty()  移除标签内的内容
    //$(".c1").remove() 移除整个标签

    //clone克隆
    //  var $ele2= $(".c1").clone();
    //  $(".c1").after($ele2)
        })
</script>

</body>
</html>

clone,复制标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    function add(self) {
        //var $copy1 = $(".item").clone();//用此方法找到的标签是包括之前的所有item，会累加，不会一次只添加一个
        var $copy1 = $(self).parent().clone();//拷贝，这样每次只拷贝自己的父标签
        $('.outer').append($copy1); //添加
        //加一个方法，删除。复制原来的button并修改内容'+'变为'-',且设置onclick的值为remove_obj()
        $copy1.children('button').html('-').attr('onclick','remove_obj(this)');
    }
    function remove_obj(self) {
        $(self).parent().remove(); //老规矩，先找到父标签然后移除该标签
    }
</script>

</body>
</html>

offset()

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

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    //offset()相对于视口的偏移量
    console.log($(".div1").offset().top); //2
    console.log($(".div1").offset().left);//2

    console.log($(".div2").offset().top); //154
    console.log($(".div2").offset().left);//0

    //position()：相对于已经定位的父标签的偏移量
    console.log($(".div1").position().top);
    console.log($(".div1").position().left);

    console.log($(".div2").position().top);
    console.log($(".div2").position().left);

    console.log($(".div1").height("300px")); //可以修改值，也可以查看，查看的是内容的大小
    console.log($(".div1").innerHeight());   //查看的是内容+padding的大小
    console.log($(".div1").outerHeight());   //查看的是内容+padding+border的大小
    console.log($(".div1").outerHeight(true));//查看的是内容+padding+border+margin的大小
</script>

</body>
</html>

滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div2{
            width: 100%;
            height: 800px;
        }
        .div1{
            width: 40%;
            height: 150px;
            background-color: antiquewhite;
            overflow: auto;
        }
        .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">
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
    <h1>1111</h1>
</div>

<div class="div2">
    <button onclick="returnTop()">return</button>
</div>

<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    window.onscroll = function () {      //监听滚轮位置的函数。只要滚轮动了就运行
        if($(window).scrollTop()>300){
            $(".returnTop").removeClass("hide")
        }else {
            $(".returnTop").addClass("hide")
        }
    };
    function returnTop() {
        $(window).scrollTop(0);
    }
    $(".div2 button").click(function () {
        $(".div1").scrollTop(0)
    })
</script>

</body>
</html>

事件绑定、委托、准备加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        //将js/jQuery代码放在html代码上边会无效，用此方法可以将js代码的执行放在html之后，相当于onload
        // 事件准备加载方式一
        //    $(document).ready(function () {
        //         $("ul li").html(5);
        //    });
        // 事件准备加载方式二
        //    $(function () {
        //        $("ul li").html(5);
        //    });
    </script>
</head>
<body>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<button>add</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    //事件绑定简单形式，js必须要遍历才可以实现
    //    var eles=document.getElementsByTagName("li")
    //    eles.onclick=function () {
    //        alert(123)
    //    }
//    $('ul li').click(function () {  //完整版 $("ul li").bind("click",function () {
//        alert(666)
//    });
    //$("ul li").unbind("click") //解除绑定事件

    $('button').click(function () {
        var $ele = $('<li>');
        var len = 4;
        $ele.html(len + 1);
        $('ul').append($ele);
    });
    
    //事件委托（事件绑定高级版），用on可以设定父标签，好处是如果后来添加新的li同样可以绑定事件
    $('ul').on("click","li",function () {
        alert(999);
    });
    
</script>
</body>
</html>

动画效果1,show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>
<div>hello</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>

<script>
    function f1() {
        $('div').show(1000,function () {
           alert('show')
        })
    }
    function f2() {
        $('div').hide(1000,function () {
            alert('hide')
        })
    }
    function f3() {
        $('div').toggle(1000);
    }
</script>
</body>
</html>

动画效果2,slide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
        #content{
            text-align: center;
            background-color: dodgerblue;
            border: solid 1px aquamarine;
            padding: 50px;
        }
    </style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">切换</div>

<div id="content">hello world</div>
<script>
    $(document).ready(function () {
        $('#slideDown').click(function () {
            $('#content').slideDown(1000);
        });
        $("#slideUp").click(function(){
            $("#content").slideUp(1000);
        });
        $("#slideToggle").click(function(){
            $("#content").slideToggle(1000);
        });
    });

</script>
</body>
</html>

动画效果3,fade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src=""https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(2000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(2000);

   });

    $("#toggle").click(function(){
       $("#id1").fadeToggle(2000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,1);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

panel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>Title</title>
       <style>

           *{
               margin: 0;
               padding: 0;
           }
        .box{
            width: 500px;
            height: 200px;
            position: absolute;
        }

        .title{
            background-color: black;
            height: 50px;
            width: 500px;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        .content{
            width: 500px;
            height: 150px;
            background-color: antiquewhite;
        }
    </style>


    <script>
        $(function () {

          $(".title").mouseover(function () {
              $(this).css("cursor","pointer");
        }).mousedown(function (e) {

                  var eve = e || window.event;
                // 原始鼠标横纵坐标位置

                  var old_m_x=eve.clientX;
                  var old_m_y=eve.clientY;
//                  console.log(old_x);
//                  console.log(old_y);

                 var old_box_y=$(this).parent().offset().top ;
                 var old_box_x=$(this).parent().offset().left ;

                  $(this).bind("mousemove",function (eve) {
                      var new_m_x=eve.clientX;
                      var new_m_y=eve.clientY;

                      var m_x=new_m_x-old_m_x;
                      var m_y=new_m_y-old_m_y;



                  //$(".box").css({"top":old_box_y+m_y+"px","left":old_box_x+m_x+"px"})

                var x = old_box_x + m_x;
                var y = old_box_y + m_y;

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
                  })
              })
          }).mouseout(function(){
            $(this).unbind('mousemove');
        })

    </script>
</head>
<body>


<div class="box">
    <div class="title">标题</div>
    <div class="content">内容</div>
</div>

</body>
</html>

拓展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>
<p>1p</p>
<p>2p</p>
<p>3p</p>

<script>
//    $.each(obj,function () {
//
//    });
//    $('').each(function () {
//
//    })
    $.extend({
        Myprint:function () {
            console.log('hello')
        }
    });
        $.Myprint(); //此时可以调用了
    $.fn.extend({
        Gettext:function () {
            // 可以自定义循环不用内置的each()
            for(var i = 0;i<this.length;i++){
               console.log(this[i].innerHTML)
           }
            $.each($(this),function (x,y) {
                //console.log(y.innerHTML)
//                console.log($(y).html())
            })
        }
    });
    $('p').Gettext()
</script>
</body>
</html>