jQuery二——屬性操做、文檔操做、位置屬性

時間 2019-11-16

原文原文鏈接

1、jquery的屬性操做

　　jquery對象有它本身的屬性和方法。
　　其中jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做。javascript

一、html屬性操做

　　是對html文檔中的屬性進行讀取、設置和移除操做。好比attr()，removeAttr()。css

（1）attr：設置屬性值或者返回被選元素的屬性值html

$('button').click(function () {
    // jquery的屬性操做，html屬性操做：attr()
    // attr若是有一個參數，表示獲取值
    $('#box p').text($('#box').attr('id'));  // p標籤的內容：路飛學城————>box

});

// attr()若是設置兩個值，表示設置屬性
$('#box').attr('class','foo');  // 給當前標籤加了類屬性 <div id="box" class="foo">
// 設置多個值使用對象存儲，若是設置多個類名不能使用attr()方法
$('#box').attr({'class':'foo2',name:"luffy"});  // <div id="box" class="foo2" name="luffy">

（2）removeAttr：從每個匹配的元素中刪除一個屬性java

// 刪除一個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

// 刪除多個屬性
$('#box').removeAttr('name class');   // <div id="box">

　　刪除屬性後，標籤<div id="box" class="foo2" name="luffy">中class屬性和name屬性都已經刪除。jquery

二、`DOM屬性操做`

　　對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()瀏覽器

（1）prop：獲取在匹配的元素集中的第一個元素的屬性值服務器

　　它是對當前匹配到的dom對象設置屬性app

// 獲取的是第一個元素的class值
console.log($('li').prop('class'));  // luffy

// 設置值
//prop()獲取在匹配的元素集中的第一個元素的屬性值
$('li').first().prop({'name':'app','name2':'app2'});
console.log($('li').first());   // jQuery.fn.init(1)

（2）removeProp：用來刪除由.prop()方法設置的屬性集dom

// 刪除dom對象的name
$('li').first().removeProp();

console.log($('li').prop('name'));   // app
console.log($('li').prop('name2'));  // app2

代碼示例以下：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性操做</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="box">
        <p>路飛學城</p>
        <button>獲取</button>

        <ul>
            <li class="luffy">路飛</li>
            <li class="luffy">路飛</li>
            <li class="luffy">路飛</li>
            <li class="luffy">路飛</li>
        </ul>

        <span>
            路飛吧
        </span>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $('button').click(function () {
            // jquery的屬性操做，html屬性操做：attr()
            // attr若是有一個參數，表示獲取值
            $('#box p').text($('#box').attr('id'));  // p標籤的內容：路飛學城————>box

        });

        // attr()若是設置兩個值，表示設置屬性
        $('#box').attr('class','foo');  // 給當前標籤加了類屬性 <div id="box" class="foo">
        // 設置多個值使用對象存儲，若是設置多個類名不能使用attr()方法
        $('#box').attr({'class':'foo2',name:"luffy"});  // <div id="box" class="foo2" name="luffy">

        // 刪除一個屬性
        // $('#box').removeAttr('name');
        // $('#box').removeAttr('class');
        // 刪除多個屬性
        $('#box').removeAttr('name class');   // <div id="box">


        // DOM屬性操做
        // 獲取的是第一個元素的class值
        console.log($('li').prop('class'));  // luffy

        // 設置值
        //prop()獲取在匹配的元素集中的第一個元素的屬性值
        $('li').first().prop({'name':'app','name2':'app2'});
        console.log($('li').first());   // jQuery.fn.init(1)

        // 刪除dom對象的name
        $('li').first().removeProp();

        console.log($('li').prop('name'));   // app
        console.log($('li').prop('name2'));  // app2

    })
</script>
</html>

html屬性和dom屬性操做代碼示例

三、`類樣式操做`

　　是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()

（1）addClass（添加類）

　　爲每一個匹配的元素添加指定的類名。

$('div').addClass("box"):添加一個類名

$('div').addClass("box box2"):添加多個類名

（2）removeClass（移除類）

　　從全部匹配的元素中刪除所有或者指定的類。

$('div').removeClass('box')移除指定的類

$('div').removeClass()移除所有的類

運用示例：

　　點擊添加類和刪除類，添加類的時候，激活選擇器，修改字體樣式

<style type="text/css">
    span.active {
        font-size: 30px;
    }
</style>

var isBig = true;
$('span').click(function () {
    if (isBig) {
        $(this).addClass('active');
        isBig = false;
    } else {
        $(this).removeClass('active');
        isBig = true;
    }
})

（3）toggleClass

　　若是存在（不存在）就刪除（添加）一個類。語法：toggleClass('box')

$('span').click(function(){
    //動態的切換class類名爲active
    $(this).toggleClass('active')
})

四、`值操做`

　　是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()

<div id="box2">
    哈哈
    <p>我是一個段落</p>
    <a href="">百度一下</a>
    <input type="text" value="嘿嘿嘿" name=""/>
    <button id="btn">GET</button>
</div>

（1）text：僅僅獲取匹配元素包含的文本內容

// text()僅僅是獲取文本
console.log($('#box2').text());
/*
哈哈
我是一個段落
百度一下
 */

　　設置值：設置該全部的文本內容

$('#box2').text('<a>路飛學城</a>');   // 設置文本

　　注意：值爲標籤的時候不會被渲染爲標籤元素只會被當作值渲染到瀏覽器中

（2）html：獲取選擇標籤元素中全部的內容

// html()獲取了全部
console.log($('#box2').html());
/*
哈哈
<p>我是一個段落</p>
<a href="">百度一下</a>
 */

　　設置值：設置該元素的全部內容，會替換掉標籤中原來的內容

$('ul').html('<a href="#">百度一下</a>')
    //可使用函數來設置全部匹配元素的內容
$('ul').html(function(){
    return '哈哈哈'
})

（3）val：獲取值，用於表單控件中獲取值，好比input textarea select等等

// 獲取值 全部表單控件獲取值默認方法是val()
console.log($('input').val());   // 嘿嘿嘿
$('input').val('嘿嘿個大頭鬼');

$('#btn').click(function () {
    var val = $('input').val();
    // 設置上去
    $('#box2').text(val);  // <div id="box2">嘿嘿個大頭鬼</div>
})

　　表單控件使用的一個方法：

$('input').change(function () {
    console.log($(this).val())
})

代碼示例以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性操做</title>
    <style type="text/css">
        span.active {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>路飛學城</p>
        <button>獲取</button>

        <ul>
            <li class="luffy">路飛</li>
            <li class="luffy">路飛</li>
            <li class="luffy">路飛</li>
            <li class="luffy">路飛</li>
        </ul>

        <span>
            路飛吧
        </span>

    </div>

    <div id="box2">
        哈哈
        <p>我是一個段落</p>
        <a href="">百度一下</a>
        <input type="text" value="嘿嘿嘿" name=""/>
        <button id="btn">GET</button>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // addClass()添加類  removeClass()移除類
        $('span').addClass("span2 span3");   // <span class="span2 span3">路飛吧</span>
        $('span').removeClass('span2');

        // 運用示例：點擊添加類和刪除類，添加類的時候，激活選擇器，修改字體樣式
        var isBig = true;
        $('span').click(function () {
            if (isBig) {
                $(this).addClass('active');
                isBig = false;
            } else {
                $(this).removeClass('active');
                isBig = true;
            }
        })


        //4.值屬性的操做 text() html() value()
        // text()僅僅是獲取文本
        console.log($('#box2').text());
        /*
        哈哈
        我是一個段落
        百度一下
         */

        // html()獲取了全部
        console.log($('#box2').html());
        /*
        哈哈
        <p>我是一個段落</p>
        <a href="">百度一下</a>
         */


        // 設置值
        // $('#box2').text('<a>路飛學城</a>');   // 設置文本
        // $('#box2').html("<a href='#'>路飛學城</a>")  // 設置html

        // 獲取值 全部表單控件獲取值默認方法是val()
        console.log($('input').val());   // 嘿嘿嘿
        $('input').val('嘿嘿個大頭鬼');

        $('#btn').click(function () {
            var val = $('input').val();
            // 設置上去
            $('#box2').text(val);  // <div id="box2">嘿嘿個大頭鬼</div>
        })

        // 表單控件使用的一個方法
        $('input').change(function () {
            console.log($(this).val())
        })
    })
</script>
</html>

class和值操做代碼示例

2、操做表單域中的value值

HTML：

<form action="">
    <!--單選框-->
    <input type="radio" name="sex"  value="112" />男
    <input type="radio" name="sex"  value="11" checked="" />女
    <input type="radio" name="sex"  value="11" />gay

    <!--複選框-->
    <input type="checkbox" value="a" checked=""/>吃飯
    <input type="checkbox" value="b" checked=""/>睡覺
    <input type="checkbox" value="c" checked=""/>打豆豆

    <!--下拉列表-->
    <select name="timespan" id="timespan" class="Wdate"   >
        <option value="1">8:00-8:30</option>
        <option value="2">8:30-9:00</option>
        <option value="3">9:00-9:30</option>
    </select>
    <input type="text" name="" id="" value="111" />
</form>

一、input標籤的type屬性規定了input元素的類型

值	描述
button	定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）。
checkbox	定義複選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的全部數據。
submit	定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

　　首先須要經過選擇器獲取全部type='radio'即單選框的jquery對象：

console.log($(':radio'));  // :radio 取的是type="radio"的
/*
jQuery.fn.init(3) [input, input, input, prevObject: jQuery.fn.init(1)]
0:input
1:input
2:input
length:3
prevObject:jQuery.fn.init [document]
 */

　　相似的type=‘checkbox’，即複選框以以下方式獲取：

console.log($(':checkbox'));

二、獲取input中value值

//1.獲取單選框的value值
console.log($('input[type=radio]:checked').val());  // 屬性選擇器；輸出：11

//2.複選框中value值 僅僅是獲取了第一個值
console.log($('input[type=checkbox]:checked').val());  // 輸出：a

//3.下拉列表被選中的值
var obj = $('#timespan option:selected');
console.log(obj.val());  // 輸出：1
// 若是<option value="2" selected="">8:30-9:00</option> 則默認選中2，輸出：2

三、設置input中value值

// 設置單選的值
$('input[type=radio]').val(['113']);

// 設置複選框的值
$('input[type=checkbox]').val(['b','c']);

// 設置下拉列表中選中的值，這裏面必需要用select
$('select').val(['3','2']);

四、文本框text：設置值和獲取值

//文本框  設置值和獲取值
console.log($("input[type=text]").val());  //獲取文本框中的值
//設置值
$('input[type=text]').val('試試就試試');

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操做input中的value值</title>
</head>
<body>
    <form action="">
        <!--單選框-->
        <input type="radio" name="sex"  value="112" />男
        <input type="radio" name="sex"  value="11" checked="" />女
        <input type="radio" name="sex"  value="11" />gay

        <!--複選框-->
        <input type="checkbox" value="a" checked=""/>吃飯
        <input type="checkbox" value="b" checked=""/>睡覺
        <input type="checkbox" value="c" checked=""/>打豆豆

        <!--下拉列表-->
        <select name="timespan" id="timespan" class="Wdate"   >
            <option value="1">8:00-8:30</option>
            <option value="2">8:30-9:00</option>
            <option value="3">9:00-9:30</option>
        </select>
        <input type="text" name="" id="" value="111" />
    </form>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
    console.log($(':radio'));  // :radio 取的是type="radio"的
    /*
    jQuery.fn.init(3) [input, input, input, prevObject: jQuery.fn.init(1)]
    0:input
    1:input
    2:input
    length:3
    prevObject:jQuery.fn.init [document]
     */

    console.log($(':checkbox'));
    // input的經常使用類型還有：button、submit、file、text、disabled


    //1.獲取單選框的value值
    console.log($('input[type=radio]:checked').val());  // 屬性選擇器；輸出：11

    //2.複選框中value值 僅僅是獲取了第一個值
    console.log($('input[type=checkbox]:checked').val());  // 輸出：a

    //3.下拉列表被選中的值
    var obj = $('#timespan option:selected');
    console.log(obj.val());  // 輸出：1
    // 若是<option value="2" selected="">8:30-9:00</option> 則默認選中2，輸出：2

    // 設置單選的值
    $('input[type=radio]').val(['113']);

    // 設置複選框的值
    $('input[type=checkbox]').val(['b','c']);

    // 設置下拉列表中選中的值，這裏面必需要用select
    $('select').val(['3','2']);

    //4.文本框  設置值和獲取值
    console.log($("input[type=text]").val());  //獲取文本框中的值
    //設置值
    $('input[type=text]').val('試試就試試');

})
</script>
</html>

操做input中value值代碼示例

3、jQuery的文檔操做

html：

<body>
    <span>哈哈</span>
    <ul>

    </ul>
    <button id="btn">按鈕</button>
</body>

一、插入操做

（1）父元素.append(子元素) 追加某元素父元素中添加新的元素

//第一種方式
// 父級ul 追加 子級li
$('ul').append('<li><a href="#">luffy</a></li>');

//第二種方式
var oLi = document.createElement('li');
oLi.innerHTML = '路飛';
$('ul').append(oLi);

//第三種方式
// 若是直接的內容是當前頁面中的某些元素，那麼這些元素將從原位置上消失。簡言之，就是一個移動操做
$('ul').append($('span'));

（2）子元素.appendTo(父元素) 追加到某元素子元素添加到父元素

// appendTo()方法
$('<a href="#">路飛2</a>').appendTo($('ul'));

（3）prepend() 前置添加，添加到父元素的第一個位置

　　 prependTo() 後置添加，第一個元素添加到父元素中

// 第一種寫法：
$('ul').prepend('<li>我是第一個元素</li>');
// 第二種寫法:
$('<li>我是第一個元素</li>').prependTo($('ul'));

（4）父.after(子) 在匹配的元素以後插入內容

　　父.before(子) 在匹配的元素以前插入內容　　

// 在ul標籤前面插了一個h2標籤
$('ul').before('<h2>我是一個二級標題</h2>');
// 在ul標籤後面（外面）插了一個h3標籤
$('ul').after('<h3>我是一個三級標題</h3>');

（5）子.insertAfter(父)

　　子.insertBefor(父)

// insertAfter
// 在</ul>後面插入了一個a標籤
$('<a href="#">最後一個</a>').insertAfter($('ul'));

// insertBefore
// 在<ul>標籤前面插入了一個a標籤
$('<a href="#">第一個</a>').insertBefore($('ul'));

二、複製操做

　　clone() 克隆匹配的DOM元素而且選中這些克隆的副本。

$('button').click(function() {
    // 1.clone()：克隆匹配的DOM元素而且選中這些克隆的副本。
    // 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
    $(this).clone(true).insertAfter(this);
})

三、替換操做

（1）replaceWith()：將全部匹配的元素替換成指定的HTML或DOM元素

//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));

（2）replaceAll():用匹配的元素替換掉全部 selector匹配到的元素

$('<a href="#">替換的超連接</a>').replaceAll('button');  // 所有替換爲超連接

四、刪除操做

（1）remove() 刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）　

//remove():備選元素也被刪掉了   事件沒有了
$('ul').remove();

（2）empty(): 清空元素中的全部後代節點

// empty(): 清空元素中的全部後代節點(保留)
$('ul').empty();

（3）detach()：刪除節點後，事件會保留

//detach():移除匹配的節點元素  刪除節點後，事件會保留
var $btn = $('button').detach();
console.log($btn[0]);  // <button>替換的按鈕</button>

$('ul').append($btn[0]);

　　這個含義是說：對象移除了，顯示效果就沒有了，可是內存中仍是存在的，若是append添加進去，就又從新回到文檔流中，也就又顯示出來了。

文檔操做代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文檔操做</title>
</head>
<body>
    <span>哈哈</span>
    <ul>

    </ul>
    <button id="btn">按鈕</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {

        // append()方法追加元素：
        //第一種方式
        // 父級ul 追加 子級li
        $('ul').append('<li><a href="#">luffy</a></li>');

        //第二種方式
        var oLi = document.createElement('li');
        oLi.innerHTML = '路飛';
        $('ul').append(oLi);

        //第三種方式
        // 若是直接的內容是當前頁面中的某些元素，那麼這些元素將從原位置上消失。簡言之，就是一個移動操做
        $('ul').append($('span'));


        // appendTo()方法
        $('<a href="#">路飛2</a>').appendTo($('ul'));


        // prepend()方法:插入到被選中元素的第一個位置
        // 第一種寫法：
        $('ul').prepend('<li>我是第一個元素</li>');
        // 第二種寫法:
        $('<li>我是第一個元素</li>').prependTo($('ul'));


        //after before
        // 在ul標籤前面插了一個h2標籤
        $('ul').before('<h2>我是一個二級標題</h2>');
        // 在ul標籤後面（外面）插了一個h3標籤
        $('ul').after('<h3>我是一個三級標題</h3>');


        // insertAfter
        // 在</ul>後面插入了一個a標籤
        $('<a href="#">最後一個</a>').insertAfter($('ul'));

        // insertBefore
        // 在<ul>標籤前面插入了一個a標籤
        $('<a href="#">第一個</a>').insertBefore($('ul'));


        //2.複製操做 clone()
        $('button').click(function () {
            // $(this).clone().insertAfter($(this));
            // 副本具備有真身同樣的事件處理能力  true：徹底克隆
            $(this).clone(true).insertAfter($(this));  // 克隆出來的按鈕，點擊後也能克隆出按鈕
        })


        //3.替換replaceWith
        // $('h3').replaceWith('<button>替換的按鈕</button>');

        // $('<a href="#">替換的超連接</a>').replaceAll('button');  // 所有替換爲超連接


        //4.刪除
        // empty(): 清空元素中的全部後代節點(保留)
        // $('ul').empty();

        //remove():備選元素也被刪掉了   事件沒有了
        // $('ul').remove();

        //detach():移除匹配的節點元素  刪除節點後，事件會保留
        var $btn = $('button').detach();
        console.log($btn[0]);  // <button>替換的按鈕</button>

        // $('ul').append($btn[0]);



    })
</script>
</html>

jquery文檔處理代碼示例

4、jquery的位置屬性

　　位置屬性演示代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery位置屬性</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #box {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 10px 5px;
        }
        p {
            position: absolute;
            left: 30px;
            top: 30px;
        }
    </style>
</head>
<body style="height: 2000px;width: 2000px;">
    <div id="box">
        <p>我是一個段落標籤</p>
    </div>
    <button id="btn">動畫吧</button>
    <div style="width: 200px;height: 200px;margin: 100px auto;border: 1px solid deepskyblue;"></div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function () {
        // 一、獲取匹配元素的相對父元素的偏移 position
        console.log($('p').position().left);  // 30
        console.log($('p').position().top);   // 30

        var offsetTop = $('p').position().top + 50 + 'px';

        $('#btn').click(function () {
            $('p').animate({top:offsetTop},1000)
        })

        // 二、獲取匹配元素  相對滾動條捲起的位置信息  scrollTop  scrollLeft
        // console.log($(document).scrollLeft());
        // console.log($(document).scrollTop());
        $(document).scroll(function () {
            console.log('水平'+ $(document).scrollLeft());
            console.log('垂直'+ $(document).scrollTop());
        })

        // 三、offset 獲取匹配元素在當前視口的相對便宜  相對於瀏覽器
        console.log($('#box').offset());
        console.log($('p').offset().top);  // 31
        console.log($('p').offset().left);  // 31
        console.log($('#btn').offset().top);  // 225

        // 四、獲取元素的寬高   不包含padding
        console.log('寬'+ $('#box').width());   // 寬200
        console.log('高'+ $('#box').height());   // 高200

        // 五、設置寬高
        $('#box').width(400);

        // 六、innerWidth outerWidth
        // 獲取 width+2*padding 不包括邊框  獲取匹配元素的內部寬度
        console.log($('#box').innerWidth());   // 410

        // width + 2*padding + 2*border 獲取匹配元素的外部寬度
        console.log($('#box').outerWidth());   // 412
    })


</script>
</html>

位置屬性代碼示例

一、position：獲取匹配元素相對父元素的偏移位置

// 獲取匹配元素的相對父元素的偏移 position
console.log($('p').position().left);  // 30
console.log($('p').position().top);   // 30

// 點擊按鈕1秒內向下移動p元素50px
var offsetTop = $('p').position().top + 50 + 'px';

$('#btn').click(function () {
    $('p').animate({top:offsetTop},1000)
})

二、scrollTop：獲取匹配元素相對滾動條頂部的偏移文檔被捲起的像素值

　 scrollLeft：獲取匹配元素相對滾動條左側的偏移文檔被捲起的像素值

// 獲取匹配元素相對滾動條頂部的偏移  文檔被捲起的像素值
console.log($(document).scrollLeft());
console.log($(document).scrollTop());

// 監聽文檔滾動的jquery方法
$(document).scroll(function () {
    console.log('水平'+ $(document).scrollLeft());
    console.log('垂直'+ $(document).scrollTop());
})

三、offset：獲取匹配元素在當前視口的相對偏移

　　返回的對象包含兩個整型屬性：top 和 left

// offset 獲取匹配元素在當前視口的相對偏移  相對於瀏覽器
console.log($('#box').offset());
console.log($('p').offset().top);  // 31
console.log($('p').offset().left);  // 31
console.log($('#btn').offset().top);  // 225

四、width()\height()：取得匹配元素當前計算的寬度/高度值　

// 獲取元素的寬高   不包含padding
console.log('寬'+ $('#box').width());   // 寬200
console.log('高'+ $('#box').height());   // 高200

　　設置寬高：

// 設置寬高
$('#box').width(400);

五、innerHeight：獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）

　　innerWidth：獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）

// 獲取 width+2*padding 不包括邊框  獲取匹配元素的內部寬度
console.log($('#box').innerWidth());   // 410

六、outerHeight：獲取第一個匹配元素外部高度（默認包括補白和邊框）

　 outerWidth：獲取第一個匹配元素外部寬度（默認包括補白和邊框）

// width + 2*padding + 2*border 獲取匹配元素的外部寬度
console.log($('#box').outerWidth());   // 412

5、仿淘寶固定導航欄　

　　這個案例是要實現，淘寶搜索框在窗口滾動，掩蓋搜索框時，搜索框置頂顯示。

　　運用scroll方法來觸發scroll事件，並把條件和函數綁定到scroll事件中。根據元素相對頂部的偏移，設置元素的樣式，導航欄沒有捲起時，ststic：元素出如今正常流中；fixed:生成絕對定位元素，相對於瀏覽器窗口進行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            div{width: 100%;}
            div img{width: 100%;}
        
            .nav{display: none;}
                        
        </style>
    </head>
    <body>
        
        <div class="top">
            <img src="images/top.jpg" alt="" />
            
        </div>
        <div class="nav">
            <img src="images/nav.jpg"/>
        </div>
        <div class= 'taobao'>
            <img src="images/taobao1.png"/>
        </div>
        
        <script src="./jquery-3.3.1.js"></script>
        <script type="text/javascript">
            
            $(function(){
                var h = $('.top').height();

                // 當用戶滾動指定的元素時，會發生 scroll 事件。
                // scroll 事件適用於全部可滾動的元素和 window 對象（瀏覽器窗口）
                $(document).scroll(function () {
                    //獲取匹配元素相對滾動條頂部的偏移 文檔被捲起的像素值
                    var scollTp = $(document).scrollTop();

                    if (h<scollTp) {
                        $('.nav').css({display:'block',position:'fixed',top:0});
                    } else {
                        $('.nav').css({display:'none',position:'static',top:0});
                    }
                })
            })
        </script>
    </body>
</html>