1.jQuery中,$(document).ready()
是什么意思?
页面DOM结构加载完毕后,脚本就可以运行。传递处理函数给.ready()方法,能保证DOM准备好后就执行这个函数。
如果执行的代码需要在元素被加载之后才能使用时,(例如,取得图片的大小需要在图片被加载完后才能知道),就需要将这样的代码放到 load 事件中。
$(document).ready(handler)
等价于 $(handler)
2.$node.html()
和 $node.text()
的区别?
$node.html()
获取元素HTML内容,包括html标签和文本内容
$node.text()
获取元素文本内容,只包括文本内容,不包括标签
<div class="wrap">
<p>Hello World!</p>
</div>
console.log($('.wrap').html()) // <p>Hello World!</p>
console.log($('.wrap').text()) // Hello World!
3.$.extend
的作用与用法?
JQuery.extend([deep,]target[,object1][,objectN])
$.extend()
是指将一个或者多个对象的内容合并到第一个对象中,若有重复的内容则会被覆盖。
var obj1 = { a: '1'}
var obj2 = { b: '2', c: '3'}
var obj3 = { b: '3', d: '5'}
var obj4 = {}
$.extend(obj1,obj2); //obj1 ={a: '1', b: '2', c: '3'}
$.extend(obj1,obj2,obj3); //obj1 ={a: '1', b: '3', c: '3', d: '5'}
$.extend(obj4,obj1,obj2,obj3); //obj4 ={a: '1', b: '3', c: '3', d: '5'}
var obj5 = $.extend({},obj1,obj2,obj3); //obj5 ={a: '1', b: '3', c: '3', d: '5'}
4.jQuery的链式调用是什么?
对一个jQuery方法进行多次多种方法的调用,其原理是通过对象上每个方法最后返回本对象--this。因为返回的是同一对象,所以链式操作就能持续下去。
$('.box').find('p').text('This is a message');
5.jQuery中data函数的作用
data函数用于在当前jQuery对象所匹配的所有元素上存取数据。
data() 以对象形式返回之前存储的所有数据
data(key) 以指定的键名key存取数据
data(key,value) 以键名key存放值为value的数据
data(object) 以对象形式同时传入任意多个key-value的数据
6.写出以下功能对应的jQuery方法
$node.addClass('active'); //给元素 $node 添加 class active
$node.removeClass('active') //给元素 $node 删除 class active
$node.show() //展示元素$node
$node.hide() //隐藏元素$node
$node.attr('id') //获取元素$node 的 属性: id
$node.attr('src') //获取元素$node 的 属性: src
$node.attr('title') //获取元素$node 的 属性: title
$node.attr('id','xxx') //修改元素$node 的 属性: id
$node.attr('src','xxx') //修改元素$node 的 属性: src
$node.attr('title','xxx') //修改元素$node 的 属性: title
$node.attr('data-src','xxx') //给$node 添加自定义属性data-src
$ct.prepend($node) or $node.prependTo($ct) //在$ct 内部最开头添加元素$node
$ct.append($node) or $node.appendTo($ct) //在$ct 内部最末尾添加元素$node
$node.remove() //删除$node
$node.empty() //把$ct里内容清空
$ct.html('<div class="btn"></div>') //在$ct 里设置 html <div class="btn"></div>
$node.width()//获取$node 的宽度,不包括内边距
$node.height() //获取$node 的高度,不包括内边距
$node.innerWidth() //获取$node 的宽度,包括内边距不包括border
$node.innerHeight() //获取$node 的高度,包括内边距不包括border
$node.outerWidth([includeMargin]) //获取$node 的宽度,包括内边距、边框,当includeMargin为true,则包括外边框,否则不包括外边框
$node.outerHeight([includeMargin]) //获取$node 的高度,包括内边距、边框,当includeMargin为true,则包括外边框,否则不包括外边框
$node.width('xxx') //设置$node 的宽度
$node.height('xxx') //设置$node 的高度
$(wondow).scrollTop() //获取窗口滚动条垂直滚动距离
$node.offset().left //获取$node 到根节点水平偏移距离
$node.offset().top //获取$node 到根节点垂直偏移距离
$node.css({"color": "red","font-size": "14px"}) //修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.each(function(){ console.log($(this).text())}) //遍历节点,把每个节点里面的文本内容重复一遍
$ct.find('.item') //从$ct 里查找 class 为 .item的子元素
$ct.children() //获取$ct 里面的所有孩子
$node.parent('.ct').find('.panel') //对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.length //获取选择元素的数量
$node.index() //获取当前元素在兄弟中的排行