jQuery 基本使用

jQuery就是一个封装了很多原生代码的js库，其主要作用就是能够使得代码更加简洁，减少开发成本

配置

直接去复制jQuery库的链接导入即可，可以搜索cdn，里面的国内镜像资源速度会快些，网址：
https://www.bootcdn.cn/

导入

1.把下载好的jquery导入
2.导入网上镜像，举例：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
往网页添加jQuery文件方法

往控制台依次输入这三句

var script = document.createElement('script');
script.src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.js"
document.getElementsByTagName('head')[0].appendChild(script);

更多参考：https://www.cnblogs.com/miaoying/p/8337613.html

调用js脚本

参考：https://www.cnblogs.com/WangHaiMing/p/9553678.html

基本语法

jQuery里基本上都是基于一个语法：

jQuery('选择器').功能方法1().功能方法2()....
/
$('选择器').功能方法1().功能方法2()....

两种是一样的，也就是通过选择器定位后执行某些功能方法，并且可以迭代执行，从这里可以看出jQuery是基于典型的链式调用语法

选择器

原来如果要设置一个标签的属性可能是这样：

document.getElementById('a').style.background='blue';  //设置id为a的标签背景为蓝色

但使用了jQuery后，就可以这样实现：

jQuery('#a').css('background', 'blue');

前面的jQuery也可以替换成$，即可以再改为：

$('#a').css('background', 'blue');

即通过封装好了的jQuery类定位，然后设置属性等，对于定位方式参考css选择器（#代表id，.代表类，没有符号代表标签等），示例：

$('div').css('color', 'blue');
$('.b').css('color', 'green');
$('input[type="text"]').css('background', 'grey');  // 选择type="text"的input标签
$('div:first').css('background', 'grey');  // 选择第一个div标签
$('div *').css('diabled', 'disabled');  // 选择div下所有标签
not()选择器

即没有某些东西的选择器，比如没有某个类、属性等，举例：

$('div:not(.aaa)').css('color', 'blue');  // 选择div下没有aaa类的标签
同级/子级/父级定位

对于同级的标签或者当前的结果集里过滤得到的标签，可以用filter()，比如：

$('div').filter('.a').css('background', 'grey');  //所有div标签里class为a的标签

对于子级和子级以下的标签定位，则可以通过find()来寻找，比如：

<div id='a'>AAA
    <div class="a">BBB</div>    <!--定位这个标签-->
</div>
...
$('div').find('.a').css('background', 'grey');  //寻找所有的div下的子标签中class为a的

父级标签定位则使用parent()来定位，如果是要定位父级及以上（父级的父级、父级的父级的父级等）所有标签，则用parents()

this

当前的标签，举例：

$('.xxx').hover(function(){  //悬浮时输出当前标签id
    console.log($(this).attr("id"));
});
:visible/:hidden选择器

定位所有可视/不可视的标签，举例：

x = $(':visible').css('background', 'red');  //所有可视标签背景变红

以下情况为不可视：

display:none
type="hidden" 的表单元素
width/height=0
隐藏的父元素（同时隐藏所有子元素）

同理：禁用和选中的选择器为：:disabled和:checked
更多选择器参考：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
更多遍历参考：
https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

设置属性

定位设置属性

前面写了设置单个属性的，如果要设置多个属性则可以通过字典的键值形式，举例：

$('div').css({
    'background': 'grey',
    color: 'blue'
});  //设置了2个属性

对于上面的代码可以看出键名加不加引号都可以，但是在不加引号的情况下，对于background-color这样的属性会报错，此时有两种办法能解决，一个是加引号，另一个则是用驼峰命名法，即改成backgroundColor

添加类属性

如果写好了一个CSS类样式，可以通过addClass()来添加该类，比如：

<style type="text/css">
    .divStyle {
        background-color: rgba(0, 0, 0, 0.1);
        color: blue;
    }
</style>
...
$('div').addClass('divStyle');  //添加divStyle类

如果要删除类则可以用removeClass()实现，还可以通过hasClass()来判断是否有某个类，返回bool值，举例：

$('div').hasClass('b');  //判断div标签里有没有class为b的标签

常用方法

要注意的是这里的方法都是针对jQuery对象的方法，对于DOM对象则无法使用
两者之间区别参考：https://www.cnblogs.com/zhangyinhua/p/9487096.html
两者之间的转换参考：https://blog.csdn.net/qq_37774171/article/details/86674676

eq()

获取选择器得到所有元素的第几个元素，返回的是个jQuery对象，因此后面能继续使用jQuery的方法，举例：

$('div').eq(2).css('background', 'grey')  //匹配到的第三个div标签背景变灰色
get()

和上面一样是获取第几个元素，但是返回的是dom对象，因此只能使用dom的操作属性和方法，举例：

$('div').get(2).style.background = 'grey'   //修改dom属性
$('div').get(2).css('background', 'grey')   //非jQuery对象，会报错
css()

前面已经有示例是设置属性，如果只有一个参数，则是获取属性值，举例：

x.css("color")
attr()

和css()用法几乎一样，只是css是针对样式属性进行获取和设置，而attr是针对于标签属性进行获取和设置，举例：

$('div').attr('id')  //获取标签id
$('a').attr('href', 'https://www.baidu.com')  //设置超链接
prop()

也是获取和设置属性，但是获取和设置的是标签自带的属性，比如<a>标签自带的有href、id、text等，对于非自带的自定义属性则无法修改；而attr则只能修改标签里写的属性，所以自定义属性也可以修改，两者对比：

$('a').prop('href', 'https://www.baidu.com')  //设置超链接，跟attr效果一样
$('a').attr('sadas', '111')  //设置自定义属性，prop中则会无法设置
$('a').prop('text', 'aaa')  //设置标签的文本内容，此时<a></a>会变成：<a>aaa</a>
$('a').attr('text', 'aaa')  //只是设置标签的属性，并不会改变文本的内容，此时<a></a>会变成：<a text="aaa"></a>
$('a').prop('text')  //获取标签的文本内容，此时<a>aaa</a>结果为：aaa

如果想要获取当前标签的html代码（不是当前标签里面的html代码）、标签名等，也可以用prop实现，举例：

$('a').prop("outerHTML");
// 获取的就是：<a>...</a>
// html获取的则是<a>标签里面的：...
$('a').prop("tagName")  // 结果就是：A（全大写）

要获取所有自带属性信息，可以通过下面语句实现：

console.dir(document.getElementById('a'))  //获取a标签的自带属性
text()

如果没有参数则是获取标签的所有文本内容，加了字符串参数则会将标签的文本修改成字符串内容，举例：

x = $('div').text()  //获取文本内容
x = $('div').text("new")  //修改文本内容为new
html()

和text()特别像，但是html获取和修改的是html代码，而text获取和修改的是转换后的文本，比如下面的代码：

<div id='a'>AAA
    <div class="a">BBB</div>
</div>

那么两种的结果分别是：

text:
"AAA
    BBB
BBB"

html:
"AAA
    <div class="a divStyle" style="opacity: 0.00024672;">BBB</div>
"
offset()

获取当前元素的绝对位置（相对于网页左上角的位置）

position()

获取元素相对于父元素的位置
注：
当对元素设置position: fixed;后，滑动滑轮可以发现offset()会发生改变（绝对位置发生了变化），而position()不变

width()/height()

获取窗口宽度/高度，对于$(window)获取的是可视区宽高，$(document)获取的是body宽高

prepend()/append()

在标签的开头/结尾插入内容，举例：

$('div').prepend('<div>first</div>')
before()/after()

和前面的一样是在标签中插入内容，但插入的不是在原来那个标签内部，而是和其同一级的上面/下面

empty()

把这个标签的内容清空，标签还在

height()/width()

标签的高/宽，但这是不包括内外边距的，如果希望包括的话，则可以使用：

innerHeight()  // 包括内边距
outerHeight()  // 包括外边距
remove()

删除标签

removeAttr()/removeProp()

删除属性

ready()

内容加载完后执行的方法，举例：

console.log(1);
$(document).ready(function(){
    console.log(2);
}
);
console.log(3);

结果：
1
3
2

可以看出ready()当中的内容会在其他内容都执行完成后才执行
注：
ready()方法中定义内容无法被onclick()等事件调用解决方法参考：
https://zhidao.baidu.com/question/431754822113839764.html

$(function(){})

直接执行的方法，并且可以不用取名，举例：

$(function(){
    alert('a');
})
index()

当前元素的索引位置，举例：

$('button').eq(1).index()  // 结果返回1

这个一般用于事件当中，比如点击事件，判断标签是第几个

not()

非当前元素，举例：

$('button').not($('button').eq(1)).index()  // 索引按钮当中的非第二个按钮，结果返回0

表单方法

val()

获取和设置value值，主要针对表单，举例：

$('input[type="submit"]').val()  //获取value
$('input[type="submit"]').val('bbb')  //设置value
submit()

提交表单，针对form标签使用，举例：

$('form').submit()

注：
表单默认提交后会刷新整个页面，因此如果要使用类似ajax那样发送表单请求但不刷新页面的话，则需要设置preventDefault()方法，举例：

$('#searchForm').submit(function(e){
    e.preventDefault();
    //可以自定义提交表单，并且不会刷新页面
});
checkbox选中

参考：https://www.cnblogs.com/zqifa/p/jquery-checkbox-1.html

字符串处理方法

$.trim()

去除字符串两边的空格和空行，类似python的strip()，举例：

$.trim("  1  2  ")
// 结果："1  2"
更多字符串处理参考：

http://www.bluestep.cc/jsjquery%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%88%AA%E5%8F%96%E5%88%86%E5%89%B2%E5%8C%B9%E9%85%8D%E7%AD%89%E5%A4%84%E7%90%86%E6%B1%87%E6%80%BB/

动画效果

hide()/show()

隐藏/显示内容，举例：

$('div').hide()
toggle()

算是hide()和show()的结合，当隐藏时则展示，显示时则隐藏，举例：

setInterval(function(){
    $('a').toggle();
}, 1000);  //1秒显示1秒隐藏

可以理解成：

if ($('a').is(':visible')){  //如果原来显示的话则隐藏
    x.hide();
}else{
    x.show();
}
fadeOut()/fadeIn()

逐渐消失/显示，可以输入整个过程所花费的毫秒

slideUp()/slideDown()

从下往上消失/从上往下显示

animate()

自定义动画效果，举例：

$('button').click(function(){
$('div').animate({
    top: 300,
    fontSize: 100,
    left: 400
},1000);
});

事件

is()

判断选择器的内容是否符合，返回bool类型，举例：

$('#a').is('#a')  //是否有id=a的标签
$('#a').is('div')  //是否标签为div
$('option').is(":checked")  // 是否被选中
on()

监听事件并绑定处理函数，举例：

$('button').on('click', function(){  //监听click事件，绑定函数
    $('#a').toggle();
});

上面的点击事件还可以用click()来实现，则代码变成：

$('button').click(function(){  //就这里变化，建议还是用on比较好
    $('#a').toggle();
});

如果想要绑定多个事件，还可以传入键值对对象，举例：

$('div').on({  // 同时绑定click和mouseenter事件
    click: function() { console.log(1);},
    mouseenter: function() { console.log(2);
    }
});
on下常用事件
click           单击
dblclick        双击
submit          表单提交
mouseenter      鼠标移入
mouseleave      鼠标移出
mousewheel      鼠标滚轮事件
contextmenu     鼠标右键（想右键不跳出上下文菜单可以：$(document).on("contextmenu", function () {return false;});）
keydown         键盘按下
keyup           键盘松开
scroll          屏幕滚动（$(document).on('scroll', function() {})）
resize          窗口大小改动（$(window).on('resize', function() {})）
input           表单值发生变化（ie9下不支持）
propertychange  表单值发生变化（兼容ie9）

注：
对于通过js动态生成的标签，用原来的$(xxx).on('click', function(){})或者$(xxx).click(function(){})这类的方法是无法调用的，如果想给动态生成的加上事件，那么可以通过：$(document).on('click', xxx, function(){})来调用
注2：
on()方法是bind()方法的替代品，像click()/mouseenter()等写法是旧版的写法，在新版的jQuery里建议使用on()方法，然后传入那些旧版的方法名即可
注3：
如果想绑定多个事件，可以用空格隔开，比如要绑定表单值变化且兼容ie9，则可以：

$(xxx).on('input propertychange', function() { ... });
off()

解除事件，举例：

$("div").off("click");  // 解除click事件

注：
如果是对于on方法绑定的事件，需要方法名和选择器一模一样才能解绑，举例：

$(document).on('click', '.a, .b', function(){...})
// 绑定事件
$(document).off('click', '.a, .b');
// 解绑事件，可以看到选择器必须也一一匹配

更多解绑参考：https://www.jianshu.com/p/4145703a293e

focus()/blur()

聚焦/不聚焦内容，如果添加函数在里面，则为聚焦/不聚焦时处理的事件，例如点击聚焦后value清空：

if ($('input[type="text"]').focus(function() {
        $('input[type="text"]').val("");
    }));
select()

选中内容，例如鼠标移入时全选：

if ($('input[type="text"]').on('mouseenter', function() {
        $('input[type="text"]').select();
    }));

我们可以拿这个往网页加脚本，比如一个爱词霸搜索时每次点击输入框还得一个个字母删掉，然后查找单词，现在可以写一个脚本，打开该页面时候执行，然后鼠标移到输入框时自动全选，那么可以先设置一个收藏地址，里面写上如下代码：

javascript:$('input[type="text"]').eq(0).mouseenter(function() { $('input[type="text"]').eq(0).select(); });

那么点击该链接时就会在当前页面执行该脚本，然后就可以实现上述功能了

hover()

鼠标悬浮事件，举例：

$('#a').hover(function(){
    $("#a").css('background', 'grey');
});
mouseover()

鼠标停留上方事件，举例：

$('#a').mouseover(function(){
    $("#a").css('background', 'grey');
});
keyup()

键盘监听事件，举例：

$(document).keyup(function(event){
  if(event.keyCode ==13){  //按下回车背景变灰色
    $("#a").css('background', 'grey');
  }
});

结合这个和上下文菜单（鼠标右键）事件，我们就可以禁止别人通过鼠标右键、f12或ctrl+shift+i打开调试工具了，举例：

$(document).on("contextmenu", function () {
    alert("本页面禁止调试！");
    return false;
});
$(document).on('keydown', function (event) {
    if (event.keyCode == 123) {  // 禁按f12
        alert("本页面禁止调试！");
        return false;
    }
});
// 禁按ctrl+shift+i
...

但这样还并不能完全禁止对方调试，所以还可以参考下面链接：
https://blog.csdn.net/qq_16494241/article/details/81202624
不过这里交代的都是浏览器层面的禁止调试，而对方调试的方法不只有浏览器，所以要完全禁止还是没那么容易的

按键keycode对应大全

https://www.cnblogs.com/daysme/p/6272570.html

更多事件参考：https://developer.mozilla.org/zh-CN/docs/Web/Events
全选选择器*事件问题

对于全选选择器来说，其会选择当前的标签以及其上层所有的标签，比如下面代码：

<div>
    <button>click</button>
</div>
...
$('*').on('click', function (e) {
    console.log($(this).prop('tagName'));  // 点击后输出当前标签名
});

原本的目的是点击按钮后只会输出BUTTON，但好死不死他偏偏把上层的所有标签名也全都输出了，结果就变成了：

BUTTON  // 原本只想输出这一行
DIV
BODY
HTML

这样就不符合我们的要求，比如我们要实现点击除了按钮以外的地方就输出其标签名，就如下面代码：

$('*').on('click', function (e) {
    if($(this).prop('tagName') != "BUTTON"){
        console.log($(this).prop('tagName'));
    }
});

结果虽然BUTTON是没输出，但是DIV、BODY和HTML却跟着输出了，这和我们想象的结果不一样。为了解决这种问题，这个时候就可以使用stopPropagation()方法了，其能阻止事件往其他节点的传播，此时只需要稍微加一行代码，上面需求的功能就能实现了，代码：

$('*').on('click', function (e) {
    if($(this).prop('tagName') != "BUTTON"){
        console.log($(this).prop('tagName'));
    }
        e.stopPropagation();    // 加了这一行
});

此时就会发现除了点击按钮不输出标签名外，其他都能输出了，大功告成！

关于stopPropagation()详细可参考：

https://blog.csdn.net/chaoyue1861/article/details/83926390

取消默认事件

除了上面的阻止事件传播以外，还有取消默认事件方法：preventDefault()，比如点击表单submit按钮时，可以阻止其提交表单

事件对象属性和方法参考：

https://www.w3school.com.cn/jsref/dom_obj_event.asp

Ajax请求

这块内容需要在服务器上才能使用

load()

发送请求并将获取的数据内容存放的标签里，举例：

loaded = false;
$('button').on('click', function(){
    if(!loaded){
        x = $('#a').load('xxx');    //js跑在服务器上，所以对于xxx实际访问的是127.0.0.1:5000/xxx，会将返回的内容存在x.text中
        loaded = true;  //第一次点击时访问并获取内容
    }
    x.toggle()
});

其可以在第二个参数里写执行请求后的函数，举例：

$('#b').load('http://127.0.0.1:5000/xxx', function(){
    alert('aaa');
});
$.ajax()

和上面一样发送请求并获取数据，但上面的是会将获取的内容放到标签里，而这个只是获取数据，和接下来的done()方法往往一起使用，其参数第一个为url，第二个为属性设置，若返回内容为json格式，还可以通过JSON.parse()来转义json数据，举例：

$.ajax('http://127.0.0.1:5000/xxx', {
    method: 'post',  //post方法，注意在jquery1.9以上的版本里，参数名改成type
    data: { //发送的数据
        'username':'aaa'
    },
    success: function(data){    //访问成功执行的回调函数
        alert(JSON.parse(data));
    },
    error: function(){  //访问失败执行的回调函数
        alert("请求失败");
    }
});

注：
针对data传入的键值对的键名无法使用变量控制，可以通过object[var] = value方式控制，参考：https://blog.csdn.net/darry_zhao/article/details/52791624
注2：
ajax传递数组参数时参数名自动修改的问题：加上配置参数traditional: true即可，参考：
https://www.jb51.net/article/113586.htm
注3：
ajax返回值到上层参考（取消异步请求操作），加上配置参数async:false即可，或者使用async结合await关键字实现：
https://www.cnblogs.com/huangjinyong/p/9467591.html

get()

相当于上面的方法中已经把method:'get'传进去了，第一个参数是url，第二个是传的数据，举例：

$.get('http://127.0.0.1:5000/xxx', {
    'username':'aaa',
});
post()

和上面一样，只不过用的是post方法

getJSON()

获取json数据，基于get方法，第一个参数是url，第二个是传递的数据，第三个是回调函数，可以用$.each()来处理json数据，举例：

$.getJSON('http://127.0.0.1:5000/xxx', {
    xxx: 'yyy'
}, function(data){
    alert(data.aaa);    //返回的{"aaa":"bbb"}，输出bbb
    $.each(data, function(k, v){    //将键值一一配对
        alert(k + ":" + v);
    });
});
getScript()

获取脚本并自动执行，举例：

$.getScript('http://127.0.0.1:5000/222');   //返回的是alert('aaa')，所以请求完会自动执行这一句
done()

对获取的数据执行自定义函数，其中获取的数据通过参数传入，举例：

$.ajax('http://127.0.0.1:5000/xxx').done(function(data){
    alert(data);
});

Ajax跨域请求问题

当本地的服务器通过ajax向外部IP发送请求时，会出现跨域请求问题，通常会出现下面三种错误：

1.No 'Access-Control-Allow-Origin' header is present on the requested resource.

这种错误是因为本地发送跨域请求导致的，这个时候可以使用jsonp协议来解决，具体有下面几种做法：
(1)前端：在ajax里加上dataType: "jsonp"配置即可
(2)服务端：在返回的Header里进行配置，参考：https://www.fujieace.com/html/cors.html
(3)django服务端参考：https://www.jb51.net/article/85537.htm

2.Uncaught SyntaxError: Unexpected token :

此时一般是在完成了在ajax里加上dataType: "jsonp"配置后才会出现的错误，这类错误往往是服务器返回的内容不符合jsonp的格式，jsonp的格式一般为：

xxx(json数据)
示例：message({"ret":"ok","ip":"x.x.x.x"})

而服务端返回的数据一旦不符合这种要求，则会出错，因此需要服务端修改返回值格式即可

3.返回状态码为200，却进入error而不是success函数

这种错误一般是在dataType: "jsonp"配置了，且服务端返回格式也正确时可能出现的，具体原因是因为jsonp的格式外部包着的内容不确定，因此解析时出错，具体解决办法举个例子就懂了：
比如jsonp数据为：find({"ret":"ok","ip":"x.x.x.x"})，那么就在ajax中加入下面的配置：

jsonpCallback: "find"

也就是说jsonp格式的外面包着的是什么，那么jsonpCallback的值就为什么，具体完整代码示例如下：

$.ajax({
    url: "http://xxx",
    type: "get",
    dataType: "jsonp",
    jsonpCallback: "xxx",
    success: function(data) {
        console.log(data);
    },
    error: function(data) {
        console.log("wrong");
    }
});

至于为什么要这样弄后面会通过讲解jsonp的原理来说明

jsonp原理详解

首先因由于同源策略（只有同域名、同协议、同端口的资源才允许请求），我们无法通过ajax请求来获取不符合条件的资源，但是如果是通过有src属性的标签，如<img>/<script>，那么我们是可以访问到资源的，例如我们经常用<script>标签来调取远程非同源的js文件，并会执行里面的js代码，例如请求的js文件中有这样的语句：

test({"x": 1})

而我们前台的请求如下：

<script src="http://xxx.xxx.com/xxx.js"></script>

那么获取到请求以后就会执行test这个函数，并将一个对象作为参数传入，此时如果我们的前台本身有test这个函数，那么就可以成功执行这段代码。换个说法，如果现在我们通过访问一个后台接口获取到跟前面一样的字符串（之前是通过访问一个远程js资源得到的），那么因为都是用<script>标签获取的，获取的结果也一样，只是请求的url稍微有些改变，可以发现结果都是是一样的：正常执行test这个函数，例如下面这段代码：

<script src="http://xxx.xxx.com/api"></script>
<script>
function test(data) {
  console.log(data);
}
</script>

那么控制台就会成功输出data的内容。这就是jsonp的原理，可以看出和ajax请求的本质是完全不一样的，ajax是基于XmlHttpRequest，而jsonp则是基于标签动态请求，可以说是一种伪请求（并且可以看出：由于是基于标签的src访问的，因此只支持get方式的请求）。

而在ajax当中也封装了对jsonp的支持，首先需要配置参数：dataType: "jsonp"，代表这是一个jsonp的伪请求，然后需要通过配置参数：jsonpCallback: "xxx"来声明回调的函数，这样前台才知道用什么回调函数来处理后台返回的数据，前面的示例中我们就相当于拿test作为请求到结果以后的回调函数，而这个test是我们自己手动定义的。但在ajax里你可以不用重新自己定义对应的回调函数，其会自动帮你生成对应的回调函数，也就是success执行的地方，从而让你使用起来感觉和ajax没什么区别，但一定要注意jsonp和ajax本质是完全不同的东西。

所以前面错误3里面说：jsonp格式的外面包着的是什么，那么jsonpCallback的值就为什么，这个也就不难理解：因为返回的数据已经告诉你需要使用到xxx函数来执行，所以你要不就定义这个函数，要不就在ajax里配置，让他帮你生成这个函数，也就是success的地方，作为一个入口让你执行。

网上翻了一下，感觉这篇对jsonp的原理讲的特别好，这里摆上链接：
https://blog.csdn.net/hansexploration/article/details/80314948

更多跨域请求解决参考

http://www.cecdns.com/post/64.html

其他

自定义方法

$.extend()

自定义扩展方法，通过$.xxx()调用，举例：

$.extend({ 
    setColor: function(e){e.css('background', 'grey');},
});
$.setColor($('#a'));  //新添加了setColor()方法，并调用
$.fn.extend()

也是自定义扩展方法，通过$('').xxx()调用，举例：

$.fn.extend({ 
    setColor: function(){this.css('background', 'grey')},  //改变背景色
    echoWidth: function(){alert(this.width())},  //输出元素宽
});
$('div').setColor();
$('div').eq(2).echoWidth();

插件

jquery有很多相关功能的插件，使用方法和其差不多，下面给一些插件示例：

cookie插件

封装了cookie设置、删除等功能
参考：https://www.cnblogs.com/hellofangfang/p/9626797.html

打印插件

封装了打印页面等功能
参考：https://github.com/DoersGuild/jQuery.print
其中打印时默认会把href链接打印出来，如果想要隐藏，参考：
https://blog.csdn.net/farmwang/article/details/81296395

验证插件

封装了对表单数据进行验证的功能
参考：https://www.runoob.com/jquery/jquery-plugin-validate.html

tip提示框插件

弹出tip提示框，不过感觉不咋样，可以试试layui框架的弹层，感觉更好
插件参考：https://www.cnblogs.com/selinamee/p/3471458.html
layui弹层参考：http://layer.layui.com/

表单筛选插件

前端表单输入框可以进行模糊查询（在提前传递到的数据当中）
参考：https://www.runoob.com/jquery/jquery-plugin-autocomplete.html

动态生成文档目录插件

参考：https://www.cnblogs.com/niuboren/p/5940846.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • jquery 权威指南 笔记
    第一章 入门 基本功能：访问和操作 dom 元素，控制页面样式，对页面的事件处理，与ajax完美结合，有丰富的插件...
    X_Arts阅读 1,013评论 0赞 2
  • 面试题
    前端开发面试题 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。 题目类型： 理论知...
    怡宝丶阅读 2,566评论 0赞 7
  • jQuery基本使用
    一. jQuery的基础知识 源文件jQuery文件min是压缩过的版本。区别：在开发过程中，我们使用未压缩的版...
    常威爆打来福阅读 296评论 0赞 3
  • JQuery基本使用二
    JQuery各种基本使用 代码预览：https://jirengu-inc.github.io/jrg-renwu...
    书中有凉气阅读 542评论 0赞 49
  • 指间一粒沙
    人生最大的遗憾，莫过于，轻易的放弃了不该放弃的，固执的坚持了不该的坚持的。因为舍不得你，所以不得不放弃。也许有一天...
    以你之姓_冠我之名阅读 156评论 0赞 1