1： jQuery 中， $(document).ready()是什么意思？
在页面DOM结构加载完后就立刻执行，不需要等待其他资源比如图片的加载。
有两种主要写法：
$(document).ready(function(){ //对比DOMContentLoaded
//do something
})
$().ready(function(){ //jQuer的默认参数是：“document”
//do something
})
//最常用的是这种省略的写法，把js代码写在jQuery的回调函数里即可
$(function(){
//do something
})
但是，如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
2： $node.html()和$node.text()的区别?
首先这两个都是取值或者赋值函数，如果没有参数就代表取值，直接看文档中的定义：
- .html() 获取匹配元素集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，这种方法使用浏览器的innerHTML 属性。
- .text() 获取匹配元素集合中每个元素的文本内容结合，包括他们的后代，或者是设置每个元素文本内容。
总结区别如下：
- 如果匹配结果包含多个元素，那么赋值的时候，.html() 和 .text() 都将对其中所有元素进行赋值。
但是取值的时候，.html()只取出第一个元素，尽管可能有多个匹配结果。而.text() 依然取出所有的text内容。 - .html() 返回的是HTML，而.text() 返回的是文本字符串（即不包含标签，只是标签里的文本），操作的是DOM的innerText值。
3： $.extend 的作用和用法?
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
$.extend 看单词意思就知道是延伸，扩大。 所以这个是用来扩展jQuery对象的。
把要扩展的target对象最为第一个参数，后面的对象参数逐一添入到target对象中，依次拓展。如果target obj中没有，则新增，如有重复的属性，则覆盖属性值。
//$.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} obj2扩展到obj1中
// $.extend(obj1, obj2, obj3) //obj1 === {a:1, b:3, c:3, d:5} obj2和obj3扩展到obj1中
// $.extend(obj4, obj1, obj2, obj3) //如果不希望obj1发生改变，则可以新建个obj4，把obj1 obj2 obj3扩展到obj4中
// var obj5 = $.extend({}, obj1, obj2, obj3) //与上面类似，换了种写法，直接扩展到空对象里，最后赋值给obj5
4： jQuery 的链式调用是什么？
诸如：$('div').find('li.active').index('.tab')
匹配div，找到里面的有active class 的li，获取其在拥有class tab同辈中的索引值。
jQuery可以链式调用，是因为大部分jQuery方法返回的还是jQuery对象，因此可以在前者的基础上继续调用jQuery的方法。
5： jQuery 中 data 函数的作用
.data( key, value ) 和 .data( obj )在匹配元素上存储任意相关数据。
$('div').data('name', 'wangpeng') //存储 {name: "wangpeng"}
$('div').data('name') //获取name值： "wangpeng"
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', 'box')
$node.attr('src', 'http://www.xxx.com/imgs/bg.png')
$node.attr('title', 'People's Republic of China')
- 给$node 添加自定义属性data-src
$node.attr('data-src', 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2029842627,4216440786&fm=11&gp=0.jpg')
- 在$ct 内部最开头添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
- 在$ct 内部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
- 删除$node
$node.remove([selector]) //删除被选元素（及其子元素）可以添加一个可选的选择器参数来过滤匹配的元素
- 把$ct里内容清空
$ct.empty() //清空被选择元素内所有子元素，包括ct里的文本内容
- 在$ct 里设置 html <div class="btn"></div>
$ct.append('<div class="btn"></div>')
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括-边框、包括外边距)
//不包括内边距
$node.width() //例如 $node.width(100)
$node.height()
//包括内边距
$node.innerWidth()
$node.innerHeight()
//包括边框
$node.outerWidth()
$node.outerHeight()
//包括外边距
$node.outerWidth(true)
$node.outerHeight(true)
- 获取窗口滚动条垂直滚动距离
.scrollTop( value )
- 获取$node 到根节点水平、垂直偏移距离
$node.offset()
//.offset()方法允许我们检索一个元素 (包含其 border 边框，不包括 margin) 相对于文档（document）的当前位置
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
color: 'red',
'font-size': '14px'
})
- 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(index, ele){
var str = $(ele).text()
$(ele).text(str + str)
//或者用this代替ele，这里的this就是指代原生dom节点
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
- 获取$ct 里面的所有孩子
$ct.children()
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 获取选择元素的数量
$node.length
.size() // 从jQuery 1.8开始被废弃。首先 .length，因为jQuery匹配到的是类数组对象，所以直接调用 .length属性即可， .size()在函数调用时还会产生额外的开销
- 获取当前元素在兄弟中的排行
$node.index()
7：用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
点击查看
<body>
<button id="btn">我是按钮</button>
<script>
var $btn = $('#btn')
$btn.click(function(){
$btn.css('background', 'red')
setTimeout(function(){
$btn.css('background', 'blue')
}, 1000)
})
</script>
</body>
- 当窗口滚动时，获取垂直滚动距离
点击查看
...
<style>
.box{
height: 2000px;
background: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
$(window).scroll(function(){
console.log($(this).scrollTop())
})
</script>
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
点击查看
<body>
<div>我是div</div>
<script>
var $div = $('div')
$div.mouseenter(function(){
$div.css('background-color', 'red') //或者使用 addClass
})
$div.mouseleave(function(){
$div.css('background-color', 'white') //或者使用removeClass
})
</script>
</body>
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
点击查看
事实上，浏览器对于input的默认样式，就是focus时有蓝色外框，失去焦点时去除外框，如果要手动实现，可以先设置 outline:none ,然后对 border 在js中进行 addClass 和removeClass 的操作。
<body>
<input type="text">
<script>
$('input').change(function(){
var str = $(this).val().toUpperCase()
$(this).val(str)
})
$('input').blur(function(){
console.log($(this).val())
})
//值得注意的是，change方法 对于下拉选择框，复选框和单选按钮，
当用户用鼠标作出选择，该事件立即触发，
但对于其他类型的input元素，该事件触发将推迟，直到元素失去焦点才会触点。
</script>
</body>
- 当选择 select 后，获取用户选择的内容
点击查看
<body>
<select name="site">
<option>beijing</option>
<option>shanghai</option>
<option>guangzhou</option>
</select>
<script>
$('select').change(function(){
console.log($(this).find('option:selected').text())
})
</script>
</body>
8：用 jQuery ajax 实现如下效果：当点击加载更多会加载数据展示到页面
要求效果预览
分析需求：首先点击按钮，向服务器发送请求，等待数据回来，然后渲染到页面上。
CSS部分：
.ct > * {
padding: 0;
margin: 0;
}
.ct .news li {
height: 40px;
line-height: 40px;
padding-left: 15px;
margin-bottom: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.ct .news li.hover {
color: #fff;
background: #008000;
}
.ct .load-more {
display: block;
height: 40px;
width: 80px;
color: lightcoral;
font-size: 15px;
margin: 0 auto;
border: 1px solid lightcoral;
border-radius: 3px;
background: #fff;
cursor: pointer;
outline: none;
}
HTML 部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery ajax加载更多</title>
</head>
<body>
<div class="ct">
<ul class="news">
<li>内容1</li>
<li>内容2</li>
</ul>
<button class="load-more">更多精彩</button>
</div>
</body>
</html>
jQuery js 部分：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var index = 3
var length = 5
var lock = true
$('.ct .news').on('mouseenter', 'li', function(){
$(this).addClass('hover')
})
$('.ct .news').on('mouseleave', 'li', function(){
$(this).removeClass('hover')
})
$('.ct .load-more').on('click', function(){
if(lock === false){
return;
}else{
lock = false
$('.ct .load-more').text('加载中')
$.get('/getNews', {start:index, len: length}).done(function(ret){
console.log(ret)
appendHtmls(ret)
lock = true
$('.ct .load-more').text('更多精彩')
index += length
}).fail(function(){
alert('网络异常')
})
}
})
/* ['内容1', '内容2', '内容3'...] */
function appendHtmls(news){
var htmls = ''
$.each(news, function(){
htmls += '<li>' + this + '</li>'
})
$('.ct .news').append(htmls)
}
</script>
node.js 服务器代码部分：
var http = require('http')
var path = require('path')
var url = require('url')
var fs = require('fs')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
console.log(pathObj)
switch(pathObj.pathname){
case '/getNews':
// var news = [
// '内容1',
// '内容2',
// '内容3',
// '内容4'
// ]
console.log(pathObj.query.len)
var news = []
var a = pathObj.query.start
for(var i = 0; i < pathObj.query.len; i++){
news.push('内容'+ a +'')
a++;
}
res.setHeader('Content-Type', 'text/json; charset=utf-8')
setTimeout(function(){
res.end(JSON.stringify(news))
}, 1000)
break;
case '/favicon.ico':
break;
default:
if(pathObj.pathname === '/'){
pathObj.pathname += 'index.html'
}
fs.readFile(path.join(__dirname, pathObj.pathname), function(err, data){
if(err){
console.log('读取文件异常或找不到')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
console.log('visit http://localhost:8080')
9(选做)： 实现一个天气预报页面，UI 如下图所示(仅供参考，可自由发挥)。数据接口:
获取天气接口：http(s)://weixin.jirengu.com/weather
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据，返回数据以及使用方式参考 http://api.jirengu.com39
P.S. 接口貌似一个月没更新了，不过不影响学习。
