丰满女邻居做爰bd的小说,H工口全彩里番库18禁无遮挡,少妇泬出白浆18p

jQuery理解

jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。jQuery解決了瀏覽器的兼容性問題，當你學會這些知識點后，使用jQuery操作DOM會更加的簡單、便捷。

案例地址: https://github.com/pengjunshan/WebPJS/Jquery

其它Web文章
HtmlCss基礎學習第一章
 CSS基礎學習第二章
 CSS浮動的使用和解決浮動的五種方法
 CSS定位relative、absolute、fixed使用總結(jié)
原生開發(fā)WebApi知識點總結(jié)
C3動畫+H5+Flex布局使用總結(jié)
ES6常用知識總結(jié)
Vue學習知識總結(jié)
開發(fā)環(huán)境到生產(chǎn)環(huán)境配置webpack
待續(xù)......

本編文章會講到的知識點

JavaScript和jQuery對比
jQuery選擇器
jQuery操作樣式
jQuery操作屬性
jQuery動畫
jQuery操作DOM節(jié)點
jQuery操作其它屬性
jQuery事件機制
jQuery對象與DOM對象之間的轉(zhuǎn)換
其它知識點

為什么用jQuery?

js缺點.png

JavaScript和jQuery對比

1.不同處對比

不同處	JavaScript	jQuery
入口函數(shù)	只能有一個，如果有多個，后面的會覆蓋前面	可以有多個，并且不會發(fā)生覆蓋的情況
代碼容錯性	代碼容錯性差，代碼出現(xiàn)錯誤，會影響到后面代碼的運行。	代碼容錯性好，屏蔽錯誤，并且不會影響后面代碼的運行。
瀏覽器兼容性	兼容性差，比如火狐不支持innerText	對瀏覽器兼容性做了封裝，因此不存在兼容性問題
操作復雜性	DOM操作復雜，對于一些簡單的動畫效果，實現(xiàn)起來比較麻煩	DOM操作簡單，支持隱式迭代，實現(xiàn)動畫非常簡單。

2.怎樣使用jQuery？

官網(wǎng)下載地址：http://jquery.com/download/
jquery大版本分為1.x和2.x和3.x
區(qū)別：2.x3.x版本不再支持IE6/7/8，在中國，用的最多的還是1.x版本
jQuery3是jQuery的未來，如果你需要兼容IE6-8，你可以繼續(xù)使用1.12版本。

引包（引入jQuery文件）

<script type="text/javascript" src="jquery-1.12.4.js"></script>

入口函數(shù)

//原生JS的入口函數(shù)
window.onload = function(){
}
//JQ方式一
$(function(){
}
//JQ方式二
$(document).ready(function () {
});

功能實現(xiàn)

$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

3.對比JavaScript的入口函數(shù)jQuery的入口函數(shù),執(zhí)行時機

JavaScript的入口函數(shù)要等到頁面中所有資源（包括圖片、文件）加載完成才開始執(zhí)行。
2.jQuery的入口函數(shù)只會等待文檔樹加載完成就開始執(zhí)行，并不會等待圖片、文件的加載。

4.了解jQuery的$符號

其實$就是一個函數(shù)：$();參數(shù)不一樣，功能不一樣!
$常用的幾種情況：
$(function() {});//參數(shù)是function，說明是入口函數(shù)
$(“#btnSetConent”);//參數(shù)是字符串，并且以#開頭，是一個標簽選擇，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//將document轉(zhuǎn)換成jQuery對象

$ === jQuery,也就是說能用$的地方，完全可以用jQuery，$僅僅是簡寫形式。

jQuery選擇器

1.jQuery選擇器概述

jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。
jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多更加復雜的選擇器。【查看jQuery文檔】
jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數(shù)的最常用的選擇器。

2.基本選擇器

跟css的選擇器用法一模一樣。

名稱	用法	描述
ID選擇器	$(“#id”);	獲取指定ID的元素
類選擇器	$(“.class”);	獲取同一類class的元素
標簽選擇器	$(“div”);	獲取同一類標簽的所有元素
并集選擇器	$(“div,p,li”);	使用逗號分隔，只要符合條件之一就可。獲取所有的div、p、li元素
交集選擇器	$(“div.redClass”);	注意選擇器1和選擇器2之間沒有空格，class為redClass的div元素，注意區(qū)分后代選擇器。

3.層級選擇器

跟css的選擇器用法一模一樣。

名稱	用法	描述
子代選擇器	$(“ul>li”);	用>號，獲取兒子層級的元素，注意，并不會獲取孫子層級的元素
后代選擇器	$(“ul li”);	使用空格，代表后代選擇器，獲取ul下的所有l(wèi)i元素，包括孫子等

4.過濾選擇器

這類選擇器都帶冒號：

名稱	用法	描述
:eq（index）	$(“l(fā)i:eq(2)”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。
:odd	$(“l(fā)i:odd”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號為奇數(shù)的元素
:even	$(“l(fā)i:even”).css(“color”, ”red”);	獲取到的li元素中，選擇索引號為偶數(shù)的元素
:checked	$(' input:checked');	獲取所有input元素中，勾選的元素
:button	$("input:button")	所有 type="button" 的 <input> 元素
:selected	$("option:selected")	所有option選中的元素

5.篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。

名稱	用法	描述
children(selector)	$(“ul”).children(“l(fā)i”)	相當于$(“ul>li”)，子類選擇器
find(selector)	$(“ul”).find(“l(fā)i”);	相當于$(“ul li”),后代選擇器
siblings(selector)	$(“#first”).siblings(“l(fā)i”);	查找兄弟節(jié)點，不包括自己本身。傳參指定類型節(jié)點，不傳參所有兄弟節(jié)點
parent()	$(“#first”).parent();	查找父親
eq(index)	$(“l(fā)i”).eq(2);	相當于$(“l(fā)i:eq(2)”),index從0開始
next()	$(“l(fā)i”).next()	找下一個兄弟
prev()	$(“l(fā)i”).prev()	找上一次兄弟

6.其它常用選擇器

名稱	用法	描述
[type=value]	$("input[type=button]")	找type是button類型的input元素
"*"	$(".box *")	box對象下所有的元素
:gt(3)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(3)	$("ul li:lt(3)")	列出 index 小于 3 的元素

7.案例

用了上面所有的選擇器類型，案例請到https://github.com/pengjunshan/WebPJS中查看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>選擇器</title>
    <script src="jquery-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li class="xyy">喜羊羊</li>
        <li>懶羊羊</li>
        <li>沸羊羊</li>
        <li id="myy">慢羊羊</li>
        <li>灰太狼</li>
        <li>紅太狼</li>
    </ul>

    <div class="xyy">灰太狼</div>

    <div class="father">爸爸
        <div class="son">兒子
            <div class="grandson">孫子</div>
        </div>
        <p>ppp</p>
        <span></span>
    </div>

    <script>
        $(function(){
            /**
            *  基本選擇器
            */
            //ID選擇器
            let $myy = $("#myy");
            console.log($myy)

            //類選擇器
            let $xyy = $(".xyy");
            console.log($xyy)

            //標簽選擇器
            let $li = $("li");
            console.log($li)

            //并集選擇器
            let $bj = $(".xyy,#myy");
            console.log($bj)

            //交集選擇器
            let $jj = $("div.xyy");
            console.log($jj)

            /**
            *   層級選擇器
            */
            //子代選擇器
            let $zd = $(".father>div")
            console.log($zd)

            //后代選擇器
            var $hd = $(".father div")
            console.log($hd)

            /**
            *   過濾選擇器
            */
            //:eq（index）
            let $eq = $("li:eq(2)")
            console.log($eq)

            //:odd
            let $odd = $("li:odd")
            console.log($odd)
            

            //:even
            let $even = $("li:even")
            console.log($even)
            $even.css("color","red")

            /**
            *   篩選選擇器(方法)
            */
            //children(selector) 相當于子代選擇器
            let $children = $(".father").children("div")
            console.log($children)

            //find(selector) 相當于后代選擇器
            let $find = $(".father").find("div")
            console.log($find)

            //siblings(selector) 無參所有兄弟節(jié)點 有參指定節(jié)點
            // let $siblings = $(".son").siblings()
            let $siblings = $(".son").siblings("p")
            console.log($siblings)

            //parent()
            let $parent = $(".son").parent()
            console.log($parent)

            //eq(index)
            let $eq2 = $("li").eq(2)
            console.log($eq2)

            //next()
            // let $next = $("#myy").nextAll()
            let $next = $("#myy").next()
            console.log($next)

            //prev()
            let $prev = $("#myy").prev()
            console.log($prev)

        })
    </script>
</body>

</html>

jQuery操作樣式

1.css操作

設置或者修改樣式，操作的是style屬性。

設置單個樣式

css(name, value);name：需要設置的樣式名稱 value：對應的樣式值

 $(".box").css("background-color", "red");

設置多個樣式

css(obj);參數(shù)是一個對象，對象中包含了需要設置的樣式名和樣式值

 $(".box").css({
            "background-color": "gray",
            "width": "200px",
            "height": "200px"
        })

獲取樣式

$(".box").css(name); name是樣式的名稱

let width = $(".box").css("width")
console.log(width)

注意
1.設置操作的時候，如果是多個元素，那么給所有的元素設置相同的值
2.獲取操作的時候，如果是多個元素，那么只會返回第一個元素的值。

2.class操作

添加樣式類

addClass(name); name：需要添加的樣式類名，注意參數(shù)不要帶點.

  $(".dd").addClass("pp")

移除樣式類

removeClass(name); name:需要移除的樣式類名

 $(".dd").removeClass("pp")

判斷是否有樣式類

hasClass(name); name:用于判斷的樣式類名，返回值為true false

console.log($(".dd").hasClass("pp"))

切換樣式類

toggleClass(name); name:需要切換的樣式類名，如果有，移除該樣式，如果沒有，添加該樣式。

 $(".dd").toggleClass("pp")

3.案例

切換tab欄，案例請到https://github.com/pengjunshan/WebPJS中查看

切換tab欄案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }
        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }
        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }
        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }
        .products {
            width: 400px;
            border: 1px solid #ddd;
            height: 200;
        }
        .products .main {
            width: 400px;
            height: 200px;
            float: left;
            display: none;
        }
        .products .main.selected {
            display: block;
        }
        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">國際大牌<span>◆</span></li>
            <li class="tab-item">國妝名牌<span>◆</span></li>
            <li class="tab-item">清潔用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="red main selected" style="background-color: red;">
            </div>
            <div class="blue main" style="background-color: blue;">
            </div>
            <div class="gree main" style="background-color: green;">
            </div>
            <div class="yellow main" style="background-color: yellow;">
            </div>
        </div>
    </div>

    <script>
       let $lis =  $(".tab>li");
       let $div = $(".products>div");
       $lis.mouseenter(function(){
           $(this).addClass("active").siblings().removeClass("active");
           $div.eq($(this).index()).addClass("selected").siblings().removeClass("selected");
       })
    </script>
</body>
</html>

jQuery操作屬性

1.attr操作

設置單個屬性

$().attr(name, value); name:需要設置的屬性名,value:對應的屬性值

$box.attr("name","名字");

設置多個屬性

$().attr(obj); 參數(shù)是一個對象，包含了需要設置的屬性名和屬性值

 $box.attr({
           "title":"頭",
           "aa":"111"
       })

獲取屬性

attr(name); name傳需要獲取的屬性名稱，返回對應的屬性值

 console.log($box.attr("name"))

移除屬性

removeAttr(name); name需要移除的屬性名，如果傳空，那么不會有任何操作
注意，并不是移除所有的屬性。區(qū)分removeClass。

 $box.removeAttr("aa")

注意
1.設置屬性時，如果是多個元素，給所有的元素設置相同的屬性
2.獲取屬性時，只會獲取到第一個元素對應的屬性，與css方法一樣
3.獲取屬性時，如果該屬性不存在，那么會返回undefined
案例

美女相冊，代碼中詳細注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

attr案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1 {
            color: #333;
            background-color: transparent;
        }
        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        ul {
            padding: 0;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {
            list-style: none;
        }
        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }
        #imagegallery li a img {
            border: 0;
        }
        #des {
            font-size: 28sp;
            color: red;
        }
    </style>
</head>

<body>
    <h2>
        美女畫廊
    </h2>

    <ul id="imagegallery">
        <li><a href="../img/1.jpg" title="美女A">
                <img src="../img/1-small.jpg" width="100" alt="美女1" />
            </a></li>
        <li><a href="../img/2.jpg" title="美女B">
                <img src="../img/2-small.jpg" width="100" alt="美女2" />
            </a></li>
        <li><a href="../img/3.jpg" title="美女C">
                <img src="../img/3-small.jpg" width="100" alt="美女3" />
            </a></li>
        <li><a href="../img/4.jpg" title="美女D">
                <img src="../img/4-small.jpg" width="100" alt="美女4" />
            </a></li>
    </ul>
    <div style="clear:both"></div>
    <img id="image" src="../img/placeholder.png" alt="" width="450px" />
    <p id="des">選擇一個圖片</p>

    <script>
        //獲取所有的相冊a標簽
        let $aList = $("#imagegallery>li>a");
        let $image = $("#image")
        let $des = $("#des")

        //給所有的a標簽注冊點擊事件
        $aList.click(function () {
            //獲取當前點擊的a標簽屬性
            let $href = $(this).attr("href")
            let $title = $(this).attr("title")

            //給大圖賦值點擊的圖片 賦值title名字
            $image.attr("src", $href)
            $des.text($title)

            //阻止跳轉(zhuǎn)
            return false;
        })
    </script>
</body>

</html>

2.prop操作

在jQuery1.6之后，對于checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法。

設置屬性

prop(name,value); name:boolean類型屬性，value:布爾值

$input.prop("checked",true)

獲取屬性

prop(name); name:boolean類型屬性

 console.log($input.prop("checked"))

案例

全選、反選，代碼中詳細注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

全選反選案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }
        td {
            font: 14px "微軟雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
            text-align: center;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>菜名</th>
                    <th>飯店</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>紅燒肉</td>
                    <td>田老師</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西紅柿雞蛋</td>
                    <td>田老師</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>紅燒獅子頭</td>
                    <td>田老師</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>日式肥牛</td>
                    <td>田老師</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>

        //獲取全選和菜單的input對象
        let $allCheck = $("#j_cbAll")
        let $checkList = $("#j_tb input")

        //給全選添加點擊事件
        $allCheck.click(function (e) {
            //獲取全選input的狀態(tài)
            let $isCheck = $(this).prop("checked")
            if ($isCheck) {//true:給所有的input都夠勾選上
                $checkList.prop("checked", true)
            } else {//fale:給所有的input都不勾選
                $checkList.prop("checked", false)
            }
        })

        //給所有的input注冊點擊事件
        $checkList.click(function () {
            //獲取input的總數(shù)
            let $size = $checkList.length;
            //獲取選中input的總數(shù)
            let $checkSize = $("#j_tb input:checked").length
            //判斷input總數(shù)是否等于選中的input總數(shù)
            if ($size === $checkSize) {
                $allCheck.prop("checked", true)
            } else {
                $allCheck.prop("checked", false)
            }
        })
    </script>
</body>
</html>

jQuery動畫

1.顯示(show) 與隱藏(hide)

show(speed,callback); speed:動畫時長單位毫秒(可傳可不傳)，callback：動畫執(zhí)行完后回調(diào)(可傳可不傳);
show(); 如果不傳遞參數(shù) 直接顯示和隱藏沒有動畫;
stop(); 此方法是停止動畫執(zhí)行，用途:當手速比較快時，同一個動畫會執(zhí)行多次;
show/hide：修改的是元素的width、height、opacity。

      $(".input1").click(function(){
            //判斷當前是隱藏還是顯示
            if($(this).val() === "顯示"){
                $(this).val("隱藏")
                $(".box1").stop().show(1000,function(){
                    console.log("顯示了")
                })

            }else{
                $(this).val("顯示")
                $(".box1").stop().hide(1000,function(){
                    console.log("隱藏了")
                })
            }
        })

2.滑入(slideUp)與滑出(slideDown)

slideUp(speed, callback); speed:動畫時長單位毫秒(可傳可不傳)，callback：動畫執(zhí)行完后回調(diào)(可傳可不傳)
slideUp(); 如果不傳參數(shù)，speed默認是400;
stop(); 此方法是停止動畫執(zhí)行，用途:當手速比較快時，同一個動畫會執(zhí)行多次;
slideToggle(speed,callback); 如果是隱藏狀態(tài)，那么執(zhí)行slideDown操作，如果是顯示狀態(tài)，那么執(zhí)行slideUp操作。
slideUp/slideDown：修改的是元素的height;

        $(".input2").click(function(){
            //方式一：slideToggle()
            $(".box2").stop().slideToggle();
            //方式二：判斷當前是隱藏還是顯示
            if($(this).val() === "顯示"){
                $(this).val("隱藏")
                $(".box2").stop().slideDown(400,function(){
                    console.log("顯示了")
                })
            }else{
                $(this).val("顯示")
                $(".box2").stop().slideUp(400,function(){
                    console.log("隱藏了")
                })
            }
        })

3.淡入(fadeIn)與淡出(fadeOut)

fadeIn(speed, callback); speed:動畫時長單位毫秒(可傳可不傳)，callback：動畫執(zhí)行完后回調(diào)(可傳可不傳);
fadeIn(); 如果不傳參數(shù)，speed默認是400;
fadeToggle(speed, callback); 如果當前元素處于隱藏狀態(tài)，那么執(zhí)行fadeIn操作，如果處于顯示狀態(tài)，那么執(zhí)行fadeOut操作;
fade系列方法：修改的是元素的opacity;

         $(".input3").click(function(){
            //方式一: fadeToggle()
            $(".box3").stop().fadeToggle();
            //方式二: 判斷當前是隱藏還是顯示
            if($(this).val() === "顯示"){
                $(this).val("隱藏")
                $(".box3").stop().fadeIn(400,function(){
                    console.log("顯示了")
                })
            }else{
                $(this).val("顯示")
                $(".box3").stop().fadeOut(400,function(){
                    console.log("隱藏了")
                })
            }
        })

4.自定義動畫

$(selector).animate({params},speed,easing,callback);
1.{params}：要執(zhí)行動畫的CSS屬性，帶數(shù)字（必選）
2.speed：執(zhí)行動畫時長（可選）
3.easing：執(zhí)行速度(可選) “swing”：在開頭和結(jié)尾移動慢，在中間移動速度快 “l(fā)inear”：勻速移動
4.callback：動畫執(zhí)行完后立即執(zhí)行的回調(diào)函數(shù)（可選）

       $(".input4").click(function () {
            $(".box4").animate({
                left: 400,
                width: 400,
                height: 400,
            },3000,"swing",function(){
                console.log("執(zhí)行完畢")
            })
        })

5.案例

下拉菜單案例、鋼琴版導航條、手風琴案例，代碼中詳細注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

動畫案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin-top: 50px;
            margin-left: 50px;
            background-image: url(../img/bg.jpg);
        }

        .wrap li {
            background-image: url(../img/libg.jpg);
        }

        .wrap>ul>li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }

        .nav {
            width: 800px;
            height: 60px;
            background-color: black;
            margin-left: 400px;
        }

        .nav li {
            width: 100px;
            height: 60px;
            /*border: 1px solid yellow;*/
            float: left;
            position: relative;
            overflow: hidden;
        }

        .nav a {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 24px;
            color: blue;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            z-index: 2;
        }

        .nav span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            top: 60px;
        }
       .hd ul {
            list-style: none;
        }

        .hd {
            width: 1200px;
            height: 320px;
            border: 2px solid red;
            margin: 100px auto;
        }

        .hd li {
            width: 240px;
            height: 320px;
            /*border: 1px solid #000;*/
            float: left;
        }
    </style>
</head>

<body>

    <!-- 案例一：下拉菜單案例  -->
    <div class="wrap">
        <ul>
            <li>
                <a href="javascript:void(0);">一級菜單1</a>
                <ul class="ul">
                    <li><a href="javascript:void(0);">二級菜單11</a></li>
                    <li><a href="javascript:void(0);">二級菜單12</a></li>
                    <li><a href="javascript:void(0);">二級菜單13</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一級菜單2</a>
                <ul>
                    <li><a href="javascript:void(0);">二級菜單21</a></li>
                    <li><a href="javascript:void(0);">二級菜單22</a></li>
                    <li><a href="javascript:void(0);">二級菜單23</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一級菜單3</a>
                <ul>
                    <li><a href="javascript:void(0);">二級菜單31</a></li>
                    <li><a href="javascript:void(0);">二級菜單32</a></li>
                    <li><a href="javascript:void(0);">二級菜單33</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 案例二：鋼琴版導航條 -->
    <div class="nav">
        <ul>
            <li><a href="javascript:void(0);">導航1</a><span></span></li>
            <li><a href="javascript:void(0);">導航2</a><span></span></li>
            <li><a href="javascript:void(0);">導航3</a><span></span></li>
            <li><a href="javascript:void(0);">導航4</a><span></span></li>
            <li><a href="javascript:void(0);">導航5</a><span></span></li>
            <li><a href="javascript:void(0);">導航6</a><span></span></li>
            <li><a href="javascript:void(0);">導航7</a><span></span></li>
            <li><a href="javascript:void(0);">導航8</a><span></span></li>
        </ul>

        <div>
            <audio src="../img/a1.mp3"></audio>
            <audio src="mp3/a2.mp3"></audio>
            <audio src="mp3/a3.mp3"></audio>
            <audio src="mp3/a4.mp3"></audio>
            <audio src="mp3/a5.mp3"></audio>
            <audio src="mp3/a6.mp3"></audio>
            <audio src="mp3/a7.mp3"></audio>
            <audio src="mp3/a8.mp3"></audio>
        </div>
    </div>

    <!-- 案例三：手風琴案例 -->
    <div class="hd">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        $(function () {

            // 案例一：下拉菜單案例
            //1.獲取wrap>ul>li
            let $lis = $(".wrap>ul>li");

            //2.給li集合注冊mouseenter事件顯示
            $lis.mouseenter(function () {
                $(this).find("ul").stop().slideDown();
            })

            //2.給li集合注冊mouseleave事件隱藏
            $lis.mouseleave(function () {
                $(this).children("ul").stop().slideUp();
            })
        })

        //案例二：鋼琴版導航條 
        //1.先獲取nav>ul>li集合和audio集合
        let $navList = $(".nav>ul>li");
        let $audios = $("audio");

        //2.給$navList注冊mouseenter事件
        $navList.mouseenter(function () {
            $(this).children("span").stop().animate({ top: 0 }, 500);
            let index = $(this).index();
            //play是DOM的方法 所以需要進行對象轉(zhuǎn)換
            $audios[index].load();
            $audios.get(index).play();
        }).mouseleave(function () {
            $(this).children("span").stop().animate({ top: 60 }, 500);
        })

        //案例三：手風琴
        //1.先獲取所有的li 和 外部的div
        let $hdLi = $(".hd>ul>li")
        let $hd = $(".hd")
        //2.給每個li設置css樣式backgroundImage
        for(let i = 1; i<=$hdLi.length;i++){
            $hdLi.eq(i-1).css('backgroundImage','url(images/'+ i +'.jpg)')
            $hdLi.eq(i-1).css('backgroundImage','url(images/'+ i +'.jpg)');
        }
        //3.給$hdLi添加mouseenter事件
        $hdLi.mouseenter(function(){
            //讓當前元素的寬度變成800（動畫）同時讓兄弟元素的寬度變成100 
            $(this).stop().animate({width:800},300).siblings().stop().animate({width:100},300)
        })
        //4.給$hd注冊離開事件 一旦離開的區(qū)域 讓所有的li元素都回到240 的寬度
        $hd.mouseleave(function(){
            $hdLi.stop().animate({width:240},300)
        })
    </script>
</body>
</html>

jQuery操作DOM節(jié)點

1.創(chuàng)建元素

$(htmlStr); htmlStr：html格式的字符串

 var $s = $("<span>這是一個span元素</span>");
 console.log($s)

2.添加元素

$(father).append(sonHtml); father:添加到father標簽中 sonHtml：要添加的元素html字符串;
append()方法是添加到父級的最后面
prepend()方法是添加到父級的最前面

 $(".box").append("<span>我到最前面</span>");
 $(".box").prepend("<span>我到最后面</span>");

son.appendTo($(father)); 子元素添加到父元素中;
appendTo和prependTo方法和append方法和prepend的作用是一模一樣的，只不過是調(diào)用的對象顛倒了而已;

 var p = $('<p>我是一個p</p>');
 var p1 = $('<p>我是二個p</p>');
 p.prependTo($(".box"))
 p1.appendTo($(".box"))

before方法是在當前元素的前面添加（與當前元素是兄弟關系）;
after方法是在當前元素的后面添加（與當前元素是兄弟關系）;

 var p2 = $('<p>我是三個p</p>');
 var p3 = $('<p>我是四個p</p>');
 $(".box").before(p2)
 $(".box").after(p3)

3.清空元素

empty()：清空指定節(jié)點的所有元素，自身保留(清理門戶)

 $(".xm").empty();

4.刪除元素

remove()：相比于empty()，自身也刪除（自殺）

 $(".xm").remove();

5.克隆元素

clone(true); 參數(shù)：布爾值不管是false還是true 都是深拷貝;
false 不會復制元素身上的事件; true 會復制元素身上的事件;
返回值為復制的新元素，和原來的元素沒有任何關系了。即修改新元素，不會影響到原來的元素。

let $new = $(".box>p").clone()
$(".box").append($new)

jQuery操作其它屬性

1.val()方法

val();方法用于設置和獲取表單元素的值，例如input、select、textarea的值

 $(".in").val("吃燴面")
 console.log($(".in").val())

2.html()方法

html(htmlStr)方法可以識別標簽; htmlStr：標簽字符串

 $(".box").html("<p>我是Html</p>")

3.text()方法

text(htmlStr)方法不可以識別標簽; htmlStr：字符串

$(".box").text("<p>我是Html</p>")

4.height()、width()

height(number)設置或者獲取高度， number:可傳可不傳；
width(number)設置獲取獲取寬度， number:可傳可不傳；
返回值是number類型（比如200），對比$(“img”).css(“width”)返回的是字符串（比如200px）；

$(".box").height(200)
console.log($(".box").height())
$(".box").width(200)
console.log($(".box").width())

5.scrollTop() scrollLeft()

scrollTop(number)；傳參設置垂直滾動條的位置，不傳承獲取垂直滾動條的位置;
scrollLeft(number);傳參設置水平滾動條的位置，不傳參獲取水平滾動條的位置;
mumber:參數(shù)為數(shù)值類型

 $(window).scrollTop(700);
 console.log($(window).scrollTop())
$(window).scrollLeft(300)
console.log($(window).scrollLeft())

案例

本案例主要是用了jquery操作DOM節(jié)點和其它屬性方法知識點，代碼中詳細注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

jquery操作dom節(jié)點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }

        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 200%;
            font-family: "微軟雅黑";
            font-size: 62.5%;
        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }

        .actGotop {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 150px;
            height: 195px;
            display: none;
            z-index: 100;
        }

        .actGotop a,
        .actGotop a:link {
            width: 150px;
            height: 195px;
            display: inline-block;
            background: url(images/gotop.png) no-repeat;
            outline: none;
        }

        .actGotop a:hover {
            width: 150px;
            height: 195px;
            background: url(images/gotop.gif) no-repeat;
            outline: none;
        }
    </style>
</head>

<body>
    <!-- 案例一：城市選擇 -->
    <h1>城市選擇：</h1>
    <select id="src-city" name="src-city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">廣州</option>
        <option value="5">西紅柿</option>
    </select>
    <div class="btn-box">
        <button id="btn1"> &gt;&gt; </button>
        <button id="btn2"> &lt;&lt; </button>
        <button id="btn3"> &gt;</button>
        <button id="btn4"> &lt; </button>
    </div>
    <select id="tar-city" name="tar-city" multiple>
    </select>

    <!-- 案例二: 彈幕 -->
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽:</p>
                <input type="text" class="text" id="text" />
                <button type="button" class="btn" id="btn">發(fā)射</button>
            </div>
        </div>
    </div>

    <!-- 案例三：返回頂部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

    <script>

        $(function () {

            //案例一
            let $btns = $("button")
            //左邊全部移到右邊
            $btns.eq(0).click(function () {
                $("#src-city option").appendTo($("#tar-city"))
            })
            //右邊全部移到左邊
            $btns.eq(1).click(function () {
                $("#tar-city option").appendTo($("#src-city"))
            })
            //左邊選中的移動到右邊
            $btns.eq(2).click(function () {
                $("#src-city option:selected").appendTo($("#tar-city"))
            })
            //右邊選中的移到左邊
            $btns.eq(3).click(function () {
                $("#tar-city option:selected").appendTo("#src-city")
            })

            //案例二
            let $boxDom = $("#boxDom")
            let $text = $("#text")
            let $btn = $("#btn")

            // 創(chuàng)建顏色數(shù)組
            var colorArr = ['red', 'green', 'blue', 'pink', 'cyan', 'gold', 'yellow', 'orange'];

            $btn.click(function () {
                let content = $text.val()
                if (content !== "") {
                    //創(chuàng)建一個span元素
                    let mSpan = $("<span></span>")
                    //賦值
                    mSpan.text(content)
                    //設置css樣式
                    let mTop = parseInt(Math.random() * $(window).height() / 3);
                    let mColor = colorArr[parseInt(Math.random() * colorArr.length)];
                    mSpan.css({
                        color: mColor,
                        top: mTop,
                        left: $(window).width() + 100
                    })
                    //追加到屏幕中
                    mSpan.appendTo($boxDom)
                    //設置動畫
                    mSpan.stop().animate({
                        left: -300
                    }, 10000, function () {
                        mSpan.remove()
                    })
                    //清空輸入框
                    $text.val('')
                } else {
                    alert("請輸入內(nèi)容")
                }
            })

            //案例三
            let $actGotop = $(".actGotop")
            $(window).scroll(function () {
                let $top = $(this).scrollTop();
                if ($top > 600) {
                    $actGotop.stop().fadeIn(1000)
                } else {
                    $actGotop.stop().fadeOut(1000)
                }
            })
            $actGotop.click(function () {
                $('html,body').animate({
                    scrollTop: 0
                }, 500);
            })
        })

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

jQuery事件機制

jQuery對JavaScript事件進行了封裝，增加并擴展了事件處理機制。jQuery不僅提供了更加優(yōu)雅的事件處理語法，而且極大的增強了事件的處理能力。

1.jQuery事件的發(fā)展歷程

簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定

2.on事件綁定

$("input").eq(0).on("click",function) 傳統(tǒng)事件綁定;
參數(shù) 1、事件類型參數(shù) 2、回調(diào)函數(shù);
下面點擊按鈕動態(tài)生成span元素

   $("input").eq(0).on("click",function(){
            let s = $("<span>我會span</span>")
            s.css("color","red")
            s.appendTo($box)
        })

$box.on("click","span",function)委托事件綁定;
1、事件類型參數(shù) 2、選擇器參數(shù) 3、回調(diào)函數(shù);
box是父級元素，通過代理的方式給動態(tài)生成的sapn添加事件

    $(".box").on("click","span",function(){
            console.log("我是委托事件綁定")
        })

3.jQuery事件對象（）

對象屬性	解釋
event.type	事件類型
event.data	存儲綁定事件時傳遞的附加數(shù)據(jù)
event.target	點了誰就是誰
event.currentTarget	等同于this，將來調(diào)用這個事件的對象
event.delegateTarget	代理對象
screenX和screenY	對應屏幕最左上角的值
offsetX和offsetY	點擊的位置距離元素的左上角的位置
clientX和clientY	距離頁面左上角的位置（忽視滾動條）
pageX和pageY	距離頁面最頂部的左上角的位置（會計算滾動條的距離）
event.witch	鼠標按鍵類型，1=鼠標左鍵 2=鼠標中鍵 3=鼠標右鍵
event.keyCode	按下的鍵盤代碼
event.stopPropagation()	阻止事件冒泡行為
event.preventDefault()	阻止瀏覽器默認行為
return false;	既阻止冒泡，又阻止了默認行為

jQuery對象與DOM對象之間的轉(zhuǎn)換

什么是DOM對象（js對象）？
1.使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2.dom對象只可以使用dom對象的方法和屬性。
3.但凡是利用document.get...取出來的都是DOM對象
什么是jquery對象？
1.jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
2.jquery對象只能使用jquery對象的方法。
3.但凡是用$()符號獲取出來都是JQ對象
深入了解jQuery對象
jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（偽數(shù)組））

1.jquery對象轉(zhuǎn)DOM對象

        /**
        *jQuery對象轉(zhuǎn)DOM對象
        */
        let $pp = $("#pp");
        console.log($pp)
        //第一種方式
        let pp1 = $pp[0];
        console.log(pp1)
        //第二種方式
        let pp2 = $pp.get(0);
        console.log(pp2)

        //text()方法是jQuery對象的方法 DOM對象用不了
        $pp.text("木問題啊");//賦值成功
        pp2.text("木問題啊。。。。")//賦值失敗

2.DOM對象轉(zhuǎn)jQuery對象

       /**
        *   DOM對象轉(zhuǎn)jQuery對象
        */
        let dd = document.getElementById("dd");
        console.log(dd)
        let $dd = $(dd);
        console.log($dd)

        //innerHTML是DOM對象的屬性 jQuery對象用不了
        dd.innerHTML = '你好呀！！';//賦值成功
    $dd.innerHTML = '你好呀';//賦值失敗

其它知識點

index()方法注意細節(jié)

index() 獲取的是當前元素在兄弟中的排名而不是在JQ集合中的排名

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

開發(fā)中常用jQuery知識點總結(jié)

開發(fā)中常用jQuery知識點總結(jié)

jQuery理解

本編文章會講到的知識點

JavaScript和jQuery對比

jQuery選擇器

jQuery操作樣式

jQuery操作屬性

jQuery動畫

jQuery操作DOM節(jié)點

jQuery操作其它屬性

jQuery事件機制

jQuery對象與DOM對象之間的轉(zhuǎn)換

其它知識點

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

開發(fā)中常用jQuery知識點總結(jié)

jQuery理解

本編文章會講到的知識點

JavaScript和jQuery對比

jQuery選擇器

jQuery操作樣式

jQuery操作屬性

jQuery動畫

jQuery操作DOM節(jié)點

jQuery操作其它屬性

jQuery事件機制

jQuery對象與DOM對象之間的轉(zhuǎn)換

其它知識點

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频