前端學習-jQuery

時間 2019-11-06

標籤前端學習 jquery 欄目 JQuery 简体版

原文原文鏈接

老師博客：https://www.cnblogs.com/yuanchenqi/articles/6070667.htmljavascript

day43,day44css

jquery 中文文檔：http://jquery.cuishifeng.cn/html

首先咱們得下載一個jquery文件 jquery-3.1.1.js,而後工程引入java

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

jquery的基礎語法：$(selector).action()

selector 是選擇器

jQuery 是什麼jquery

<1>jQuery 由 John Resig建立，至今已吸引了來自世界各地的衆多 javascript高手加入其team。數組

<2>jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!瀏覽器

<3>它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器框架

<4>jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，而且方便地爲網站提供AJAX交互。ide

<5>jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇函數

什麼是jQuery對象：
jQuery 對象就是經過jQuery包裝DOM對象後產生的對象。jQuery 對象是 jQuery 獨有的. 若是一個對象是 jQuery 對象, 那麼它就可使用 jQuery 裏的方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>

<div class="div1">hello world</div>
<script>
    $(".div1").css("color","red")
</script>
</body>
</html>

尋找元素(選擇器和篩選器)

3.1 選擇器

3.1.1 基本選擇器

$("*")                匹配全部標籤  
$("#id")              匹配id標籤    
$(".class")           匹配類標籤
$("element")  　　　　　按照標籤名字找，好比${"span"}
$(".class,p,div")     匹配多種類型的標籤


$(selector) 這個拿到的是一個對象，好比有多個同名class標籤，拿到的就是一個數組

3.1.2 層級選擇器

$(".outer div")    後代選擇器（outer 下的 div標籤，影響全部的後代）
$(".outer>div")    子代選擇器（隻影響子代）
$(".outer+div")    緊挨着的兄弟，且是向下的
$(".outer~div")    兄弟標籤，且是向下的，不用緊挨着（同級別中間隔了別的標籤也能夠）

3.1.3 基本篩選器

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

<ul> <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
//    $("li:first").css("color","red")   //第一個
//    $("li:eq(3)").css("color","red")   //這裏eq是從0-4
//    $("ul li:even").css("color","red")   //選中全部的基數
    $("ul li:lt(2)").css("color","red")   //index小於2（也就是0,1）
//    $("ul li:gt(1)").css("color","red")   //第二個之後的都選中

// $("ul li").gt(1).css("color","red") //推薦用這種，上面的全部篩選器均可以用 . 的方式，好比$("ul li").last 等等

</script>

3.1.4 屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>

<!--<div class="div1">hello world</div>-->
<!--<script>-->
    <!--$(".div1").css("color","red")-->
<!--</script>-->

<p id="s1" bigbao="xxx">hello world</p>
<p id="s2" bigbao="xxx">hello world</p>

<script>

//    $('[bigbao="xxx"]').css("color","red") // 自定義屬性bigbao=‘xxx’的所有選中
    $("[bigbao='xxx'][id='s1']").css("color","red")   //選中id爲s1,且自定義屬性bigbao的值是xxx的

</script>

</body>
</html>

3.1.5 表單選擇器

$("[type='text']")----->$(":text") 注意只適用於input標籤 : $("input:checked")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-3.1.1.js"></script>

<input type="text">
<input type="submit">

<script>

$(":text").css("width","300px")

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

查找篩選器*****

 $("div").children(".test") #只找到子代
 $("div").find(".test")  #找到後代中全部的 .test
                            
$(".test").next()    下一個標籤
$(".test").nextAll()    後面全部的
$(".test").nextUntil(「#end」)  直到id爲end的標籤結束
                           
$("div").prev()  上一個標籤
$("div").prevAll()  上面全部的
$("div").prevUntil("#start")   上面直到id爲start的結束
                        
$(".test").parent()  第一層父親
$(".test").parents()  全部的祖先
$(".test").parentUntil() 全部祖先，逐級向上，直到何時結束

$("div").siblings() 除了本身，找到其餘相鄰的

$("ul li").hasclass("test") 判斷某一個標籤內是否是含有class=test的篩選器

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

<script src="jquery-3.1.1.js"></script>
<script>
    console.log($("div").hasClass("div1"))
</script>
</body>
</html>

實例：左側菜單

實現點擊母菜單按鈕，羅列子菜單，其餘菜單隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 100%;
            height: 100%;

        }
        .menu{
            float: left;
            background-color: #2f4050;
            /*background-color: white;*/
            width: 15%;
            height: 1000px;
            font-size: 13px;
            color: whitesmoke;

        }
        .content{
            float: left;
            background-color: antiquewhite;
            width: 83%;
            height: 1000px;
            margin-left: 10px;
        }
        .title{
            background-color: yellowgreen;
            line-height: 30px;
            text-align: center;
        }
        .hide{
            display: none;
        }
    </style>

</head>
<body>
<script src="jquery-3.1.1.js"></script>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">用戶管理</div> <!-- onclick 綁定的函數 傳參數 關鍵字this，點擊後直接獲取到本次點擊的對象，而後傳給show函數 -->
            <div class="con">
                <div>查看用戶組</div>
                <div>查看用戶</div>
            </div>
        </div>
        <div class="item ">
            <div class="title" onclick="show(this)">資產管理</div>
            <div class="con hide">
                <div>查看資產組</div>
                <div>查看資產</div>
                <div>查看機房</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">受權管理</div>
            <div class="con hide">
                <div>Sudo</div>
                <div>系統用戶</div>
                <div>受權</div>
            </div>
        </div>
        <div class="item ">
            <div class="title" onclick="show(this)">上傳下載</div>
            <div class="con hide">
                <div>文件上傳</div>
                <div>文件下載</div>
            </div>
        </div>
    </div>
    <div class="content"></div>

    <script>
        function show(self) {  // 這裏的self 就是點擊的標籤對象,咱們要取消點擊標籤的hide,其餘標籤添加hide屬性，咱們先找到咱們點擊標籤的parent,而後利用parent的siblings,再找到他們的孩子的con標籤
                $(self).next().removeClass("hide"); //
                $(self).parent().siblings().children(".con").addClass("hide"); //這裏有hide就不添加，沒hide就添加
        }
    </script>
</div>
</body>
</html>