jQuery動畫與ajax

題目1: jQuery 中, $(document).ready()是什么意思?

.ready()指的是當DOM準備就緒,指定一個函數來執行。js原生的load事件,要等DOM和圖像完全加載才會觸發。
使用.ready()方法能夠保證DOM準備好之后,就執行這個函數,因此,這里是綁定事件和運行jQuery代碼最好的地方。

//下面兩種語法等價
$(document).ready(handler)
$(handler)

題目2: $node.html()$node.text()的區別?

.html()獲取第一個匹配元素的HTML內容,如果選擇器匹配多于一個的元素,那么只有第一個匹配元素的HTML內容會被獲取。
.text()獲取所有元素的匹配內容,結果是所有匹配元素包含的文本內容組合起來的文本。

題目3: $.extend 的作用和用法?

jQuery.extend( [deep,] target [, object1 ] [, objectN ] )
提供兩個或多個對象,對象的所有屬性都添加到目標對象。
如果只有一個參數提供給.extend(),這意味著目標參數被省略。在這種情況下,jQuery對象本身被默認為目標對像。這樣,我們可以在jQuery的命名空間下添加新功能。這對于插件開發者希望向jQuery中添加新函數時是很有用的。

目標對象(第一個對象)將被修改,并且通過$.extend()返回。然而,如果我們想保留原對象,我們可以通過傳遞一個空對象作為目標對象:

var object = $.extend({}, object1, object2);

如果第一個對象的屬性本身是一個對象或數組,那么它將完全用第二個對象相同的key重寫一個屬性。

題目4: jQuery 的鏈式調用是什么?

指多個方法可以鏈式調用,如:

$('div').find('h3').eq(2).html('Hello');

鏈式調用可以節省代碼量,提高代碼的效率。

題目5: jQuery 中 data 函數的作用

data()函數用于在當前jQuery對象所匹配的所有元素上存取數據。將數據綁定在一個DOM上

通過data()函數存取的數據都是臨時數據,一旦頁面刷新,之前存放的數據都將不復存在。

該函數屬于jQuery對象(實例)。如果需要移除通過data()函數存放的數據,請使用removeData()函數。

題目6:

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

  • 給元素 $node 添加 class active,給元素 $node 刪除 class active

    $node.addClass('active');
    $node.removeClass('active');
    
  • 展示元素$node, 隱藏元素$node

    $node.hide();
    $node.css("display","none");
    
  • 獲取元素$node 的 屬性: id、src、title, 修改以上屬性

    $node.attr({
      id: 'test',
      src: 'http://test.com',
      title: 'test',
    });
    
  • $node 添加自定義屬性data-src

    $node.attr('data-src', 'test')
    
  • $ct 內部最開頭添加元素$node

    $ct.prepend($node);
    
  • $ct 內部最末尾添加元素$node

    $ct.append($node)
    
  • 刪除$node

    $node.remove();
    
  • $ct里內容清空

    $ct.empty()
    
  • $ct里設置 html <div class="btn"></div>

    $ct.html('<div class="btn"></div>')
    
  • 獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)

    //獲取計算寬度值,height同理
    $node.width()
    $node.height()
    //獲取計算的內部寬度,包括padding,不包括border, innerHeight同理
    $node.innerWidth()
    $node.innerHeight()
    //獲取計算外部寬度,包括padding, border,和可選的margin,outerHeight同理
    $node.outerWidth()
    $node.outerHeight()
    
  • 獲取窗口滾動條垂直滾動距離

    $node..scrollTop()
    
  • 獲取$node 到根節點水平、垂直偏移距離

    $node.offset().top;    
    $node.offset().left;
    
  • 修改$node 的樣式,字體顏色設置紅色,字體大小設置14px

    $node.css({
      color: "red",
      fontSize: "14px"
    });
    
  • 遍歷節點,把每個節點里面的文本內容重復一遍

    $node.each(function(){
        $(this).text($(this).text() + $(this).text())
     })
    
  • $ct 里查找 class 為 .item的子元素

    $ct.find('.item')
    
  • 獲取$ct 里面的所有孩子

    $ct.children()
    
  • 對于$node,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子

    $node.parents('.ct').find('.panel')
    
  • 獲取選擇元素的數量

    $node.length
    
  • 獲取當前元素在兄弟中的排行

    $node.index()
    

題目7:

用jQuery實現以下操作

  • 當點擊$btn 時,讓 $btn 的背景色變為紅色再變為藍色

    $btn.on('click', function(){
      $this.css('background-color','red');
      setTimeout(function(){
         $btn.css('background-color', 'blue');
       }, 200)
    })
    
  • 當窗口滾動時,獲取垂直滾動距離

      $(window).scroll(function(){
          console.log($(this).scrollTop())
        })
    
  • 當鼠標放置到$div 上,把$div 背景色改為紅色,移出鼠標背景色變為白色

        $div.on('mouseenter', function(){
          $(this).css('background-color', 'red');
        }).on('mouseleave', function(){
          $(this).css('background-color', 'white');
        })
    
  • 當鼠標激活 input 輸入框時讓輸入框邊框變為藍色,當輸入框內容改變時把輸入框里的文字小寫變為大寫,當輸入框失去焦點時去掉邊框藍色,控制臺展示輸入框里的文字

        $('input[type=text]').on('focus', function(){
          $(this).css('border-color', 'blue')
        }).on('change', function(){
          $(this).val($(this).val().toUpperCase())
        }).on('blur', function(){
          $(this).css('border-color', '')
          console.log($(this).val())
        })
    
  • 當選擇 select 后,獲取用戶選擇的內容

    $select.val()
    
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容