题目1： jQuery 中， $(document).ready()是什么意思？
当DOM准备就绪时，指定一个函数来执行。
网页加载步骤：
- 解析HTML结构
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码
- 构造HTML DOM结构
- 加载图片等外部文件
- 页面加载文件
ready()在4.构造HTML DOM结构完成后触发。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时，需要特别注意，要保证外部的样式或内嵌的样式被加载完后，再调用脚本。而load()在6. 页面加载文件 完成后触发。
题目2： $node.html()和$node.text()的区别?
html是获取节点内的所有内容，包括标签、文本。 text是获取节点内的文本。
题目3： $.extend 的作用和用法?
jQuery.extend( [deep ], target, object1 [, objectN ] )
用来合并两个或以上的对象到目标对象，默认进行浅拷贝（只拷贝第一层，不考虑嵌套），如果不想改变拷贝源对象，可以传入一个{}空对象作为target对象。
deep为布尔值，如果是true，合并成为递归（又叫做深拷贝）。
例：
var obj1 = {
a: 1,
b: 2
}
var obj2 = {
b: 3,
c: 4
}
console.log(obj1)
$.extend(obj1,obj2)
console.log(obj1)
image.png
题目4： jQuery 的链式调用是什么？
由于jQuery的方法都会返回一个jQuery对象，所以使得一个对象可以多次调用。
题目5： jQuery 中 data 函数的作用
data() 方法向被选元素附加数据，或者从被选元素获取数据。
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用 removeData() 函数。
题目6：写出以下功能对应的 jQuery 方法：
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
$(node).addClass('active') //添加
$(node).removeClass('active') //删除
- 展示元素$node, 隐藏元素$node
$(node).show()
$(node).hide()
- 获取元素$node 的 属性: id、src、title， 修改以上属性
获取：
$(node).attr('id')
$(node).attr('src')
$(node).attr('title')
修改：
$(node).attr('id','newid')
$(node).attr('src','newsrc')
$(node).attr('title','newtitle')
- 给$node 添加自定义属性data-src
$(node).data('src','somesrc');
- 在$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() //.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值
$(node).height()
包括内边距:
$(node).innerWidth()
$(node).innerHeight()
包括边框:
$(node).outerWidth()
$(node).outerHeight()
包括外边距:
$(node).outerWidth(true)
$(node).outerHeight(true)
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
- 获取$node 到根节点水平、垂直偏移距离
$node.offset()
//注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。
//若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。但是若设置的属性是 display:none，由于在绘制 DOM 树时根本就不绘制该元素，所以它的位置属性值是 undefined。
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$(node).css({
'color' : 'red',
'font-size' : '14px'
})
- 遍历节点，把每个节点里面的文本内容重复一遍
$(node).each(function(){
var str = $(this).text()
$(this).text(str+str)
})
- 从$ct 里查找 class 为 .item的子元素
$('.ct').find('.item')
- 获取$ct 里面的所有孩子
$ct.children()
.children()方法允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象。.find()和.children()方法是相似的，但后者只是针对向下一个级别的DOM树。
.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找（注：也就是只查找一层，直接的父元素，而不是更加上级的祖先元素）。此外，$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$(node).parent('.ct').children('.panel')
- 获取选择元素的数量
$node.length;
$node.size();
- 获取当前元素在兄弟中的排行
$node.index();
网友评论