1- jQuery 中， $(document).ready()的意思：
- $(document).ready()表示页面的dom元素已经加载完毕，这是为了防止在页面加载元素加载完之前对dom元素进行操作，相当于document.onload()或者window.onload()方法。window.onload是所有元素、图片、外部资源都加载完执行，而$(document).ready()只需要DOM元素加载完成。所以onload比$().ready()要慢
//下面两种写法全部是等价的
$(document).ready(function(){});
$(function(){})
2- $node.html()和$node.text()的区别总结
$node.html()是获取节点html DOM树的方法，例如： $node.html(); //得到的是
我是文本
$node.text()是获取节点里的文本内容，例如：$node.html(); //得到的是 ：我是文本
我是文本
$('.test1').html() //我是文本
$('.test1').text() //我是文本
3- $.extend 的作用和用法：
- $.extend() 是将两个或更多对象的内容合并到第一个对象。如果有相同属性的值，那么最终值会被最后一个对象的值覆盖，如果没有，则是添加。
第一个参数设置为true，为深拷贝；设置为false，是浅拷贝。不设置默认是浅拷贝 - 用法：
$.extend( target [, object1 ] [, objectN ] ) //将object1，...，objectN合并到target。还可以写成var target = $.extend(object1, objectN);
$.extend( [deep ], target, object1 [, objectN ] ) //deep 深拷贝，如果对象中有多层的嵌套数据，deep参数设置为true,则可以实现深拷贝
例子:
var obj = {}
var obj1 = {
name:'obj1',
age:'1',
friends:[1,2,3]
}
var obj2 = {
name:'obj2',
sex:'male'
}
//1浅拷贝
$.extend(obj,obj1)
console.log(obj) //name:'obj1',age:'1',friends:Array(3)
//深拷贝
$.extend(true,obj,obj1)
//2
$.extend(obj,obj1,obj2)
console.log(obj) //name:'obj2',age:'1',friends:Array(3),sex:'male'
//3
var opts = $.extend({},obj1,obj2)
console.log(opts) //原理同2,存在的替换，不存在的添加
//4
$.extend($.fn,obj2)
//5
$.fn.extend(obj2)
//.extend常见用法
function getPeople(obj){
var defalut = {
name:'hunger',
age:'30',
sex:'male'
}
//var opts = {}
var opts = $.extend({},defalut,obj)
console.log(opts)
}
4- jQuery 的链式调用：
- 链式调用就是分步骤地对jQuery对象实现各种操作，例如
//对id为Test的对象进行了三项操作:字体颜色设置为红色;显示对象;移除"style"样式
$("#Test").css('color','red').show(200).removeClass('style');
- 链式调用的作用：
- 代码精简。链式调用能大大精简代码量，多项操作一行代码；
- 优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗
5- jQuery 中 data 函数的作用：
在目标元素上存储或获取自定义数据。用于扩展元素上的数据。
//存储值
.data( key, value )
.data( key, value ) //设置对应的key和value
.data( obj )//可以直接设置一个object值
//获取值
.data( key )
.data( key ) //获取对应key的值
.data()//返回一个object，内容是所有存储在元素上的数据，格式是 key:value
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，可以使用removeData()函数。
6小练习：
- 写出以下功能对应的 jQuery 方法：
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
- 展示元素$node, 隐藏元素$node
- 获取元素$node 的 属性: id、src、title， 修改以上属性
- 给$node 添加自定义属性data-src
- 在$ct 内部最开头添加元素$node
- 在$ct 内部最末尾添加元素$node
- 删除$node
- 把$ct里内容清空
- 在$ct 里设置
html - 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
- 获取窗口滚动条垂直滚动距离
- 获取$node 到根节点水平、垂直偏移距离
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
- 遍历节点，把每个节点里面的文本内容重复一遍
- 从$ct 里查找 class 为 .item的子元素
- 获取$ct 里面的所有孩子
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
- 获取选择元素的数量
- 获取当前元素在兄弟中的排行
$node.addClass('active')// 给元素 $node 添加 class active
$node.removeClass('active')// 给元素 $noed 删除 class active
$node.show()// 展示元素$node
$node.hide(5000)// 隐藏元素$node
// 获取元素$node 的 属性: id、src、title
$node.attr('id')
$node.attr('src')
$node.attr('title')
// 修改以上属性
$node.attr('id','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')
$node.attr('data-src','xxx')// 给$node 添加自定义属性data-src
// 在$ct 内部最开头添加元素$node
$ct.prepend('$node')
$node.prependTo('$ct')
// 在$ct 内部最末尾添加元素$node
$ct.append('$node')
$node.appendTo('$ct')
$node.remove()// 删除$node
$ct.empty()// 把$ct里内容清空
$ct.html('')// 在$ct 里设置 html
//获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//高度
$node.height()//不包括内边距
$node.innerHeight()//包括内边距
$node.outerHeight()//包括边框
$node.outerHeight(true);//包括外边距
//宽度
$node.width()//不包括内边距
$node.innerWidth()//包括内边距
$node.outerWidth()//包括边框
$node.outerWidth(true);//包括外边距
$(window).scrollTop()// 获取窗口滚动条垂直滚动距离
// 获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top
// 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
'color':'red',
'font-size':'14px'
})
// 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(){
console.log($this.text())
})
$ct.find('.item')// 从$ct 里查找 class 为 .item的子元素
$ct.children()// 获取$ct 里面的所有孩子
$node.parent('.ct').children('.panel')// 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.length// 获取选择元素的数量
$node.index()// 获取当前元素在兄弟中的排行
jQuery功能实现方法
7小练习：
- 用jQuery实现以下操作:
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
jQuery动画实现
范例参考1代码
范例参考2代码
8- 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览
- get方式
内容1
内容2
服务器端
// 使用req.query.参数名 来获取参数
app.get('/getmore', function(req, res){
var newsCount = Number(req.query.newsCount);
var news = [];
for(var i=1; i<=5; i++){
console.log(i);
news.push('内容'+ (i+newsCount));
}
res.send({
result: news
});
});
- post方式
内容1
内容2
服务器端
app.post('/getmore', function(req, res){
// 使用req.body.参数名 来获取参数
var newsCount = Number(req.body.newsCount);
var news = [];
for(var i=1; i<=5; i++){
console.log(i);
news.push('内容'+ (i+newsCount));
}
res.send({
result: news
});
});
9- 实现一个天气预报页面，UI 如下图所示(仅供参考，可自由发挥)。数据接口:
-
获取天气
- 接口：http(s)://weixin.jirengu.com/weather
- 服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据，返回数据以及使用方式参考 http://api.jirengu.com18
-
更多接口
- 参考 http://api.jirengu.com18
- 学习总结
动手+查文档是学习 jQuery 最有效的方法
- jQuery 文档，
- 英文文档