jQuery基础
什么是JQ？一个优秀的JS库，大型开发必备
JQ的好处？
一简化JS的复杂操作
二不再需要关心兼容性
三提供大量实用方法
如何学习JQ？
一www.jquery.com
二JQ只是辅助工具，要正确面对
三需要分阶段学习
JQ设计思想？
选择网页元素 模拟CSS选择元素 独有表达式选择器 多种筛选方法
JQ写法 方法函数化 链式操作 取值赋值合体
JQ与JS关系 可以共存，不能混用
模拟CSS选择元素的示例yp
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
总结：选择一组元素后省略了循环
独有表达式选择的示例
$('li:first').css('background','red');
$('li:last').css('background','red');
$('li:eq(2)').css('background','red'); //从0开始
$('li:even').css('background','red'); //奇数行
$('li:odd').css('background','red'); //偶数行
多种筛选方法的示例
$(‘li.box’).css('background','red');
$('li').filter('.box').css('background','red'); //过滤出带有.box的li
$('li').filter('[title=hello]').css('background','red'); //筛选出title属性为hello的li
方法函数化的示例
原生：window.onload = function(){};
JQ: $(function(){}); jQ的源码中相当于有一个function $(){}这个函数
原生：innerHTML = 123;
jQ: html(123); jQ的源码中相当于有一个function html(){}这个函数
原生：onclick = function(){};
JQ：click(function(){})； jQ的源码中相当于有一个function click(){}这个函数
原生：window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){alert( this.innerHTML );};
};
JQ：$(function(){
$('#div1').click(function(){alert( $(this).html() );});
});
总结：原生中的赋值，大多由JQ中的传参来完成。
调用时一定带上括号。eg:html();$('ul').children().css('background','red');
链式操作的示例
$('#div1').html('hello').css('background','red').click(function(){
alert(123);});
取值赋值合体的示例
$('#div1').html('hello'); //赋值
alert( $('#div1').html() ); //取值
css('width','200px') //赋值
alert(css('width') ) //取值
总结：alert( $('li').html() ); //当一组元素的时候，取值是一组中的第一个
$('li').html('hello'); //当一组元素的时候,赋值是一组中的所有元素,省略了循环
可以共存，不能混用的示例
alert( $(this).html() ); //jq的写法
alert( this.innerHTML ); //js的写法
alert( $(this).innerHTML ); //错误的
alert( this.html() ); //错误的
$()下的常用方法
has() 专对这个元素里面的
$('div').has('span').css('background','red');//包含span元素的div变红
$('div').has('.box').css('background','red');
not() 是filter的反义词
$('div').not('.box').css('background','red'); //类名不是.box的div变红
filter() 专对当前这个元素自身的,对一组元素时行过滤
$('div').filter('.box').css('background','red');//类名是.box的div变红
next() 下一个兄弟结点
prev() 上一个兄弟结节
find()
$('div').find('h2').css('background','red');//找div下面的h2
eq() 充当下标的作用，从0开始
$('div').find('h2').eq(1).css('background','red');//一组元素中的第二个
index()索引,索引就是当前元素在所有兄弟节点中的位置
alert($(‘#h’).index());
attr()
alert($('div').attr('title'));
$('div').attr('title','456');
$('div').attr('class','box');
总结：
1filter与has的区别
filter和not是针对前面这个元素的，而has是看这个元素里面的东西的
html:div1span
div2
Js: $('div').has('.box').css('background','red'); //div1变红
$('div').filter('.box').css('background','red'); //div2变红
2关于next
html:div1
div2
span
Js: $('div').next().css('background','red');
//div2和span都变红，理解为分别让div1和div2的下一个兄弟节点都变红
3find与has的区别
has()后代中如果有符合筛选条件的，会将整个后代作为一个整体，对这个整体进行操作；
find()筛选出符合条件的后代，对筛选出的dom单独进行操作。
$('div').find('h2').css('background','red');
//在div里面找h2，让div里面的h2 变红
$('div').has('h2').css('background','red');
//在div里面是否包含h2,如果包含,让div变红
应用---编写选项卡
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
});
});
总结：1省略循环 2eq($(this).index())
jQuery方法之属性操作
addClass()
$('div').addClass('box2 box4');
removeClass()
$('div').removeClass('box1');
width()： 纯宽width
innerWidth()：width + padding
outerWidth()：width + padding + border
outerWidth(true)：width + padding + border + margin
jQuery方法之DOM操作
动词 名词
A.insertBefore(B) A.before(B)
把A剪切到B的前面 A的前面必须是B
A.insertAfter(B) A.after(B)
把A剪切到B的后面
A.appendTo(B) append()
把A添加到B元素里面的最后面
A.prependTo(B) prepend()
把A添加到B元素里面的最前面
remove()删除节点
$(‘
jQuery方法之事件操作和scrollTop
on()绑定事件:不仅可以加系统自带事件，也可以绑定自定义事件，还可以加多个事件
示例1：$('div').on('click mouseover',function(){
alert(123);});
//点击和移入时都弹出123
示例2：$('div').on({
'click' : function(){alert(123);}, //点击时弹123
'mouseover' : function(){alert(456);} //移入时弹456
});
off()取消事件
示例：$('div').on('click mouseover',function(){
alert(123); //$(‘div’).off();取消所有事件
$('div').off('mouseover'); //只取消mouseover事件，写on的里面或外面有区别
});
scrollTop()纵向的滚动距离
示例：$(document).click(function(){
alert( $(window).scrollTop() );
});
scrollLeft()横向的滚动距离
总结：1addClass关于重复的不会重复添加
2alert($(‘oDiv’).width())与alert($(‘oDiv’).css(‘width’))区别:前者无单位，后者有单位
3insertBefore与before区别：后续操作不一样
$('span').insertBefore( $('div') ).css('background','red');//span变红
$('div').before( $('span') ).css('background','red');//div变红
4$作用 1相当于window.onload 2选择元素 3创建节点
应用---编写弹窗
样式中
JS中：$(function(){
$('#input1').click(function(){
var oLogin = $('用户名:
密码:
X');
$('body').append( oLogin );
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );
$('#close').click(function(){oLogin.remove();});
$(window).on('resize scroll',function(){
oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' ,($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
});
});
});
总结:1创建元素$(‘
3 $(window),$(document)不写引号
jQuery方法之事件细节
ev event对象
ev.pageX ev.pageX(相对于文档的);clientX(相对于可视区); 可视区+滚动条距离 =文档
ev.which ev.which类似于keyCode,比keyCode强大,用which时鼠标的键值也能取到
ev.preventDefault(); 阻止默认事件
ev.stopPropagation(); 阻止冒泡的操作
return false;阻止默认事件 + 阻止冒泡的操作
one() 只执行事件一次
示例：$('div').one('click',function(){
alert(123);
});
jQuery方法之位置操作
offset() 是原生的left 和top的集合;到屏幕的左距离，上面的距离
示例：alert( $('#div2').offset().left ); //获取到屏幕的左距离
示例：alert( $('#div2').offset().top ); //获取到屏幕的上距离
position()到有定位的父级的left值,把当前元素转化成类似定位的形式
示例：
#div1{ width:200px; height:200px; background:red; overflow:hidden; margin:20px; position:absolute;}
#div2{ width:100px; height:100px; background:yellow; margin:30px; }
alert( $('#div2').position().left ); //输出：0
如果div1没有定位,alert( $('#div2').position().left ); //输出：20
parent()获取父级 原生的parentNode
offsetParent()获取有定位的父级 原生的offsetParent
val()获取表单元素的值
示例：alert( $('input').val() ); 取值
$('input').val(456); 赋值
size()获取一组元素的长度，类似length
each()
$('li').each(function(i,elem){ //一参：下标 二参 : 每个元素
$(elem).html(i); //0 1 2 3 4
});
应用---拖拽
$('div').mousedown(function(ev){
var disX = ev.pageX - $(this).offset().left;
var 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;});
hover() 鼠标移入移出的时候
示例：$('#div1').hover(function(){
$(this).css('background','blue');
},function(){
$(this).css('background','red');
});
show() hide()显示 隐藏
示例：$('#div1').hover(function(){
$('#div2').hide(3000); //移入隐藏,3S内隐藏
},function(){
$('#div2').show(3000); //移出显示,3S内显示
});
fadeIn() fadeOut()淡入 淡出
示例：$('#div1').hover(function(){
$('#div2').fadeOut(3000); //淡出，默认400MS
},function(){
$('#div2').fadeIn(3000); //淡入
});
slideDown() slideUp()
示例：$('#div1').hover(function(){
$('#div2').slideDown(); //向下展开
},function(){
$('#div2').slideUp(); //向上卷曲
});
fadeTo(时间，透明度)关于透明度范围的方法
示例：$('#div1').hover(function(){
$('#div2').fadeTo(1000,0.5); //1S内到半透明
},function(){
$('#div2').fadeTo(1000,1); //1S内到透明度1
});
英文：http://api.jquery.com/
中文： http://www.css88.com/jqapi-1.9/
jQuery高级
get() : 把JQ转成原生JS，不写下标，获取的是集合
示例1：alert( $('#div1').get(0).innerHTML );//就算只有一个元素,也是一个集合，所以要写下标
示例2：for(var i=0;i<$('li').get().length;i++){//转成一组li的集合
$('li').get(i).style.background = 'red';
}
for(var i=0;i<$('li').length;i++){ //jq下也有length
$('li').get(i).style.background = 'red';
或 $('li')[i].style.background = 'red';
}
总结：jq转原生法1get() 法2[i]
Jq中outerWidth()与原生的offsetWidth区别
原生的offsetWidth获取不到隐藏元素的值，但outerWidth可以，innerWidth也可以
text(): 设置文本,合体的特例
示例div1span
div2
div3
alert( $('div').html() ); 输出：div1span
特点1取值赋值合体 2取值只取到第一个 3包括文本和标签
alert( $('div').text() ); 输出：div1 span div2 div3
特点1会获取所有的内容 2不包括标签
$('div').text('
h3
');设置文本，标签也当做文本来设置remove() 与 detach()
detach() 跟remove方法一样,会删除元素，只不过会保留删除这个元素的操作行为
示例：$('div').click(function(){
alert(123);
});
var oDiv = $('div').detach();//用remove删除,则在次添加后点击事件不存在
$('body').append( oDiv );//用detach删除,则在次添加后点击事件仍然存在
总结：$('div').remove();$('div').detach();删除元素的返回值就是当前这个元素
关于$
$(function(){ })是$(document).ready(function(){})的简写
等DOM加载完就可以执行了 , 性能要好,比window.onload加载的快
jQuery的DOM操作
parents() : 获取当前元素的所有祖先节点，参数就是筛选功能
示例1html中：
aaa
bbb
$('#div2').parents().css('background','red');//div2的祖先节点有div1 body html
$('#div2').parents(‘body’).css('background','red');// div2的祖先节点只选body
$('#div2').parents(‘.box’).css('background','red');//div1 body变红
closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能 找到一个元素
示例2:$('#div2').closest('.box').css('background','red');// 自身变红
siblings() : 找所有的兄弟节点，不包括自身。参数也是筛选功能。
示例一:$('span').siblings().css('background','red');
//span元素的所有兄弟节点全变红，但不包括span元素
示例二:$('span').siblings('em').css('background','green');
//找span元素的兄弟节点em，使其变红
nextAll() : 下面所有的兄弟节点，参数也是筛选功能
示例：$('span').nextAll().css('background','green');
//span下面的所有兄弟节点都变绿，不包括span
prevAll() : 上面所有的兄弟节点
示例：$('span').prevAll().css('background','green');
//span上面的所有兄弟节点都变绿，不包括span
Until() : 截止
nextUntil（）载止到哪为止,不写参数时和nextAll()作用一样
示例一:$('span').nextUntil().css('background','red');
//，从span(不包括span)下面的所有兄弟节点变红
示例二:$('span').nextUntil('h2').css('background','red');
//从span到h2之间的兄弟结节全变红，但不包括span和h2
parentsUntil() nextUntil() prevUntil()
clone() :复制节点.可以接收一个参数 ，作用是可以复制之前的操作行为
示例：$('div').click(function(){
alert(123);});
$('div').clone(true).appendTo( $('span') );
//克隆div元素,添加到span里面的最后位置.并且点击克隆后的div可以弹出123.
总结:clone()可以复制节点，也可以复制行为
wrap()包装
示例html:
span
span $('span').wrap('');//给每个span包装一个div
span
输出
span
span
span
wrapAll() 整体包装
示例：span
span
p
span $('span').wrapAll('');
span
span
span
p
//把p剪切出来，wrapAll会改变dom节点方式
wrapInner() 内部包装
示例： span
span
span $('span').wrapInner('');
span
span
span
unwrap() 删除包装 ( 删除父级) : 不包括body
总结1：wrap(‘’); 这里面的元素要用<>括起来。
add()
示例：var elem = $('div'); //elem装了div
var elem2 = elem.add('span'); //elem2装了div和span
elem.css('color','red');
elem2.css('background','yellow');
slice():截取指定节点的范围，包头不包尾
示例：$('li').slice(1,4).css('background','red');//截取到第1 2 3个
serialize() serializeArray()对数据进行数据串联化的方法
示例：
console.log($('form').serialize()); 输出： a=1&b=2&c=3(是个字符串)
console.log( $('form').serializeArray() ); 输出:
[
{ name : 'a' , value : '1' },
{ name : 'b' , value : '2' },
{ name : 'c' , value : '3' }
]
jQuery中的运动
animate()
第一个参数 : {} 运动的值和属性
第二个参数 : 时间(运动快慢的) 默认 : 400ms
第三个参数 : 运动形式 只有两种运动形式 ( swing(缓冲,慢快慢,默认) linear(匀速) )
第四个参数 : 回调函数
示例：$('#div1').click(function(){
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
alert(123);
});
链式运动法一：应用第四个参数
$('#div1').click(function(){
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
$(this).animate({height : 300}); });
链式运动法二：应用链式运动
$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);
stop()停止运动,默认只会阻止当前运动，不会阻止后续运动
示例：$('#div1').click(function(){
$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);
}); // 链1：宽 链2：高
$('#div2').click(function(){
$('#div1').stop();
});
总结:当div1在链式1中运动时被stop,=>链1运动停止，链2运动仍然继续
当div1在链式2中运动时被stop,=>当即停止链2运动
stop(true) 阻止后续的运动
示例：$('#div1').stop(true);
总结:无论div1在链式1还是链式2中被stop时，当即全部停止
stop（true,true);可以立即停止到指定的目标点
示例：$('#div1').stop(true,true);
总结：当div1在链式1中运动时被stop,=>链1马上停到宽为300的位置，链2不动
当div1在链式2中运动时被stop,=>链2马上停到高为300的位置
示例：$('#div1').stop(false,true);
总结:当div1在链式1中运动时被stop,=>链1马上停到宽为300的位置，链2依然以swing方式运动
finish()立即停止到所有指定的目标点
示例：$('#div2').click(function(){
$('#div1').finish();
});
总结：无论div1在链式1还是链式2中被finish时,宽高马上都停到300的位置
delay()延迟
示例：$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);
宽走完后延迟1S后在走高
delegate() 事件委托 undelegate()取消事件委托
示例:$('ul').delegate('li','click',function(){
this.style.background = 'red';
$('ul').undelegate();
});
原理:利用冒泡原理，事件加给了ul,li本身没有事件
好处 1省略了循环操作，(只给ul加事件),大大提高性能
2后续添加的li都拥有事件的操作
trigger()主动触发 特别适合自定义事件
示例一：$('#div1').on('click',function(){
alert(123);
});
$('#div1').trigger('click'); //不用点击加载后马上弹出123
示例二：$('#div1').on('show',function(){
alert(123);});
$('#div1').on('show',function(){
alert(456);});
$('#div1').trigger('show'); //输出123 456
事件细节ev.data ev.target事件源 ev.type 事件类型
示例：$('#div1').on('click',{name:'hello'},function(ev){
console.log(ev.data); 控制台输出：{name:'hello'}
alert(ev.data.name); 输出:hello
alert( ev.target ); 输出: div
alert( ev.type ); 输出：click
}
总结：如何往function里传参，就在’click’后面写,ev.data可以取到这个参数
$下的常用方法，又叫做工具方法
示例$().css() $().html() $().val() : 只能给JQ对象用
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 ,叫做工具方法
type() 判断类型
示例：var a = null;alert( $.type(a) );比alert( typeof a );判断的类型更多,更强大
trim() 去掉前后空格
示例：var str = ' hello ';
alert('('+$.trim(str)+')');
inArray() 针对数组，类似于 indexOf
示例：var arr = ['a','b','c','d'];
alert( $.inArray('b',arr) ); 输出：1
proxy()改变this指向的
示例一：function show(){
alert(this);
}
show(); 指向windwow
$.proxy(show , document)();指向document
示例二:关于传参
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
$.proxy(show , document)(3,4); //输出 3 4 document
或$.proxy(show , document,3,4)();
或$.proxy(show , document,3)(4);
总结：1$.proxy(函数名,新的this指向,参数);
2 $.proxy(函数名,新的this指向,参数)() => 后面加括号即调用
3 在前面传参的目的，是在事件执行时才发生
例如在事件函数中
$(document).click( $.proxy(show,window,3,4) );//点击时才弹 3 4 window
$(document).click( $.proxy(show,window)(3,4) );//不用点击，马上就执行
noConflict()防止冲突
var hjr = $.noConflict(); 用hjr来替换$
很多库都是以$为命名空间，为防止冲突
示例：var hjr= $.noConflict();
var $ = 10;
hjr(function(){
hjr('body').css('background','red');
});
$==jQuery 即 $(function(){ })==jQuery(function(){ });
parseJSON() 把字符串解析成json,注意:此字符串必须是严格模式的json
示例：var str = '{"name":"hello"}';
alert($.parseJSON( str ).name);
makeArray() 把类数组转成真正的数组
示例：var aDiv = document.getElementsByTagName('div'); //类数组只有下标和长度
$.makeArray(aDiv).push();
ajax() : json形式的配置参数
url success error contentType data type dataType cache timeout
抽象出来的方法 get() post() getJSON()
支持jsonp的形式：指定?callback=?
写法一：$.ajax({
url : 'xxx.php',
data : 'name=hello&age=20',
type : 'POST', //默认是get
success : function(data){
alert(1);
},
error : function(){
alert(2);
}});
写法2：$.get('xxx.php?name=hello',function(){ 成功的回调； });
写法3：$.get('xxx.php',{name:’hello’},function(){ });
写法4：$.post('xxx.php',function(){ });
$.get():ajax的get提交方式; $().get():jq对象转成原生
$.getJSON('xxx.php?callback=?',function(data){
data
});
名字随机({});
插件
$.extend({插件名，函数})： 扩展工具方法下的插件形式 $.xxx() $.yyy()
$.fn.extend： 扩展到JQ对象下的插件形式 $().xxx() $().yyy()
示例一：
示例二：
你可能感兴趣的:(jQuery(m))