1. jQuery 中, $(document).ready()是什么意思?
$(document).ready()表示页面的DOM元素已经加载完毕,这是为了防止页面元素加载完之前对DOM元素进行操作。原生JS我们通常使用window.onload来打到这个效果,不过两者还是有区别 ,onload是所有元素、图片、外部资源都加载完,而$(document).ready()只需要元素加载完成。所以onload比$().ready()要慢
2.$node.html()和$node.text()的区别?
.html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。
.text()得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容
<div class="test1">
<p>我是这样输出哒</p>
</div>
$('.test1').html() //<p>我是这样输出哒</p>
$('.test1').text() //我是这样输出哒
3. $.extend 的作用和用法?
$.extend的作用是:将两个或更多对象的内容合并到第一个对象。
拷贝分深拷贝和浅拷贝:
- 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
- 目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
var object = $.extend({}, object1, object2);
- 在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并
Example:合并两个对象,并修改第一个对象。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$.extend( object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
Example:采用递归方式合并两个对象,并修改第一个对象。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$.extend( true, object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
Example:合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
//defaults -- {"validate":false,"limit":5,"name":"foo"}
//options -- {"validate":true,"name":"bar"}
//settings -- {"validate":true,"limit":5,"name":"bar"}
4. jQuery 的链式调用是什么?
使用jQuery方法时,对象方法返回的是对象本身,可以调用此对象的其他jQuery方法,实现链条样式的调用。
$this.addClass('active').siblings().removeClass('active');
5. jQuery 中 data 函数的作用?
data函数:存储任意数据到指定的元素,返回设置的值。
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险
jQuery.data(element, key, value)
存储任意数据到指定的元素,返回设置的值。
jQuery.data( element, key )
返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据,或者元素上完整的数据存储。
$().data(key)、$().data()
从jQuery对象上读数据。
6.写出以下功能对应的 jQuery 方法:
给元素 $node 添加 class active,给元素 $node 删除 class active
$node.addClass('.active')
$node.removeClass('.active')
展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
获取元素$node 的 属性: id、src、title, 修改以上属性
$node.attr('id','newid')
$node.attr('arc','newsrc')
$node.attr('title','newtitle')
给$node 添加自定义属性data-src
$node.data('data-arc','newsrc')
在$ct 内部最开头添加元素$node
$ct.prepend($node)
在$ct 内部最末尾添加元素$node
$ct.append($node)
删除$node
$node.remove()
把$ct里内容清空
$ct.empty()
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度
获取窗口滚动条垂直滚动距离
$(window).scrollTop()
获取$node 到根节点水平、垂直偏移距离
$node.offset()
修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({'color':'red','font-size':'14px'})
遍历节点,把每个节点里面的文本内容重复一遍
$node.each(function(){
console.log($(this).text());
})
从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
获取$ct 里面的所有孩子
$ct.children()
对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
获取选择元素的数量
$node.length()
获取当前元素在兄弟中的排行
$node.index()
【个人总结,如有错漏,欢迎指出】
:>