jQuery学习笔记

GHOST_349178 发布于2019-08-20 17:47 / 763人阅读

摘要：提高业务编程能力中提供了很多的方法基本都兼容，我们可以使用这些方法快速开发项目中有的方法提供的思想可以让我们把项目实现得更优化提高基础以及一些高级编程思想分析源码，学习里面类库封装的思想和一些方法实现的原理有时间把中提供的常用方法都去实现一

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(){
    //

});

$(function(){});  //这种方式和上面的方式一样，没有区别

GPU云服务器云服务器 jquery学习笔记学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83863.html

JavaScript框架学习笔记（一）

摘要：基本的学习思路是跟着框架设计这本书，甚至可以说是这本书的读书笔记。也参考很多网上解读的博客和学习资料。当然，最重要的资料还是框架的源代码。后来由于开发者反对，新兴的框架都在命名空间上构建。 JavaScript框架学习笔记（一）我为什么要学习框架更深入的理解工具，以后用起来更顺手而且也能做一定的工具取舍，学习理解新工具也就更快，对提升js水平也很有帮助，框架有很多解决坑的经典思...

Shonim 2019-08-19 18:10 评论0 收藏0
jquery学习笔记一

摘要：学习笔记一学习慕课网基础课程笔记。本篇博客只作为学习记录用。后代选择器选择给定的祖先元素的所有后代原色，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。相邻兄弟选择器选择所有紧接在元素后的元素一般兄弟选择器匹配元素之后的所有兄弟元素。 jquery 学习笔记一学习慕课网jquery基础课程笔记。本篇博客只作为学习记录用。 jquery 对象与 DOM 对象一定要区分 jquer...

Anshiii 2019-08-23 16:48 评论0 收藏0
jQuery入门学习笔记1

摘要：首先明确是一个库，它的类型是函数，这一点可以通过查看。判断传入的参数是还是返回具体的方法函数可将所有的添加一个可将所有的变为全局声明，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有个方法增加类名，修改节点内容。首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

lakeside 2019-08-02 15:22 评论0 收藏0
jQuery入门学习笔记1

摘要：首先明确是一个库，它的类型是函数，这一点可以通过查看。判断传入的参数是还是返回具体的方法函数可将所有的添加一个可将所有的变为全局声明，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有个方法增加类名，修改节点内容。首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

davidac 2019-08-23 18:15 评论0 收藏0
JavaScript MVC 学习笔记（五）事件操作的拓展

摘要：事件类型布尔值，表示事件是否通过以冒泡形式触发。表示键盘事件的属性布尔值，表示当前按下的键是否表示一个字符。表示当前按键的值仅对事件有效。，事件发生时相对于屏幕的坐标。事件对象 event 对象还包含很多有用的属性。W3C 范中包含的大部分属性都列在下面，更多信息参照完整的标准规范。事件类型： bubbles ：布尔值，表示事件是否通过DOM 以冒泡形式触发。事件发生时...

Anshiii 2019-08-22 10:56 评论0 收藏0