国产精品二区三区,久干国产在线,少妇无码一区

復(fù)習(xí) jQuery操作DOM

選擇器

基本選擇器：#id 、.class 、element、* 、
層級選擇器：空格、>、+、~
- 基本過濾選擇器：:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even
- 篩選選擇器：.eq(index)、.children()、.parent()、.siblings()、.find()
動(dòng)畫：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle、animate
DOM操作：.css()、addClass(“className”)、removeClass()、toggleClass、attr()、removeAttr()、.val()、.html(“<p></p>”)、text()、node.append(“< p >我是追加的內(nèi)容</p>”)、prePend()

一坐標(biāo)值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            position: relative;
            top: 100px;
            width: 400px;
            height: 300px;
            left: 200px;
            background-color: red;
        }
        p{
            background-color: #dddddd;
            padding-left: 0px;
        }
        div2{

        }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //相對頁面
            $("button").eq(0).click(function () {
               console.log( "距離頁面上部距離："+$("div").offset().top);
                console.log( "距離頁面左邊距離"+$("div").offset().left);

            });
            //獲取相對于父元素
            $("button").eq(1).click(function () {
               console.log("相對父元素的上邊距"+$("p").position().top);
               console.log("相對父元素的做邊距"+$("p").position().left);
            });
            //設(shè)置offset
            $("button").eq(2).click(function () {
               var txtTop=$("#txtTop").val();
               var txtLeft=$("#txtLeft").val();
               $("div").offset({
                  top:txtTop,
                   left:txtLeft
               });
            });
        });
    </script>
</head>
<body>
<button >獲取offset坐標(biāo)值</button>
<button >獲取position坐標(biāo)值</button>
<button >設(shè)置position坐標(biāo)值</button>
<label for="txtTop">top:</label><input type="text" ID="txtTop">
<label for="txtLeft">Left:</label><input type="text" id="txtLeft">
<div class="div1">
 <div class="div2">
    <p>我是div的子元素p</p>
 </div>
</div>
</body>
</html>

1 高度和寬度

$(“div”).height(); // 高度
$(“div”).width(); // 寬度

.height()方法和.css(“height”)的區(qū)別：
返回值不同，.height()方法返回的是數(shù)字類型(20)，.css(“height”)返回的是字符串類型(20px)，因此.height()方法常用在參與數(shù)學(xué)計(jì)算的時(shí)候
2 坐標(biāo)值

$(“div”).offset(); // 獲取或設(shè)置坐標(biāo)值設(shè)置值后變成相對定位
$(“div”).position(); // 獲取坐標(biāo)值子絕父相只能讀取不能設(shè)置

二獲取滾動(dòng)條位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            overflow: scroll;
            background-color: pink;
        }
        div p{
            width: 500px;
            height: 2000px;
        }

    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").eq(0).click(function () {
               console.log($("div").scrollTop());
               console.log($("div").scrollLeft());
            });
        });
    </script>
</head>
<body>
<button>獲取滾動(dòng)條位置</button>
<div>
<p>
</p>
</div>
</body>
</html>

1 滾動(dòng)條（滾動(dòng)事件）

$(“div”).scrollTop(); // 相對于滾動(dòng)條頂部的偏移
$(“div”).scrolllLeft(); // 相對于滾動(dòng)條左部的偏移

三固定導(dǎo)航欄


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防騰訊固定導(dǎo)航欄</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .main{
            width: 1000px;
            margin:0 auto;
            /*margin-top: 20px;*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //獲取頂部top的高度值
            var topHeight=$(".top").height();
            //監(jiān)聽瀏覽器的滾動(dòng)時(shí)間
            // 判斷一下 docScrollTOp 和 topHeight兩個(gè)大小
            // 文檔被卷去的高度 大于或等于 top高度的時(shí)候
            // 讓導(dǎo)航欄變成固定定位

            $(window).scroll(function () {
            var docScroll=$(document).scrollTop();
            if (docScroll >= topHeight){
                $(".nav").css({
                    "position": "fixed",
                    "top": 0
                });
                $(".main").css("margin-top",$(".nav").height());
            }else {
                $(".nav").css({
                    // 讓固定導(dǎo)航欄變?yōu)槟J(rèn)狀態(tài) position: static

                    "position": "static"
                });
                $(".main").css("margin-top" ,0);
            }
            });

        });
    </script>
</head>
<body>
<div class="top">
    ![](imgs/top.png)
</div>
<div class="nav">
    ![](imgs/nav.png)

</div>
<div class="main">
    ![](imgs/main.png)
</div>
</body>
</html>

思路
1 獲取頂部top的高度值
2 監(jiān)聽瀏覽器的滾動(dòng)時(shí)間
1）判斷一下 docScrollTOp 和 topHeight兩個(gè)大小
2）文檔被卷去的高度大于或等于 top高度的時(shí)候
3）讓導(dǎo)航欄變成固定定位
4）當(dāng)?shù)竭_(dá)topHeight高度時(shí)，會(huì)跳出，為避免，設(shè)置主內(nèi)容css上邊距為導(dǎo)航欄高度
3 當(dāng)返回時(shí)，讓固定導(dǎo)航欄變?yōu)槟J(rèn)狀態(tài) position: static，并去掉設(shè)置的主內(nèi)容上邊距
四兩側(cè)跟隨的廣告


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .left, .right {
            position: absolute;
            top: 80px;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var docScrollTop = $(document).scrollTop();

                //$(".main").css("top", docScrollTop + 80);
                $(".main").animate({
                    "top" : docScrollTop + 80},30);
            });
        });
    </script>
</head>
<body>
<div class="left main">![](imgs/101.gif)</div>
<div class="right main">![](imgs/102.gif)</div>
<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>

<p>我們的開始，是很長的電影</p>
</body>
</html>

思路
監(jiān)聽瀏覽器的滾動(dòng)事件，設(shè)置自定義動(dòng)畫top值為獲取到得上邊距+值
五 jQuery事件
click/mouseenter/blur/keyup
// 綁定事件
bind：$node.bind(“click”,function(){});
// 觸發(fā)一次
one : $node.one(“click”,function(){}); delegate : $node.delegate(“p”,”click”,function(){}); on： $node.on(“click”,”p”,function(){});
解綁
unbind、undelegate off
觸發(fā)
click : $(“div”).click(); trigger：觸發(fā)事件，并且觸發(fā)瀏覽器默認(rèn)行為 triggerHandler：不觸發(fā)瀏覽器默認(rèn)行為

jQuery事件對象介紹
event.stopPropagation() //阻止事件冒泡 event.preventDefault(); //阻止默認(rèn)行為

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

固定導(dǎo)航欄案例

固定導(dǎo)航欄案例

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

固定導(dǎo)航欄案例

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av