摘要：又拍云提供同样版本也不同步了七牛云提供同样版本稳定在谷歌因为某些缘故，无法使用总结唯一一个能用的只有了。查询与查询结果返回值为一个对象，对象为类数组。

jquery
jquery为一种库，属于最基础的一个库，伴随着h5的到来，很多jquery的规则直接融入到了规则本身了，直接使用原生的js也能达到相同的目的。虽然如此，不过依旧要继续。

官网：https://jquery.com/
github: https://github.com/jquery/jquery
blog：https://blog.jquery.com/
学习中心：https://learn.jquery.com/ 推荐使用学习中心学习jquery
文档：https://api.jquery.com/ 推荐使用文档进行相关的查询
封装jquery插件 http://plugins.jquery.com/ 官网推荐使用npm包的方式，带上jquery-plugin
相关插件：npm包 https://www.npmjs.com/search?...:jquery-plugin jquery 官方插件 http://plugins.jquery.com/ 不过目前处于不更新的状态，不推荐使用内部的插件，因为很可能没有作者维护了。并且已经处于自读的方式，不推荐使用，推荐使用npm的方式，使用jquery的相关插件
jquery官方推荐图书 https://www.packtpub.com/web-...
https://www.manning.com/books...
https://www.syncfusion.com/eb...
一本都看不懂。。。
js基金会 https://js.foundation/ 是滴，js也拥有基金会了，和linux一样
目前js基金会下属项目 https://js.foundation/communi...
好啦，有点小乱。大概也就这些了。
其中jquery的最出色的地方在于对元素的选择。

jquery mobile 属于移动端的js库

</>复制代码 
ps 移动端的兼容问题，没有客户端的兼容问题的严重

官网 https://jquerymobile.com/
文档 https://api.jquerymobile.com/

</>复制代码 
ps 该项目博客保留在2017年，提交截止在去年，测试状态不通过 https://travis-ci.org/jquery/...

╮(╯▽╰)╭
唉

打开 https://jquery.com/download/
在开发和调试的时候使用未压缩的文件，在上线的时候使用压缩的文件，节省空间。

</>复制代码 
npm install --save jquery 

上方将会保存在依赖项中
将会在

</>复制代码 
node_modules/jquery/dist/

中找到生产环境的版本和开发版本

</>复制代码 
bower一个类似于npm的包管理

</>复制代码 
bower install jquery

将会在

</>复制代码 
bower_components/jquery/dist/

中找到生产环节版本和开发版本

浏览器的兼容测试，在微软提供的在线测试进行测试
https://developer.microsoft.c...

以及chrome官方提供的https://developers.google.com...

</>复制代码 
谷歌web开发者 https://developers.google.com... 里面有很多新奇好玩的东东

由于是国内的缘故，境外的源无法使用，所以使用国内的缓存服务

https://www.bootcdn.cn/jquery/
这个使用比较多

貌似已经不同步了。

http://jscdn.upai.com/
同样版本也不同步了

http://www.staticfile.org/
同样版本稳定在2.0

因为某些缘故，无法使用
https://developers.google.com...

唯一一个能用的只有bootcdn了。无奈。
很无奈，不可控的服务，唉

jquery定义了一个全局函数，由于使用频繁定义了一个别名即

</>复制代码 
$

其中$和jQuery()为相同的。

</>复制代码 
如果在自己代码中使用$作为变量，为了避免冲突，通过调用
jQuery.noConflict()
释放$变量，让其指向原始值

其拥有两个名字的全局方法为jquery的核心查询方法。
即

</>复制代码 
var divs = $("div");

</>复制代码 
由于需要引入库，在本地写及其的不方便，如果学习直接在线书写 http://jsfiddle.net/ 即可 或者 https://codepen.io 即可 下面使用http://jsfiddle.net/

页面引入jquery

</>复制代码 
https://cdn.bootcss.com/jquery/3.3.1/jquery.js

书写获得全部div

</>复制代码 
var divs = $("div");

或者

</>复制代码 
var divs = jQuery("div")

其中

</>复制代码 
$ 和 jQuery 

等价
其中Jquery为工厂函数，将会返回一个新创建的对象。

找到所有拥有details类的p元素，将其高亮显示，

</>复制代码 
$("p.datails").css("background-color", "yellow")

在Jquery中为最终要的为Jquery()方法，即$

第一种

传递css选择器（字符串）给$()方法。通过这种方法调用，$()会返回当前文档中匹配该选择器的元素集。

第二种

传递一个Element，Document或Window对象给$()方法，$()将会将其封装成对象并返回。即，可以通过这种方式完成通过Jquery方法操作元素，而不使用原生DOM的方法。
即

</>复制代码 
$(document) 或 $(this)

使用这种方法可以完成对节点的操作

第三种

传递字符串文本给$()方法，jQuery将会根据传入的文本创建好HTML元素，然后将其封装为jQuery对象返回。

</>复制代码 
ps 在这种情况下，不能使用纯文本，因为jQuery会将纯文本当成选择器解析。必须为html标签，还需有一个尖角括号

通过这种方式调用，将会接受第二可选参数，传递Document对象指定与所创建元素相关联的文档。
即

</>复制代码 
var img = $("", 
        {
            src:url,    // 创建一个属性,该属性为src
            css: { borderWidth:5 },    // 创建css样式
            click: handleClick    // 创建事件处理程序
        }
    );

将会返回一个jquery对象

第四种

传入一个函数给$()方法。此时当文档加载完毕并且DOM可操作时，传入的函数将会被调用。
即

</>复制代码 
jQuery(
    () => {}
)

上方当文档加载完毕的时候将会执行一个匿名函数

jQuery函数可以创建jQuery对象，用来注册DOM就绪时需要调用的处理程序。即全局jQuery对象

jQuery对象有jQuery函数返回的对象，一个jQuery对象表示一组文档元素，即jQuery集，包装集，jQuery结果

传递css选择器给jQuery函数时，将会返回jQuery对象表示匹配该选择器的文档元素集。

hQuery函数为定义在jQuery命名空间中的函数，或者静态方法

jQuery方法是由jQuery函数返回的jQuery对象的方法。

$()返回值为一个jQuery对象，jQuery对象为类数组。
即

</>复制代码 
$("body").length;   // 将会返回文档中该元素的数量，从1开始
$("body")[0];   // 等同于 document.body

</>复制代码 
同样的，size替代length属性，get()替代方括号索引，用toArray方法将jQuery对象转为真实数组

</>复制代码 
var bodyscript = $("script", document.body);
bodyscript.selector;    // 创建对象时的选择器字符串,即script
bodyscript.context;    // 上下文对象 即body、
bodyscript.jquery; // 版本号

each()类似于原生的for循环

</>复制代码 
// 下方将会获取所有的dvi元素，并将其打印出来
$("div").each(
        (idx) => {
            console.log(this);
        }
    );

类似于原生的forEach()方法，直接使用this关键字指代其遍历到的对象。

</>复制代码 
ps map()方法和原生的map一致。（由于时间问题，规定吸取了jquery的一部分），都为将对象的属性每次传入回调函数

一个栗子

</>复制代码 
$("div").each(() => {    // 选择div元素
    if ($(this).is(":hidden")) return;    // 如果是隐藏元素，直接跳过
})

jQuery上最简单，最常见的操作为获取(get),或者设置(set)的HTML属性。
jQuery将会使用同一个方法既当getter又做setter，而不是定义一对方法，如果传入一个新值给方法，则它将设置此值。
用做setter时，这些方法会给jquery对象中的每个元素设置值。然后返回对象，使用链式调用

attr()方法为jQuery中用于HTML属性的getter/setter
一个栗子

</>复制代码 
$("form").attr("action");    // 将会获取到form元素的action属性
$("#icon").attr("src", "icon.gif");    // 设置src属性
$("#banner").attr({src:"bannner.gif", alt:"Advertisement", width:720, height:64});    // 设置属性
$("a").attr("target", "_blank");    // 将所有的链接在新窗口打开
$("a").attr("target", () => { // 进行选择，使得站内链接在本窗口打开，让站外的链接在新窗口打开
    if (this.host = location.host) return "_self";
    else return "_blank"; 
});

使用的是css()方法。设置样式的时候，css是直接添加到style属性中

</>复制代码 
$("h1").css("font-weight");    // 获取第一个h1的字体宽度
$("h1").css("fontWeight");    // 同理
$("h1").css("font");    // 这个错误，不能使用混合样式
$("h1").css("font-variant", "smallcaps");    // 设置css
$("div.note").css("border", "solid black 2px");    //选择clas为note的元素，然后设置css
$("h1").css({
    background:"white",    // 一次性的设置多个属性,由于是对象，所以这里使用逗号
    textColor:"white",    
    fontVariant:"small-caps"
});
// 使用函数
$("h1").css("fongt-size", (i, curval) => { return Math.round(1.25*parseInt(curval)); });    // 第一个参数为计数，第二个参数为其属性值,parseInt 的作用为获取其数字,其中jquery会自动加上单位

</>复制代码 
// 添加css类
$("h1").addClass("hilite");    // 给所有的h1元素添加一个类
$("h1+p").addClass("hilite first");    //给p的父元素为h1的元素添加两个类
$("h1").addClass((n) => { return "section" + n; });    // 其中n表示当前遍历到的索引值
// 删除css类
$("p").removeClass("hilite");    // 删除一个类
$("p").removeClass("hilite first");    // 删除多个类
$("p").removeClass((n) => { return "section" + n });    // 通过函数删除
$("p").removeClass();    //删除所有的自定义类
// 切换css类,即第一次执行显示，第二次执行消失
$("tr:odd").toggleClass("oddrow");    // 匹配列表中的奇数序列的元素，然后进行添加
$("h1").toggleClass("big bold");    //切换为这个类
$("h1").toggleClass((n) => { return "big bold h1-" + n });    //使用函数
$("h1").toggleClass("hilite", true);    // 添加
$("h1").toggleClass("hilite", false);    // 移出
// 检测css类
$("p").hasClass("first");    // 确定是否有该类
$("#lead").is(".first");    // 同理
$("#lead").is(".first.hilite");    // 是否有两个类

is为判断，当是的时候选择true，否的时候选择false

</>复制代码 
$("#surname").val();    // 获取surname的文本域的值
$("#usstate").val();    // 获取值
$("select#extras").val();    // 选择select 并且id为extras的元素
$("input:radio[name=ship]:checked").val();    // 获取选中的单选按钮的值
$("#email").val("设置域");    // 给文本域进行设置
$("input:checkbox").val(["opt1", "opt2"]);    // 选中带有这些值的框
$("input:text").val(() => { return this.defaultValue; });    // 将其设置为默认值

</>复制代码 
var title = $("head title").text();    // 获取类为head title的元素内容，类似于原生的textContent
var headline = $("h1").html();    // 获取第一个h1元素的html 类似于原生的innerHTML
$("h1").text((n, current) => { return "&" + (n+1) + ":" + current });    // 添加章节，使用函数

</>复制代码 
var elt = $("#sprite");    // 选择元素
var position = elt.offset();    // 获取当前位置,相对于文档，不是相对于视窗
position.top += 100;    // 改变y的值
elt.offset(position);    // 设置新位置
// 将所有的
元素向右移动，移动的距离取决于它们在文档中的位置
$("h1").offset((index, curpos) => { return { left: curpos.left + 25*index, top:curpos.top }; });    // 进行偏移
// 获取高度
var body = $("body");    
var contentWidth = body.width();    // 获取w3c盒子的高度
var paddingWidth = body.outerWidth();    // 获取ie盒子的高度
var borderWidth = body.outerWidth(true);    // 加上margin的宽度
var padding = paddingWidth - contentWidth;    // 左padding和右padding的值
var borders = borderWidth - paddingWidth;    // 左border和右border的和
var margins = marginWidth - borderWidth;    // 左margin和右margin的和
// 根据页面数 n 来滚动窗口。n 可以为分数 或 负数
function page(n) {
    var w = $(window);    // 将window封装为jquery对象
    var pagesize = w.height();    // 得到页面的大小（文档的大小）
    var current = w.scrollTop();    // 得到当前滚动条的位置
    w.scrollTop(current + n*pagesize);    // 设置新的滚动条的位置
}

</>复制代码 
$("div").data("x", 1);    // 此不在DOM上显示，会直接作为属性附上
$("div").removeData("x");    // 移出数据
var x = $("div").data("x");    // 获取一些数据

下面是正着

</>复制代码 
$("h1").append("
");    // 将br作为h1的子节点，在尾部
$("h1").prepend("");    // 在起始位置添加标签 ，依旧为子节点
$("h1").before("
");    // 在每个h1的前面添加水平线
$("h1").after("
");    // 在每个h1的后面添加标签
$("h1").replaceWith("
");    // 替换h1元素为br元素
$("h2").each( () => {    // 进行遍历
        var h2 = $(this);    // 获取当前遍历到的元素
        h2.replaceWidth("
" + h2.html() + "
");    // 将目标元素的内容进行替换
    });

</>复制代码 
$("
").appendTo("#log");    // 将br添加到#log中，到末尾
$(document.createTextNode("&")).prependTo("h1");    // 给所有的h1添加到起始处
$("
").insertAfter("h1");    // 在所有的h1后面插入水平线
$("
").replaceAll("hr");    // 将hr替换为br

</>复制代码 
// 给文档结尾添加一个带有linklist id 的新div
$(document.body).append("
List of Links
");
// 将文档中的所有链接复制并插入该新div中
$("a").clone().appendTo("#linklist");    // clone不会复制事件处理程序
// 在每一个链接后插入
元素，使其能独立显示
$("#linklist > a").after("
");

</>复制代码 
// 用元素包装所有的
元素
$("h1").wrap(document.createElement("i"));    // 产生
// 包装所有
元素的内容，使用字符串参数更简单
$("h1").wrapInner("");    // 产生 
// 将第一个段落包装在一个锚点和div里
$("body > p:first").wrap("
");
// 将所有的其他段落包装在另一个div里
$("body > p:not(:first)").warpAll("
")