JQuery 学习总结

1. jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(docment).ready(function(){

   // 开始写 jQuery 代码...

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素提示：

简洁写法（与以上写法效果相同）:

$(function(){

   // 开始写 jQuery 代码...

});

JavaScript 入口函数:

window.onload = function () {

    // 执行代码

}

Holdready（暂停加载）

$.holdReady(true)  //执行

 

2. jQuery 入口函数与 JavaScript 入口函数的区别：

 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

​

3. JQuery里面的方法

$.each(arr,function(index, value){

  //和原生JS不同，参数index在前

});

$.each(obj,function(index,value){

//可以遍历伪数组

}）

 

$.map(obj,function(value,index){

//可以遍历伪数组，

})

 

真数组转换为伪数组

[].push.apply(obj.arr)

伪数组转换为真数组

Var arr=[].slice.call(obj)

 

4. Map和each的区别

Each返回的默认值，遍历谁返回原值

Map返回默认值为空数组

Each不支持在回调函数对遍历数组进行处理

Map可以在回调函数通过return对遍历数组进行处理

 

5. jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

 

5.1. 元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

 

5.2. #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

 

5.3. class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

​

6. keypress,keydown,keyup的区别:

 

 1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;

 2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

 3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

二.两种常用用法举例

 

案例1:获取按键代码或字符的ASCII码

 

$(window).keydown( function(event){

   // 通过event.which可以拿到按键代码.  如果是keypress事件中,则拿到ASCII码.

} );

 

案例2:传递数据给事件处理函数

语法:

jQueryObject.keypress( [[ data ,]  handler ] );

 data: 通过event.data传递给事件处理函数的任意数据;

 handler: 指定的事件处理函数;

 

举例:

// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.

var validKeys = { start: 65, end: 90  };

$("#keys").keypress( validKeys, function(event){

    var keys = event.data;  //拿到validKeys对象.

    return event.which >= keys.start && event.which <= keys.end;

} );

 

 

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

$(selector).mouseover/mouseout   移入移出触发父元素事件

$(selector).mouseenter/mouseleave  移入移出不触发父元素事件

$(selector).hover(function(){}移入,   function(){}移出）

$(selector).fadeIn(speed,callback); 

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

$(selector).fadeTo(speed,opacity不透明度0~1,callback);

$(selector).animate({params}要执行的事件

{left:'250px'}右移250像素   CSS position 属性设置为 relative、fixed 或 absolute

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

 

7. jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

 

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

当 callback 函数加上括号时，函数立即执行，只会调用一次， 如果不加括号，元素显示或隐藏后调用函数，才会调用多次。

3.callback既可以是函数名，也可以是匿名函数；

 

 

jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

 

我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：

setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现 promises 约定了。

 

那么 jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。

 

看一个代码段：

 

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列，它的内部其实就是一组队列 Queue，所以队列和 Deferred 地位类似，是一个内部使用的基础设施。

 

当 slideUp 运行时，fadeIn 被放到 fx 队列中

当 slideUp 完成后，从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为，同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

 

jQuery 提供了 2 组队列操作的 API：

jQuery.queue/dequeue

jQuery.fn.queue/dequeue

但是不同与普通队列定义的是：

jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素，还会自动执行返回的队头元素

fn 是扩展在原型上的高级API是提供给实例使用的

.queue/.dequeue 其内部是调用的 .queue，.dequeue 静态的底层方法实现入列与出列

 

动画调度

对于 jQuery 的动画的设计我们要分 2 个层面理解：

每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制

动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

动画的源码：

 

animate: function(prop, speed, easing, callback) {
   doAnimation = function() {
      var anim = Animation(this, args, optall);
   };

   this.queue(optall.queue, doAnimation);
}

 

这个代码缩减了，但是我们上面提到的最重要的 2 点这里都涉及到了：通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。

 

jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，看看整个调用的流程是这样的：

 

通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面

在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行

开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案

此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate

执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）

队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行

所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

 

8. $(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

 

9. 获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

 

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

 

实例 1：

<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>

这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。

prop()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是 undefined。

 

10. 设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

Attr() 设置改变属性值

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

 

11.  添加新的 HTML 内容

append() - 在被选元素的结尾插入内容  添加无限元素

prepend() - 在被选元素的开头插入内容  添加无限元素

after() - 在被选元素之后插入内容  添加无限元素

before() - 在被选元素之前插入内容  添加无限元素

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

 

 

12. 删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素 被选元素不会删除

删除 class="italic" 的所有 <p> 元素：

实例

$("p").remove(".italic");

 

 

13. 替换

replaceWith（）

 

 

14. 复制

Clone（true深复制，复制元素和方法|flase浅复制只复制元素）

返回 CSS 属性

css("propertyname");返回第一个属性   获取到第二或第三个 p 的背景颜色呢，加入选择器 :nth-child()：

alert("p3背景颜色 = " + $("p:nth-child(4)").css("background-color"));

$("p").eq(N) // N 是索引号，从 0 开始

设置 CSS 属性

css("propertyname","value");

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

 

 

15. jQuery 尺寸方法

​

width()  宽度

height()

innerWidth()  宽度包括内边距

innerHeight()

outerWidth()  内边距加边框

outerHeight()

outerWidth(true)  内边距加边框加外边框

outerHeight(true)

设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}

 width() 获取为: 60

 innerWidth() 获取值为: 80

 outWidth() 获取值为: 100

 

16. JQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

 

 

17. JQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

 

 

18. siblings() 同胞元素

next()  下一个元素

nextAll()  加下来所有的元素

nextUntil()  到下一个指定元素之间的同胞元素

prev()     之前

prevAll()

prevUntil()

 

 

19. $(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL  异步加载所需元素时，选择元素和class（#，.）

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

 

 

20. 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get(URL,callback);

$.post(URL,data,callback);

function(data,status){

    alert("数据: " + data + "\n状态: " + status);

  }

 

 

21. jQuery first() 方法

first() 方法返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

实例

$(document).ready(function(){

  $("div p").first();

});

 

 

22. jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

实例

$(document).ready(function(){

  $("div p").last();

});

 

 

23. jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

实例

$(document).ready(function(){

  $("p").eq(1);

});

 

 

24. jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "url" 的所有 <p> 元素：

实例

$(document).ready(function(){

  $("p").filter(".url");

});

 

 

25. jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "url" 的所有 <p> 元素：

实例

$(document).ready(function(){

  $("p").not(".url");

});

$("p").filter(".url").css("background-color","yellow");

和

$("p.url").css("background-color","yellow");

效果一样。

链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

 

 

26. jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

实例

$.noConflict();

jQuery(document).ready(function(){

  jQuery("button").click(function(){

    jQuery("p").text("jQuery 仍然在工作!");

  });

});

 

 

27. JSONP实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
  
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
   


    $('#divCustomers').html(html);
});
</script>
</body>
</html>

 

DOMcontentload会在监听到DOM元素加载后执行

OnLoad还需要再加载完DOM之后加载其他资源

Document.readyState

 

 

28. 函数解绑    

 .off()默认取消所有绑定函数    参数为要解绑的函数

 

29.事件冒泡阻止

在子元素里面写return false 或者传入event时间，使用event.stopPropagation()

 

默认事件阻止   

event.paventDefault()

 

自动触发事件   

$().trigger()  触发事件冒泡 默认    .triggerHander不触发事件冒泡 默认

 

自定义事件：通过on绑定，通过trigger触发

 

命名空间   不同的开发对同一个元素绑定了同样的事件，通过on绑定，trigger触发 (click.za)

trigger触发 带名字空间的子元素 ，父元素带同样名字空间的事件触发，子元素不带名字空间，父元素所有同类型的事件被触发

 

委托事件 delegate 找一个入口函数被执行前就有的元素监听动态添加的某些元素的事件

在JQuery中通过核心元素找到的元素不止一个，Jquery会遍历所有找到的元素，给所有的元素添加事件

 

 

30. JQuery怎么写自己的框架

1. 使用闭包  防止不同框架之间的冲突
2. 使用windows 传参 方便后期压缩代码   提升查找效率
3. 让外界访问内部定义的局部变量  window,xxx=xxx
4. 使用undefined传参    IE9以下undefined定义变量会被修改  为保证 Undifine定义变量还是undifine
5. Function(window,undefined)（window）{  }

 

30.1 JQuery入口函数接受不同入参

1. 传 ‘’ null undefined NAN  0  false  返回空的JQuery对象
2. 传HTML片段   将创建好的DOM元素存储袋JQuery对象中返回
3. 传选择器   将找到的所有元素存储到JQuery中返回
4. 传数组   将数组中存储的元素一次存储到JQuery中返回（真伪数组都一样）
5. 传对象 将传入对象存储到JQuery
6. 传DOM元素 chaungruDOM元素存储到JQuery中返回
7. 传基本数据类型  基本数据类型存储到JQuery

 

 

 

30.2 JQuery拓展插件   (JS就是通过这个函数原理来写JQuery）

Extend



/*
Function njQuery(){}
njQuery.extend=function(ojb){
//Condole.log(this);
for(var key in key){
//njQuery[“isTest”]  = function () {function(){console.log(“twst”);}
This[key]=obj[key];
}
njQuery.extend({
 isTest:function(){
Console.log(“test”);
}
});




njQuery.isText();
njQuery.prototype.extend=function(obj){
Console.log(this);
}










JQuery.extend=JQuery.fn.extend(){

}
$.extend({hello:function(){}})
$.fn.extend({hello:function(){}})
$.fn.extend($.net,{hello:function(){}})



$.extend({},{a:1,b:2})
$.extend(false,
*/

 

 

 

 

 

这是很久以前学就jQuery的时候做的笔记，后面零零碎碎加了很多小点，如有侵权，请联系我删除或者加引用参考链接