jquery动画和ajax
jQuery 中， $(document).ready()是什么意思？
页面加载完成后，浏览器会通过JavaScript给DOM元素添加事件。在原生的JavaScript中,用的是window.onload方法，而在jQuery中使用的是$(document).ready()方法，$(document).ready()方法是事件模块中最重要的一个函数。通过使用这个方法，可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数，但这并不是说明跟这些元素关联的文件都下载完毕了。比如要对加载的图片添加一些行为，例如点击后图片显示或者隐藏，如果$(document).ready()方法进行设置，只要DOM元素加载完毕就可以操作了，不用等到所有图片都下载完毕，但是使用window.onload操作，用户必须等到所有图片都下载完毕才可以操作。
$(document).ready()可以多次使用，比如
function a(){
console.log(a);
}
function b(){
console.log(b);
}
$(document).ready(function(){
a();
})
$(document).ready(function(){
b();
})
会依次输出a 和b,但是使用window.onload的话，只会输出后面那一个，因为把前面的覆盖了。
$(document).ready()方法也可以写成：
1.
$(function(){
....
})
2.
$().ready(function(){
...
})
注意！
使用$(document).ready()方法时，由于DOM准备完毕就会被执行，此时关联的元素可能还没加载完成，例如和图片有关的html下载完毕，并且已经解析为DOM树了，但可能图片还未加载完毕，所以此时图片的高度宽度等属性不一定有效，要解决这个方法可以用load()方法，这里不细讲了。
$node.html()和$node.text()的区别?
$node.html()，无参数时，用于获取元素的HTML内容(包括文本内容和标签)，
$node.html(val),val为元素的HTML内容，用于设置元素的HTML内容。
$node.text(),无参数时，用于获取元素的文本内容。
$node.text(val),有参数时，用于设置元素的文本内容。
<body>
<p>
<a href="">哈哈哈</a>
</p>
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var html=$("p").html();
console.log(html);
console.log($("p").text());
</script>
Paste_Image.png
$.extend 的作用和用法?
$.extend是一个添加属性方法的入口，
函数原型：$.extend([deep,] target [, object1 ] [, objectN ] )
用法：
1.当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
2.如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
目标对象（第一个参数）将被修改，并且将通过$.extend()返回，如果我们想保留原对象，我们可以将一个空对象作为目标对象：如:var obj = $.extend({}, object1, object2);进行对象属性方法合并。
默认情况下， $.extend()执行的合并不会递归， 如果第一个对象的属性本身是对象或数组，则它将被第二个或后续对象中具有相同键的属性完全覆盖。 这些值不合并，如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。
用法：
1.$.extend()用来扩展jQuery静态方法
$.extend({
exFunc:function (){
console.log("hah");
}
});
$.exFunc();
2.将a1,a2…aN的每一项合并为obj的每一项，并返回合并后的对象
var obj = {name:"xiaoming",age:20};
a1 = {name:"lihua",sex:"male"};
$.extend(obj,a1);
console.log(obj); //{name: "lihua", age: 20,sex:"male"}
3.想得到合并的结果，并不修改obj的结构
var newObj = $.extend({},obj,a1,a2...aN);
//newObj就是得到的新对象
4.在jQuery对象扩展一个命名空间
$.extend({nameScope:{}});
$.extend($.nameScope,{name:"tom"});
//将name添加到nameScope这个命名空间中
5.当extend的第一参数为布尔值,决定extend是深拷贝还是浅拷贝。
var src1 = {name:"tom",location:{city:"Beijing",county:"China"}};
var src2 = {name:"job",location:{live:"New York",county:"USA"}};
1.参数true，深拷贝
$.extend(true,src1,src2);
//合并后src1为：
{name: "job", location: {city: "Beijing",county: "USA",live: "New York"}}
里面的子元素也会进行合并
2.参数为false，浅拷贝。
$.extend(false,src1,src2);
合并后src1为：
{name: "job", location: {live:"New York",county:"USA"}}
里面的子元素不会合并，直接覆盖
参考：http://api.jquery.com/jQuery.extend/
jQuery 的链式调用是什么？
对发生在同一个jQuery对象上的一组动作，可以直接连写，而无需重复获取对象。如：
$("#myphoto").show().siblings().hide();
jQuery 中 data 函数的作用
在jQuery中，可以通过data()方法将数据缓存，虽然使用全局变量或者局部变量可以将数据保存，但是变量不可以将数据缓存，而且不依附于某元素自身。如果使用data()方法可以针对元素定义数据，在元素中存取数据，从而避免数据被循环使用的风险，根据功能不同data有以下几种使用格式：
1.根据元素中的名称定义或者返回存储的数据，调用格式为：
data([name]);
其中name为可以选参数，表示存储数据的名称。
2.根据元素中的名称在元素上存储或者设置数据，调用格式为：
data(name,value);
其中name表示要存储数据的名称，value表示要存储的数据。
比如：在一个p元素上设置或者保存数据
<body>
<p> </p>
<div class="divtip"></div>
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
$("p").data("Data"); //初始值
$("p").data("Data","设置数据");
$(".divtip").append($("p").data("Data"));//显示设置数据
})
</script>
</body
写出以下功能对应的 jQuery 方法：
给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass("active");//添加
$noed.removeClass("active");//删除
展示元素$node, 隐藏元素$node
$node.show();//展示
$node.hide();//隐藏
$node.css("display","block");//展示
$node.css("display","none");//隐藏
获取元素$node 的 属性: id、src、title， 修改以上属性
获取属性值：
$node.attr("id");
$node.attr("src");
$node.attr("title");
修改属性：
$node.attr("id","val");
$node.attr("src","val");
$node.attr("title","val");
批量修改：
$node.attr({
"id":"val",
"src":"val",
"title":"val"
})
给$node 添加自定义属性data-src
$node.attr("data-src","val");
在$ct 内部最开头添加元素$node
$ct.prepend($node);
或者：
$node.prependTo($ct);
在$ct 内部最末尾添加元素$node
$ct.append($node);
或者：
$node.appendTo($ct);
删除$node
$node.remove();//删除后$node包含的所有后代都被删除,删除的是指向节点的引用。
把$ct里内容清空
$ct.empty();
在$ct 里设置 html <div class="btn"></div>
$ct.html("<div class="btn"></div>");
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
p{
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid;
margin: 10px;
}
<p></p>
不包括内边距：
$node.width();//100
$node,height();/100
包括内边距：
$node.innerWidth();//120
$node.innerHeight();//120
包括边框：
$node.outerWidth();//122
$node.outerHeight();//122
包括外边距：
$node.outerWidth(true);//142
$node.outerHeight(true);//142
获取窗口滚动条垂直滚动距离
window.scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset();
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
"color":"red",
"font-size":"14px"
})
遍历节点，把每个节点里面的文本内容重复一遍
$.each(function(index){
console.log($(this).text())
})
从$ct 里查找 class 为 .item的子元素
$ct.find(".item");
获取$ct 里面的所有孩子
$ct.children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents(".ct").find(".panel");
获取选择元素的数量
$node.length;
或者：
$node.size()
获取当前元素在兄弟中的排行
$node.index()
用jQuery实现以下操作:
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
<style>
.red {background: red; }
.blue{background: blue;}
</style>
$(function(){
$(".btn").on('click',function(){
$(".btn").addClass("red").toggleClass("blue")
})
})
当窗口滚动时，获取垂直滚动距离
$(window).scroll(function(){
console.log($(window).scrollTop()+"px");
})
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$(function(){
$div.on("mouseenter",function(){
$div.css("background","red");
});
$div.on("mouseleave",function(){
$div.css("background","blue");
})
});
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时
把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
$(function(){
$('input').on("change",function(){
$(this).css("outline","blue");
if($(this).val().toLowerCase()){
$(this).on('keyup',function(){
var up= $(this).val().toUpperCase();
console.log(up);
});
}else {
console.log($(this).val());
}
});
});
当选择 select 后，获取用户选择的内容
<select name="" id="select">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$("#select").on("change",function(){
console.log($("#select option:selected").text());
})
加载更多
router.js
app.get('/loadMore',function(req,res){
var index=req.query.page;
var len=req.query.length;
var data=[];
for(var i=0;i<len;i++){
data.push('新闻'+(parseInt(index)+i));
}
res.send({
status:0,
data:data
})
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul li {list-style: none}
a{
text-decoration: none;
color: #ff00ff;
}
.outer{
text-align: center;
width: 600px;
margin: 0 auto;
}
.wrap>li{
border: 1px solid #ddd;
text-align: center;
line-height: 2;
margin-bottom: 10px;
}
.wrap>li:hover{
background: #ddd;
}
#btn{
display: inline-block;
padding: 8px 20px ;
color: #fff;
background: #0000ff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="outer">
<ul class="wrap">
</ul>
<a href="javascript:;" id="btn">加载更多</a>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var pageIndex=0;
$("#btn").on('click',function() {
$.ajax({
url: '/loadMore',
data: {
page: pageIndex,
length: 5
},
type: 'get',
dataType: 'json',
success: function (ret) {
pageIndex=pageIndex+5;
appendHtml(ret.data);
},
error: function () {
alert("获取数据异常")
}
});
});
function appendHtml(ret){
var html='';
for(var i=0;i<ret.length;i++){
var i;
html+='<li>'+ret[i]+'</li>';
console.log(ret[i]);
}
// $.each(ret,function(){
// html+='<li>'+this+'</li>';
// console.log(this)
// });
$('.wrap').append(html);
}
2.或者这样写也可以
var pageIndex=0;
$("#btn").on('click',function() {
$.ajax({
url:'/loadMore',
method:'get',
data:{
page:pageIndex,
length:5
}
}).done(function(ret){
if(ret.status===0){
pageIndex=pageIndex+5;
appendHtml(ret.data);
}else{
alert("获取数据异常")
}
}).fail(function(){
alert("系统异常")
})
});
function appendHtml(ret){
var html='';
for(var i=0;i<ret.length;i++){
var i;
html+='<li>'+ret[i]+'</li>';
console.log(ret[i]);
}
// $.each(ret,function(){
// html+='<li>'+this+'</li>';
// console.log(this)
// });
$('.wrap').append(html);
}
3.这样更简单，不过不是很清楚，还是前面的写法好
$("#btn").on('click',function() {
$.get('/loadMore',{page:pageIndex, length:5}).done(function(ret){
if(ret.status===0){
pageIndex=pageIndex+5;
appendHtml(ret.data);
}else{
alert("获取数据异常")
}
}).fail(function(){
alert("系统异常")
})
});
function appendHtml(ret){
var html='';
for(var i=0;i<ret.length;i++){
var i;
html+='<li>'+ret[i]+'</li>';
console.log(ret[i]);
}
// $.each(ret,function(){
// html+='<li>'+this+'</li>';
// console.log(this)
// });
$('.wrap').append(html);
}
</script>
结果：
若水GIF截图_2017年7月11日21点42分17秒.gif
发现用for循环和$.each如果都写this的话，获取到的值是不一样的，for循环获取到的是window对象，结果发现是作用域的问题，但是不知道为何$,each的this指的是返回数组里面的值。
