jQuery（一）基础学习

c> Note：This article is my study note, without copyright，most of the content comes from jQuery and runoob，if there is any infringement, please contact E-mail:YAMA

可在浏览器console使用$.fn.jquery查看jQuery版本

jQuery 捕获

DOM = Document Object Model（文档对象模型）
DOM独立于平台和语言的界面，允许程序和脚本动态操控Document

jQuery 设置

• text()设置或返回所选元素的文本内容_{(若你添加了字符串参数则为设置，比如text("kkk"))}。详见text()
• html()设置或返回所选元素的内容(该标签内的HTML内容)，同text()一样当你设置了字符串参数即为设置。详见html()
• val()返回input标签的字段值，或者设置字段值，同上。用于返回时返回第一个匹配元素的值，用于设置时设置所有匹配元素的值。详见val()
• attr()返回所选元素的属性值，若没有该属性则返回undefined。它既可以做接收器也可以做设置器详见attr()
  作为geter时$("iframe").attr("src");，作为setter时可以设置多个或单个属性值

$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});

• prop()该方法用于设置或返回被选元素的属性和值。详见prp()

此处需注意attr()同prop()同样可以返回属性值，但是二者的返回结果在某些时候可能有些差别。详见Link1以及详见Link2。
在返回元素的固有属性的属性值时二者返回的结果相同，但当返回不存在的属性时prop()会返回空字符串，attr()会返回undefined。
在处理元素固有属性时，比如a标签的href属性时建议使用prop方法，在处理自定义的属性时建议使用attr方法。
同时注意对具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。详见Link3

jQuery 添加元素

• append()向指定元素末尾添加指定内容，同样语法的还有prepend()：向指定元素的开头插入指定内容。同时这两个方法可以通过参数接受无限数量的参数还可以通过这两个方法添加若干新元素(_{参数也可以是list})，详见Link,注意after()以及before()也有类似功能，且语法类似。

append()、prepend()和after()、before()完全一样吗？那么它们之间的区别是什么呢？
经我测验，区别在于前面两个是在指定元素内部嵌入指定内容，而后面两个是在指定元素外部追加指定内容。

• appendTo()以及prependTo()分别在被选元素的末尾或开头插入指定内容，该语句语法与上述语法略有不同。详见appendTo()、prependTo()

jQuery 删除元素

• $("#btn5").remove();移除元素
• $("button").remove("#btn5");也可在()中添加参数进行过滤
• $("#btn5").empty();清空元素（删除被选元素的子元素）
• $("#btn6").addClass("lll");给指定元素添加类，可选定多个元素
• $("#btn6").removeClass("lll");指定元素移除类
• $("#111").toggleClass("lll");在添加类和删除类之间进行切换，也有后置参数true与false指定添加或删除(true表添加)

jQuery css()方法

• $("div:nth-child(2)").css("width")可获得选中的第二个div的css属性值，不难理解css()方法可以返回选中元素的css属性值，
  还可以设置属性值,$("div").css("width","20px")详见Link
  设置多个属性值$("div").css({"height":"20px","width":"20px"});,注意这里内容必须用{}括起来

注：此处$(":nth-child(1)").css("width")选择器默认以 body 作为父标签。
除此之外还有$("div").eq(0).css("width"),使用eq()方法更加方便索引，eq(0)即表示第一个div元素

jQuery 尺寸

在以前的笔记中也讲过关于关于document的尺寸以及浏览器显示区的尺寸等知识，但jQuery的方法或许更适合于返回指定元素的尺寸。详见Link

不过需要注意：在设置box-sizing为border-box过后，返回的结果可能和我们想象的不一样。为什么？因为此时返回的值默认减去了border和padding的值。

jQuery遍历——父元素

如图，在控制台分别使用了三种遍历方法，

• $("i").parent()选中上一级父元素
• $("i").parents()选中所有父元素
• $("i").parents("sub")对选中的所有父元素再次进行筛选
• $("i").parentsUntil("document")选中在document之下的i的所有父元素

jQuery遍历——子元素

• $("div").children();返回div的所有直接子元素，当然也可以进行筛选，比如$("sub").children("i");
• $("sub").find("*")选中sub所有子元素，但是必须要加参数，也可以进行筛选

jQuery同级遍历

• $("i").siblings("p")返回同级的p元素，若无参数默认全选同级元素
• $("p").next()返回每一个p元素的下一个同级元素（只返回一个）
• $("p").nextAll()返回每一个p元素的所有同级元素
• $("p").nextUntil("span")返回p的所有在span元素之前的子元素（这里的span默认是p的同级元素,如果不是nextUntil()也不会返回不是p的元素的子元素）
• prev()、prevAll()、prevUntil()方法同前面的类似，但是方向相反，是在同级元素中向前遍历。

jQuery遍历-过滤

• $("i").first()返回选中元素的第一个
• $("i").last()返回选中元素的最后一个
• $("i").eq(0)把选中的元素看作数组，利用索引号来选择，类似于数组
• $("i").filter(".pp")filter()允许对选中的元素进行过滤，比如选中lei为pp的元素
• $("i").not(".pp")对比filter()理解，刚好相反

附加：

• $("i").not(":eq(1)")eq()和not()可以配合使用实现反选效果（注意冒号）
• $("i.pp")和$("i").filter(".pp")效果大致是一样的

jQuery语法

jQuery语法通过选取html元素，并对其选中的元素执行某些操作
基础语法：$(selector).action()

• $定义jQuery
• 选择符(selector)查找和查询html元素
• action()执行对元素的操作
  【例】隐藏p元素

$(document.getElementsByTagName("p")[0]).hide();
$('p').hide();
$("#ppp").hide();
$("p.ppp").hide();

文档就绪事件

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

jQuery 函数位于一个 document ready 函数中：这是为了防止在DOM加载完之前就运行jQ代码，以保证正确性。
简洁写法 与上述写法效果一样

$(function(){
   // 开始写 jQuery 代码...
});

Tips
注意到JavaScript也有一个onload入口函数

window.onload = function(){
    // 执行代码
}

	window.onload	$(document).ready
执行时机	等网页全部加载完毕（包括外部图片等等），然后在执行包裹代码	等DOM结构加载完毕即可
执行次数	只执行一次，如果有第二次就会覆盖第一次	可执行多次，不会覆盖上一次
简写格式	无	$(function(){//执行代码});

jQuery选择器

基于已存在的CSS选择器，可使用id、类、元素名、类型、属性、属性值“查找” （或选择）html元素，除此之外它有一些自定义的选择器。
【示例】

$("p.ppp").hide();//隐藏所有class=ppp的p元素
$(".ppp").hide();//隐藏class=ppp的所有元素
$("#ppp").hide();//id选择器
$('p').hide();元素选择器

语法	含义
$("*")	选取所有元素
$(this)	选取当前元素
$("p.ppp")	选取类名为ppp的p元素
$(".ppp")	选取所有类名为ppp的元素
$("p:first")	选取第一个p元素
$(document.getElementsByTagName("p")[0]	选取第一个p元素
$("ul li:first")	选取第一个ul元素的第一个li元素
$("ul li:first-child")	选取每个ul元素的第一个li元素
$("[class]")	选取带有某个class的所有元素
$("[class='eee']")	选取class='eee’的所有元素
$("div[class='eee']")	选取所有class='eee’的div元素
$(":button")	选取所有 type=“button” 的input元素和button元素
$("tr:even")	选择每个相隔的（偶数）tr元素
$("tr:odd")	选择每个相隔的（奇数）tr元素

Jquery事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

详见：菜鸟教程

jQuery效果——隐藏和显示

详见：菜鸟教程

jQuery效果——淡入淡出

$("#div1").fadeIn("fast");//淡入
$("#div1").fadeOut("fast");//淡出
$("#div1").fadeToggle("fast");//淡入淡出
$("#div1").fadeTo("fast",0.1);//颜色变淡

不要忘了这几个函数还有callback参数

jQuery效果——滑动

$("#flip").click(function(){
    $("#panel").slideDown("slow");//向下滑出
    $("#panel").slideUp(2000);//向上滑入
});
$("div.ooo").click(function(){
    $("#panel").slideToggle(1000);//滑出滑入
});

不要忘了这几个函数还有callback参数

jQuery效果——动画

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed 或 absolute。

jQuery animate()
在设置position之后可使用animate开始动画
【例】将divleft设置为250px，则div会向右边移动250px
$("#div1").animate({left:'200px'});

animate()使用相对值
可以在属性值的前面加上+=或者-=以表示相对于当前的值

animate()可操作多个属性
几乎可以操作所有的css属性，不过当使用animate()时，类似于background-color这样的属性必须写成backgroundColor才行

$("#div1").animate({
   left:'+=50px',
   opacity : '0.8',
   height:'150px',
   width:'150px'
});

animate()使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”，类似于fadeToggle()、以及slideToggle()

animate()使用队列功能
把多组animate()写在一起，会按顺序执行

    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");

jQuery停止动画

格式：$(selector).stop(stopAll,goToEnd);

stopAll参数可选，意为是否清除后续的animate Queue，默认为false,意思是stop之后仍然允许后面的动画animate Queue继续执行。
goToEnd参数默认为false，意为是否马上执行完剩下的效果。

    $("#ppp").click(function () {
        $(this).animate({
            top: '+=100px',
            left: '+=100px',
        }, 3000);
        $("#btn").click(function () {
            $("#ppp").stop();
        });
    });

jQuery Callback方法

很多jQuery函数都会设计到动画问题，这些函数也许会将 speed 或 duration 作为可选参数。当然会有很多函数涉及Callback函数，如下

    $(this).animate({
        top: '+=100px',
        left: '+=100px',
    }, 3000, function () {
        alert('i move');
    });

默认回调函数会在前面的动画完全执行后执行。
在我自己测试的过程中注意到，如果有多个动画队列，在前面的队列中使用了callback函数，比如在其中alert('i move');，那么后面的animete序列会继续执行并不会等待你点击确定，所以当你迟钝点击过后会感觉动画不连贯，仔细想一想也对，是这么个道理。
值得注意的一点是

菜鸟教程上有一篇笔记他说到：被立即停止的动画不会触发回调，被立即完成的动画会触发回调。，笔记作者很仔细，这里的停止stop(true,false)指的是默认参数,此时并不会调用回调函数，但若将goToEnd参数设置为true代表立即执行当前队列剩下的效果，这时候会调用回调函数！

jQuery链（Chaining）

通过jQuery链我们可以把多个方法链接在一起（针对同一元素的方法），而不需要计算机每次执行一条分立的jQuery语句都要查找一次。难免代码会变得很长，不过可以按照希望的格式来写，比如包含换行和缩进等。
关于这个在JavaScript中如何实现的，请见文章

$("#www").animate({ top: '300px' }, 3000).css("background-image", "linear-gradient(300deg, rgb(107, 17, 47),rgb(98, 71, 141))").animate({ left: '300px' }, 3000);

Tips:

• 色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从jquery.com下载颜色动画插件。
• jQuery中有一个Queue的接口未单独成章，因为其专门为动画服务

以下为摘抄，源于 菜鸟教程

jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施
Queue队列
队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。
为什么要引入队列?

var a = 1;
setTimeout(function(){
　　a=2;
},0)
alert(a);

我们一直习惯于线性的编写代码逻辑，但是在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 取出第一个队列继续执行了，如此循环
以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

问题

我尝试过在jQuery的动画队列里写入backgroundImage: 'linear-gradient(to right, blue , pink)',但并不能实现，为何?

jQuery对象

标题所指为jQuery包装过的DOM对象即为jQuery对象。
在《锋利的jQuery》一书中说到在jQuery对象中无法使用DOM对象的任何方法，同样在DOM对象中也无法使用jQuery对象的方法。经我测验在DOM对象中使用jQuery方法会报错，反之在jQuery对象中使用DOM方法会输出undefined。

强调：使用#id和getElementById(“id”)所取的对象并不等价，
jQuery对象实际上是有DOM对象包装而来,他们不等价。

两种对象之间的相互转换

jQuery转DOM

• $("#ppp")[0]//因为jQuery对象为一个类数组对象
• $("#ppp").get(0)//get()为jQuery提供的方法

DOM转jQuery

• $(document.getElementById("ppp"))//此时console输出提示即为jQuery对象了，同时在次数也可以验证上面所说jQuery对象为一个类数组对象

jQuery AJAX

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 可扩展标记语言），是指一种创建交互式网页应用的网页开发技术。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。_{源于百度百科}

• load()从服务器加载数据，并把数据返回被选元素中
  语法：$(selector).load(URL,data,callback);
  其中 data 参数规定与请求一同发送的查询字符串键/值对集合。
• get()从指定资源请求数据
• post()向指定资源提交要处理的数据

get和post都可以用于从服务器获取数据

each()用于遍历数组：
$.each([52, 97], function(index, value) {alert(index + ': ' + value);
在div中加载文件:

<div class="include" file="test1毛玻璃.html"></div>
<script>
    $(".include").each(function () {
        if (!!$(this).attr("file")) {
            var $includeObj = $(this);
            $(this).load($(this).attr("file"), function (html) {
                $includeObj.after(html).remove();
            })
        }
    });
</script>