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

當html文檔DOM樹加載完成，執行ready里的函數。

傳遞處理函數給.ready()方法，能保證DOM準備好后就執行這個函數，因此，這里是進行所有其它事件綁定及運行其它 jQuery 代碼的最佳地方。

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

$node.html()在沒有參數的時候，獲取集合中的第一個匹配元素的HTML內容，當有參數的時候表示，設置每個匹配元素的html內容；

$node.text()在沒有參數的時候，獲取集合中每個元素的文本內容，包括后代(內容從父元素往子元素排列)，有參數的時候，設置匹配元素集合中的每個元素的文本內容為指定文本內容。

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

作用：將兩個或更多的內容合并到第一個對象。

用法：

extend(dest,src1,src2,src3...);

它的含義是將src1,src2,src3...合并到dest中,返回值為合并后的dest,由此可以看出該方法合并后，是修改了dest的結構的。如果想要得到合并的結果卻又不想修改dest的結構，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...)//也就是將"{}"作為dest參數。

這樣就可以將src1,src2,src3...進行合并，然后將合并結果返回給newSrc了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的結果

result={name:"Jerry",age:21,sex:"Boy"}

也就是說后面的參數如果和前面的參數存在相同的名稱，那么后面的會覆蓋前面的參數值。

題目4： jQuery 的鏈式調用是什么？

鏈式調用：使用jQuery方法時，對象方法返回的是對象本身，可以調用對此對象的其他jQuery方法，實現連續調用多個方法

例：$(this).addClass('active').siblings().removeClass('active')

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

在匹配元素上存儲任意相關的數據　或　返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

contents:

.data(key, value)

.data(key, value)

.data(obj)

.data(key)

.data(key)

.data()

.data(key, value)

描述：在匹配元素上存儲任意相關數據

.data(key, value)

key 類型：String 一個字符串，用于存儲數據的名稱。

value 類型：Object 新的數據值，它可以是任意的JavaScript數據類型，包括Array、Object.

.data(obj)

obj type: Object 一個用于更新數據的　鍵／值對

例子：

$("body").data("foo" , 18);

$("body").data("abc", { name: "text", sex: 20 });

$("body").data({cba:[a,b,c]});

$("body").data("foo"); // 18

$("body").data() // {foo: 18, abc: {name: "text", sex: 20}, cba:[a,b,c]}

.data(key)

描述：返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值

.data(key)

key type: String 存儲數據名。

.data()

這個方法不接受任何參數。得到匹配元素的所有存儲的數據

例子：

$('body').data('foo'); // undefined

$('body').data(); // undefined

題目6：

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

給元素 $node 添加 class active:$node.addClass('active')

給元素 $node 刪除 class active:$node.removeClass('active')

展示元素$node, 隱藏元素:$node:$node.hide() $node.show() $node.trigger()

獲取元素$node 的 屬性: id、src、title， 修改以上屬性:

$node.attr('id','newID')

$node.attr('src','newSrc')

$node.attr('title','newTitle')

給$node 添加自定義屬性data-src: $node.attr('data-src','src')

在$ct 內部最開頭添加元素$node:$ct.prepend($node)

在$ct 內部最末尾添加元素$node:$ct.append($node) $node.appendTo($ct)

刪除$node:$node.remove()

把$ct里內容清空:$ct.empty()

在$ct 里設置 html

獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距):

不包括內邊距

$node.height();

$node.width();

包括內邊距

$node.innerHeight();

$node.innerWidth();

包括邊框

$node.outerHeight();

$node.outerWidth();

包括邊框

$node.outerHeight(true);

$node.outerWidth(true);

設置

不包括內邊距

$node.height( '100px' );

$node.width( '100px' );

包括內邊距

$node.innerHeight( '100px' );

$node.innerWidth( '100px' );

包括邊框

$node.outerHeight( '100px' );

$node.outerWidth( '100px' );

包括邊框

$node.outerHeight( '100px', true );

$node.outerWidth( '100px', true );

獲取窗口滾動條垂直滾動距離:$(window).scrollTop()

獲取$node 到根節點水平、垂直偏移距離:$node.offset().left　水平 $node.offset().top 垂直

修改$node 的樣式，字體顏色設置紅色，字體大小設置14px:$node.css({color:'red,fontSize:'14px'})

遍歷節點，把每個節點里面的文本內容重復一遍

$node.each(function(){

$(this).text().+$(this).text();

});

從$ct 里查找 class 為 .item的子元素:$ct.find('.item')

獲取$ct 里面的所有孩子:$ct.children()

對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子:$node.parent('.ct').find('.panel')

獲取選擇元素的數量:$('#id').length

獲取當前元素在兄弟中的排行:$('ul').index($(this));

題目7：

鏈接

題目8： 用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面效果預覽368

加載更多

.ct{

list-style: none;

padding: 0;

}

.ct li{

margin-bottom: 10px;

border: 1px solid;

cursor: pointer;

height: 38px;

padding-top: 10px;

}

.ct li:hover{

background: green;

color:white;

}

.button {

display: block;

width: 100px;

height: 40px;

line-height: 40px;

margin: 0 auto;

border: 1px solid red;

text-align: center;

text-decoration: none;

color: red;

}

• 內容1
• 內容2

加載更多

var button = $('.button')

var content = $('.ct')

var index1 = 2

var sendEnd = false

button.on('click', function (e) {

e.preventDefault()

if (sendEnd){

return

}

$.ajax({

url:'/loadMore',

type:'GET', //GET

data:{

index:index1,length:5

},

success:function(data){

console.log(data)

for (var i in data){

//創建元素

var li = $('

')

//將內容放入元素

li.text(data[i])

content.append(li)

}

sendEnd = false

},

})

sendEnd = true

index1 += 5

})

MOCK：

router.get('/loadMore', function(req, res) {

var index = parseInt(req.query.index)

var length = req.query.length

var backdata = []

setTimeout(function () {

for (var i = 0; i < length; i++){

backdata.push('內容' + (index + i + 1))

}

res.send(backdata)

},1000)

})

總結

以上是生活随笔為你收集整理的jquery ajax是什么意思,Jquery ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。