引入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);
*********************************************************************
选择器：
: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‘,
width: ‘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({width:‘500px‘,height:‘500px‘});
},
function()
{
$(this).stop().animate({width:‘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({width:300},2000).delay(1000).animate({height:300},2000);
delay(1000) : 链在animate之后，延迟多少毫秒后执行
---------------------------------------------------------------
自带的动画：
slideUp: 上拉隐藏
slideDown: 下拉显示 （设置了display）
fadeIn: 淡入 (显示)
fadeOut: 淡出 (隐藏) （设置了display）
*********************************************************************
get() : 就是把JQ转成原生JS,括号内不写下标就是取全部
document.getElementById(‘div1‘).innerHTML --> $(‘#div1‘).get(0).innerHTML
for(var i=0;i<$(‘li‘).get().length;i++){
$(‘li‘).get(i).style.background = ‘red‘;
}
--------------------------------------------------------------
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-->就是点击的元素
});
*****************************************************************
//主动触发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()
$(‘#div‘).get(0).innerHTML
//将JQ取的元素转化为原生JS识别的写法，
get()取的是获取的一组元素
get(i)取的是获取的一组元素第i个
不过在JQ下也有length这个属性。
JQ取的一组元素也能通过下标[i]变成原生JS识别的元素
如：
$(‘li‘)[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‘)}
})
*********************************************************************
：
时间： 2024-08-01 22:27:16