jquery ajax是什么意思,Jquery ajax

题目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)

})