jQuery的基本语法和基本属性

最新推荐文章于 2025-05-31 10:10:35 发布

HiFerry

最新推荐文章于 2025-05-31 10:10:35 发布

阅读量145

点赞数

分类专栏：前端文章标签： html js

本文链接：https://blog.youkuaiyun.com/weixin_49722641/article/details/108521568

版权

前端专栏收录该内容

12 篇文章

订阅专栏

jQuery是Javascript框架，是轻量级的js库(压缩后只有21k)
jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法
$("#test").html() 意思是指：获取ID为test的元素内的html代码

选择器
基本选择器 $("*") $("#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"]')
表单选择器 $("[type='text']")
只适用于input标签 $(":text")

官网下载jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <!--jquery引入-->
</head>
<body>
    <div ala="ddd">hello div</div>
    <div class="div1">hello div1
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </div>
    <p>hello p</p>
    <p id="p1">hello p1</p>
    <div class="outer">
        <div><p>hello ppp</p></div>
        <p>hello pp</p>
    </div>
    <div ala="ddd">ddd</div>
    <p>hi</p>
    <input type="text">
    <input type="button">

    <script>
        //基本选择器
        $("*").css("color","red");
        //$("div").css("color","green");
        //$("#p1").css("color","green");
        //$(".div1").css("color","green");
        $(".div1,#p1,div").css("color","green");

        //层级选择器
        //后代
        $(".outer p").css("color","green");
        //子代
        $(".outer>p").css("color","green");
        //后面紧挨毗邻
        $(".outer+p").css("color","green");
        //后面的p不需要紧挨
        $(".outer~p").css("color","green");

        //基本筛选器
        $(".div1 li:first").css("color","green")
        $(".div1 li:last").css("color","green")
        $(".div1 li:eq(2)").css("color","green")//从0开始
        $(".div1 li:lt(2)").css("color","green")//小于索引2的,0 1

        //属性选择器
        $("[ala]").css("color","green")
        $("[ala='ddd']").css("color","green")
        
        //表单选择器
        $("[type='text']").css("width","300px")
        $(":text").css("width","300px") //只适用于input
    </script>
</body>
</html>

筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
查看li节点里有没有class为test，返回true和false

查找筛选器

$("div").children(".test")    $("div").find(".test")  
$(".test").next()    $(".test").nextAll()   $(".test").nextUntil()
$("div").prev()  $("div").prevAll()  $("div").prevUntil()
$(".test").parent()  $(".test").parents()  $(".test").parentsUntil() 
$("div").siblings()

<body>
    <div class="div1">hello div1
        <div class="div2">hello div2
            <div class="div3">
                hello div3
                <div class="div10">
                    hello div10
                </div>
            </div>
            <p>hello p</p>
        </div>
        <div class="div3">
            hello
        </div>
        <div class="div4">
            hello4
        </div>
        <div class="div5">
            hello5
        </div>
        <div class="div6">
            hello6
        </div>
    </div>

    <script>
        $(".div1").children(".div3").css("color","red")//对所有子代处理
        $(".div1").find(".div3").css("color","red")//对所有后代处理

        $(".div2").next().css("color","red")//同级后面的一个
        $(".div2").nextAll().css("color","red")//同级后面的所有
        $(".div2").nextUntil(".div5").css("color","red")//直到div5 不包含div5

        $(".div6").prev().css("color","red")//同级前面的一个
        $(".div6").prevAll().css("color","red")//同级前面的所有
        $(".div6").prevUntil(".div3").css("color","red")//不包含div3

        $(".div10").parent().css("color","red")//自己和自己的父辈
        $(".div10").parents().css("color","red")//自己和祖先
        $(".div10").parentsUntil(".div2").css("color","red");//不包括div2

        $(".div2").siblings().css("color","red")//自己不变上下兄弟都变
    </script>
</body>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
          function show(self){
              console.log($(self).text())//菜单一二三
              $(self).next().removeClass("hide")//移除类属性
              $(self).parent().siblings().children(".con").addClass("hide")
          }
    </script>
    <style>
          .menu{
              height: 500px;
              width: 30%;
              background-color: gainsboro;
              float: left;
          }
          .content{
              height: 500px;
              width: 70%;
              background-color: rebeccapurple;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: #425a66;
             color: forestgreen;}
         .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>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>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>
</body>
</html>

table切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }
        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
              <li xxx="c2" onclick="tab(this);">菜单二</li>
              <li xxx="c3" onclick="tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>
      </div>
    <script>
        function tab(self) {
            //$(self).addClass("current");
            //$(self).siblings().removeClass("current");
            $(self).addClass("current").siblings().removeClass("current");
            //是上两句的缩写
            var s=$(self).attr("xxx");
            //取属性xxx的值
            //$("#"+s).removeClass("hide");
            //$("#"+s).siblings().addClass("hide")
            $("#"+s).removeClass("hide").siblings().addClass("hide");
            //用id取
        }
    </script>
</body>
</html>

js绑定事件方式补充

<body>
    <div id="div" onclick="func1(this)">hello </div>
    <div id="div1">hello </div>
    <script>
        function func1(self) {
            console.log(self.getAttribute("id"))//div
        }
        document.getElementById("div1").onclick=function () {
            console.log(this.getAttribute("id"))//div1 不再需要在function中加this
        }
    </script>
</body>

属性操作

$("p").text()    $("p").html()   $(":checkbox").val()
$(".test").attr("ala") 拿到ala   $(".test").attr("ala","s") 设置ala
$(":checkbox").removeAttr("checked")
$(".test").prop("checked",true) 
$(".test").addClass("hide")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <button onclick="selectall();">全选</button>
    <button onclick="cancel();">取消</button>
    <button onclick="reverse();">反选</button>
    <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>
        li=[10,20,30,40]
        dic={name:"yuan",sex:"male"}
        
        //for 循环
        $.each(li,function(i,x){
            console.log(i,x)//索引 值
        })
        $.each(dic,function(i,x){
            console.log(i,x)//键 值
        })

        $("table tr").each(function () {
            console.log($(this).html()) //this代表每一次遍历 html为取内容
            console.log($(this).text()) //取文本内容111222333
        })

        //正反选
        function selectall() {
            $("table :checkbox").each(function () {//checkbox属性
                $(this).prop("checked",true)//设置固有属性 attr设置自定义和固有属性
            })
        }
        function cancel() {
            $("table :checkbox").each(function () {
                $(this).prop("checked",false);
            })
        }

        function reverse() {
            $("table :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>
        *{
            padding:0px;
            margin:0px;
        }
        .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.1.1.js"></script>
    <script>
         function action1(self) {
             $(self).parent().siblings().removeClass("hide");
         }
         function action2(self) {
             $(self).parent().parent().children(".shade,.models").addClass("hide")
         }
    </script>
</body>
</html>

文档处理

<body>
    <input type="text" value="123">
    <input type="checkbox" name="hobby">
    <p>hello p</p>
    <div id="div1">
        <div id="div2"></div>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script>
        console.log($(":text").val());//123
        console.log($(":checkbox").val());//on 自动设置为on
        $(":text").val("456")//设定值
        var ele=$("p")
        $("#div1").append(ele)//放到最下面 父子关系
        ele.appendTo($("#div1"))
        $("#div1").prepend(ele)//放到最前面 父子关系
        ele.prependTo($("#div1"))
        $("#div1").before(ele)//放到前面 兄弟关系
        ele.insertAfter($("#div1"))//放到后面 兄弟关系
    </script>
</body>

clone完全复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="outer">
        <div class="item">
            <input type="button" value="+" onclick="fun1(this)">
            <input type="text">
        </div>
        <div class="item">
            <input type="button" value="-" onclick="func2(this)">
            <input type="text">
        </div>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script>
         function fun1(self) {
             var Clone=$(self).parent().clone(); //将第一个item复制一份
             Clone.children(":button").val("-").attr("onclick","func2(this)");
             $("#outer").append(Clone)
         }
         function func2(self) {
             alert("删除")
             $(self).parent().remove()
         }
    </script>
</body>
</html>

empty and remove

<body>
    <h1>hhhh</h1>
    <div>yyyyy<p>hello</p></div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    $("div").remove() //div盒子不在了 删除
    $("div").empty() //div盒子还在 清空
</script>

滚动菜单示例：
新布局无overflow:auto
a. onscroll事件
b. 获取滚条高度
$(…).scrollTop() $(…).scrollTop(10) $(…).scrollLeft(10)
c. 如何获取某个标签距离顶部高度
$(…).offset() 获取当前标签距离文档顶部高度
$(…).height() 获取当前标签自己的高度
$(…).innerHeight() 获取自己高度+padding; 不包括边距
$(…).outerHeight() 参数一：false:
获取自己高度+padding+border;
参数二：true:
获取自己高度+padding+border+margin;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            position: fixed;
            left: 200px;
            top:48px;
            bottom:0;
            width: 220px;
            border: 1px solid red;
        }
        .menu a{
            display: block;
        }
        .active{
            background-color: #336699;
            color: white;
        }
        .fafafa{
            position: fixed;
            top: 0px;
        }
    </style>
</head>
<body style="margin: 0;">
    <div style="height: 48px;background-color: #303a40"></div>
    <div id="menu" class="menu">
        <a b="1">菜单一</a>
        <a b="2">菜单二</a>
        <a b="3">菜单三</a>
        <a b="4">菜单四</a>
    </div>
    <div id="content" style="position: absolute;left: 420px;right:200px;top:48px;bottom:0;border: 1px solid gray;">
        <div id="ii1" a="1" style="height: 500px;background-color: rebeccapurple"></div>
        <div id="ii2" a='2' style="height: 900px;background-color: #303a40"></div>
        <div a='3' style="height: 1000px;background-color: #84a42b"></div>
        <div a='4' style="height: 50px;background-color: #336699"></div>
    </div>
    <div onclick="GoTop();" style="cursor: pointer; position: fixed;right: 0;bottom: 0;width: 50px;height: 50px;background-color: #303a40;color: white;border: 1px solid red;">返回顶部</div>

    <script src="jquery-2.1.4.min.js"></script>
    <script >
        function  GoTop() {
            $(window).scrollTop(0);
        }
        $(window).scroll(function() {//滚动时监听
            var scrollTop = $(window).scrollTop();//获取滚条高度
            //console.log(scrollTop)
            if(scrollTop>48){
                $('#menu').addClass('fafafa');
            }else{
                $('#menu').removeClass('fafafa');
                $('#menu a').removeClass('active');
            }

            $('#content').children().each(function () {
                var eleTop = $(this).offset().top;//获取content下四个div标签距离文档顶部高度
                //console.log(eleTop)
                var winTop = eleTop - scrollTop;
                var winBottomTop = eleTop + $(this).height()- scrollTop;
                //console.log($(this).height()) 当前div的高度
                // 窗口的高度 $(window).height()
                // 文档的高度  $(document).height()
                var docHeight = $(document).height();
                //console.log($(window).height())//631
                var winHeight = $(window).height();
                //console.log($(document).height())//2499

                if(docHeight-winHeight == scrollTop){
                    // 到底部，给最后一个菜单加上active
                    $('#menu a:last').addClass('active').siblings().removeClass('active');
                }else{
                if(winTop<=0 && winBottomTop>0){
                    // 当前内容对应的菜单应该被选中
                    var a = $(this).attr('a');
                    $('#menu a[b="'+a+'"]').addClass('active').siblings().removeClass('active');
                    // 不再继续检测其他内容
                    return;
                }
            }
        })
    })
    </script>
</body>
</html>