三、效果
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
以上效果参数一致 S：执行时间 E：执行效果 可查看手册 FN：效果结束后执行的函数
<script>
$(function(){
//演示效果方法的三个参数
$('input').click(function(){
$('ul').show(1000, 'linear', function(){
//效果结束后，要执行什么的事
alert('你已经完全看到我了');
});
});
});
</script>
<input type="button" value="测试">
<ul style="display: none; background-color: brown;">
<li>adsf</li>
<li>adsf</li>
<li>adsf</li>
</ul>
淡入淡出
fadeIn([s],[e],[fn]) — 淡入
fadeOut([s],[e],[fn]) — 淡出
fadeTo([[s],o,[e],[fn]]) — 将透明度慢慢变化到指定的值，参数o表示透明度（0~1之间的值）
fadeToggle([s,[e],[fn]])
自定义
animate(p,[s],[e],[fn])
stop([c],[j])
delay(d,q]) — 延迟执行下一个动画
finish(queue])
<script>
$(function(){
$('div').animate({
width:'400px',
height:'300px',
left:'200px',
top:'100px',
background:'green' //颜色没法变
}, 5000, function(){
alert('变身完毕');
});
$('div').animate({
width:'400px',
height:'300px',
left:'200px',
top:'100px'
}, 5000).fadeOut(1000).delay(2000).fadeIn(1000).delay(3000).fadeTo(1000, 0.5);
$('input').click(function(){
//stop参数如果不填，表示停止当前的动画，还可以继续执行后面的动画
//stop参数为true表示停止当前元素上所有的动画
//$('div').stop(true);
$('div').finish(); //直接将队列上的动画全部取消，并且将元素直接变化到css的最终值
});
});
</script>
</head>
<body>
<input type="button" value="停">
<div style="position: absolute; width:100px; height:100px; background-color: brown;"></div>
效果方法中参数 s 表示时间或者速度， e 表示效果， fn表示效果结束后要执行的函数。
四、跨域请求
1、跨域的三种方式
1、使用代理
自己的网站发送Ajax请求 自己网站的php文件 请求其他网站
2、设置对方网站的header(‘Access-Control-Allow-Origin:*’);
3、使用JSONP技术
2、JSONP技术
Jsonp(JSON with Padding) 是 json 的一种”使用模式”，通俗的讲，jsonp可以通过html标签中的src属性访问另外域的内容，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
什么样的HTML标签有src属性：
img
script
iframe
上面的例子，要求浏览器端设置的函数名必须和另外域的服务器中要求的函数名一直，案例中都必须是fn。
如果函数名不知道是什么？可以传递参数，达到函数名一致的要求。
3、jQuery中的Ajax跨域请求
$.get('http://www.js.com/jsonp.php?fn=?', {}, function(e){
//e就是另外域的PHP返回的数据
}, 'jsonp');
用另外的方法也可以
$.ajax({
type:'get',
data:{},
dataType:'jsonp',
url:'http://www.js.com/jsonp.php?fn=?',
success:function(e){
//处理返回的数据
}
});
专门用于跨域的JSONP请求
$.getJSON(
'http://www.js.com/jsonp.php?callback=?',
function(e){
console.log(e);
}
);
$(function(){
$('button').click(function(){
//使用jsonp跨域请求之get方法
$.get('http://www.js.com/jquery_jsonp.php?callback=?', {}, function(e){
//e就是另外域的PHP返回的数据
console.log(e);
}, 'jsonp');
//使用jsonp跨域请求之ajax方法
$.ajax({
type:'get',
data:{},
dataType:'jsonp',
url:'http://www.js.com/jsonp.php?callback=?',
success:function(e){
//处理返回的数据
console.log(e);
}
});
//使用jsonp跨域请求之getJSON方法
$.getJSON(
'http://www.js.com/jsonp.php?callback=?',
function(e){
console.log(e);
}
);
});
})
另外域www.js.com中PHP文件：
五、文档操作
1、添加节点
1、append：父节点.append(子节点); 给父节点追加一个子节点
2、appendTo：子节点.appendTo(父节点); 把一个子节点追加到一个父节点中
3、prepend：父节点.prepend(子节点); 在一个父节点里开始的位置添加一个子节点
4、after：兄弟节点.before(兄弟节点); 在元素后，添加一个兄弟
5、before：兄弟节点.before(兄弟节点); 在元素前，添加一个兄弟
2、修改节点
replaceWith：旧节点.replaceWith(新节点); 用新的节点替换旧的节点（全部替换）
稍微复杂一点的替换：旧节点.replaceWith(function(){ 返回替换后的结果; }) 用函数处理复杂的替换
3、包裹节点
wrap：里面的节点.wrap(包裹的节点); 将每个查找到的节点分别用包裹的节点包裹
wrapAll：里面的节点.wrapAll(包裹的节点); 将查找到的节点用一个包裹的节点包裹，如果查找的节点不在一起，则强制放到一起，统一包裹。
4、删除节点
remove()：待删除的节点.remove(); 将选择的节点删除 节点内容都删除
empty()：待清空的节点.empty(); 将选择的节点里面的内容清空，节点保留
5、克隆节点
clone()：选择的节点.clone(); 将选择的节点（包括里面的内容）克隆
clone(true)：选择的节点.clone(true); 将选择的节点克隆，并克隆该节点的事件。
“>
6、属性操作
attr()：标准的设置和获取属性方法，类似 “对象.getAttribute()”或“对象.setAttribute()”
对应的移除方法：removeAttr();
prop()：获取/设置不存在的属性比较占优，类似 “对象.属性”或“对象.属性=值”
对应的移除方法：removeProp();
获取属性：
设置属性：
7、全选反选取消
<script>
$(function(){
//全选
$('button').eq(0).click(function () {
$('input').prop('checked', true);
});
//取消
$('button').eq(2).click(function () {
$('input').prop('checked', false);
});
//反选
$('button').eq(1).click(function () {
$('input').prop('checked', function(i, val){
//用这个函数，来处理checked的值
//console.log(i, val); //i是input的下标，val是input原来的checked的值
return !val;
});
});
//aaa bbb ccc
});
</script>
<div>
<button>全选</button>
<button>反选</button>
<button>取消</button>
</div>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
六、插件编写
1、$.fn.extend();
这种语法，可以一次性写多个插件，需要给extend传递一个对象，对象的每个成员都是一个插件。
插件就是一个函数，这个函数是一个对象的成员方法。这个对象是extend的参数。
<script src="jquery-3.3.1.js"></script>
<script>
//编写自己的插件
$(function(){
//extend方法，需要传递对象形式的参数，对象的每个成员都是一个插件
$.fn.extend({
a:function(){
//插件内部，$(this) 仍然表示调用插件的对象
$(this).css('color', 'red').css('background-color', 'green');
return $(this);//谁调用a()返回谁，方便链式调用
},
b:function(){
//插件内部，$(this) 仍然表示调用插件的对象
}
});
//测试插件是否好用
$('div').a();
$('p').a();
$('ul').a().css('font-size', '30px');//链式调用自定义样式
});
</script>
2、$.fn.xxx = function(){}
这种语法，只是定义一个插件
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
//定义插件
$.fn.hello = function(color){
//$(this) 表示调用插件的对象
$(this).css('color', color.x).css('background-color', color.y);
return $(this);//返回
};
//使用插件
$('div').hello({x:'orange', y:'pink'}).wrap($('<div></div>'));
//对象的形式传递参数
})
</script>
<div>hello</div>
七、自定义插件
1、创建目录结构
2、HTML+css
<style>
*{
padding:0;
margin:0;
border:0 none;
}
#left{
border:solid 1px black;
width:200px;
height:120px;
position: absolute;
display: none;
}
.title{
background-color: #92b8b1;
height:24px;
line-height: 24px;
padding:5px;
border-bottom: solid 1px black;
}
.content{
padding:5px;
}
.title span{
float: right;
cursor: pointer;
}
</style>
</head>
<body style="width:2000px; height:2000px;">
<div id="left">
<div class="title">这是标题部分 <span>×</span></div>
<div class="content">这是内容区</div>
</div>
3、调用插件
4、完成窗口的显示
5、当浏览器改变大小时或滚动条滚动时，保持div的位置不变
首先要给body设置的宽一些、高一些，这样才会有滚动条：
封装三个函数：
第一个：计算浏览器的宽高及滚动条的滚动距离：
第二个：计算真实的left和真实的top值：>
第三个：显示div：
先调用一次这三个函数：
绑定浏览器改变大小事件、滚动条滚动事件：
关闭窗口
//关闭box窗口
box.find('span').click(function(){
box.hide();
});
全部源代码
//$('div').box({zuo:'left', shang:'center'});
$.fn.box = function (position) {
//position = {zuo:'left', shang:'center'}
var box = $(this);
var win = $(window);
//真实的left和top值
var trueLeft;
var trueTop;
//用户希望的位置
var zuo = position.zuo;
var shang = position.shang;
//div的宽度、高度
var boxWidth = box.outerWidth();
var boxHeight = box.outerHeight();
//浏览器窗口的宽度、高度
var winWidth;
var winHeight;
//滚动条滚动的距离
var scrollLeft;
var scrollTop;
/************ 获取浏览器宽高、获取滚动条滚动距离 ************/
function getVal(){
//浏览器窗口的宽度、高度
winWidth = win.width();
winHeight = win.height();
//滚动条滚动的距离
scrollLeft = win.scrollLeft();
scrollTop = win.scrollTop();
}
/************ 计算真实的left值和top值，用于css设置 ************/
function jisuan(){
//以九宫格的位置显示，
//可选的zuo 值都有：left center right
//可选的shang值都有 ：top center bottom
if(zuo == 'left'){
trueLeft = 0 + scrollLeft + 'px';
}else if(zuo == 'center'){
trueLeft = (winWidth - boxWidth) / 2 + scrollLeft + 'px';
}else if(zuo == 'right'){
trueLeft = winWidth - boxWidth + scrollLeft + 'px';
}
if(shang == 'top'){
trueTop = 0 + scrollTop + 'px';
}else if(shang == 'center'){
trueTop = (winHeight - boxHeight) / 2 + scrollTop + 'px';
}else if(shang == 'bottom'){
trueTop = winHeight - boxHeight + scrollTop + 'px';
}
}
/************ 让box窗口显示 ************/
function xianshi(){
box.css('left', trueLeft).css('top', trueTop).show();
}
/***** 页面刷新，调用上面的函数 ******/
getVal();
jisuan();
xianshi();
//当滚动条滚动的时候，窗口位置保持不变
win.scroll(function(){
//console.log(123);
getVal();
jisuan();
xianshi();
});
//当浏览器改变大小的时候，窗口位置保持不变
win.resize(function(){
//console.log(456);
getVal();
jisuan();
xianshi();
});
//关闭box窗口
box.find('span').click(function(){
box.hide();
});
};
八、第三方插件
1、基本特效
http://www.jq22.com
2、旋转插件
http://www.jqueryrotate.com/
3、图表插件
http://echarts.baidu.com/
4、弹出层插件
https://layer.layui.com/
<script src="jquery-3.3.1.js"></script>
<script src="layer/layer.js"></script>
<script>
$(function(){
$('input').click(function(){
//layer.msg('玩命提示中');
var index = layer.load(2, {time: 10*1000});
});
})
</script>
<input type="button" value="测试">
5、表单验证插件
6、异步上传插件
7、日历插件
8、天气插件
