题目1：Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
$(document).ready():当DOM加载完成后执行该函数；
window.onload:当页面加载完成后执行该函数(页面内容、图片、外部资源)。
两者区别：
执行的事件不同：$(document).ready()当DOM构建完成后就执行,而window.onload需要等页面内所有资源加载完成后。
编写个数不同：window.onload只能执行一次，执行最后一个window.onload。$(document).ready()可以执行多个。
window.onload没有其他写法
$(document).ready(function(){});
可简写为:
$(function(){})
或者：
$().ready(function(){})
题目2： $node.html()和$node.text()的区别?
$node.html():返回该节点下的html内容(包括html标签)。
$node.text()：返回该节点下的文本内容(不包括html标签)。
题目3： $.extend 的作用和用法?
语法: jQuery.extend([deep,] target [, object1 ] [, objectN ] );警告: 不支持第一个参数传递 false 。
在默认情况下，通过$.extend()合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。
浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。
深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。
作用：
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
如果想保留原对象:var object = $.extend({}, object1, object2);
默认情况下，通过$.extend()合并操作不是递归的：
Paste_Image.png
//默认情况浅拷贝
//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
//object2的banana覆盖了object1的banana，但是weight属性未被继承
//$.extend(object1, object2);
Paste_Image.png
//深拷贝
//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
//object2的banana覆盖了object1的banana，但是weight属性也被继承了
$.extend(true,object1, object2);
题目4： jQuery 的链式调用是什么？
jQuery链式调用：在对象上一次性调动多个方法
$(this).addClass("active").siblings().removeClass("active")
因为大部分对象方法的最后是return this，所以有了链式调用，简易代码。
$(#ct).css('color','blue').show(400).hide();
题目5： jQuery 中 data 函数的作用
作用：data方法允许在DOM元素上绑定任意类型的数据。
语法：$(“selector”).data(key, value)。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World"); //$(“selector”).data(key, value)
});
$("#btn2").click(function(){
alert($("div").data("greeting")); //$(“selector”).data(key)
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
Paste_Image.png
Paste_Image.png
题目6：写出以下功能对应的 jQuery 方法：
1、给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active');添加 addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
$node.removeClass('active');//删除removeClass() 方法从被选元素移除一个或多个类。
注释：如果没有规定参数，则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(class)
参数 描述
class
可选。规定要移除的 class 的名称。
如需移除若干类，请使用空格来分隔类名。
如果不设置该参数，则会移除所有类。
2、展示元素$node, 隐藏元素$node
$node.show();//展示
$node.hide();//隐藏
3、获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改
4、给$node 添加自定义属性data-src
$node.data("src",str)
5、在$ct 内部最开头添加元素$node
$(".ct").prepend(node);
Paste_Image.png
6、在$ct 内部最末尾添加元素$node
$(".ct").append(node);
7、删除$node
$(node).remove();
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
8、把$ct里内容清空
$ct.empty();
9、在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10、获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度
11、获取窗口滚动条垂直滚动距离
$(window).scrollTop()
12、获取$node 到根节点水平、垂直偏移距离
$node.offset()
13、修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
14、遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
console.log($(this).text())
})
15、从$ct 里查找 class 为 .item的子元素
$ct.find(".item")
16、获取$ct 里面的所有孩子
$(".ct").children()
17、对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents(".ct").find(".panel")
18、获取选择元素的数量
$node.length;针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性.
$node.length():针对字符串String说的,如果想看这个字符串的长度则用到length()这个方法;
$node.size():针对泛型集合说的,如果想看这个泛型有多少个元素,就调用此方法来查看;
19、获取当前元素在兄弟中的排行
$node.index();
题目6展示
题目7：用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
当窗口滚动时，获取垂直滚动距离
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
当选择 select 后，获取用户选择的内容
http://js.jirengu.com/sukefuzuxa/1/
题目8： 用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面[效果预览]
题目9: 实现一个天气预报页面，前端展示自由发挥，数据接口: http://api.jirengu.com/weather.php
有一个更好用的天气 API ：心知天气
Paste_Image.png
Paste_Image.png
网友评论