jQuery 《基礎整合》 jQuery插件、jQueryAPI查詢網站-有解無憂

jQurey 的概念

jqurey 是一個快速簡潔的JavaScript庫設計的總之能是寫更少的代碼做更多的事情

j 就是JavaScript 、Qurey 查詢意思就是查詢js 把js 中的dom操作做了封裝我們可以快速的查詢使用里面的功能
jQurey 封裝了JavaScript常用的功能代碼優化了dom 的操作事件處理影片設計和Ajax 互動

jQurey 的入口函式

     1 等著頁面 DOM 加載完畢再去執行js代碼
     $(document).ready(function(){
        $('div').hide();
     })
   
     2.等著頁面 DOM 加載完畢再去執行js代碼

    $(function(){
        $('div').hide()
    })

在這里插入圖片描述

jquery物件和DOM物件

jQuery物件和DOM物件之間是可以相互轉換的
因為js原生比jQuery更大原生的一些屬性和方法jQuery沒有給我們封裝要使用這些方法和屬性需要吧jQuery物件轉換為DOM物件才能使用

DOM 物件轉換為jQuery物件
$('DOM’物件）
jQuery 物件轉換為DOM
$(‘div’)[index] index是索引號
$(‘div’).get（index）index是索引號

jQuery 常用API

jQuery 基礎選擇器

原生JS 獲取元素的方法很多很雜且兼容情況不一致因此jQuery給我們做了一些封裝獲取元素統一標準

$( " 選擇器"）里面選擇器直接寫css選擇器即可但是要加引號

jQuery 層級選擇器

在這里插入圖片描述

<body>
    <div class="nav"> nav /div </div>
    <div>   divvvvvv</div>
    <ul>
        <li> ul  li  </li>
        <li>  ul  li </li>
        <li> ul li</li>
    </ul>
    <ol>
        <li>ol /li </li>
        <li>ol /li </li>
        <li>ol /li </li>
    </ol>
    <script>
        $(function(){
            console.log($('.div'));
            console.log($("ul li"));
        })
    </script>
</body>

在這里插入圖片描述

隱式迭代

遍歷內部DOM元素（偽陣列形式儲存）的程序叫做隱式迭代
簡單理解在匹配到所有元素進行回圈遍歷執行相應的方法而不用我們在進行回圈簡化我們的操作方便呼叫

<body>
    <div> surprise</div>
    <div> surprise</div>
    <div> surprise</div>
    <div> surprise</div>
    <ul>
        <li>surprise 1</li>
        <li>surprise 1</li>
        <li>surprise 1</li>
        <li>surprise 1</li>
    </ul>
    <script>
        $("div").css("background","pink")    
        $("ul li ").css("color",'red')  
    </script>
</body>

在這里插入圖片描述

篩選選擇器

在這里插入圖片描述

<body>
    <ul>
        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
        <li>ul li 4</li>
        <li>ul li 5</li>
    </ul>
    <ol>
        <li>ol li 1</li>
        <li>ol li 2</li>
        <li>ol li 3</li>
        <li>ol li 4</li>
        <li>ol li 5</li>
    </ol>
    <script>
        $(function(){
            $('ul li:first').css('color','red')
            $('ul li:eq(3)').css('color','red')  
            $('ol li:odd').css('color','red')
            $('ol li:even').css('color','blue')
        })
    </script>
</body>

在這里插入圖片描述

jQuery 篩選方法

在這里插入圖片描述

<body>
    <div class="yey">
        yeye
      <div class="bab">
          babb
         <div class="erz">
             erz

         </div>
     </div>
    </div>
    <div class="nav">
        <p> P </p>
        <div>
            <p>  sp</p>
        </div>
    </div>
    <script>
        // 以下都是方法 都帶括號
        $(function(){
            // 父級 parent（） 回傳的是最近一級的父級
            console.log( $('.erz').parent());   
            // 子級 children（） 親兒子級  型別子代選擇器 ui> li
            // $('.nav').children('p').css('color','red')
            // 可以選擇 所以的 子級 find（） 類似于后代選擇器
            $('.nav').find('p').css('color','blue')
        })
    </script>
</body>

在這里插入圖片描述

jquery 案例下拉選單 HTML+css+jquery

<script src="jQuery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        li {
            list-style-type: none;
        }        
        a {
            text-decoration: none;
            font-size: 14px;
        }        
        .nav {
            margin: 100px;            
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 40px;
            text-align: center;
        }        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            color: #333;
        }        
        .nav>li>a:hover {
            background-color: #eee;
        }        
        .nav ul {
            display: none;
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#"> 李白</a>
            <ul>
                <li> <a href="#">刺客</a></li>
                <li> <a href="#">打野</a></li>
                <li> <a href="#">突進</a></li>
            </ul>
        </li>
    <script>
        $(function(){
            // 滑鼠經過
            $('.nav>li').mousemove(function(){
                // $(this) jQuery 當前元素 this不加引號
                // show（）顯示元素 hide（）隱藏元素
                $(this).children('ul').show();
            })
            // 滑鼠離開
            $('.nav>li').mouseout(function(){
                // $(this) jQuery 當前元素 this不加引號
                // show（）顯示元素 hide（）隱藏元素
                $(this).children('ul').hide();
            })        
        })
    </script>
</body>

在這里插入圖片描述

jQuery 排他思想

想要多選一的效果
排他思想：當前元素設定樣式兄弟元素清楚樣式

    <script src="jQuery.min.js"></script>
</head>
<body>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <script>
        $(function(){
            $("button").click(function(){
                $(this).css("background","skyblue");
                $(this).siblings("button").css("background","")
            })
        })
    </script>
</body>

在這里插入圖片描述

鏈式編程

鏈式編程是為了節省代碼量使代碼看起來更優雅

<body>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>
    <script>
        $(function(){
            // $("button").click(function(){
            //     $(this).css("background","skyblue");
            //     $(this).siblings("button").css("background","")
            // })
                   // 鏈式編程
            $(this).css("background","skyblue").sibling("button").css("background","")
        })

在這里插入圖片描述

jQuery 樣式操作 …操作CSS方法

jQuery 可以使用css方法修改簡單元素樣式也可以操作類修改多個樣式

只寫屬性名則回傳的是屬性值 $(this).css( " 屬性名")
引數是屬性名屬性值逗號分隔是設定一組樣式屬性必須加引號如果是數字可以不用加引號和單位 … $( this).css(“屬性名”,“屬性值”）
引數可以是物件形式方便設定多組樣式屬性值和屬性名冒號隔開非數字必須加引號

<style>
        div{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function(){
            //只寫屬性名 則回傳的是屬性值
           console.log( $("div").css("width")); 

            // 寫屬性名 和屬性值  逗號隔開屬性必須加引號
            // $("div").css("width","200px")

            // $("div").css("width",200)  //  屬性值可以不用加引號

            // 引數可以是物件形式 方便設定多組樣式 屬性值和屬性名 冒號隔開 非數字必須加引號
            $("div").css({
                width:200,
                height:200,
                backgroundColor:"skyblue"  // backgroundColor 使用駝峰命名法
            })
        })
    </script>
</body>

在這里插入圖片描述

設定類樣式方法

作用等同于以前的的classList 可以操作類樣式注意里面的引數不要會加點

1 添加類
$("div).addClass("類名”）
2 移除類
$('div).removeClass("類名”）
3 切換類
$('div).toggleClass("類名”）

 <style>
        div{
            width: 150px;
            height: 150px;
            background-color: orange;
            margin: 100px auto;
            transition: all 0.8s;
        }
        .nav{
            
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div ></div>
    <script>
        $(function(){

            // 1 添加類  addClass（“ ”）
            // $("div").click(function(){
            //     $(this).addClass("nav")
            // })

            // 2 洗掉類 removeClass(" ")
            // $("div").click(function(){
            //     $(this).removeClass("nav")
            // })

            // 3 切換類 toggleClass(" ")
            $("div").click(function(){
                $(this).toggleClass("nav")
            })
  
               
        })
    </script>
</body>

jQuery 效果

jquery給我們封裝了了很多影片效果

顯示和隱藏
show（）顯示
hide（）隱藏
toggle（）切換
滑動
slideDown（）
slideUp()
slideToggle()
淡入淡出
fadeIn（）
fadeOut()
fadeToggle()
fadeTo()
自定義影片
animate（）

顯示和隱藏效果

顯示語法規范

   show([speed,[easing],[fn]]

顯示引數

引數可以省略無影片效果直接顯示
speed:三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示影片時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用引數"linear"
fn:在影片完成時執行的函式，每個元素執行一次，

隱藏語法規范

   hide([speed,[easing],[fn]])

顯示引數

引數可以省略無影片效果直接顯示
speed:三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示影片時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用引數"linear"
fn:在影片完成時執行的函式，每個元素執行一次，

<script src="jQuery.min.js"></script>
    <style>
        div{
            width: 150px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>顯示</button>
    <button> 隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
        $(function(){
            // button 索引號為1 的 點擊事件
            $("button").eq(1).click(function(){
                $("div").hide(1000,function(){//點擊后 div 1000毫秒（1秒）隱藏  在執行回呼函式
                    alert(123)
                } )   
            })
            $("button").eq(0).click(function(){
                $("div").show(1000,function(){//點擊后 div 1000毫秒（1秒）顯示  在執行回呼函式
                    alert(456)
                } )   
            })
            $("button").eq(2).click(function(){
                $("div").toggle(1000,function(){//點擊后 div 1000毫秒（1秒）切換 在執行回呼函式
                    alert(789)
                } )   
            })

        })
    </script>

在這里插入圖片描述

滑動效果及事件切換

語法規范

 slideDown([speed],[easing],[fn])

顯示引數

引數可以省略無影片效果直接顯示
speed:三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示影片時長的毫秒數值(如：1000)
easing:(Optional) 用來指定切換效果，默認是"swing"，可用引數"linear"
fn:在影片完成時執行的函式，每個元素執行一次，

 <style>
        div{
            display: none;
            width: 150px;
            height: 300px;
            background-color: skyblue
        }
    </style>
</head>
<body>
    <button>下拉滑動</button>
    <button> 上拉滑動</button>
    <button>切換滑動 </button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown(1000)  // 下滑動
            })
             $("button").eq(1).click(function(){
                $("div").slideUp(1000)  // 上拉滑動
                
            })
             $("button").eq(2).click(function(){
                $("div").slideToggle(1000) // 切換
            })
        })
    </script>

在這里插入圖片描述

事件切換

       hover([over,]out)

over:滑鼠移到元素上要觸發的函式
out:滑鼠移出元素要觸發的函式

 $(".nav > li").hover(function(){  // 滑鼠經過和離開
                $(this).children("ul").slideToggle()
            })  
        })

影片或效果佇列

影片或效果一旦觸發就會執行如果多次快速觸發就會造成多個影片或效果排隊執行

停止排隊

stop（）用于停止影片一定要加到影片前面相當于停止上一次影片

$(".nav > li").hover(function(){  // 滑鼠經過
                $(this).children("ul").stop().slideToggle() // stop 停止影片 必須加到影片前面
            })

淡入和淡出

把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，并在影片完成后可選地觸發一個回呼函式，

這個影片只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化，
語法：

   fadeTo([[speed],opacity,[easing],[fn]])

speed:三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示影片時長的毫秒數值(如：1000)
opacity:一個0至1之間表示透明度的數字，
easing:(Optional) 用來指定切換效果，默認是"swing"，可用引數"linear"

 <script src="jQuery.min.js"></script>
    <style>
        div{
            display: none;
            width: 200px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>淡入</button>
    <button>淡出 </button>
    <button>切換</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").fadeIn(1000)    // 淡入
            })
            $("button").eq(1).click(function(){
                $("div").fadeOut(1000)    //淡出
            })
            $("button").eq(2).click(function(){
                $("div").fadeToggle(1000)   // 切換
            })
            $("button").eq(0).click(function(){
            // 時間和透明度必須要寫
                $("div").fadeTo(1000,0.5)    // 修改透明度
            })
        })
    </script>

在這里插入圖片描述
淡入淡出練習
高亮顯示

在這里插入圖片描述

<body>
    <div class="nav">
        <ul>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
            <li><img src="images/06.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        $(function(){
            // 第一個function 是滑鼠經過 第二個是滑鼠離開
            $(".nav li").hover(function(){
                 //siblings 查找兄弟節點不包括自己本身 除自己外其他兄弟節點透明降的到50%
                $(this).siblings().stop().fadeTo(200,0.5)    //停止影片排隊
            },function(){
                $(this).siblings().stop().fadeTo(200,1);  
            }) 
        })
    </script>
</body>

自定義影片

語法

  animate(params,[speed],[easing],[fn])

引數

params:一組包含作為影片屬性和終值的樣式屬性和及其值的集合
speed:三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示影片時長的毫秒數值(如：1000)
easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 “swing”.
fn:在影片完成時執行的函式，每個元素執行一次，

params 想要更改的樣式呢屬性以物件形式傳遞必須寫屬性名可以不用帶引號注意：所有指定的屬性必須用駱駝形式其他引數可以省略

案例自定義+淡入淡出

<script src="jQuery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .nav{
            margin: 100px auto;
            width: 800px;
            height: 69px;
            background: url(images/bg.png)no-repeat;
            padding-left: 10px;
        }
        img{
            display: block;
        }
        .nav ul {
            overflow: hidden;
        }
        .nav ul li{
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        .nav .current{
            width: 224px;
        }
        .small{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
        }
        .big{
            width: 224px;
            display: none;
        }
        .current .big{
            display: block;
        }
        .current .small {
            display: none;
        } 

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="current"> 
                <a href="#">
                    <img src="images/c.png" alt="" class="big">
                    <img src="images/c1.jpg" alt="" class="small">  
                </a>
            </li>
        </ul>
    </div>
    <script>
       $(function() {
            // 滑鼠經過某個小li 有兩步操作：
            $(".nav li").mouseenter(function() {
                // 1.當前小li 寬度變為 224px， 同時里面的小圖片淡出，大圖片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });
    </script>
</body>

在這里插入圖片描述

設定或獲取元素固有屬性值（prop）

元素固有屬性就是元素本身自帶的屬性比如< a > 元素里面的 href < input > 里邊的 type
獲取語法：

prop（“屬性”）

設定屬性語法：

prop（“屬性”，“屬性值”）

<body>
    <a href="http://www.baidu.com"   title="固定屬性">固定屬性 prop</a>
    <script>
        $(function(){
            // 獲取固定屬性 prop（ ）
           console.log($("a").prop("href")); 
           $("a").prop("title","設定固定屬性")

在這里插入圖片描述

設定或獲取元素自定義屬性 attr（）

用戶自己給元素添加的屬性稱為自定義屬性比如給div 添加index= “1”
獲取屬性語法：

attr （“屬性”） // 類似于原生getAttribute()

設定屬性語法：

 attr（“屬性”，“屬性值”） // 類似原生setAttribute()

<div index = "1">自定義屬性 attr</div>
			 //    自定義屬性 attr（）
           console.log($("div").attr("index"));    //  獲取自定義屬性
         $("div").attr("index","8");  // 修改自定義屬性

        })

在這里插入圖片描述

資料快取 data（）

data（）方法可以在指定的元素上存取資料并不會修改DOM元素結構一旦頁面重繪之前存放的資料將被移除
附加資料語法：

 data（“name”，“value“）  // 被選元素添加資料

獲取資料語法：

data（“name”）    // 向被選元素 獲取資料

同時還可以讀取HTML5 自定義屬性 date-index 得到的是數字型

  <span data-index="2"> 123</span>
  
   //    資料快取 data（）
            $("span").data("uname","red")
            console.log($("span").data("uname"));
            console.log($("span").data("index")); // 獲取H5自定義屬性 得到的是數字型
        })

在這里插入圖片描述

：checked 選擇器

：checked 查找被選中的表單元素
全選按鈕案例

<body>      
    <div>
        <input type="checkbox" name="" id="" class="all"> 全選
    </div>
    <div>
        <input type="checkbox" name="" id="" class="add"> 單選
    </div> 
    <div>
        <input type="checkbox" name="" id="" class="add"> 單選
    </div>  
    <div>
        <input type="checkbox" name="" id="" class="add"> 單選
    </div> 
    <div>
        <input type="checkbox" name="" id="" class="add"> 單選
    </div> 
    <div>
        <input type="checkbox" name="" id="" class="all"> 全選
    </div>

        <script>
            $(function(){
                $(".all").change(function(){
                    // console.log($(this).prop("checked"));  列印檢查 得到 true false

                    // 核心思路：當全選按鈕發生改變時 拿到全選按鈕的狀態 false 或true 判定是否選中

                    // 然后把拿到的狀態賦值給單選按鈕 同時讓另外一個全選按鈕一起發生變化

                    $(".add,.all").prop("checked",$(this).prop("checked") )
                });
                $(".add").change(function(){
                    // 被選中的單選復選框的個數
                    // console.log($(".add:checked").length); 列印查看

                    //  $(".add").length) 是所有單選復選框的個數
                    
                    // :checked回傳幾個復選框被選中
                    if($(".add:checked").length === $(".add").length){

                        $(".all").prop("checked",true)
                    }else{
                        $(".all").prop("checked",false)

                    }
                })
            })
        </script>
</body>

在這里插入圖片描述

jQuery 內容文本值

普通元素內容html() 相當于原生inner HTML
語法：

html()                 //  獲取元素內容 包含標簽
html( "內容")         // 設定元素內容

普通元素內容text()
語法：

text()                 //  獲取元素內容 不包含標簽
text( "內容")         // 設定元素內容

獲取設定表單值 val()
語法：

val()                 //  獲取表單值
val( "內容")         // 設定修改表單值

<body>
    <div>
        <span>132</span>
    </div>
    <input type="text" value="請輸入">
    <script>
        $(function(){
            // 獲取設定元素內容 HTML（）
            console.log($("div").html());  // <span>132</span> 帶有標簽 
            $("div").html("修改內容")

            // 獲取設定元素文本內容 text（）
            console.log($("div").text());  // 只有內容 沒有標簽
            $("div").text("text修改內容")

            // 獲取設定表單值 val()
            console.log($("input").val());  // 獲取表單值
            $("input").val("請輸入內容");  // 修改表單值

        })
    </script>
</body>

在這里插入圖片描述

jQuery 元素操作

主要遍歷、創建、添加、洗掉元素操作

遍歷元素

jQuery 隱式迭代是對同一類元素做來了同樣的操作如果想對同一類元素做不同的操作就需要遍歷
語法1：

 $("div") .each(function( index,domEle ){xxx;}

each（）方法遍歷匹配每一個元素主要用DOM 處理 each 每一個
里面的回呼函式有兩個引數 index是每個元素的索引號 domEle 是每個DOM元素物件不是jQuery物件
想要使用 jQuery方法需要給這個dom 元素轉換為jQuery 物件$（domEle）

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            var num = 0
            var arr = ['red','blue','pink' ]
            
            // each() 方法遍歷 元素
            $("div").each(function( i,domEle){
                // 回呼函式的第一個引數一定索引號 可以是自己指定索引號名稱
                console.log(i);
                // 回呼函式的第二個引數 一定是dom元素物件
                console.log(domEle);
                $(domEle).css('backgroundColor',arr[i])
               
                num += ($(domEle).text())-0   // -0 隱式轉換為數字型 也可以用parseInt
            })
            console.log(num);
            
        })
    </script>
</body>

在這里插入圖片描述
語法2:

$.each(物件，function（ index，element）{xxx}

$.each () 方法可用于遍歷任何物件主要用于資料處理比如陣列、物件
里面有兩個引數 index是索引號、element是遍歷內容

 $.each(arr,function( i,exe){    // 遍歷陣列
                console.log(i);
                console.log(exe);
            })

            $.each({          // 遍歷物件
                name:'Angle',
                age:'22'
            },function( i,exe){
                console.log(i);  //輸出的是屬性名
                console.log(exe); // 輸出的是屬性值
            })

在這里插入圖片描述

創建添加洗掉元素

創建元素
$("< li > 創建元素< / li>")
添加元素內部添加
內部添加 element.append（“內容”）內部添加并且放到內容最后面
內部添加 element.prepend（“內容”）內部添加并且放到內容最前面

外部添加
element.after（“內容”）把內容放到目標元素后面
element.before（“內容”）把內容放到目標元素前面

洗掉元素
element.remove（）洗掉匹配的元素本身
element.empty 洗掉匹配的元素集合所有的子節點
element（“”）清空匹配的元素內容

jQuery 尺寸

在這里插入圖片描述

引數為空則是獲取相應的值回傳的是數字型
如果引數為數字則是修改相應的值可以不用寫單位

jQuery 位置

位置主要有三個：offset（）、position（）、scrollTop()/scrollLeft()

offset ()設定或獲取元素偏移
offset（）方法設定或回傳被選元素相對于檔案的偏移坐標跟父級沒有關系
有兩個屬性 left 、top ,offset().top 用于獲取距離檔案頂部的距離,offset().left用于獲取距離檔案左側的距離可以設定元素偏移量offset（{top：10；left：10}）
position（）獲取帶有定位父級位置（偏移）如果父級沒有定位則以檔案為準這個方法只能獲取不能設定偏移
scrollTop()/scrollLeft() 設定被卷去的頭部和左側

jQuery 事件處理

事件處理 on（）系結事件
on（）方法在匹配元素上系結一個或多個事件處理函式
語法：

element.on(events,[selector],fn )

events一個或多個用空格分割的事件型別
selector 元素的子元素選擇器
fn 回呼函式系結在元素身上的偵聽函式

.nav{
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function(){
            // 事件處理 on（）
            // $("div").on({
            //     mouseover:function(){
            //         $(this).css("background", "red")
            //     },
            //     mouseout:function(){
            //         $(this).css("background", "pink")
            //     },
            //     click:function(){
            //         $(this).css("background", "green")
            //     }
            // })
            $("div").on("mouseover mouseout",function(){   // 添加類名  用空格隔開
                $(this).toggleClass("nav") 
            })
        })
    </script>
</body>

事件解綁 off（）

在選擇元素上移除一個或多個事件的事件處理函式，

off(events,[selector],[fn])

events:一個或多個空格分隔的事件型別和可選的命名空間，或僅僅是命名空間，比如"click", “keydown.myPlugin”, 或者 “.myPlugin”.
selector:一個最初傳遞到.on()事件處理程式附加的選擇器，
fn:事件處理程式函式以前附加事件上，或特殊值false.
$(“p”).off() 解綁P元素所有事件處理程式
$(“p”).off( “click” ) 解綁P元素上的點擊事件
$(“ul”).off(“click”,“li”); 解綁事件委托

如果事件只想觸發一次可以使用one（）來系結事件

one(type,[data],fn)    系結一個一次性的事件處理函式，

type:添加到元素的一個或多個事件，由空格分隔多個事件，必須是有效的事件，
data:將要傳遞給事件處理函式的資料映射
fn:每當事件觸發時執行的函式，

自動觸發事件

element.click（）第一種簡寫形式
element.trigger（“type” ）第二種自動觸發模式 type:一個事件物件或者要觸發的事件型別

jquery 物件拷貝

如果想要把某個物件拷貝（合并）給另外一個物件使用可以用$.extend()方法
語法：
$.extend([deep], target, object1, [objectN])

deep 如果設定為true 為深拷貝默認false 淺拷貝
target ：要拷貝的目標物件
object1：待拷貝的第一個物件的物件
淺拷貝就是把被拷貝的物件復雜資料型別中的地址拷貝給目標物件修改目標物件會影響被拷貝物件
深拷貝把里面的資料完全復制一份給目標物件如果里面有不沖突的屬性會合并到一起

jQuery 插件

jQuery之家：http://www.htmleaf.com/
jQuery庫：https://www.jq22.com/
使用步驟：
下載插件引入相關檔案 jQuery檔案和插件檔案
復制HTML css js 呼叫插件

jQuery API 查詢網站

https://jquery.cuishifeng.cn/index.html
在這里插入圖片描述

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

標籤：其他

上一篇：我如何做這個關于學生問候的javascript問題？

下一篇：JavaScript判斷輸入值是否為素數

jQuery 《基礎整合》 jQuery插件、jQueryAPI查詢網站

jQurey 的概念

jQurey 的入口函式

jquery物件和DOM物件

jQuery 常用API

jQuery 基礎選擇器

jQuery 層級選擇器

隱式迭代

篩選選擇器

jQuery 篩選方法

jquery 案例 下拉選單 HTML+css+jquery

jQuery 排他思想

鏈式編程

jQuery 樣式操作 …操作CSS方法

設定類樣式方法

jQuery 效果

顯示和隱藏效果

滑動效果及事件切換

影片或效果佇列

停止排隊

淡入和淡出

自定義影片

params 想要更改的樣式呢屬性 以物件形式傳遞 必須寫 屬性名可以不用帶引號 注意：所有指定的屬性必須用駱駝形式 其他引數可以省略

設定或獲取元素固有屬性值（prop）

設定或獲取元素自定義屬性 attr（）

資料快取 data（）

：checked 選擇器

jQuery 內容文本值

jQuery 元素操作

遍歷元素

創建 添加 洗掉 元素

jQuery 尺寸

jQuery 位置

jQuery 事件處理

事件解綁 off（）

自動觸發事件

jquery 物件拷貝

jQuery 插件

jQuery API 查詢網站

jquery 案例下拉選單 HTML+css+jquery

params 想要更改的樣式呢屬性以物件形式傳遞必須寫屬性名可以不用帶引號注意：所有指定的屬性必須用駱駝形式其他引數可以省略

創建添加洗掉元素