分类书写jQuery

JQ官网 http://jquery.com/

学习参考手册 http://www.runoob.com/jquery/jquery-tutorial.html

选择元素

$() ★★★★★

css() ★★★★★

省略原生的循环操作

$ == jQuery

JQ方法函数化

事件 click() ★★★★★

内容 html() ★★★★★

获取文本

text() ★ 获取文本的特点

alert( $('div').text() ); //获取一个集合的所有文本节点

JS与JQ关系

之间不能混写

函数中返回原生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;

//$ == jQuery

J().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()子节点中有符合参数的该节点

Sizzle选择器 ★★★

通用选择 *

层级选择 > + ~

//$('*').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的链式操作

$().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判断元素是否存在例子 : 删除指定颜色的方块

class的操作

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()               ★★★★★

clone()                  ★★★

默认的剪切操作如何克隆事件

var $div = $('div').clone(true);  //参数就是可以复制之前的操作行为

删除节点 remove() detach() ★

var $div = $('#div1').detach(); //删除元素，但是可以保留元素之前的操作行为（事件）

替换节点（被替换的那个元素就不会在页面上了）

replaceWith() ★

replaceAll() ★

这两个的区别相当于append和appendTo的区别

下标

eq() ★★★★★

JQ中的索引

index() ★★★★★

//index() : 索引值，代表的就是当前元素在所有兄弟节点中排第几

第一种用法，兄弟中的排行

第二种用法，筛选后的排行善于利用索引做实际开发例子 : 选项卡

JQ中的遍历

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() ★★★

JQ包装对象

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();

}

});

JQ转原生JS

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') );

            }

        });

    }

JQ的事件

on() ★★★★★

源码分析几大参数

获取原生event

originalEvent 将事件对象转为原生的的事件对象，方便后面操作

changedTouches 这是手机用户的，触摸事件。

自定义事件

$('#div1').on('click','span',{name:"hello"},function(ev){

第一个参数：事件名称，第二个参数：事件被委托对象。第三个参数：内部属性（用于识别身份），第四个参数，回调函数。

alert(ev.originalEvent.changedTouches)

});

off() ★★★★★

JQ中都是绑定的形式

支持多事件写法

click()写法，也是采用off()取消 $(this).off('.drag');这是在拖拽鼠标抬起事件函数里面的一句话，这里使用的是命名空间，相当于在mouseover和mouseup后面都加了.drag这个后缀。

Event对象 ★★★★★

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的处理方式例子  :   拖拽效果

delegate() ★★★★★

委托的好处

ev.delegateTarget

undelegate()

$('ul').delegate('li','click',function(ev){这里ul把事件委托给li,

        $(this).css('background','red');这里的this是指的是被委托人

        //$(ev.delegateTarget).css('background','red');这里的委托源指的是委托者也就是ul。

        $(ev.delegateTarget).undelegate();这里的ul取消事件委托

    });

trigger() ★★★★★ 事件的主动触发

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() ★★★ 去掉左右空格

JQ中的运动

时间的概念

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() ★ 有时候可以代替开关，

JSON形式的设置

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插件

$.browser() http://jquery.thewikies.com/browser/

$.cookie() https://github.com/carhartl/jquery-cookie#readm

e-calendar http://www.jq22.com/jquery-info541

用法和JQ是相同的

UI组件

jQuery UI http://jqueryui.com/

交互，部件，特效，工具

配置参数，方法，自定义事件

CSS主题

jQuery EasyUI http://www.jeasyui.com/

更强大的后台交互控件 datagrid操作

猜你喜欢