码迷，mamicode.com
首页 > Web开发 > 详细

20200320jQuery

时间：2020-03-25 19:44:36      阅读：91      评论：0      收藏：0      [点我收藏+]

标签：mod   查找   toggle   cti   osi   ret   opacity   jquery   操作   

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

标签：mod   查找   toggle   cti   osi   ret   opacity   jquery   操作   

原文地址：https://www.cnblogs.com/L-dongf/p/12568369.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！