引入jQuery：
<script src="./K1/Tool/jquery-3.1.1/jquery-3.1.1.min.js"></script>
引入CSS：
<link rel="shortcut icon" type="image/x-icon" href="./images/icon.ico">
<link rel="stylesheet" type="text/css" href="css.css">
*********************************************************************
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页 面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)
一般样式控制的，比如图片大小控制放在onload 里面加载; 但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有onLoad事件的弊端.
$(document).ready(function(){}),或简写为$(function(){})，
<script>
$(window).load(function()
{
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>
*********************************************************************
【向上/向左滚动的距离】
原生：
document.documentElement.scrollTop || document.body.scrollTop
jq:
$(document).scrollTop();
--------------------------------------------------------------------
【盒子到窗口左边和上边的距离】
$('div').offset().left
--------------------------------------------------------------------
原生(属性) --> jQ（方法）
.offsetWidth --> outerWidth() //【包括边框，包括padding】
.clientWidth --> innerWidth() //【不包括边框，包括padding】
outerWidth() : 获取元素的width + padding + border
如果括号内有参数true需要加上margin
可以获取隐藏元素的值。
【原生】offsetWidth() ：获取元素的width + padding + border
但无法获取隐藏元素的值。
--------------------------------------------------------------------
原生(属性)：
document.documentElement.clientWidth
jQ（方法）：
$(document).width(); //【不包括边框和padding】
*********************************************************************
添加事件的n种方式：
$('button').click(function(){...});
$('button').on('mouseenter click',function(){...});
*********************************************************************
链式操作：
$('div').addClass('color').click(function(){...}).mouseenter(function(){...}).html(abc123);
*********************************************************************
$(function(){
$('li').html(); //当一组元素的时候，取值是一组中的第一个
$('li').html('hello'); //当一组元素的时候,赋值是一组中的所有元素
});
*********************************************************************
选择器：
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
【:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。】
:first 获取一组元素的第一个元素。
$('li:first'); // [ <li>John</li>]
:first-child 获取 多组父元素的 首个子元素的 集合。
$("ul li:first-child") // [ <li>John</li>, <li>Glen</li> ]
first() 返回被选元素集合中的首个元素。
$('li').first() // [ <li>John</li>]
----------------------------------------------------------------------
选择器：
:first : 第一个元素
:last : 最后一个
:eq(1) : 第2个元素，下标从0开始
:even: 偶数个(下标)
:odd: 奇数(下标)
:gt(1) : 大于下标为1的元素
:lt(1) : 小于下标为1的元素
eq(3): 根据下标获取元素
$(function(){
$('ul li').css('color','red'); // 所有的li为红色
$('ul li').eq(1).css('color','red'); // ul下第二个li为红色
$('ul li:odd').css('color','blue'); // 奇数行的li
$('ul li:even').css('color','yellow'); // 偶数行的li
$('ul li:first').css('color','magenta'); //获取第一个
$('ul li:last').css({
display: 'block',
'200px',
height: '200px'}); //获取最后一个
$('ul li[title="123"]').css('color','cyan'); // 属性选择器的封装
})
---------------------------------------------------------------
index(): 获取元素的下标：
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
*********************************************************************
拖拽：
$(function(){
var disX = 0;
var disY = 0;
$('div').mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev)
{
$('div').css('left',ev.pageX - disX);
$('div').css('top',ev.pageY - disY);
});
$(document).mouseup(function()
{
$(document).off();
});
return false;
});
});
*********************************************************************
使用extend方法添加功能：
$.fn.extend({
toBlue: function () {
$(this).css('background','blue');
},
toMagenta: function () {
$(this).css('background','magenta');
}
});
$('button').click(function(){
$('div,h1,h2,h3,h4').toBlue();
});
*********************************************************************
hover的使用：
$(function(){
$('#div1').hover(
function(){
// $(this).css('background','blue');
// $('#div2').hide(3000);
// $('#div2').fadeOut(1000); //默认400
// $('#div2').slideUp();
$('#div2').fadeTo(1000,0.5);
},
function(){
// $(this).css('background','red');
// $('#div2').show(3000);
// $('#div2').fadeIn(1000);
// $('#div2').slideDown();
$('#div2').fadeTo(1000,1);
});
});
*********************************************************************
设置动画时，先关后开：
$('div').hover(
function()
{
$(this).stop().animate({'500px',height:'500px'});
},
function()
{
$(this).stop().animate({'100px',height:'100px'});
}
);
*********************************************************************
遍历DOM元素：
$('li').each(function (index,ele) {
.......
});
遍历arr、json对象：
$.each(arr1,function (index,value) {
.......
})
$.each(json1,function (key,value) {
.......
});
*********************************************************************
删除节点:
A.remove(): //移除所有的A元素
A.empty(): // 移除A的所有的子元素
获取所有的子元素：
A.children()
*********************************************************************
添加节点：
A.append(B) : // 往A里面添加B (B在最后面)
A.appendTo(B) : // 把A添加到B里面 (A在最后面)
A.prepend(B): //往A里面添加B (B在最前面)
A.prependTo(B): // 把A添加到B里面 (A在最前面)
A.insertBefore(B): //把A插入到B前面
A.insertAfter(B): //把A插入到B后面
*********************************************************************
动画：
执行动画以前最好调用stop方法
animate(params,[speed],[easing],[fn])
params: 需要改变的样式 json对象
speed: 执行的时间，slow,fast,nomal 1000ms
easing: 运动状态，linear,swing
fn: 动画完成后执行的函数
$('#div1').stop().animate({width : 300 , height : 300} , 4000 , 'linear',function(){
alert(123);
});
$('#div2').stop().animate({width : 300 , height : 300} , 4000 , 'swing');
$('#div3').animate({300},2000).delay(1000).animate({height:300},2000);
delay(1000) : 链在animate之后，延迟多少毫秒后执行
---------------------------------------------------------------
自带的动画：
slideUp: 上拉隐藏
slideDown: 下拉显示 （设置了display）
fadeIn: 淡入 (显示)
fadeOut: 淡出 (隐藏) （设置了display）
*********************************************************************
remove() : // 删除元素，会把元素上的所有操作都删掉。
detach() : //删除元素，但是会保留删除元素的操作行为。
$(function(){
$('div').click(function()
{
alert(123);
});
var oDiv = $('div').detach();
$('body').append( oDiv );
});
--------------------------------------------------------------
$('div').siblings(): //获取所有的兄弟节点，括号内可以写筛选条件
$('div').prevAll() : //获取上面所有的兄弟节点，括号内可以写筛选条件
$('div').nextAll() : //获取下面所有的兄弟节点，括号内可以写筛选条件
$('div').nextUntil('h2') : //获取当前节点到 指定节点h2（不包括h2）之间的兄弟节点
--------------------------------------------------------------
clone() : 可以接收一个参数true ，作用可以复制之前的操作行为。不写参数就只复制节点，不复制之前的操作行为
$('div').click(function(){
alert(123);
});
$('div').clone(true).appendTo( $('span') );
--------------------------------------------------------------
wrap() : //包装
unwrap() : //删除包装 ( 删除父级 : 不包括body )
wrapAll() : //整体包装
wrapInner() : //内部包装
$('span').wrap('div');
--------------------------------------------------------------
slice(a,b) //截取选择元素从第一参数开始，到第二个参数结束（包头不包尾）。
$('li').slice(1,4).css('background','red');
--------------------------------------------------------------
serialize、serializeArray方法：
$(function(){
//对表单数据进行序列化(串联化),形成一个字符串
$('form').serialize(); //string : a=1&b=2&c=3
//对表单数据进行序列化,形成一个JSON数组
$('form').serializeArray();
[
{ name : 'a' , value : '1' },
{ name : 'b' , value : '2' },
{ name : 'c' , value : '3' }
]
});
</script>
<form>
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="text" name="c" value="3">
</form>
*****************************************************************
事件委托：
//循环的方式
$('li').on('click',function(){
this.style.background = 'red';
});
---------------------------------------
//事件委托delegate的方式
$('ul').delegate('li','click',function(){
this.style.background = 'red';
$('ul').undelegate(); //取消事件委托
});
-----------------------------------------
//事件委托on的方式
$('#ul1').on('click','li',function () {
$(this).css('background','red');
$(this).addClass('active'); // this-->就是点击的元素
});
$('#ul1').off('click'); //取消事件委托
*****************************************************************
//主动触发trigger：
$('#div1').on('click',function(){
alert(123);
});
$('#div1').trigger('click');
*****************************************************************
事件细节：
ev直接使用，不需要兼容操作
ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)
ev.which(能监控鼠标键值) : ev.keyCode
ev.preventDefault(); //阻止默认事件
ev.stopPropagation(); //阻止冒泡
事件函数结尾return false;既能阻止冒泡又能阻止默认事件
one()
$('div').one('click',function(){}); //事件只执行一次
*****************************************************************
get()
document.getElementById('div1').innerHTML
--> $('#div1').get(0).innerHTML
//将JQ取的元素转化为原生JS识别的写法，
get()取的是获取的一组元素
get(i)取的是获取的一组元素第i个
不过在JQ下也有length这个属性。
JQ取的一组元素也能通过下标[i]变成原生JS识别的元素
如：
$('li')[i].style.background = 'red';
for(var i=0;i<$('li').get().length;i++){
$('li').get(i).style.background = 'red';
}
*****************************************************************
text()
$('div').html();只能获取一组元素第一个元素的html内容
而$('div').text();获取的是该组元素所有元素的文本内容(不含标签)
*****************************************************************
$().fn() 只能给JQ对象用
$.xxx() $.yyy() $.zzz() : 不仅能给JQ用还能给原生JS用，叫做工具方法
---------------------------------------------
$.type()
判断类型，返回字符串
和原生JS typeof方法不同的是，该方法可以返回更细的类型
对object细分了 regexp date array json等类型
$.trim()
$.trim(str) 去str的前后空格
$.inArray()
$.inArray('b',arr);
类似于字符串方法indexOf()，返回的是下标，没有找到返回-1;
$.proxy()
改变this指向
function show(n1,n2){
alert($(this));
alert(n1);
alert(n2);
}
$.proxy(show,documnet,3,4)();
$.proxy(show,documnet)(3,4);
//一参是方法，二参是指向的对象
而该函数的形参可以写在三参及以后或者后面的执行括号内
方便在非立即执行的时候传入参数.
例如:
function show(n1,n2){ ....... }
$(document).click( $.proxy(show, $(#div1),3,4) );
$.noConflict()
防止命名冲突
var _$ = $.noConflict();
可以用_$代替$了
$.parseJSON()
// 将字符串解析成JSON
$.makeArray()
//把类数组转化为数组,使其可以使用数组方法
例如
类数组 var aLis = $('li');
$.makeArray(aLis).push($('#li1'));
*****************************************************************
ajax for JQ ：
//参数为json形式
$.ajax({
url : 'xxx.php',
data : 'name=loe&age=20',
type : 'POST',
comtentType : '',
success : function(data){//请求成功以后的回调函数
$.parseJSON(data)
},
error : function(){
//...
}
});
//抽象出来的方法
$.get('xxx.php',{数据},function(){
//成功的回调函数
});
$.post('xxx.php',{数据},function(){
//成功的回调函数
});
$.getJSON('xxx.php?callback=show|?',function(){.....});//?代表随机返回函数名字
functuin show(data){
//处理JSONP返回数据
}
*****************************************************************
JQ插件操作:
$.extend
//扩展工具方法下的插件形式 $.xxx() $.yyy()
写法如下
$.extend({
leftTrim : function(){},
rightTrim : function(){}
})
$.fn
$.fn.extend
// 扩展到jQ对象上的插件形式$().xxx() $().yyy()
写法:
$.fn.extend({
name : function(){
$(this)//代表调用这个方法的JQ对象。
}
})
$.fn.extend({
toBlue:function(){$(this).css('background','blue')},
toYllow:function(){$(this).css('background','yellow')}
})
*********************************************************************
JQ思想:
1.模仿CSS获取元素
2.方法函数化，JQ以各种方法传参代替了JS的属性赋值操作
3.方法链式操作
4.和原生共存，写法不能混用
5.取值赋值合用一个方法，区别于加不加参数，当一组元素取值时，
取的是第一个元素的值，取出所有元素需要循环。而赋值时，
直接赋值给这组的每个元素
-----------------------------------------------------------------
$()下的常用方法:
has()
//包含: 有包含指定元素的被选择，针对元素里面的东西
$('div').has('span').css('background','red'); //选择包含span的div
filter()
//过滤: 满足条件的被选择，没满足的过滤掉，针对元素本身的属性
$('div').filter('.box').css('background','red'); //选择class为.box的div
not()
//filter()的反义词
$('div').not('.box').css('background','red'); //选择class不是.box的div
next()
//下一个兄弟节点
prev()
//上一个兄弟节点
find()
//寻找元素内部的节点
$('div').find('h2').eq(1).css('background','red');
eq()
//通过下标去寻找一组元素的第几个
index()
//索引: 返回当前元素在所有兄弟节点中的位置
$('#h').index();
attr()
取值: oDiv.attr('title');
赋值: oDiv.attr('title','div1');
addClass()
//添加class
$('div').addClass('box2 box4');
removeClass()
//删除class
$('div').removeClass('box1');
-------------------------------------------------------------
width()
//元素width
innerWidth()
//元素width+padding
outerWidth()
//元素width+padding+border，outerWidth(true)再加个margin
$(function(){
$('div').width(); //width
$('div').innerWidth(); //width + padding
$('div').outerWidth(); //width + padding + border
$('div').outerWidth(true); //width + padding + border + margin
});
--------------------------------------------------------------------
insertBefore()
A.insertBefore(B) //把A放在B的前面，剪切
$('span').insertBefore( $('div') );
before()
A.before(B) //调换两者的位置。B在A前面
insertAfter()
A.insertAfter(B) //把A放在B的后面，剪切
after()
A.after(B) //调换两者的位置。B在A后面
-------------------------------------------------------------------
appendTo()
A.appendTo(B) //把A放在B的内部最后，剪切
append()
A.append(B) //B在A的内部最后
prependTo()
A.prependTo(B) // 把A放在B的内部最开始的位置，剪切
prepend()
A.prepend(B) //B在A的内部最前
remove()
A.remove(); //删除元素
$('div').remove();
---------------------------------------------------------------
on()
// 事件绑定
$('div').on('click mouseover',function(){
alert(123);
});
$('div').on({
'click' : function(){alert(123)},
'mouseover' : function(){alert(456)}
});
off()
// 取消事件绑定
$('div').off() // 取消全部事件
$('div').off('click') //取消某个事件
----------------------------------------------------------------
scrollTop()
//可视窗口距顶部距离
$(window).scrollTop(); //滚动距离
创建元素
$('<div>')
获取窗口
$('window')
parent()
//获取父级
$('#div2').parent().css('background','blue');
offsetParent()
// 获取有定位的父级，如果父级没有定位，就获取body
$('#div2').offsetParent().css('background','blue');
val()
//获取/设置一个元素的value值，取值/赋值
size()
//获取组长
each()
//for循环的加强
$('li').each(function(i,elem){
//i是下标，$(elem)是元素对象
});
hover()
$('div').hover(function(){
//移入
},function(){
//移开
})；
show()
$('div').show(1000); //显示，可加参数以动画形式显示
hide()
$('div').hide(1000); //隐藏，可加参数以动画形式隐藏
fadeIn()
$('div').fadeIn(1000); //淡入
fadeOut()
$('div').fadeOut(1000); //淡出
fadeTo()
$('div').fadeTo(1000,0.5); //调节透明度
slideDown()
$('div').slideDown(1000); //向下展开
slideUp()
$('div').fadeIn(1000); //向上卷曲
offset().left
$('#div2').offset().left ; //获取到文档的左距离
position().left
$('#div2').position().left ;
//到有定位的父级的left值,把当前元素转化成类似定位的形式(没有定位父级的话就是到文档)