问答
1.Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
- $(document).ready()是当DOM绘制完毕就执行函数，此时有可能页面所关联的图片等未加载完成。可以写多个，并且都可以执行。
可以简写为：
<pre>
$().ready(function(){}
$$(function(){}
</pre> - window.onload：该方法与$(document).ready()相似，但它是在页面的所有元素（包括图片）加载完后才会执行。没有简写方法
2.$node.html()和$node.text()的区别?
html() 获取node节点的内容（包括 HTML 标记）
-
text() 获取node节点的文本内容
<pre>
<div>
<div>这是div元素的文本内容</div>
</div>
<script>
$(function(){
var nodeHtml = $("div").html();
//nodeHtml值为<div>这是span元素的文本内容</div>var nodeText = $("div").text();
//nodeText值为这是div元素的文本内容
})
</script>
</pre>
3.$.extend 的作用和用法?
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
写法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )，deep
为true时为深拷贝，对象属性相同时后面的值覆盖前面的属性值，target为目标对象，会将object1，object2等的内容合并到target中，会改变target的内容。如果不想改变target的值可以把target设置为{}
例子：
<pre>
<script>
var defaultOpts={
name:'haha',
age:20
};
function People(opts){
var opts=$.extend({},defaultOpts,opts);
console.log(opts);
}
People({});
People({name:'wowowowo'});
People({age:30,sex:'nan'});
</script>
</pre>
4.JQuery 的链式调用是什么？
- jquery的方法都有返回值，值都为jquery对象，前一个方法的值可以被后一个方法直接使用。方法之间用.连接，这种形式就是链式调用。
比如：
<pre>$(this).parents('ct').find('p').text('hello');</pre>
5.JQuery ajax 中缓存怎样控制?
- 在参数中加入cache其值为flase，就可以在文件中加一个时间戳。这样每次访问的地址都不一样，也就不会缓存文件了。
<pre>
ajax({
url: '1.php',
type: 'get',
cache: false,
data: {
code.....
},
success: function(json){
code.....
},
error: function(){
code ......
}
});
</pre>
相当于：
- 又比如get请求时在
url后面添加时间戳(例如：url?t=new Date().getTime()
)
6.jquery 中 data 函数的作用
- 在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
-
.data()方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。 - jQuery.data( key, value)
我们可以在一个元素上设置不同的值，之后获取这些值：
<pre>
$("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 ] }
</pre> - .data( key )返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 通过.data(name, value)或HTML5 data-* 属性设置
- .data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：
<pre>
alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar
</pre>
代码
1.写出以下功能对应的 Jq 方法：
1.给元素 $node 添加 class active，给元素 $noed 删除 class active
<pre>
$node.addClass('active');
$node.removeClass('active');
</pre>
2.展示元素$node, 隐藏元素$node
<pre>
$node.show();
$node.hide();
</pre>
3.获取元素$node 的 属性: id、src、title， 修改以上属性
<pre>
$node.attr('id','ct');
$node.attr('src','http://www.baidu.com');
$node.attr('title','news');
</pre>
4.给$node 添加自定义属性data-src
<pre>
$node.attr('data-src','');
</pre>
5.在$ct 内部最开头添加元素$node
<pre>
$ct.append($node);
</pre>
6.在$ct 内部最末尾添加元素$node
<pre>
$ct.prepend($node)
</pre>
7.删除$node
<pre>
$node.remove;
</pre>
8.把$ct里内容清空
<pre>
$ct.empty($ct);
</pre>
9.在$ct 里设置 html <div class="btn"></div>
<pre>
$ct.html(' <div class="btn"></div>');
</pre>
10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
<pre>
$node.width();
$node.height();//（不包括内边距、边框或外边距）
$node.innerWidth();
$node.innerHeigth();//（包括内边距）
$node.outerWidth();
$node.outerHeight();//（包括内边距和边框）
$node.outerWidth(true);
$node.outerWidth(true);//（包括内边距、边框和外边距）
</pre>
11.获取窗口滚动条垂直滚动距离
<pre>
$(document).scollTop();
</pre>
12.获取$node 到根节点水平、垂直偏移距离
<pre>
$node.offset();
</pre>
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
<pre>
$node.css({
'color':'red',
'font-size':'14px'
});
</pre>
14.遍历节点，把每个节点里面的文本内容重复一遍
<pre>
<div>div1</div>
<div>div2</div>
<button>点击</button>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$('button').on('click', function() {
$('div').each(function(){
$text= $(this).text();
$(this).text($text+$(this).text());
};
});
</script>
</pre>
15.从$ct 里查找 class 为 .item的子元素
<pre>
$ct.find('.item');
</pre>
16.获取$ct 里面的所有孩子
<pre>
$ct.children();
</pre>
17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
<pre>
$node.parents('.ct').find('.panel');
</pre>
18.获取选择元素的数量
<pre>
$node.length;
</pre>
19.获取当前元素在兄弟中的排行
<pre>
$node.index();
</pre>
版权归吴秀芳和饥人谷所有，若有转载，请注明来源
