问答
1.Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
- $(document).ready()
- 等到HTML结构绘制完毕后就立即执行，不必等到图片等所有资源加载完毕。
- 可以简写
$(function(){}) - window.onload
- 必须等到当前页面中包括图片在内的所有元素全部加载完毕后才会执行。
- 如果有多个.onload，后面的会覆盖前面的。
2.$node.html()和$node.text()的区别?
- .html()方法获取该元素集合中第一个元素包含的html代码（html标签和文本）。.html(string)提供参数就可以设置html。
- .text()方法获取所有匹配元素包含的文本集合。.text(string)提供参数就可以设置文本。
如下：
<p><span>这是一个段落</span></p>
<p><span>这是一个段落2</span></p>
//.html()和.text()获取结果如下
$('p').html() //获取的是第一个p中的html "<span>这是一个段落</span>"
$('p').text() // 获取的是两个p的文本集合 "这是一个段落这是一个段落2"
$('p').html('<em>你好</em>') //<p><em>你好</em></p>
$('p').text('哈喽') //<p>哈喽</p>
3.$.extend 的作用和用法?
$.extend( [deep ], target, object1 [, objectN ] )将两个或更多对象的内容合并到第一个对象。
deep ：如果是true，合并成为递归（又叫做深拷贝）。
target：目标对象。如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象。
object1：合并的第一个参数。
objectN ：合并的n个参数。
var d1 = {
1:a,
name:{height:10,width:20},
2:b
};
var d2 = {
name:{width:25},
3:c
};
$.extend(d1,d2); //{1:a,name:{width:25},2:b,3:c}
//深拷贝
$.extend(true,d1,d2); //{1:a,name:{height:10,width:25},2:b,3:c}
$.extend({},d1,d2); //合并 d1 和 d2 对象，并且不修改 d1 对象。
4.JQuery 的链式调用是什么？
- 链式操作就是分步骤地对jQuery对象实现各种操作
$("#Test").css('color','red').show(200).removeClass('style');
- 链式调用有助于简化代码的编写工作，并在某种程度上可以让代码更加简洁、易读。
5.JQuery ajax 中缓存怎样控制?
jQuery ajax方法中是利用cache参数来控制缓存。
- 如果设置为 false ，浏览器将不缓存此页面（默认为true，但是datatype为script和jsonp时默认为false。）
- 每次发布的时候都可以加个后缀?t=1`每发布一次就改了序号
<script src="abc.js?t=1"></script>
6.jquery 中 data 函数的作用
.data( key, value )在匹配元素上存储任意相关数据。
.data( key )返回匹配的元素集合中的第一个元素存储的值。
$("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 ] }
代码
1.给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active')
$node.removerClass('active')
2.展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
3.获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id')
$node.attr('src')
$node.attr('title','title2')
4.给$node 添加自定义属性data-src
$('.node').attr('data-src','abc.png')
5.在$ct内部最开头添加元素$node
$ct.prepend($node)
6.在$ct内部最末尾添加元素$node
$ct.append($node)
7.删除$node
$node.remove()
8.把$ct里内容清空
$ct.empty()
9.在$ct里设置 <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width()//不包括内边距宽度仅包括内容
$node.height()//不包括内边距宽度仅包括内容
$node.innerWidth()//包括内容和内边距宽度
$node.innerHeight()//包括内容和内边距高度
$node.outerWidth()//包括内容和内边距边框宽度
$node.outerHeight()//包括内容和内边距边框高度
$node.outerWidth(ture)//包括内容和内边距边框外边距宽度
$node.outerHeight(ture)//包括内容和内边距边框外边距高度
11.获取窗口滚动条垂直滚动距离
$(window).scrollTop()
$(window).scrollTop == 0 //顶端
12.获取$node 到根节点水平、垂直偏移距离
$node.offset() //在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
'color':'red',
'fot-size':'14px'
})
14.遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
$(this).text()
})
15.从$ct 里查找 class 为 .item的子元素
$ct.find('item');
16.获取$ct 里面的所有孩子
$ct.children();
17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
$node.parents().find('.ct').find('.panel');
18..获取选择元素的数量
$node.length;
19.获取当前元素在兄弟中的排行
$node.index();
