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(){});  //这种方式和上面的方式一样，没有区别