進階15

題目1: jQuery 中鞭光, $(document).ready()是什么意思咳胃?
當DOM(文檔對象模型)已經(jīng)加載,并且頁面(包括圖像)已經(jīng)完全呈現(xiàn)時彤灶,會發(fā)生ready事件看幼。
題目2: $node.html()和$node.text()的區(qū)別?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
    <div class="wrap">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="first"></div>
        <div id="second"></div>
    </div>
    <script>
        // console.log($('.wrap .first').html());
        console.log($('.wrap>ul>li').html());     // 0
        console.log($('.wrap>ul>li').text());     // 01234
        console.log($('.wrap>ul').html()); 
        /*
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        */
        console.log($('.wrap>ul').text());
        /* 0
           1
           2
           3
           4
        */
        $('#first').text('<b>haha</b>');   // <b>haha</b> jQuery.text()將內容當做文本 
        $('#second').html('<b>haha</b>');  // haha    (以粗體顯示) jQuery.html()將字符串當做HTML
        </script>
        <!-- 還有一個區(qū)別
            .text() 可以被用在XML和HTML文檔中
            .html() 僅僅是可以被用在HTML文檔中
         -->
    </body>

題目3: $.extend 的作用和用法?
擴展一個對象
舉列說明:

<script>
        var obj1 = {a:{first:1, second: 2}};
        var obj2 = {b:2, c:3};
        var obj3 = {d:4, e:5};
        var obj4 = {a:{second: 3}, f:6};
        /*
        $.extend(obj1,obj2); // 將obj2合并到obj1上  obj1為{a:{first:1, second: 2},b:2,c:3}
        $.extend(obj1,obj2,obj3); // 將obj2和obj3合并到obj1上  obj1為{a:{first:1, second: 2},b:2,c:3,d:4,e:5}
        $.extend(true, obj1, obj4);     // 將obj4合并到obj1上,進行遞歸合并 obj為{a:{first:1,second:3}, f:6}
        var obj5 = $.extend({}, obj1, obj2); // 將obj1和obj2合并到obj5上,并沒有修改了obj1 因此obj5為{a:{first:1, second: 2},b:2,c:3}
        */
    </script>

題目4: jQuery 的鏈式調用是什么幌陕?
使用jQuery的方法時诵姜,對象上的方法返回的是對象本身(return this),因此能接著使用
本地對象的其他jQuery方法,這就是鏈式調用。

<style>
            #box {
                position: relative;
                width: 100px;
                height: 100px;
                background: red;
            }
    </style>
<body>
    <div id="box">
        hihihi
    </div>
    <button class="box-btn">變寬變大移動</button>
    <script>
        var $div = $('#box');
        // 鏈式調用
        $('.box-btn').on("click", function() {
            $div.css({width: '150px', height: '150px', 'color': 'blue', 'font-size': '8px'})
                .animate({left: '200px'})
                .animate({top: '200px'})
                .animate({left: '0px'})
                .animate({top: '0px'})
                .animate({width: '100px', height: '100px'})
        })
        $div.attr('data-src', '50');
        $div.attr('data-src', '70');
        console.log($div.attr('data-src'));
    </script>
</body>

題目5: jQuery 中 data 函數(shù)的作用

為相關的匹配元素存儲搏熄,隨機數(shù)據(jù)棚唆,或者在指定的數(shù)據(jù)存儲區(qū)返回匹配元素集合中第一個元素的值。
舉列說明
 // example 1
        $('body').data("foo", 52, 43);

        $("body").data("bar", {myType: "test", count: 40});

        $("body").data({ baz: [1,2,3] } );

        alert($("body").data("hello"));     // undefined

        alert($("body").data());      // [object Object]

        alert($("body").data("foo"));  // 52

        alert($("body").data("bar").myType); // test

        alert($("body").data("baz")[0]);   // 1

        $("body").data(); // {foo: 52, bar: {myType: "test", count: 40}, baz: [1,2,3] }

        // example 2
        <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name": "John"}'></div>

        $('div').data("role")  === "page";

        $("div").data("lastValue")  === 43;

        $("div").data("hidden") === true;

        $("div").data("options").name === "John";

題目6:
寫出以下功能對應的 jQuery 方法:

  • 給元素 $node 添加 class active心例,給元素 $noed 刪除 class active
    $node.addClass('active')
    $node.removeClass('active')
  • 展示元素$node, 隱藏元素$node
    $node.show()
    $node.hide()
  • 獲取元素$node 的 屬性: id宵凌、src、title止后, 修改以上屬性
    $(selector).attr(attributeName, value);
    $node.attr('id',修改的值)
    $node.attr('src', 修改的值)
    $node.attr('title',修改的值)
  • 給$node 添加自定義屬性data-src
    $node.attr('data-src');
  • 在$ct 內部最開頭添加元素$node
    $ct.prepend($node);
    $node.prependTo($ct);
  • 在$ct 內部最末尾添加元素$node
    $ct.append($node);
    $node.appendTo($ct);
  • 刪除$node
    $node.remove()
  • 把$ct里內容清空
    $ct.empty();
  • 在$ct 里設置 html <div class="btn"></div>
    $ct.html('<div class="btn"></div>');
    *獲取瞎惫、設置$node 的寬度、高度(分別不包括內邊距译株、包括內邊距瓜喇、包括邊框、包括外邊距)
    不包括內邊距
    $node.width() // 獲取
    $node.height()
    $node.width(value)//設置
    $node.heigth(value)
    包括內邊距不包含邊框
    $node.innerWidth()
    $node.innerHeight()
    $node.innerWidth(value)
    $node.innerHeight(value)
    包含邊框不包括外邊距
    $node.outerWidth()
    $node.outerHeight()
    $node.outWidth(value)
    $node.outerHeight(value)
    包含外邊距
    $node.outerWidth(true)
    $node.outerHeight(true)
    $node.outerWidth(value)
    $node.outerWidth(value)
  • 獲取窗口滾動條垂直滾動距離
    $(selector).scrollTop();
  • 獲取$node 到根節(jié)點水平歉糜、垂直偏移距離
    $node.offset().left
    $node.offset().top
  • 修改$node 的樣式乘寒,字體顏色設置紅色,字體大小設置14px
    $node.css({'color': 'red','font-size': '14px'});
  • 遍歷節(jié)點现恼,把每個節(jié)點里面的文本內容重復一遍
    $node.each(function(index, node) {
    var str = $(this).text();
    $(this).text(str+str);
    })
  • 從$ct 里查找 class 為 .item的子元素
    $ct.find('.item');
  • 獲取$ct 里面的所有孩子
    $ct.children();
  • 對于$node肃续,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
    $node.parents('.ct').find('.panel');
  • 獲取選擇元素的數(shù)量
    $(selector).length;
  • 獲取當前元素在兄弟中的排行
    舉列說明
<div class="ct">
                <div class="c1">c1</div>    
                <div class="c2">---</div>   
                <div class="c1">c1</div>    
                <div class="c2">----</div>  
                <div class="c1">c1</div>    
                <div class="c2 active">----</div>   
        </div>
console.log($('.ct .active').index());  // 5
console.log($('.ct .active').index('.c2'));  // 2  在class為c2中排行第三

題目7:
用jQuery實現(xiàn)以下操作
當點擊$btn 時叉袍,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
效果預覽
當窗口滾動時始锚,獲取垂直滾動距離
效果預覽
當鼠標放置到$div 上,把$div 背景色改為紅色喳逛,移出鼠標背景色變?yōu)榘咨?br> 效果預覽
當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色瞧捌,當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮懀斴斎肟蚴ソ裹c時去掉邊框藍色,控制臺展示輸入框里的文字
預覽
當選擇 select 后姐呐,獲取用戶選擇的內容
預覽
題目8: 用 jQuery ajax 實現(xiàn)如下效果殿怜。`當點擊加載更多會加載數(shù)據(jù)展示到頁面效果預覽
預覽
代碼

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市曙砂,隨后出現(xiàn)的幾起案子头谜,更是在濱河造成了極大的恐慌,老刑警劉巖鸠澈,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柱告,死亡現(xiàn)場離奇詭異,居然都是意外死亡笑陈,警方通過查閱死者的電腦和手機际度,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涵妥,“玉大人乖菱,你說我怎么就攤上這事∨钔” “怎么了窒所?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長拳缠。 經(jīng)常有香客問我墩新,道長,這世上最難降的妖魔是什么窟坐? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任海渊,我火速辦了婚禮,結果婚禮上哲鸳,老公的妹妹穿的比我還像新娘臣疑。我一直安慰自己,他們只是感情好徙菠,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布讯沈。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丈挟,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天萝快,我揣著相機與錄音乓梨,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的穷劈。 我是一名探鬼主播笼恰,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼歇终!你這毒婦竟也來了社证?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤评凝,失蹤者是張志新(化名)和其女友劉穎追葡,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奕短,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡辽俗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了篡诽。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡榴捡,死狀恐怖杈女,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情吊圾,我是刑警寧澤达椰,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站项乒,受9級特大地震影響啰劲,放射性物質發(fā)生泄漏。R本人自食惡果不足惜檀何,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一蝇裤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧频鉴,春花似錦栓辜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至周荐,卻和暖如春狭莱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背概作。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工腋妙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人仆嗦。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓辉阶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谆甜,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容