题目1： jQuery 中， $(document).ready()是什么意思？
当DOM(文档对象模型)已经加载，并且页面(包括图像)已经完全呈现时，会发生ready事件。
题目2： $node.html()和$node.text()的区别?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="wrap">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="first"></div>
<div id="second"></div>
</div>
<script>
// console.log($('.wrap .first').html());
console.log($('.wrap>ul>li').html()); // 0
console.log($('.wrap>ul>li').text()); // 01234
console.log($('.wrap>ul').html());
/*
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
*/
console.log($('.wrap>ul').text());
/* 0
1
2
3
4
*/
$('#first').text('<b>haha</b>'); // <b>haha</b> jQuery.text()将内容当做文本
$('#second').html('<b>haha</b>'); // haha (以粗体显示) jQuery.html()将字符串当做HTML
</script>
<!-- 还有一个区别
.text() 可以被用在XML和HTML文档中
.html() 仅仅是可以被用在HTML文档中
-->
</body>
题目3： $.extend 的作用和用法?
扩展一个对象
举列说明:
<script>
var obj1 = {a:{first:1, second: 2}};
var obj2 = {b:2, c:3};
var obj3 = {d:4, e:5};
var obj4 = {a:{second: 3}, f:6};
/*
$.extend(obj1,obj2); // 将obj2合并到obj1上 obj1为{a:{first:1, second: 2},b:2,c:3}
$.extend(obj1,obj2,obj3); // 将obj2和obj3合并到obj1上 obj1为{a:{first:1, second: 2},b:2,c:3,d:4,e:5}
$.extend(true, obj1, obj4); // 将obj4合并到obj1上，进行递归合并 obj为{a:{first:1,second:3}, f:6}
var obj5 = $.extend({}, obj1, obj2); // 将obj1和obj2合并到obj5上,并没有修改了obj1 因此obj5为{a:{first:1, second: 2},b:2,c:3}
*/
</script>
题目4： jQuery 的链式调用是什么？
使用jQuery的方法时，对象上的方法返回的是对象本身(return this),因此能接着使用
本地对象的其他jQuery方法,这就是链式调用。
<style>
#box {
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div id="box">
hihihi
</div>
<button class="box-btn">变宽变大移动</button>
<script>
var $div = $('#box');
// 链式调用
$('.box-btn').on("click", function() {
$div.css({width: '150px', height: '150px', 'color': 'blue', 'font-size': '8px'})
.animate({left: '200px'})
.animate({top: '200px'})
.animate({left: '0px'})
.animate({top: '0px'})
.animate({width: '100px', height: '100px'})
})
$div.attr('data-src', '50');
$div.attr('data-src', '70');
console.log($div.attr('data-src'));
</script>
</body>
题目5： jQuery 中 data 函数的作用
为相关的匹配元素存储，随机数据，或者在指定的数据存储区返回匹配元素集合中第一个元素的值。
举列说明
// example 1
$('body').data("foo", 52, 43);
$("body").data("bar", {myType: "test", count: 40});
$("body").data({ baz: [1,2,3] } );
alert($("body").data("hello")); // undefined
alert($("body").data()); // [object Object]
alert($("body").data("foo")); // 52
alert($("body").data("bar").myType); // test
alert($("body").data("baz")[0]); // 1
$("body").data(); // {foo: 52, bar: {myType: "test", count: 40}, baz: [1,2,3] }
// example 2
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name": "John"}'></div>
$('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， 修改以上属性
$(selector).attr(attributeName, value);
$node.attr('id',修改的值)
$node.attr('src', 修改的值)
$node.attr('title',修改的值) - 给$node 添加自定义属性data-src
$node.attr('data-src'); - 在$ct 内部最开头添加元素$node
$ct.prepend($node);
$node.prependTo($ct); - 在$ct 内部最末尾添加元素$node
$ct.append($node);
$node.appendTo($ct); - 删除$node
$node.remove() - 把$ct里内容清空
$ct.empty(); - 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>');
*获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
不包括内边距
$node.width() // 获取
$node.height()
$node.width(value)//设置
$node.heigth(value)
包括内边距不包含边框
$node.innerWidth()
$node.innerHeight()
$node.innerWidth(value)
$node.innerHeight(value)
包含边框不包括外边距
$node.outerWidth()
$node.outerHeight()
$node.outWidth(value)
$node.outerHeight(value)
包含外边距
$node.outerWidth(true)
$node.outerHeight(true)
$node.outerWidth(value)
$node.outerWidth(value) - 获取窗口滚动条垂直滚动距离
$(selector).scrollTop(); - 获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top - 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color': 'red','font-size': '14px'}); - 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(index, node) {
var str = $(this).text();
$(this).text(str+str);
}) - 从$ct 里查找 class 为 .item的子元素
$ct.find('.item'); - 获取$ct 里面的所有孩子
$ct.children(); - 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel'); - 获取选择元素的数量
$(selector).length; - 获取当前元素在兄弟中的排行
举列说明
<div class="ct">
<div class="c1">c1</div>
<div class="c2">---</div>
<div class="c1">c1</div>
<div class="c2">----</div>
<div class="c1">c1</div>
<div class="c2 active">----</div>
</div>
console.log($('.ct .active').index()); // 5
console.log($('.ct .active').index('.c2')); // 2 在class为c2中排行第三
题目7：
用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
效果预览
当窗口滚动时，获取垂直滚动距离
效果预览
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
效果预览
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
预览
当选择 select 后，获取用户选择的内容
预览
题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览
预览
代码
网友评论