1.jQuery 中， $(document).ready()是什么意思？
以下两种写法等价，当DOM准备就绪时，指定一个函数来执行
$(document).ready(handler)
$(handler)
2.$node.html()和$node.text()的区别?
- .html获取的是集合中第一个匹配元素的HTML内容
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
$('div.demo-container').html();
得到结果如下：
<div class="demo-box">Demonstration Box</div>
-.text得到匹配元素集合中每个元素的合并文本，包括他们的后代
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
$('div.demo-container').text()
得到结果：
Demonstration Box list item 1 list item 2
3.$.extend 的作用和用法?
jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
类型:
[Boolean](https://www.jquery123.com/Types/#Boolean)
如果是true，合并成为递归（又叫做深拷贝）。
target
类型:
[Object](https://www.jquery123.com/Types/#Object)
对象扩展。这将接收新的属性。
object1
类型:
[Object](https://www.jquery123.com/Types/#Object)
一个对象，它包含额外的属性合并到第一个参数.
objectN
类型:
[Object](https://www.jquery123.com/Types/#Object)
包含额外的属性合并到第一个参数
.extend的作用是将两个或更多对象的内容合并到第一个对象；
用法有以下：
- 合并两个对象，并修改第一个对象
···
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(object1, object2);
结果：{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
···
- 递归方式合并两个对象，并修改第一个对象
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(true, object1, object2);
结果：{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
- 合并到新的对象，不改变原对象内容
var obj1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var obj2 = {
banana: {price: 200},
durian: 100
};
var obj3 = {};
.extend(obj3, obj1,obj2)
obj1
{apple: 0, banana: {weight: 52, price: 100}, cherry: 97}
obj2
{banana: {price: 200}, durian: 100}
obj3
{apple: 0, banana: {price: 200}, cherry: 97, durian: 100}
4.jQuery 的链式调用是什么？
链式操作是通过对象上的方法最后
return this
把对象再返回回来，从而可以访问自己的原型，对象可以继续调用方法，就可以链式操作
// 链式调用
$('.btn').on('click',function () {
$('.box').animate({width: 200})
.animate({height: 200})
})
链式调用的好处：节省代码量，代码看起来更优雅。
链式调用的问题：所有对象的方法返回的都是对象本身，也就是说没有返回值，所以这种方法不一定在任何环境下都适合
5. jQuery 中 data 函数的作用
jQuery.data是一个调用，应使用.data()
.data()，在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
* #### .data( key, value )
* **key**
类型:
[String](https://www.jquery123.com/Types/#String)
一个字符串，用户存储数据的名称。（译者注：存储的数据名）
* **value**
类型:
[Object](https://www.jquery123.com/Types/#Object)
新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。
* ####.data( obj )
* **obj**
类型:
[Object](https://www.jquery123.com/Types/#Object)
一个用于更新数据的 键/值对
用例：
我们可以在一个元素上设置不同的值，之后获取这些值
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
6.写出以下功能对应的 jQuery 方法：
1)给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active') //添加
$node.removeClass('active') //删除
2)展示元素$node, 隐藏元素$node
- 最简单的，直接展示、隐藏
$node.show();
$node.hide();
没有动画，直接显示和隐藏，但show可记忆display的属性，显示时恢复
也可增加动画和事件效果，并指定动画完成时的执行函数，hide类似
#### .show( [duration ] [, easing ] [, complete ] )
* **duration** (默认: `400`)
类型: Number or String 一个字符串或者数字决定动画将运行多久。
* **easing** (默认:`swing`)
类型:String
一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）
* **complete**
类型:Function
在动画完成时执行的函数。
$node.show(300, 'linear', function() {
alert('Animation complete.');
})
- 渐变效果
.fadeIn( [duration ] [, easing ] [, complete ] ) //淡入方式显示
.fadeOut( [duration ] [, easing ] [, complete ] ) //淡出方式隐藏
.fadeToggle( [duration ] [, easing ] [, complete ] ) //通过调整不透明度，隐藏和显示元素
- 滑动效果
.slideDown( [duration ] [, easing ] [, complete ] ) //给元素高度加动画，下部向下滑动动画显示元素
.slideUp( [duration ] [, easing ] [, complete ] ) //给元素高度加动画，下部向上滑动，高度为0时，元素隐藏
.slideToggle( [duration ] [, easing ] [, complete ] ) //上下滑动切换，隐藏和显示元素
3)获取元素$node 的 属性: id、src、title， 修改以上属性
获取属性:.attr( attributeName )
var title = $( "em" ).attr( "title" );
$('.mod_tab').attr('id')
$('.content img').attr('src')
修改属性:.attr( attributeName, value )
$('em').attr('title','photo for fun')
$('.mod_tab').attr('id','box');
$('.content img').attr('src','/img/test.img');
4)给$node 添加自定义属性data-src
$node.attr('data-src','jirengu.com')
5)在$ct 内部最开头添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
6)在$ct 内部最末尾添加元素$node
$node.appendTo($ct)
7)删除$node
$node.remove();
8)把$ct里内容清空
$ct.empty();
9)在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10)获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
- 不包括内边距宽高：
$node.width()
$node.height()
- 包括内边距padding的宽高
$node.innerWidth()
$node.innerHeight()
- 包括边框的宽高
$node.outerWidth()
$node.outerHeight()
- 包括margin的宽高
$node.outerWidth(true)
$node.outerHeight(true)
11)获取窗口滚动条垂直滚动距离
$node.scrollTop();
12)获取$node 到根节点水平、垂直偏移距离
.offset()
.offset()方法允许我们检索一个元素 包含其 border 边框，不包括 margin相对于文档document的当前位置。和.position()的差别在于：.position()是相对于父级元素的位移。当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset()`更合适。
.offset()返回一个包含top和left属性的对象
$node.offset().top;
$node.offset().left;
13)修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
"color": "red",
"font-size": "14px"
});
14)遍历节点，把每个节点里面的文本内容重复一遍
$('.box>ul>li').each(function(index, node){
var str = $(node).text();
$(node).text(str + str)
})
15)从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
16)获取$ct 里面的所有孩子
$ct.children()
17)对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent('.ct').find('.panel')
18)获取选择元素的数量
$node.length()
19)获取当前元素在兄弟中的排行
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('#bar').index()
1
网友评论