jQuery動畫與ajax

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

當(dāng) document 已經(jīng)加載完成后，會發(fā)生 ready 事件。
ready() 函數(shù)規(guī)定當(dāng) ready 事件發(fā)生時執(zhí)行的代碼。
ready() 函數(shù)僅能用于當(dāng)前文檔，因此無需選擇器。
它有以下三種寫法：

$(document).ready(function)
//$().ready(function)
//$(function)
//三種寫法的效果等價

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

$node.html()獲取的是對象元素標(biāo)簽內(nèi)的所有Html內(nèi)容，不包含元素自身的Html標(biāo)簽，但如果該元素有子級元素，則包含其子元素的標(biāo)簽和內(nèi)容；
而$node.text()獲取的是對象元素內(nèi)的文本內(nèi)容集合，不包含元素自身的Html標(biāo)簽，如果該元素有子級元素，則包含其子元素的文本內(nèi)容，但不包含子元素的Html標(biāo)簽。

3、$.extend 的作用和用法?

$.extend 通常被用于將一個或多個對象的內(nèi)容合并到目標(biāo)對象，也可以說是對目標(biāo)對象的擴(kuò)展。它的完整寫法是jQuery.extend([deep,] target [, object1 ] [, objectN ] )。

  1. 當(dāng)我們提供兩個或多個對象給 $.extend() 時，對象的所有屬性都將被添加到目標(biāo)對象（target參數(shù)）中。如果多個對象具有相同的屬性，則后者會覆蓋前者的屬性值；
  2. 當(dāng) $.extend() 只有一個參數(shù)時，意味著參數(shù)target被省略，此時target就是jQuery對象本身。通過這種方式，我們可以為全局對象jQuery添加新的函數(shù)；
  3. 目標(biāo)對象（target參數(shù)）將被修改，并且通過 $.extend() 返回。如果我們想保留原對象，可以通過傳遞一個空對象作為目標(biāo)對象。

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

鏈?zhǔn)秸{(diào)用即是在同一個元素節(jié)點(diǎn)上連續(xù)調(diào)用多個函數(shù)，并且都返回到節(jié)點(diǎn)本身。
例如這樣的寫法：

$(this).addClass('active').siblings().removeClass('active');

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

data函數(shù)，其完整寫法為jQuery.data(element,[key],[value])。
它主要被用于在元素上存放數(shù)據(jù)，返回jQuery對象。

其中的參數(shù)意義如下：
element：要關(guān)聯(lián)數(shù)據(jù)的DOM對象；
key：存儲的數(shù)據(jù)名；
value：將要存儲的任意數(shù)據(jù)。

示例代碼如下：

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

6、寫出以下功能對應(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:'newId',
  src:'newSrc',
  title:'newTitle'
});
  • 給$node 添加自定義屬性data-src
$node.attr('data-src','');
  • 在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend($node);
//$node.prependTo($ct);
  • 在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node);
//$node.appendTo($ct);
  • 刪除$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();
$node.height();
//不包括內(nèi)邊距

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

$node.outerWidth();
$node.outerHeight();
//包括邊框

$node.outerWidth(true);
$node.outerHeight(true);
//包括外邊距

設(shè)置：
$node.width('100px');
$node.height('100px');
//不包括內(nèi)邊距

$node.innerWidth('100px');
$node.innerHeight('100px');
//包括內(nèi)邊距

$node.outerWidth('100px');
$node.outerHeight('100px');
//包括邊框

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

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

  • 當(dāng)點(diǎn)擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
  • 當(dāng)窗口滾動時，獲取垂直滾動距離
  • 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
  • 當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮?，?dāng)輸入框失去焦點(diǎn)時去掉邊框藍(lán)色，控制臺展示輸入框里的文字
  • 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
    代碼鏈接：http://js.jirengu.com/nawaleposi/2/edit

8、用 jQuery ajax 實(shí)現(xiàn)如下效果：當(dāng)點(diǎn)擊加載更多會加載數(shù)據(jù)展示到頁面。

代碼如下：

//前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加載更多</title>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid lightgray;
            cursor: pointer;
        }
        li:hover{
            color: white;
            background: green;
        }
        .btn{
            display: block;
            margin: 10px auto;
            width: 80px;
            height: 40px;
            color: #E27272;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            border: 1px solid #E27272;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="ct">
        <li>內(nèi)容1</li>
        <li>內(nèi)容2</li>
    </ul>
    <a id="load-more" class="btn" href="javascript:void(0)">加載更多</a>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        var $btn = $('#load-more')
        var $idx = 3
        var $len = 6
        var $isDataArrive = true
        $btn.on('click',function(){
            if(!$isDataArrive){
                return
            }
            $isDataArrive = false
            $.ajax({
                url:'/loadMore',
                method:'get',
                dataType:'json',
                data:{
                    index:$idx,
                    length:$len
                },
                success:function(data){
                    loadMore(data);
                    $idx += 6;
                    $isDataArrive = true
                },
                error:function(){
                    console.log('error');
                }
            })
        })
        function loadMore(data){
            var html =''
            for(var i = 0; i < $len; i++){
                html += '<li>' + data[i] + '</li>'
            }
            $("#ct").append(html);
        }
    </script>
</body>
</html>

//后端代碼
app.get('/loadMore',function(req, res){
    var curIdx = req.query.index
    var len = req.query.length
    var data = []
    for(var i = 0; i < len; i++){
        data.push('內(nèi)容' + (parseInt(curIdx) + i))
    }
    setTimeout(function(){
        res.send(data)
    },1000)
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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