版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_37636695/article/details/78578387
JQ官网 http://jquery.com/
$() ★★★★★
css() ★★★★★
省略原生的循环操作
$ == jQuery
事件 click() ★★★★★
内容 html() ★★★★★
获取文本
text() ★ 获取文本的特点
alert( $('div').text() ); //获取一个集合的所有文本节点
取值与赋值的关系之间不能混写函数中返回原生this, $()选择元素
通过参数决定
attr() ★★★★★ 把数据直接添加到了标签上
data() ★★★
//把数据存到了一个大的集合中,
$('#div1').data('name','hello'); 用key值=value值的方式存数据
prop() ★★★
用. [ ]存数据,相当于oDiv['index'] = i;
$('input[type=checkbox]').prop('checked',true);
removeAttr() , removeProp() , removeData()
值 val() ★★★
多元素取值 第一个元素
$(function(){}); ★★★★★
//等DOM加载完就会执行
ready() ★ 和上面加载效果一样
防止库之间冲突与$(function(){})关系与原生window.onload的区别 //等整个页面加载完才会执行
$. noConflict() ★
/*var J = $.noConflict();var $ = 123;//$ == jQueryJ().css();
属性选择
[=] ★★★★★
[^=] ★★★★★
[$=] ★★★★★
[*=] ★★★★★
//$('input[value]').css('background','red');
//$('input[value=123]').css('background','red');
//$('input[value*=3]').css('background','red');
$('div[style*=red]').css('background','');
$('div[class="box box2"]').css('color','red');
引号的问题
筛选方法 ★
filter() 选择到符合参数的 not()过滤掉符合参数的 has()子节点中有符合参数的该节点
通用选择 *
层级选择 > + ~
//$('*').css('border','1px red solid');选择到所有
//$('#div1').find('*').css('border','1px red solid');
//$('div > span').css('border','1px red solid');div的子节点为span
//$('p + span').css('border','1px red solid');紧挨着p的后面的一个兄弟span
//$('p ~ span').css('border','1px red solid');
p的后面的所有兄弟span
基本筛选
:animated 运动的:eq():even 奇数:odd 偶数:first:last:gt() 下标大于:lt() 下标小于
内容筛选
:contains()//$('div:contains(span123)').css('border','1px red solid');包含文本节点为span123的div:empty 内容为空的div:parent $('div:parent').css('border','1px red solid');为父容器的div加边框
可见性筛选
:hidden 影藏的:visible 可见的
子元素筛选
:first-child :last-child
:first-of-type :last-of-type
$('#div1 span:last-child').css('background','red');选择到div1下面的最后一个并且标签为span的元素
$('#div1 span:last-of-type').css('background','red');选择到最后一个标签类型为span的span标签
:nth-child()
:nth-of-type()
:only-child
:only-of-type
表单筛选
:button :checkbox :radio :checked :disabled :enabled :selected
JQ的链式操作
class的操作
显示隐藏
节点的选择
节点的操作
下标
JQ中的索引
JQ中的遍历
JQ包装对象
JQ转原生JS
元素的尺寸
滚动距离
元素距离
JQ的事件
工具方法
JQ中的运动
JSON形式的设置
回调形式的设置
$().css().html().click() 针对设置的时候
后退链式操作
end() ★ 只选择到一个
$('div').next().css('background','red').end().css('color','blue');
后退添加链式操作
addBack() ★ 选择到多个
$('div').next().css('background','red').addBack().css('color','blue');(div和span都被选择到)
命名的规范
$div $span
容错处理
$()
集合的长度
size() ★
length ★★★★★
$()获取到的都是一个集合
JQ实战小技巧 利用length判断元素是否存在 例子 : 删除指定颜色的方块
addClass() ★★★
removeClass() ★★★
toggleClass() ★★★
hasClass()//用于判断
show()/hide() ★★★★★
与css()的区别
清空内容
html(“”) empty() ★
prev() next() ★★★★★
prevAll() nextAll() ★★★
siblings() ★★★
first() ★★★
last() ★★★
slice() ★
//$('li').slice(1,3).css('background','red');
nextUntil() ★
prevUntil() ★
parentsUntil() ★
$('#span1').parentsUntil('body').css('border','1px red solid');
children() ★★★
find() ★★★★★
//$('ul').find('p').css('background','red'); //尽量用这种方式,性能会更高一些
//$('ul p').css('background','red');
children和find区别
parent() ★★★
parents() ★
获取当前元素的所有祖先节点
closest() ★★★★★
找指定的一个最近的祖先元素(包括自身) , 必须要接收一个参数 ( 只能选择到一个唯一的元素 )
精准的查找能力,实战开发之王 找的是最近的唯一一个元素
创建节点
添加节点$(<>) ★★★★★ 比原生JS更强大的创建方式$('<li class="box">hello</li>');
移出以及克隆节点insertBefore() before() ★★★★★insertAfter() after() ★★★★★appendTo() append() ★★★★★prependTo() prepend() ★★★★★两种写法的区别
删除节点 remove() detach() ★remove() ★★★★★clone() ★★★默认的剪切操作 如何克隆事件var $div = $('div').clone(true); //参数就是可以复制之前的操作行为
var $div = $('#div1').detach(); //删除元素,但是可以
保留元素之前的操作行为(事件)
替换节点 (被替换的那个元素就不会在页面上了)
replaceWith() ★replaceAll() ★
这两个的区别相当于append和appendTo的区别
eq() ★★★★★
index() ★★★★★
//index() : 索引值,代表的就是当前元素在所有兄弟节点中排第几
第一种用法,兄弟中的排行
第二种用法,筛选后的排行 善于利用索引做实际开发 例子 : 选项卡
each() ★★★★★
回调函数的两个参数
this指向
return false;
$('li').each(function(i,elem){
//alert(i);
//elem : 原生的元素
//elem.style.background = 'red';
//$(elem).css('background','red');
//$(elem).html(i);
//this == elem
$(this).html(i);
if(i == 2){
return false;
}
});
遍历 $. each() ★★★
wrap() ★★★
wrapAll() ★
wrapInner() ★
unwrap() ★
//wrap() : 包装
//wrapAll() : 整体包装
//wrapInner() : 内部包装
//unwrap() : 删除包装( 相当于删除父节点 , body是不能被删 )
//$('span').wrap('<div>');
//$('span').wrapAll('<div>');
//$('span').wrapInner('<div>');
$('span').unwrap();
例子 : 管理员与普通用户状态控制
$('input').click(function(){
if( $(this).val() == '管理员' ){
$('#span1').wrap('<a href="#"></a>');
}
else if( $(this).val() == '普通用户' ){
$('#span1').unwrap();
}
});
get() ★★★★★
与eq的区别
//get() : 把JQ转成原生JS , 默认情况获取的是一个原生的集合,那么可以通过参数来找到集合中的指定项
为什么要转,
// alert( $('#t1').get(0).scrollHeight );
比如: 获取内容的高度 元素之间的比较
width() height() ★★★★★
innerWidth() innerHeight() ★★★★★
outerWidth() outerHeight() ★★★★★
参数的作用 与原生JS的区别
//alert( $('#div1').width() ); //width
//alert( $('#div1').innerWidth() ); //width + padding
//alert( $('#div1').outerWidth() ); //width + padding + border
//alert( $('#div1').outerWidth(true) ); //width + padding + border + margin
//$('#div1').width(200);
//$('#div1').innerWidth(200); //width : 200 - padding
//$('#div1').outerWidth(200); //width : 200 - padding - border
$('#div1').outerWidth(200,true); //width : 200 - padding - border - margin
//alert( $('#div1').get(0).offsetWidth ); //原生JS是获取不到隐藏元素的尺寸
alert( $('#div1').width() ); //JQ是可以获取隐藏元素的尺寸
JQ实战小技巧 可视区的尺寸 页面的尺寸
//
alert( $(window).height() ); //可视区的高
alert( $(document).height() ); //页面的高
scrollTop() ★★★★★
scrollLeft() ★
//alert( $(document).scrollTop() ); //滚动距离
//$(document).scrollTop() == $(document).height() - $(window).height()
$(document).scrollTop(300);可设置页面的滚动距离
//$('#div1').scrollTop();可设置某个元素的的滚动距离
offset() ★★★★★
left top
position() ★★★
left top
不认magin值
//alert( $('#div1').offset().top ); //offset()的距离值都是相对于整个页面的
//alert( $('#div2').offset().left );
alert( $('#div2').position().left );//相对于定位的祖先元素。
实战小技巧 利用计算原理,得到相应值
offsetParent() ★
alert( $('#div2').offset().left - $('#div2').offsetParent().offset().left );//
此时得到的值为div2的相对于定位的祖先元素的left值,(无论是否有margin值都能够这样计算出)
例子 : 懒加载页面中的图片(瀑布流)
toChange();$(window).scroll(toChange);function toChange(){$('img').each(function(i,elem){if( $(elem).offset().top < $(window).height() + $(document).scrollTop() ){$(elem).attr('src' , $(elem).attr('_src') );}});}
on() ★★★★★
源码分析几大参数获取原生eventoriginalEvent 将事件对象转为原生的的事件对象,方便后面操作changedTouches 这是手机用户的,触摸事件。自定义事件$('#div1').on('click','span',{name:"hello"},function(ev){第一个参数:事件名称,第二个参数:事件被委托对象。第三个参数:内部属性(用于识别身份),第四个参数,回调函数。alert(ev.originalEvent.changedTouches)});
off() ★★★★★
事件扩展
Event对象 ★★★★★JQ中都是绑定的形式支持多事件写法click()写法,也是采用off()取消 $(this).off('.drag');这是在拖拽鼠标抬起事件函数里面的一句话,这里使用的是命名空间,相当于在mouseover和mouseup后面都加了.drag这个后缀。
delegate() ★★★★★pageX,pageY 与client的区别alert(ev.pageY); //鼠标的坐标 : 相对于整个页面的alert( ev.clientY ); //鼠标的坐标 : 相对于可视区的which 键值//alert( ev.which );//alert( ev.ctrlKey );target ////ev.target : 事件源 : 视频 : 事件委托stopImmediatePropagation() ★ // 会阻止本身的事件操作stopPropagation()preventDefault()return false //阻止默认程序和冒泡JQ实战小技巧 多次添加on的处理方式 例子 : 拖拽效果
trigger() ★★★★★ 事件的主动触发委托的好处ev.delegateTargetundelegate()$('ul').delegate('li','click',function(ev){这里ul把事件委托给li,$(this).css('background','red');这里的this是指的是被委托人//$(ev.delegateTarget).css('background','red');这里的委托源指的是委托者也就是ul。$(ev.delegateTarget).undelegate();这里的ul取消事件委托});
triggerHandler() ★ 这个
不会触发事件自带的默认行为
比 click()形式更强大事件的命名空间例子 : 主动触发的添加内容$('div').on('click.def',function(){事件命名空间alert(1);});$('div').on('click.abc',function(){alert(2);});$('div').trigger('click.abc');主动触发事件
hover() ★★★
mouseenter , mouseleave 与over,out区别
$('#div1').hover(function(){、//两个参数,一个是鼠标移入(enter),另一个是鼠标移出(leave)。$(this).css('background','blue');},function(){$(this).css('background','red');});
focusin() ★
focusout() ★
与focus , blur区别
one() ★
//$().css(); $().html(); $().click(); //都是针对JQ对象的//$.xxx(); $.yyy(); $.zzz(); //工具方法,即可以给JQ对象用,也可以给原生JS用
$.type() ★★★★★ 比原生typeof更强大,可区分数组,json,日期
$.isFunction() ★★★ 是不是函数
$. isNumeric() ★★★ 是否是数字类型
$. isArray() ★★★ 是否是array
$. isWindow() ★★★ 是否是widow对象
$. isEmptyObject() ★★★ 是否是空对象,{},[ ]
$. isPlainObject() ★★★
对象自变量
$.extend() ★★★★★
对象继承操作深拷贝操作var a = {name : {age:20}};var b = {};$.extend( true , b , a ); //默认是浅拷贝的 , true代表深拷贝。。。
$.proxy() ★★★改变this指向, 两处传参的区别
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
//show();
//show.call( document );原生js
//$.proxy( show , document ,3)(4);外面传参,相当于会调用
//$(document).on('click', $.proxy(show,window,3,4) );里面传参,不会主动调用
利用This改指向,更加方便
$('#div1').on('click',function(){
var This = this;
setTimeout(function(){
$(This).css('background','yellow');
},1000);
});
$. parseJSON() ★★★★★
//$.parseJSON() : 把JSON类型的字符串,转换成真正的JSON数据,
只能针对JSON类型的字符串(安全比较好),要是严格的JSON
$. parseHTML() ★
//$.parseHTML() : 转化HTML的形式的字符串,转成DOM节点,放到一个数组中
$. parseXML() ★
//$.parseXML() : 把XML形式的字符串,转成真正的XML节点
$. isXMLDoc() ★
$.merge() ★ 只能连接2个数组
$.map() ★ 改变数组里面的值
/*var arr = ['a','b','c'];
arr = $.map(arr,function(val,i){第一个参数数组元素,第二个参数,下标
return val + i;//这里返回的新数组为arr=[a0,b1,c2]
});
$.grep() ★
/*var arr = [1,5,3,8,2];
arr = $.grep(arr,function(val,i){
return val > 4;//这里返回是满足条件的,新数组arr=[5,8]
});
$.unique() ★
只是针对DOM节点的去重方法
$.inArray() ★
类似于 indexOf()
//var arr = ['a','b','c','d'];
//console.log($.inArray('b',arr)); //1
$.makeArray() ★
转数组的
$.trim() ★★★ 去掉左右空格
时间的概念
show() , hide() , toggle() ★★★
fast normal slow
fadeIn() , fadeOut() , fadeToggle() ★★★
有默认的时间 normal
slideDown() , slideUp() , slideToggle() ★★★
有默认的时间 normal
//'normal' : 400
//'fast' : 200
//'slow' : 600
//参数可以直接添加时间
animate() ★★★★★
参数的作用
数值的运算操作
配置参数step的作用
duration easing complete
队列的概念 其他元素不会存入队列
链式运动
//animate() ://第一个参数 : 对象 {} 去设置样式属性和值(目标点)//第二个参数 : 时间 默认是400//第三个参数 : 运动形式 只有两种 swing(默认 : 缓冲 : 慢快慢) linear(匀速的)//第四个参数 : 运行结束的回调$('#div1').animate({width: 100//可以设置为+=100.},{duration : 2000,//时间延续2秒,2秒运动一次easing : 'linear',//运动形式complete : function(){//运动完成之后的回调函数//alert(123);},step : function(a,b){ //可以检测我们定时器的每一次变化//console.log(a);//console.log(b.pos); //运动过程中的比例值(0~1)$('#div1').html(parseInt(b.pos * 273826678));}});
delay() ★ 延迟参数为时间,意思就是延迟多久去做后面的 事情
stop() ★★★★★ 参数的作用
//$('#div1').stop(); //默认情况下 : 只会停止当前运动
清空队列的行为,避免运动的冲突,
//$('#div1').stop(true); //第一个参数 : 可以停止所有的运动
//$('#div1').stop(true,true); //第二个参数 : 可以停止到指定的目标点(当前的)==$('#div1').finish();
finish() ★ 有时候可以代替开关,
on() css() attr()
//$('div').css({width:'100px',height:'100px',background:'red'});
//$('div').on({click:function(){},mouseover:function(){}});
addClass() html() val()
$('div').addClass(function(i,oldClass){//console.log(i);//console.log(oldClass);return 'box'+(i+1);用于多个需要添加class的元素,而且每个元素的class不相同的情况下,});
JQ插件
UI组件
$.browser()
http://jquery.thewikies.com/browser/
e-calendar
http://www.jq22.com/jquery-info541
用法和JQ是相同的
jQuery UI
http://jqueryui.com/
交互,部件,特效,工具配置参数,方法,自定义事件CSS主题
jQuery EasyUI
http://www.jeasyui.com/
更强大的后台交互控件 datagrid操作