jQuery进修笔记

jQuery

  • 进步营业编程才能

    • JQ中供应了许多的要领(基本都兼容),我们能够运用这些要领疾速开辟项目

    • JQ中有的要领供应的头脑能够让我们把项目完成得更优化

  • 进步JS基本以及一些高等编程头脑

    • 剖析JQ源码,进修内里类库封装的头脑和一些要领完成的道理

    • 有时间把JQ中供应的经常使用要领都去完成一遍,进步本身的编程才能

1.jQuery的道理
  • jquery-1.xxx: 特地为PC端降生的类库,兼容统统的浏览器

  • jquery-2.xxx: 当初是为了挪动端而预备的,所以IE低版本浏览器平常不兼容,然则这个版本针对挪动端的事宜等操纵也不是迥殊完美,被Zepto这个类库庖代了

jQuery充分利用了JS中函数的三种特征:一般函数、类、一般对象;jQuery就是这个类,在表面运用的$和jQuery是一个东西,jQuery中供应的要领分为两部分:写在原型上的要领和写在jQuery私有属性上的要领;建立jQuery实例的时刻,会返回一个类数组(它也是jQuery实例),这个类数组是jQuery本身去建立的,内里有一些本身特定的属性

//jQuery中心道理
(function(){
    var version="1.11.3",
    jQuery=function(selector,context){
        return jQuery.fn.innt(selector,context);
    };
    
    jQuery.fn=jQuery.prototype={
        //...
        init:function(selector,context){
            
        }
    };
    
    jQuery.ajax=function(){};
    
    window.jQuery=window.$=jQuery;
    
})();
  • jQuery对象和JS对象互相转换

//jQuery对象转换成JS对象
var $obj=$("*");
$obj[0];  //-->JS对象
$obj.get(0);  //-->JS对象
$obj.eq(0)  //-->这个猎取的是jQuery对象

//JS对象转换成jQuery对象
var obj=document.getElementsByTagName("*");
$(obj);  //-->jQuery对象
  • extend

在jQuery对象上和jQuery实例上都有这个要领,而且都是同一个要领,然则这两个要领实行时其this指向不一样,也就是说extend所扩大的要领地点的扩大位置不一样

$.extend({
    aa:function(){}
});
$.aa();
//->aa扩大到jQuery的属性上了:完美类库,供应一些经常使用的操纵要领,比方,数组去重...

$.fn.extend({
    bb:function(){}
});
$([select]).bb();
//-->bb扩大到jQuery的原型上了:扩大插件,比方,选项卡、轮播图、登录、考证...
2.jQuery的经常使用要领
  • 1)选择器

CSS选择器有哪些,jQuery选择器基本上就有哪些:#ID、.class、tagName、*、selector,selector、parent offspring、parent>child、:first、:last、:not、:contain、:eq、:gt、:lt、:text…

  • 2)中心要领

    • $([selector|node|function],[context])

    • $([html])

    • each(callback)

    • get()

    • index()

    • length

    • context

    • selector

    • noConflict()

    • extend()

  • 3)属性要领

    • attr():设置或猎取自定义属性值,猎取的值是字符串范例的

    • removeAttr()

    • prop():操纵的是元素的内置属性

    • addClass()

    • removeClass()

    • hasClass()

    • toggleClass()

    • html():猎取或设置元素的innerHTML

    • text():猎取或设置元素的innerText

    • val():猎取或设置元素的value值

  • 4)CSS要领

    • css()

    • offset():当前元素间隔body的偏移:{top:xxx,left:xxx}

    • position():当前元素间隔父级已定位参照物的偏移

    • scrollTop() / scrollLeft():猎取或许设置转动值

    • height() / width():设置或猎取元素的宽高

    • innerWidth() / innerHeight():猎取元素的clientHeight/clientWidth

    • outerWidth() / outerHeight():猎取元素的offsetHeight/offsetWidth

  • 5)DOM操纵要领

    • append()

    • appendTo()

    • prepend()

    • prependTo()

    • insertBefore() / insertAfter()

    • clone()

    • remove()

  • 6)挑选要领

    • eq()

    • filter():同级挑选

    • children():子级挑选

    • find():子女挑选

    • first() / last()

    • not()

    • slice()

    • next() / prev()

    • nextAll() / prevAll()

    • sibings()

    • add()

    • contents()

  • 7)动画要领

    • animate()

    • stop()

    • finish()

    • show() / hide() / toggle()

    • fadeIn() / fadeOut() / fadeToggle()

    • sliceDown() / sliceUp() / scliceToggle()

    • delay()

  • 8)事宜要领

    • on() / off():处理jQuery事宜的统统需求,别的要领也是从这个要领里扩大的

    • bind() / unbind() / trigger()

    • one()

    • live() / delegate()

    • click()/hover()/mouseover()…

  • 9)东西要领

    • callbacks()

    • makeArray()

    • toArray()

    • parseJSON()

    • parseXML()

    • type()

    • isFunction()

    • trim()

    • param()

//只需当前页面的HTML构造加载完成,就会实行回调函数,而且在一个页面中能够实行屡次
$(document).ready(function(){
    //<javascript code>

});

$(function(){});  //这类体式格局和上面的体式格局一样,没有区分

    原文作者:折丹
    原文地址: https://segmentfault.com/a/1190000010063989
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞