JavaScript——jQuery-有解無憂

一、jQuery簡介

1、什么是jQuery

#jQuery 是一個高效、精簡并且功能豐富的JavaScript工具庫
 #jQuery極大的簡化了JavaScript編程

2、為何要用jQuery

jQuery的優勢（jQuery的宗旨就是：“Write less, do more.“）
#1、開源 免費
#2、一款輕量級的JS框架，jQuery核心js檔案才幾十kb，不會影響頁面加載速度，
#3、便捷的選擇器與DOM操作，
#4、鏈式運算式，jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔，
#5、事件、樣式、影片支持，jQuery還簡化了js操作css的代碼，并且代碼的可讀性也比js要強，
#6、Ajax操作支持，jQuery簡化了AJAX操作，后端只需回傳一個JSON格式的字串就能完成與前端的通信，
#7、跨瀏覽器兼容，jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋，
#8、插件擴展開發，jQuery有著豐富的第三方的插件，例如：樹形選單、日期控制元件、圖片切換插件、彈出視窗等等基本前端頁面上的組件都有對應插件，并且用jQuery插件做出來的效果很炫，并且可以根據自己需要去改寫和封裝插件，簡單實用，

3 、jQuery版本

#1.x：兼容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增，因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
#2.x：不兼容IE678，很少有人使用，官方只做BUG維護，功能不再新增，如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
#3.x：不兼容IE678，只支持最新的瀏覽器，需要注意的是很多老的jQuery插件不支持3.x版，目前該版本是官方主要更新維護的版本，

#ps：維護IE678是一件讓人頭疼的事情，一般我們都會額外加載一個CSS和JS單獨處理，
　　　值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端用戶已經逐步被移動端用戶所取代，如果沒有特殊要求的話，一般都會選擇放棄對678的支持，

4 、jQuery相關網站

　　官網 https://jquery.com/

　　檔案API： http://jquery.cuishifeng.cn/index.html

二、Jquery基本使用

1、先下載到本地，然后參考，才能使用（推薦下載壓縮版）

#方式一：本地引入
<script src=https://www.cnblogs.com/guojieying/p/"jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之后，再使用jQuery提供的各種操作
</script>

#方式二：直接使用CDN
<script src=https://www.cnblogs.com/guojieying/p/"https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>

ps: BootCDN jQuery各個版本地址： https://www.bootcdn.cn/jquery/

2. jQuery物件

$是jQuery的別名
$物件可以用作選擇器獲取元素，還可以創建DOM物件

jQuery('.item').show()
//等同于
$('.item').show()

3. 檔案就緒事件

DOM檔案加載的步驟(重點)

決議HTML結構，
加載外部腳本和樣式表檔案，
決議并執行腳本代碼，
DOM樹構建完成，
加載圖片等外部檔案，
頁面加載完畢，

等待檔案加載完畢后執行函式，有兩種方式

#1、執行時間不同
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行，

$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢，

#2、撰寫個數不同
window.onload不能同時撰寫多個，如果有多個window.onload方法，只會執行一個

$(document).ready()可以同時撰寫多個，并且都可以得到執行

#3、簡化寫法不同
window.onload沒有簡化寫法

$(document).ready(function(){})可以簡寫成$(function(){});

4. 鏈式操作

#鏈式呼叫，原理就是 呼叫一個實體化方法回傳的是當前的物件
$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class')

5. jQueryDom和jsDom

#1、通過原生js獲取的dom物件，我們稱之為jsDOM或者原生DOM

#2、通過jQuery選擇器獲取的dom物件，我們稱之為 jQuery DOM

#3、jQuery DOM本質上 是由 jsDOM組成的集合，是個類陣列物件，可以通過 [索引] 獲取其中的jsDOM，$(jsDOM) 可以轉為 jQuery DOM如下
var box = document.getElementsByClassName('box'); #獲取js DOM物件
Js DOM物件 ==> JQ DOM物件$(js DOM物件)  # 例如 $(box)
JQ DOM物件 ==> JS DOM物件
$("選擇器")[0] # 或者$("選擇器").get(0)

三、選擇器

1、id選擇器

$("#id")

2、標簽選擇器

$("tagName")

3、class選擇器

$(".className")

4、所有元素選擇器

$("*")

5、交集選擇器

$("div.c1")  // 找到類為c1的div標簽

6、并集選擇器

$("#id, .className, tagName")

7、層級選擇器

//x和y可以為任意選擇器

$("x y");   // x的所有后代y（子子孫孫）
$("x > y"); // x的所有兒子y（兒子）
$("x + y")  // 找到所有緊挨在x后面的y
$("x ~ y")  // x之后所有的兄弟y

8、基本篩選器

:first // 第一個
:last // 最后一個
:eq(index)// 索引等于index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大于給定索引值的元素
:lt(index)// 匹配所有小于給定索引值的元素
:not(選擇器)// 過濾掉所有滿足not條件的標簽
:has(選擇器)// 過濾出所有后代中滿足has條件的標簽

#例如
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有！！！后代中！！！不含a標簽的li標簽

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }

        #bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            display: none;
        }
        #content {
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -150px;
            background-color: white;
            width: 300px;
            height: 200px;

        }
        #content p:nth-child(3) {
            position: absolute;
            top: 100px;
        }


    </style>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/guojieying/p/彈出" id="btn">
<div id="bg">
    <div id="content">
        <p>
            <label for="inp-username">用戶名: </label><input type="text" name="username" id="inp-username">
        </p>
        <p>
            <label for="inp-password">密碼: </label><input type="text" name="username" id="inp-password">
        </p>
        <p>
            <input type="button" value="https://www.cnblogs.com/guojieying/p/提交" >
            <input type="button" value="https://www.cnblogs.com/guojieying/p/取消" id="cancel">
        </p>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>

    $("#btn")[0].onclick=function () {
        $("#bg").css("display","block")
    }

    $("#cancel")[0].onclick=function () {
        $("#inp-username").val("")
        $("#inp-password").val("")
        $("#bg").css("display","none")
    }
</script>

</body>
</html>

JQ版自定義模態框

9、屬性選擇器

[attribute]
[attribute=value]// 屬性等于
[attribute!=value]// 屬性不等于

舉例

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox型別的input標簽
$("input[type!='text']");// 取到型別不是text的input標簽

表單常用篩選

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

舉例

$(":checkbox")  // 找到所有的checkbox

表單物件屬性:

:enabled
:disabled
:checked
:selected

舉例

找到可用的input標簽

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標簽

找到被選中的option：

<select id="s1">
  <option value="https://www.cnblogs.com/guojieying/p/beijing">北京市</option>
  <option value="https://www.cnblogs.com/guojieying/p/shanghai">上海市</option>
  <option selected value="https://www.cnblogs.com/guojieying/p/guangzhou">廣州市</option>
  <option value="https://www.cnblogs.com/guojieying/p/shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被選中的option

四、篩選器

下一個兄弟元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個兄弟元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查找

搜索所有與指定運算式匹配的元素，這個函式是找出正在處理的元素的后代元素的好方法，

$("div").find("p")  //等價于  $("div p")

篩選

篩選出與指定運算式匹配的元素集合，這個方法用于縮小匹配的范圍，用逗號分隔多個運算式，

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的  等價于  $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中洗掉與指定運算式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素，
.eq() // 索引值等于指定值的元素

舉例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .left {
            width: 20%;
            height: 100%;
            background-color: #30353c;
        }

        .title {
            /*width: 100%;*/
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: white;
            border-bottom: 1px solid #000;

        }

        .item {
            text-align: center;
            height: 30px;
            line-height: 30px;
            color: white;
            border-bottom: 1px solid #31353b;
            background-color: #191c20;

        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div >
    <div >
        <div >選單一</div>
        <div >
            <div >111</div>
            <div >222</div>
            <div >333</div>
        </div>
        <div >選單二</div>
        <div >
            <div >111</div>
            <div >222</div>
            <div >333</div>
        </div>
        <div >選單三</div>
        <div >
            <div >111</div>
            <div >222</div>
            <div >333</div>
        </div>

    </div>
</div>
<script src="https://www.cnblogs.com/guojieying/p/jquery-3.3.1.min.js"></script>
<script>
    $('.title').click(function () { // jQuery系結事件
        // 隱藏所有class里有.items的標簽
        $('.items').addClass('hide'); //批量操作
        $(this).next().removeClass('hide');
    })
</script>
</body>
</html>

左側選單示例

五、標簽操作之樣式操作

樣式類

addClass();      // 添加指定的CSS類名，
removeClass(); // 移除指定的CSS類名，
hasClass();      // 判斷樣式存不存在
toggleClass();  // 切換CSS類名，如果有就移除，如果沒有就添加，

CSS

css("color","red")   //DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red");     //將所有p標簽的字體設定為紅色

位置：

offset()       // 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position()    // 獲取匹配元素相對父元素的偏移
scrollTop()   // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()   // 獲取匹配元素相對滾動條左側的偏移
例1
$("#bb").offset({"left":100,"top":100}) 
例2
$(window).scrollTop(0);  // 跳到首頁

.offset()方法允許我們檢索一個元素相對于檔案（document）的當前位置，

和 .position()的差別在于： .position()是相對于相對于父級元素的位移，

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            width: 500px;
        }

        #button1 {
            width: 100px;
            height: 50px;
            background-color: #b9950c;
        }

        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        .button2 {
            width: 50px;
            height: 50px;
            background-color: #3a6696;
            position: fixed;
            right: 15px;
            bottom: 15px;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/guojieying/p/妹子走你" id="button1">
<div >
    <img src="https://img.uj5u.com/2020/09/24/101087242018563"
         alt="">
</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
<div >7</div>
<div >8</div>
<div >9</div>
<div >10</div>
<div >11</div>
<div >12</div>
<div >13</div>
<div >14</div>
<div >15</div>
<div >16</div>
<div >17</div>
<div >18</div>
<div >19</div>
<div >20</div>
<div >21</div>
<div >22</div>
<div >23</div>
<div >24</div>
<div >25</div>
<div >26</div>
<div >27</div>
<div >28</div>
<div >29</div>
<div >30</div>
<div >31</div>
<div >32</div>
<div >33</div>
<div >34</div>
<div >35</div>
<div >36</div>
<div >37</div>
<div >38</div>
<div >39</div>
<div >40</div>
<div >41</div>
<div >42</div>
<div >43</div>
<div >44</div>
<div >45</div>
<div >46</div>
<div >47</div>
<div >48</div>
<div >49</div>
<div >50</div>
<div >51</div>
<div >52</div>
<div >53</div>
<div >54</div>
<div >55</div>
<div >56</div>
<div >57</div>
<div >58</div>
<div >59</div>
<div >60</div>
<div >61</div>
<div >62</div>
<div >63</div>
<div >64</div>
<div >65</div>
<div >66</div>
<div >67</div>
<div >68</div>
<div >69</div>
<div >70</div>
<div >71</div>
<div >72</div>
<div >73</div>
<div >74</div>
<div >75</div>
<div >76</div>
<div >77</div>
<div >78</div>
<div >79</div>
<div >80</div>
<div >81</div>
<div >82</div>
<div >83</div>
<div >84</div>
<div >85</div>
<div >86</div>
<div >87</div>
<div >88</div>
<div >89</div>
<div >90</div>
<div >91</div>
<div >92</div>
<div >93</div>
<div >94</div>
<div >95</div>
<div >96</div>
<div >97</div>
<div >98</div>
<div >99</div>
<div >100</div>
<button id="button2" >回到頂部</button>
<script src="https://www.cnblogs.com/guojieying/p/jquery-3.3.1.min.js"></script>
<script>
    $('#button1').click(function () {
        $('.box2').offset({left: 300, top: 100});
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $('#button2').removeClass('hide');
        } else {
            $('#button2').addClass('hide');

        }
    });
    $('#button2').click(function () {
        $(window).scrollTop(0);
    });
</script>
</body>
</html>

回傳頂部示例

尺寸：

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/121179.html

標籤：jQuery

上一篇：專案中多個檔案引入同一份公共樣式less檔案導致編譯打包后有多份樣式

下一篇：Vue2 中三種邏輯復用方法

JavaScript——jQuery

三、 選擇器

三、選擇器