1. jQuery 中， $(document).ready()是什么意思？
包含在$(document).ready()中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。
2.$node.html()和$node.text()的区别?
jQuery.html（）将字符串转为HTML，jQuery.text（）将内容转为文本。
例子：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
$('#div1').html('<a href="example.html">Link</a><b>hello</b>');
$('#div2').text('<a href="example.html">Link</a><b>hello</b>');
</script>
</body>
</html>
3. $.extend 的作用和用法?
将两个或多个对象的内容合并到第一个对象中。
语法：
jQuery.extend( [deep ], target, object1 [, objectN ] )//版本1.1.4
参数：
deep
类型: Boolean
如果是true，合并成为递归（又叫做深拷贝）。
target
类型: Object
对象扩展。这将接收新的属性。
object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数.
objectN
类型: Object
包含额外的属性合并到第一个参数
最简单的实现：
var a = {a:1,b:2};
var b = {c:3,d:4};
$.extend(a,b); //a会变成 {a:1,b:2,c:3,d:4}
如果要合并进去的数组与目标数组有重复，那么会有这样的操作
var a = {a:1,b:2};
var b = {b:3,c:4};
$.extend(a,b);//a会变成 {a:1,b:3,d:4}
上面的两种方法都会改变目标数组a，那么想不改变原数组，可以如下
var a = {a:1,b:2};
var b = {b:3,c:4};
var c = $.extend({},a,b)//将第一个参数目标数组设为空数组，最后赋值给c，c的结果会是 {a:1,b:3,d:4}
那么有深拷贝的需求，就可以如下
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
//不进行深拷贝设置
$.extend( object1, object2);
/*
{
apple: 0,
banana: {
price: 200
},
cherry: 97,
durian: 100
}
其中 object2中的banana对象就直接覆盖了object1中的banana对象，并没有展开进行合并
*/
//设置深拷贝
$.extend(true, object1, object2);
/*
{
apple: 0,
banana: {
price: 200,
weight: 52
},
cherry: 97,
durian: 100
}
*/
深拷贝的注意：不支持第一个参数传递 false 。
如果对象的内容里包含数组的话,数组里的内容并不会进行合并，而是视为一个整体，对目标数组进行覆盖：
var object1 = {
apple: 0,
banana: {weight: 52, price: 100,a:[232,222]},
cherry: [2,3,4]
};
var object2 = {
banana: {price: 200,a:[1,2]},
cherry:[1,2,3],
durian: 100
};
$.extend(true,object1, object2);
/*
{
apple: 0,
banana: {
a: [1, 2],
price: 200,
weight: 52
},
cherry: [1, 2, 3],
durian: 100
}
*/
4.jquery 的链式调用是什么？
它允许我们在同一个元素上一个接一个地运行多个jQuery命令。
示例：
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
5. jQuery 中 data 函数的作用
在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
语法：
.data( key, value )
.data( obj )
参数:
key
类型: String
一个字符串，用户存储数据的名称。（译者注：存储的数据名）
value
类型: Object
新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。
obj
类型: Object
一个用于更新数据的 键/值对
最基础的给一个元素设置不同的值，之后获取这些值
//存储数值
$('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 ] }
从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。
举个例子, 给定下面的HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
下面所有的 jQuery 代码都能运行。
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
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','aa');
$node.attr('src','http://xxxx');
$node.attr('title','bbb');
- 给$node 添加自定义属性data-src
$node.data('src','http://xxxx');
- 在$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.height()
$node.width()
//包括内边距
$node.innerHeight()
$node.innerWidth()
//包括边框
$node.outerHeight()
$node.outerWidth()
//包括外边距
$node.outerHeight(true)
$node.outerWidth(true)
- 获取窗口滚动条垂直滚动距离
$(document).scrollTop();
- 获取$node 到根节点水平、垂直偏移距离
$node.offset()
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
color:'red',
fontSize:'14px'
})
- 遍历节点，把每个节点里面的文本内容重复一遍
$('li').each(function(){
$(this).text($(this).text()+$(this).text());
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
- 获取$ct 里面的所有孩子
$ct.children()
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 获取选择元素的数量
$('div').length
- 获取当前元素在兄弟中的排行
$("div").click(function () {
var index = $("div").index(this);
});
7.用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$btn = $('#button');
$btn.on('click',function(){
$btn.css('background','blue')
});
- 当窗口滚动时，获取垂直滚动距离
$(document).on('scroll',function(){
var n = $(document).scrollTop();
console.log(n);
});
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
var $div = $('div');
$div.on('mouseover',function(){
$(this).css('background','red');
});
$div.on('mouseleave',function(){
$(this).css('background','#fff');
});
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
var $input = $('input');
$input.on('focusin',function(){
$(this).css('border','1px solid blue');
});
$input.on('focusout',function(){
$(this).css('border','');
console.log($(this).val());
})
$input.on('keydown change',function(){
var value = $(this).val().toUpperCase();
$(this).val(value);
})
- 当选择 select 后，获取用户选择的内容
var $select= $('#select');
$select.on('change',function(){
console.log($(this).val());
});
网友评论