jQuery動(dòng)畫與ajax

jQuery 中， $(document).ready()是什么意思？

當(dāng) DOM（文檔對象模型） 已經(jīng)加載，并且頁面（包括圖像）已經(jīng)完全呈現(xiàn)時(shí)，會(huì)發(fā)生 ready 事件。
由于該事件在文檔就緒后發(fā)生，因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法。
ready() 函數(shù)規(guī)定當(dāng) ready 事件發(fā)生時(shí)執(zhí)行的代碼。
ready() 函數(shù)僅能用于當(dāng)前文檔，因此無需選擇器。
ready() 函數(shù)必需。規(guī)定當(dāng)文檔加載后要運(yùn)行的函數(shù)。

允許使用以下三種語法：

語法一

  $(document).ready(function)

語法二

  $().ready(function)

語法三

  $(function)

$node.html()和$node.text()的區(qū)別?

$node.html()
  • html():取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。 
  <ul class="warp">
    <li>內(nèi)容1</li>
    <li>內(nèi)容2</li>
    <li>內(nèi)容3</li>
  </ul>
  <ul class="warp">
    <li>內(nèi)容1</li>
    <li>內(nèi)容2</li>
    <li>內(nèi)容3</li>
  </ul>
只獲取第一個(gè)匹配元素的html內(nèi)容
  • html(val):設(shè)置每一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。
如果有值就替換全部匹配的html內(nèi)容
$node.text()
  • text():取得所有匹配元素的內(nèi)容。一般用id區(qū)別。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。這個(gè)方法對HTML和XML文檔都有效。
不輸入值，取得所有匹配元素的文本內(nèi)容
  • text(val):設(shè)置所有匹配元素的文本內(nèi)容
    替換所有匹配元素的文本，不識別標(biāo)簽
區(qū)別：

.html()用為讀取和修改元素的HTML標(biāo)簽和文本內(nèi)容
.text()用來讀取或修改元素的純文本內(nèi)容

.html()方法使用在多個(gè)元素上時(shí)，只讀取第一個(gè)元素
.text()應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容。

.html()和.text()都可以使用回調(diào)函數(shù)的返回值來動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容。

$.extend 的作用和用法?

將兩個(gè)或更多對象的內(nèi)容合并到第一個(gè)對象。

jQuery.extend( [deep ], target, object1 [, objectN ] )
參數(shù) 類型 說明
deep Boolean 如果是 true，合并成為遞歸（又叫做深拷貝）。不支持給這個(gè)參數(shù)傳遞 false
target Object 對象擴(kuò)展。這將接收新的屬性。
object1 Object 一個(gè)對象，它包含額外的屬性合并到第一個(gè)參數(shù).
objectN Object 包含額外的屬性合并到第一個(gè)參數(shù)

實(shí)例

  var obj1 = { a : 1 }
  var obj2 = { b : 2 , c : 3 }
  var obj3 = { b : 3 , d : 5 }
  var obj4 = { }
  $.extend( obj1 , obj2 )  // obj1 = { a : 1, b : 2 , c : 3 }
  $.extend( obj1 , obj2 , obj3 )  // obj1 = { a : 1, b : 3 , c : 3 , d : 5 }
  
  $.extend( obj4 , obj1 , obj2 , obj3 )  
  // obj4 = { a : 1, b : 3 , c : 3 , d : 5 }

  var obj5 = $.extend( { } , obj1 , obj2 , obj3 ) 
  //新建obj5 ， obj5 = { a : 1, b : 3 , c : 3 , d : 5 }

淺拷貝與深拷貝

var object1 = {
  a:1,
  b:{b1:2,b2:3}
};
var object2 = {
  c:3,
  b:{b2:4}
};
 
$.extend(object1, object2); 
console.log(object1); //  {a:1,b:{b2:4},c:3}
深拷貝：
$.extend(true,object1,object2);
console.log(object1); // {a:1,{b1: 2, b2: 4},c:3}

其實(shí)說白了就一句話，按從后往前的順序，把后面的對象的值覆蓋到第一個(gè)，并修改第一個(gè)對象的值

jQuery 的鏈?zhǔn)秸{(diào)用是什么？

實(shí)現(xiàn)原理是在當(dāng)前函數(shù)執(zhí)行完后return this，即返回該函數(shù)的執(zhí)行環(huán)境，下一個(gè)函數(shù)就可以繼續(xù)在這個(gè)函數(shù)下運(yùn)行了，結(jié)果就是多種方法在一個(gè)jQuery對象上一個(gè)接一個(gè)地調(diào)用
鏈?zhǔn)秸{(diào)用在代碼結(jié)構(gòu)上十分清晰，又能簡化代碼。

  $("li").eq(1).click().end().eq(3).click();

jQuery 中 data 函數(shù)的作用

在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。

1.在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù).

  .data( key, value )
  .data( obj )
參數(shù) 類型 說明
key String 存儲(chǔ)的數(shù)據(jù)名
value Anything 新的數(shù)據(jù)值；它可以是任意的Javascript數(shù)據(jù)類型，除了undefined。
obj Object 一個(gè)用于更新數(shù)據(jù)的 鍵/值對

2.返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。

   .data( key )
   .data()

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

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

.data()方法允許我們在DOM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。我們可以在一個(gè)元素上設(shè)置不同的值，并獲取這些值：

alert($('body').data('foo'));
alert($('body').data());

上面兩行會(huì)顯示先前設(shè)置在 body元素上設(shè)置的值。若果那個(gè)元素上沒有設(shè)置任何值，那么將返回undefined。

alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar

寫出以下功能對應(yīng)的 jQuery 方法：

  • 給元素 $node 添加 class active,給元素 $noed 刪除 class active
  $node.addClass("active")  //添加
  $node.removeClass("active")  //移除
  • 展示元素$node, 隱藏元素$node
  $node.show()
  $node.hide()
  • 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
  $node.attr('id')
  $node.attr('src') 
  $node.attr('title') 

  //修改以上屬性
  $node.attr({ id : "xxx", src : "xxx" , title : "xxx"});
  • 給$node 添加自定義屬性data-src
  $node.attr('data-src','value')
  • 在$ct 內(nèi)部最開頭添加元素$node
  $ct.prepend($node)
  • 在$ct 內(nèi)部最末尾添加元素$node
  $ct.appendTo($node)
  • 刪除$node
  $node.remove
  • 把$ct里內(nèi)容清空
  $ct.empty()
  • 在$ct 里設(shè)置 html <div class="btn"></div>
  $ct.html('<div class="btn"></div>')
  • 獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
    獲取寬高
  $node.width();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
  $node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容

  $node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
  $node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度

  //不設(shè)置參數(shù)或設(shè)置false
  $node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?  $node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度

  $node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
  $node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度

設(shè)置寬高

  //不包括內(nèi)邊距
  $node.width(100)
  $node.height(100)
  $node.css({width:'200px',height:'300px'})
  //設(shè)置元素的寬度和高度，也可以不要引號和單位

  <!--//效果一樣
  $node.width(100)
  $node.width('100')
  $node.width('100px')-->

  //包括內(nèi)邊距
  $node.innerWidth(30)
  $node.innerHeight(30)

  //包括內(nèi)邊距，包括邊框
  $node.outerWidth(60)
  $node.outerHeight(60)

  //包括內(nèi)邊距，包括邊框，包括外邊距
  $node.outerWidth(70,true)
  $node.outerHeight(70,true)
  • 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
  $(window).scrollTop()
  • 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
   $node.offset().left // 水平偏移距離;
   $node.offset().top // 垂直偏移距離;
  • 修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
  $node.css({"color": "red","font-size": "14px"})
  • 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
  $node.each(function(){
    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').children();
  • 獲取選擇元素的數(shù)量
  $node.length
  • 獲取當(dāng)前元素在兄弟中的排行
$node.index();

用jQuery實(shí)現(xiàn)以下操作

  • 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
  $btn.on('click',function(){
    $btn.css({'background-color','red'})；
  setTimeout(function(){
    $btn.css({'background-color','blue'})；
  },500)
  })
  • 當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
  $(window).scroll(function(){
    var scrollTop = parseInt($(window).scrollTop())+'px';
    console.log('scrollTop:',scrollTop);
  })
  • 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li> 
  $div.on('mouseenter',function(){
    $div.css("backgroundColor","red")
  })
  $div.on('mouseleave',function(){
    $div.css("backgroundColor","white")
  })
  • 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮?，?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺(tái)展示輸入框里的文字
var $input = $('input')
$input.focus(function () {
    $(this).css('border-color', 'blue')
        .on('keyup', function () {
            $(this).val($(this).val().toUpperCase())
        })
})

$input.blur(function () {
    $(this).css('border-color', 'black')
    console.log($(this).val())
})
  • 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
  <div class="select">
    <select name="username" id="user">
    <option value="小明">小明</option>
    <option value="小紅">小紅</option>
    <option value="小剛">小剛</option>
  </select>
  <div class="result">
    小明
  </div>
  </div>

  <script>
      $('#user').on('change',function(){
      $('.result').text($(this).val());
    });
  </script>

用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面效果預(yù)覽409

index.html

<style>
    body {
        text-align: center;
    }

    ul {
        list-style: none;
        padding: 0;
    }

    li {
        list-style: none;
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    li:hover {
        background: green;
        color: #fff;
    }
    button{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 80px;
        border: 1px solid #E27272;
        border-radius: 3px;
        text-align: center;
        text-decoration: none;
        color: #E27272;
        background-color: #fff;
    }
</style>

<ul>
    <li>新聞1</li>
    <li>新聞2</li>
</ul>
<button>加載更多</button>
<script>
    let idx = 3, len = 3;
    $('button').on('click', function () {
        $.ajax({
            url: 'news',
            method: 'get',
            dataType: 'JSON',
            data: {
                length: len,
                index: idx
            }
        }).done(function (data) {
            idx += 3;
            appendHtml(data);
        }).fail(function () {
            alert('fail');
        })
    });
    let appendHtml = function (data) {
        for (let i in data) {
            $('<li>' + data[i] + '</li>').appendTo('ul');
        }
    }
</script>

router.js

app.get('/news', function (req, res) {
    var pos = req.query.index;
    var len = req.query.length;
    var data = [];
    for(var i=0; i<len; i++)
        data.push('新聞'+(parseInt(pos)+i));
    res.send(data);
});

實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁面，UI 如下圖所示(僅供參考，可自由發(fā)揮)。數(shù)據(jù)接口:

獲取天氣接口：http(s)://weixin.jirengu.com/weather
服務(wù)端支持 CORS 跨域調(diào)用，前端可直接使用 ajax 獲取數(shù)據(jù)，返回?cái)?shù)據(jù)以及使用方式參考 http://api.jirengu.com29

更多接口參考 http://api.jirengu.com29

參考資料

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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