jQuery 速成 自学知识点总结
这是我在学习jQuery时候的一些心得体会，欢迎大家交流。
一、入口函数
1.$(document).ready(function(){
})
2.$(function(){
})
二、控制css和html
-
html
html()里面不带参数为获取标签里面的元素
alert($(“div”).html())3
html()里面带参数为修改标签里面的元素
$(‘div’).html(‘aaa’)
$(‘div’).html(‘ss
’) -
修改css
css()里面分为单属性和多属性 1.1单属性修改 $('div').css("color","red") 1.2单属性访问 alert($('div').css("color")) 2多属性修改 里面写法可以和css定义属性一样 $('div').css({'color':"red",'font-size':'60px'})
三、选择器
-
元素选择器
$(“元素标签”) $("button") -
id选择器
$(“#id名字”) $(“#box”) -
类选择器
$(“.类名”) $(“.box”) -
选择所有元素
$(“*”) -
选择类名为xx的p标签的元素
$(“p.xx”) -
选择当前HTML的元素
即定义事件的那个HTML元素，注意：this不加引号
$(this) -
选择不包含指定类的那个标签
$('li').not('.box1').css("background","red") -
eq() 查找指定索引的标签
两种写法， .eq() :eq() 正数从头开始，负数从后开始
$(‘li’).eq(1).css(“background”,“red”)
$(‘li:eq(3)’).css(“background”,“red”)
$(‘li’).eq(-1).css(“background”,“red”) -
选择p标签的第一个元素
$(“p:first”) -
选取第一个 ul 元素的第一个 li 元素
$("ul li:first") -
选取每个 ul 元素的第一个 li 元素
$("ul li:first-child") -
选取带有 href 属性的元素
$("[href]") -
选取所有 target 属性值等于 “_blank” 的a元素
$("a[target='_blank']") -
选取所有 target 属性值不等于 “_blank” 的 a元素
$("a[target!='_blank']") -
选取所有 type=“button” 的 input元素 和 button元素
$(":button") -
选取偶数位置的 tr 元素
$("tr:even") -
选取奇数位置的 tr元素
$("tr:odd") -
prev()查找指定元素的前一个
$('.box1').prev().css("background","red") -
prevAll()查找指定元素的前面所有
$('.box1').prevAll().css("background","red") -
next() 查找指定元素的后一个元素
$('.box1').next().css("background","red") -
nextAll() 查找指定元素的后面所有
$('.box1').nextAll().css("background","red") -
has() 把查找到的父级元素修改
$('.box11').has('p').css("background","red") -
find() 把查找到的元素进行修改
$('.box22').find('p').css("background","red") -
siblings()选择器
$(this).css('background','red') 排他，除了选中的，其他不做改变 $(this).siblings().css('background',"") -
父级选择器
$(function(){ $('span').click(function(){ $(this).parent().hide() }) }) -
孩子选择器 children()
stop()清除动画机制，在动画之前加stop() $('.nav li').mouseover(function(){ $(this).children('ul').show(500) }) $('.nav li').mouseout(function(){ $(this).children('ul').hide(500) })
四、获取元素下标
index()
html可以自己定义标签属性
获取自己定义元素的值
.attr('mycode')
五、添加删除切换类
-
添加类 addClass(‘类名’)
$('div').addClass('aa') -
删除类 removeClass(‘类名’)
里面不写参数删除所有值
$(‘div’).removeClass(‘aa’) -
切换类 toggleClass(‘类名’)
$('div').toggleClass()
六、animate动画
-
作用：
自定义动画函数
-
四个参数
- 第一：以字典形式写css键值对
- 第二：以毫秒为单位
- 第三：运动曲线swing linear
- 第四：回调函数
- demo：
$('div').animate({'width':"800px"},2000,'linear',function(){
alert('动画完成')
})
七、淡入浅出
- fadeIn() 方法，jQuery fadeIn() 用于淡入已隐藏的元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
- fadeOut() 方法，jQuery fadeOut() 方法用于淡出可见元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
- fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元 素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
- fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(document).ready(function(){
$(“button”).click(function(){
$("#div1").fadeTo(“slow”,0.15);
$("#div2").fadeTo(“slow”,0.4);
$("#div3").fadeTo(“slow”,0.7);
});
});
八、滑动效果
- slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
$("#flip").click(function(){
$("#panel").slideDown();
});
- slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
$("#flip").click(function(){
$("#panel").slideUp();
});
- slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如 果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$("#flip").click(function(){
$("#panel").slideToggle();
});
九、获取html页面元素
- prop()
-
里面带一个参数代表获取值
-
里面带两个参数代表修改值
- val()
- 获取值
十、循环each()
- 格式
each(function(参数){}) //参数就是循环了第几次
$('li').each(function(event){
alert(event)
})
十一、事件
-
鼠标事件：
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
- click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
$('p').click(function(){
alert('click function is running !');
});
- dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
$('p').dbclick(function(){
alert('dbclick function is running !');
});
- mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。
$('p').mousedown(function(){
alert('mousedown function is running !');
});
- :mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。
$('p').mouseup(function(){
alert('mouseup function is running !');
}).click(function(){
alert('click function is running too !');
});
-
mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。
-
mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
(4)和(5)这两个事件一般不常用，很难实现与用户的交互，也就是说不易捕获用户事件。 -
mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
- mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
- (6)和(7)这两个事件一般连起来使用，在jQuery中可以使用hover这个函数来代替这两个函数。
$(‘p’).hover(function(){
alert(‘mouseenter function is running !’);
},function(){
alert(‘mouseleaver function is running !’);
});
焦点事件
focus()
-
当元素获得焦点时，发生 focus 事件。
-
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()
- 当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
键盘事件
-
keypress()
键盘在按下松开过程中才触发事件
$("input").keypress(function(){ $("span").text(i+=1); }); -
keydown()
键盘在按下的时候发生样式变化
$("input").keydown(function(){ $("input").css("background-color","yellow"); }); -
keyup()
键盘在松开时发生样式变化
$("input").keyup(function(){
$("input").css("background-color","pink");
});
表单事件
- submit()
当点击submit时触发这个事件方法
$(‘form’).submit(function(){
alert(‘submit事件’)
});
<!-- 表单提交不会直接选择form标签选择器，html5中一个html页面可以有很多个form标签，为了保证唯一性都是id的形式选择器 -->
$('#myform').submit(function(event){
// alert(1)
// 工作中不是直接提交 ，条件判断：如果所有表单控件合法提交，否则报错不能提交数据
if(){
// 提交
}else{
// 报错 不能提交数据/阻止表单默认提交行为（某些操作系统的某些浏览器自动提交数据）
return false // 工作中常用
event.preventDefault()
}
})
change()当改变input的内容时触发事件
$('input').change(function(){
$('input').css('background-color','red')
});
文档/窗体事件
-
resize()
当浏览器窗体大小发生改变时触发事件
$(window).resize(function(){ $("span").text(i+=1); });
十二、正则
g：全文搜索
i：忽略大小写
var re01 = new RegExp(规则, 正则的参数)
var re02 = /规则/参数
var re01 = /a/
var re02 = /a/i
var str1 = "addd"
var str2 = 'Ass'
alert(re01.test(str1))
alert(re01.test(str2))
alert(re02.test(str2))
1）普通字符匹配
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
3.匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
4、量词
对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
8、常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
正则默认规则
匹配成功就结束，不会继续匹配，区分大小写
常用正则规则
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;
常用正则表达式
匹配中文字符的正则表达式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^x00-xff] 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：ns*r 评注：可以用来删除空白行
匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? /> 评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^s*|s*$ 评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)* 评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^s]* 评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 评注：表单验证时很实用
匹配国内电话号码：d{3}-d{8}|d{4}-d{7} 评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,} 评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]d{5}(?!d) 评注：中国邮政编码为6位数字
匹配身份证：d{15}|d{18} 评注：中国的身份证为15位或18位
匹配ip地址：d+.d+.d+.d+ 评注：提取ip地址时有用
匹配特定数字： ^[1-9]d*$
//匹配正整数 ^-[1-9]d*$
//匹配负整数 ^-?[1-9]d*$
//匹配整数 ^[1-9]d*|0$
//匹配非负整数（正整数 + 0） ^-[1-9]d*|0$
//匹配非正整数（负整数 + 0） ^[1-9]d*.d*|0.d*[1-9]d*$
//匹配正浮点数 ^-([1-9]d*.d*|0.d*[1-9]d*)$
//匹配负浮点数 ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$
//匹配浮点数 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$
//匹配非负浮点数（正浮点数 + 0） ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$
//匹配非正浮点数（负浮点数 + 0） 评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串： ^[A-Za-z]+$ //匹配由26个英文字母组成的字符串 ^[A-Z]+$
//匹配由26个英文字母的大写组成的字符串 ^[a-z]+$
//匹配由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]+$
//匹配由数字和26个英文字母组成的字符串 ^w+$
//匹配由数字、26个英文字母或者下划线组成的字符串 在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间， 只能包含字符、数字和下划线。
验证是否含有^%&',;=?$"等字符：“[^%&',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$” 正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”， “XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$” 正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;}
(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现 String.prototype.trim = function() { return this.replace(/(^s*)|(s*$)/g, ""); }
(3)应用：利用正则表达式分解和转换IP地址 function IP2V(ip) //IP地址转换成对应数值 { re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式 if(re.test(ip)) { return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 } else { throw new Error("Not a valid IP address!") } }
(4)应用：从URL地址中提取文件名的javascript程序 s="http://www.jb51.net/page1.htm"; s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2") ; //Page1.htm (5)应用：利用正则表达式限制网页表单里的文本框输入内容
用正则表达式限制只能输入中文：onkeyup="value="/blog/value.replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用正则表达式限制只能输入全角字符： onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正则表达式限制只能输入数字：onkeyup="value="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用正则表达式限制只能输入数字和英文：onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''
十三、事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，
那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，
那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），
或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
父子级标签都绑定相同的事件，触发子级命令的时候会逐层向父级传递
停止事件冒泡
return false
十四、事件委托、事件代理
委托这个标签的父标签执行命令
格式
$('父级标签').delegate('当前标签'，'执行的命令'，'匿名函数')
作用
1.提高代码的执行效率
2.可以给未来元素绑定事件
扩展
on(时间属性，匿名函数)
可以给未来元素绑定事件
十五、节点操作
节点（标签，标签的属性，标签的内容）
标记，标签，元素属于他
DOM 文档对象模型 document object model
js内置,内置的一个结构化的表现手法，通过这个结构化的表现手法
把所有的标签实现了一个倒置的树状结构图
作用：
为了查找标签
8个方法：
-
声明节点标签
var $li = $('<li>5252525</li>') -
在子集后面追加append()
$('ul').append($li) -
在子集后面追加appendTo()
$li.appendTo($('ul')) -
在子集前面追加prepend prependTo()
$('ul').prepend($li) $li.prependTo($('ul')) $div = $('<div>divdiv</div>') -
在同级前面追加 before() insertBefore()
$('ul').before($div) $div.insertBefore($('ul')) -
在同级之后追加 after)() insertAfter()
$('ul').after($div) $div.insertAfter($('ul')) -
把原有标签改变位置
$('标签名').方法名().$('标签名') -
删除标签 remove() 删除指定标签
$('ul').remove() -
删除指定标签里面的元素
$('ul').empty()
十六、js对象
Ajax 对象的创建
Vue 对象的使用
1.创建对象
var 对象名 = new Object()
添加属性
对象名.属性名 = 属性值
添加方法
对象名.方法名 = function(){}
var person1 = new Object()
person1.name = 'dxd'
person1.say = function(){
alert(this.name)
alert(person1.name)
}
person1.say()
2.创建对象二
var 对象名 ={
属性名：属性值
方法名：function(){}
}
var person1 ={
name: 'dxd',
say1:function(){
alert(this.name)
}
}
person1.say1()
十七、json
数据格式
字典{} 只能用双引号
十八、ajax
ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。
-
同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
-
局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
-
数据接口
数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。
$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步
以前的写法：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});
新的写法(推荐)：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
$.ajax的简写方式
$.ajax按照请求方式可以简写成$.get或者$.post方式
$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
十九、jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了
-
实例
获取360搜索关键词联想数据
$(function(){ $('#txt01').keyup(function(){ var sVal = $(this).val(); $.ajax({ url:'https://sug.so.360.cn/suggest?', type:'get', dataType:'jsonp', data: {word: sVal} }) .done(function(data){ var aData = data.s; $('.list').empty(); for(var i=0;i<aData.length;i++) { var $li = $('<li>'+ aData[i] +'</li>'); $li.appendTo($('.list')); } }) }) }) //...... <input type="text" name="" id="txt01"> <ul class="list"></ul>
一般ajax数据接口和jsonp数据接口的区别
开发返回数据的接口，如果是一般的ajax接口，让接口直接返回json格式的数据字符串就可以了，这种接口的数据是不能跨域请求的，如果要跨域请求数据，需要开发jsonp的接口，开发jsonp的接口，需要获取请求地址中的参数，也就是’callback’键对应的值，然后将这个值和json数据拼装成一个函数调用的形式的字符串返回，就完成了一个jsonp的接口，这个键值对是由$.ajax函数自动产生的。比如：'callback’键对应的值一般是这样的：jQuery1124018787969015631711_1522330257607，所以：
一般接口返回的数据形式：
'{"iNum":12,'sTr':'abc'}';
jsonp返回的数据形式：
'jQuery1124018787969015631711_1522330257607({"iNum":12,"sTr":"abc"})';
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
