因为返回有true ajax提示进入错误,jQuery 基本使用

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

配置

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

https://www.bootcdn.cn/

导入

1.把下载好的jquery导入

2.导入网上镜像，举例：

往网页添加jQuery文件方法

往控制台依次输入这三句

var script = document.createElement('script');

script.src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.js"

document.getElementsByTagName('head')[0].appendChild(script);

调用js脚本

基本语法

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()来寻找，比如：

AAA

BBB

...

$('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

隐藏的父元素(同时隐藏所有子元素)

设置属性

定位设置属性

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

$('div').css({

'background': 'grey',

color: 'blue'

}); //设置了2个属性

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

添加类属性

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

.divStyle {

background-color: rgba(0, 0, 0, 0.1);

color: blue;

}

...

$('div').addClass('divStyle'); //添加divStyle类

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

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

常用方法

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

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

$('a').prop('href', 'https://www.baidu.com') //设置超链接，跟attr效果一样

$('a').attr('sadas', '111') //设置自定义属性，prop中则会无法设置

$('a').prop('text', 'aaa') //设置标签的文本内容，此时会变成：aaa

$('a').attr('text', 'aaa') //只是设置标签的属性，并不会改变文本的内容，此时会变成：

$('a').prop('text') //获取标签的文本内容，此时aaa结果为：aaa

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

$('a').prop("outerHTML");

// 获取的就是：...

// html获取的则是标签里面的：...

$('a').prop("tagName") // 结果就是：A(全大写)

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

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

text()

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

x = $('div').text() //获取文本内容

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

html()

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

AAA

BBB

那么两种的结果分别是：

text:

"AAA

BBB

BBB"

html:

"AAA

BBB

"

offset()

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

position()

获取元素相对于父元素的位置

注：

当对元素设置position: fixed;后，滑动滑轮可以发现offset()会发生改变(绝对位置发生了变化)，而position()不变

width()/height()

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

prepend()/append()

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

$('div').prepend('

first

')

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选中

字符串处理方法

$.trim()

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

$.trim(" 1 2 ")

// 结果："1 2"

更多字符串处理参考：

动画效果

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');

// 解绑事件，可以看到选择器必须也一一匹配

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对应大全

全选选择器*事件问题

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

click

...

$('*').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()详细可参考：

取消默认事件

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

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

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属性的标签，如/，那么我们是可以访问到资源的，例如我们经常用标签来调取远程非同源的js文件，并会执行里面的js代码，例如请求的js文件中有这样的语句：

test({"x": 1})

而我们前台的请求如下：

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

function test(data) {

console.log(data);

}

那么控制台就会成功输出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的地方，作为一个入口让你执行。

更多跨域请求解决参考

其他

自定义方法

$.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插件

打印插件

验证插件

tip提示框插件

表单筛选插件

动态生成文档目录插件