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

當(dāng)html文檔DOM樹(shù)加載完成，執(zhí)行ready里的函數(shù)。

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

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

$node.html()在沒(méi)有參數(shù)的時(shí)候，獲取集合中的第一個(gè)匹配元素的HTML內(nèi)容，當(dāng)有參數(shù)的時(shí)候表示，設(shè)置每個(gè)匹配元素的html內(nèi)容；

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

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

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

用法：

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

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

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

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

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

那么合并后的結(jié)果

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

也就是說(shuō)后面的參數(shù)如果和前面的參數(shù)存在相同的名稱(chēng)，那么后面的會(huì)覆蓋前面的參數(shù)值。

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

鏈?zhǔn)秸{(diào)用：使用jQuery方法時(shí)，對(duì)象方法返回的是對(duì)象本身，可以調(diào)用對(duì)此對(duì)象的其他jQuery方法，實(shí)現(xiàn)連續(xù)調(diào)用多個(gè)方法

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

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

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

contents:

.data(key, value)

.data(key, value)

.data(obj)

.data(key)

.data(key)

.data()

.data(key, value)

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

.data(key, value)

key 類(lèi)型：String 一個(gè)字符串，用于存儲(chǔ)數(shù)據(jù)的名稱(chēng)。

value 類(lèi)型：Object 新的數(shù)據(jù)值，它可以是任意的JavaScript數(shù)據(jù)類(lèi)型，包括Array、Object.

.data(obj)

obj type: Object 一個(gè)用于更新數(shù)據(jù)的　鍵／值對(duì)

例子：

$("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)

描述：返回匹配的元素集合中的第一個(gè)元素的給定名稱(chēng)的數(shù)據(jù)存儲(chǔ)的值

.data(key)

key type: String 存儲(chǔ)數(shù)據(jù)名。

.data()

這個(gè)方法不接受任何參數(shù)。得到匹配元素的所有存儲(chǔ)的數(shù)據(jù)

例子：

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

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

題目6：

寫(xiě)出以下功能對(duì)應(yīng)的 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 內(nèi)部最開(kāi)頭添加元素$node:$ct.prepend($node)

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

刪除$node:$node.remove()

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

在$ct 里設(shè)置 html

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

不包括內(nèi)邊距

$node.height();

$node.width();

包括內(nèi)邊距

$node.innerHeight();

$node.innerWidth();

包括邊框

$node.outerHeight();

$node.outerWidth();

包括邊框

$node.outerHeight(true);

$node.outerWidth(true);

設(shè)置

不包括內(nèi)邊距

$node.height( '100px' );

$node.width( '100px' );

包括內(nèi)邊距

$node.innerHeight( '100px' );

$node.innerWidth( '100px' );

包括邊框

$node.outerHeight( '100px' );

$node.outerWidth( '100px' );

包括邊框

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

$node.outerWidth( '100px', 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,fontSize:'14px'})

遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

$node.each(function(){

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

});

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

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

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

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

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

題目7：

鏈接

題目8： 用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面效果預(yù)覽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;

}

• 內(nèi)容1
• 內(nèi)容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){

//創(chuàng)建元素

var li = $('

')

//將內(nèi)容放入元素

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('內(nèi)容' + (index + i + 1))

}

res.send(backdata)

},1000)

})

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。