js数据类型
undefined boolean string
number object function
JS中的调试方式
1.alert()弹窗
会中断代码执行
2.document.write()
相当于PHP中的echo
当代码执行完毕再执行,会覆盖原来的内容(最好不要出现在事件中)
function demo()
{ //最好不要出现在事件中
document.write(123);}
3.console
console.log() //输出简单的数据
console.dir() //用于调试比较复杂的数据,比如对象
4.document.title
用于调试动态数据
5.debugger 断电调试
通常用于调试循坏
定时器
一次性定时器
setTimeout(回调函数,时间);
时间单位:毫秒 1000毫秒=1秒
clearTimeout(设置定时器的时候返回的值)
周期性定时器
setInterval(回调函数,时间);
clearInterval(设置定时器的时候返回的值)
清除定时器
clearTimeout(timer);
clearInterval(time2);
类型的转换
Nunber()
parseInt()/parseFloat()
找对象
document.getElementById('ID号');
document.getElementsByTagName('标签名');
document.getElementsByClassName('class名');
window对象
window.closed();
关闭浏览器窗口。
window.open();
打开一个新的浏览器窗口或查找一个已命名的窗口。
prompt(提示内容,输入框);//弹框
navigator浏览器对象
检测字符串第一次出现的位置,区分大小写,没有找到返回-1
window.navigator.userAgent;//获取浏览器详细信息
screen屏幕对象
获取屏幕宽高
window.screen.windth
window.screen.height
除去任务栏之外的屏幕宽度(可用宽度)
window.screen.availWidth
window.screen.availHeight
history历史对象
window.history.length; //可后退数
window.history.back();//后退一步
window.history.forward();//前进一步
window.history.go(1);//前进一步
window.history.go(-1);//后退一步
location对象
获取浏览器的url地址(可读可写)
window.location.href;
window.location.href = 'https://www.baidu.com';
刷新当前页面
window.location.reload();
window.history.go();
window.location.href = window.location.href;
研究date对象
d.getFullYear()
d.getMonth()
d.getTime()
文档事件
当window加载完毕的时候执行
onload
onunload
图片事件
onload 图片加载完成
onerror 图片加载失败时用
鼠标事件
onclick 单击
ondblclick 双击
onmousedown 按下鼠标
onmouseup 放开鼠标
onmousemove 移动鼠标
onmouseover onmouseout //陆军(有层叠的时候有问题,会先退出包含子模块在重新进去触发事件)
鼠标在某事件上面的时候
onmouseenter onmouseleave//空军
鼠标在某事件上面的时候
当鼠标弹起的时候,清除移动事件
document.onmousemove = null;
事件对象
鼠标坐标点
e.clientX
e.clientY
键盘编码
e.keyCode
组合键
e.ctrlKey
e.altKey
e.shiftKey
键盘事件
onkeydown 按下键时
onkeyup 放开键时
其他事件
oncontextmenu 右键菜单弹出之前触发
onresize 调整窗口大小的时候触发
onscroll 滚到滚动条的时候触发
修改某标签的值
tab.innerHTML = res;
常用属性
*offset
元素本身的宽高(包括元素的宽高和内边距和边距,不包括外边距)
offsetWidth
offsetHeight
获取元素在浏览器中的位置
offsetTop
offsetLeft
client
clientWidth
clientHeight
clientTop
clientLeft
可以用于获取浏览器的可用宽度
document.documentElement.clientWidth
document.docuementElement.clientHeight
scroll
scrollWidth
scrollHeight
scrollTop
scrollLeft
用于获取整个文档的宽度
document.body.scrollHeight
document.body.scrollWidth
获取滚动条的位置(可读可写)
document.body.scrollLeft
表单事件
onfocus:获取焦点时触发
onblur:失去焦点时触发
onchange:
1.很少绑定在input:text上,通常用于绑定到下拉框上(可做二级联动
2.将change事件绑定到文件上传域(可以判断大小、类型。。。
onselect:鼠标选择内容时触发
onsubmit: 点击提交按钮时触发
onreset: 点击重置按钮时触发
oninput: 当input框输入内容时,获取里面的值
window.URL.createObjectURL(file)
获取图片的二进制流的地址
节点
每个节点都包含3个属性:
nodeName、nodeValue、nodeType
nodeName 属性含有某个节点的名称。
元素节点的nodeName是标签的名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
nodeValue
对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。(null)
nodeType
元素 1 属性 2 文本 3 注释 4 文档 9
根节点
document.documentElement HTML
document.body body
节点定位
document.getElementById('ID号');
document.getElementsByClassName('class类名');
document.getElementsByTagName('标签');
document.getElementsByName('name值');
节点属性
向下找儿子
firstChild //找大儿子
lastChild //找小儿子
childNodes //找所有的儿子,包括文本节点(不常用)
children // 找所有的元素的儿子(不包括文本节点)
向上找爹
parentNode //不会找到文本节点,放心使用
找兄弟(会找到文本节点)
nextSibling
previousSibling
找元素兄弟
nextElementSibling
previousElementSibling
找所有的属性集合
attributes
创建和添加节点
方法
创建一个节点
document.createElement('标签名');//只创建,不添加
添加节点(只能添加子节点)
die.appendChild(son);
die.insertBefore(要添加的元素,插袋谁的前面)
//把div插到body的最后面
document.body.appendChild(div);
//将div插到hehe的前面
document.body.insertBefore(div,hehe);
//对象不会凭空产生,操作DOM树中已经存在的节点,相当于剪切操作
document.body.appendChild(hehe);
克隆和删除节点
克隆节点
var newObj = old.cloneNode([true]);//只有传了参数true,才会带着子节点一起克隆
删除节点(只能删除子节点)
die.removeChild(son)
经典的自杀案例
son.parentNode.removeChild(son);
杀爹
son.parentNode.parentNode.removeChild(son.parentNode);
删html
document.removeChild(document.documentElement);
设置属性和获取属性
获取属性
getAttribute('属性名');
alert(box.className);
//class是关键字
alert(box.xxoo);
//非HTML的标准属性,无法用直接获取
设置属性
setAttribute('属性名','属性值');
box.title = '123';//可以在代码中看到
box.abc = 'xxoo';//非标准属性看不得
用方法来设置和获取
alert(box.getAttribute('xxoo'));//获取全部属性
扩展
arguments:包含所有实参的集合
1. window对象
常用的属性:
document :对 Document 对象的只读引用
history :对 History 对象的只读引用。
location:用于窗口或框架的 Location 对象
Navigator: 对 Navigator 对象的只读引用
parent: 返回父窗口。
length: 设置或返回窗口中的框架数量。
Screen: 对 Screen 对象的只读引用
top: 返回最顶层的先辈窗口。
常用方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
scrollTo() 把内容滚动到指定的坐标。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
2. Navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
常用属性:
with(document) {
write ("你的浏览器信息:<ul>");
write ("<li>代码:"+navigator.appCodeName+"</li>");
write ("<li>名称:"+navigator.appName+"</li>");
write ("<li>版本:"+navigator.appVersion+"</li>");
write ("<li>语言:"+navigator.language+"</li>");
write ("<li>编译平台:"+navigator.platform+"</li>");
write ("<li>用户表头:"+navigator.userAgent+"</li>");
write ("</ul>");
}
3. Screen 对象包含有关客户端显示屏幕的信息。
常用属性:
document.write( "屏幕宽度:"+screen.width+"px<br />" );
document.write( "屏幕高度:"+screen.height+"px<br />" );
document.write( "屏幕可用宽度:"+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度:"+screen.availHeight+"px" );
参考了解其他属性信息获取方式
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
4. History 对象包含用户(在浏览器窗口中)访问过的 URL。
5. Location 对象包含有关当前 URL 的信息。
* Array(数组)
var a= new Array(); //创建一个空数组
a = new Array(10); //创建一个数组单元为10个的数组。
a = new Array(10,20,30); //创建一个指定数组单元的数组。
a=['a','b','c','d']; //快捷定义数组
常用属性:
length--获取数组长度。
常用方法:
concat() 返回两个或更多数组组合而成的新数组
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
shift() 移除数组中的第一个元素并返回该元素。
unshift() 在开始添加一个元素
sort() 对数组的元素进行排序
reverse() 反转一个数组
toString() 把数组转换为字符串,并返回结果。
。。。
* Boolean 布尔值包装类对象(不用写)
方法:
toSource() 返回该对象的源代码。
toString() 把逻辑值转换为字符串,并返回结果。
valueOf() 返回 Boolean 对象的原始值。
* Date (Y-m-d H:i:s)
var dd = new Date();
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
同上还有很多set方法用来设置。
* Math 对象用于执行数学任务。方法是静态的。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
* Number(不用写)
toString();
* String 子串处理对象
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
match() 找到一个或多个正在表达式的匹配。
replace() 替换与正则表达式匹配的子串。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
* RegExp
exec() 正则匹配
test()
match()
在DOM中常用的集合
document.forms //返回页面中所有的表单
form.elements //返回所有的表单元素
可以通过表单域中的name值直接选中某个表单:
form.username
form.pwd
页面中所有的ID可以直接当做对象使用(不推荐)
最初是IE搞出来的事情,不在标准里面,不推荐
select.options //获取所有下拉框的集合
select.length //可读可写
insertRow();//添加一个新行到表格
insertCell();//添加一个单元格
deleteRow();删除一行表格
rowIndex();获取当前行的位置
可以直接调用的事件
obj.submit();//提交事件
btn.click();//点击事件
focus();//获取焦点
ajax
需要打开wamp环境,通过localhost去访问
基本步骤
1.创建对象-生一个小弟
var ajax = new XMLHttpRequest();
2.建立请求-告诉小弟去哪里
ajax.open('get','./ajax.php',true);
3.发送请求 -你去吧
ajax.send();
4.准备一个事件,用来处理小弟带回来的结果
ajax.onreadystatechange = function(){
//readyState属性值为0~4,不需要每次change都关心,所以要加判断
if(ajax.readyState == 4 && ajax.status == 200) {
//小弟拿到的内容
//!!!!!!小弟能拿到的内容一定是一个字符串,是查看网页源代码的结果
alert(ajax.responseText);
}
}
ajax的POST请求
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
异步:
把小弟派出去了,什么时候回来,什么时候处理它
主程序继续执行,不会等待
同步:(比较少用)
会在send这一步等待
主程序不会继续执行
基本步骤:
var ajax = new XMLHttpRequest();
ajax.open('post', 'ajax.php?id=888', true);
POST传参需要设置请求头信息
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
在send这一步传输post的参数
ajax.send('name=jack&age=18');
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200) {
var res = ajax.responseText;
// alert(res);
}
}
ajax请求php的数组的处理方式
小弟能拿到一定是字符串
var res = ajax.responseText;
方式一:将json.encode数据的字符串转换为js的对象(object)
// var obj = eval('(' + res + ')');
方式二:将json.encode数据的字符串转换为js的对象(object)
var obj = JSON.parse(res);
//eval可以将传进去的参数当做js(object对象)代码执行
// var str = 'alert(3)';//不能弹
// 注意:花括号的对象一定要加()
// var obj = eval('({"name":"jack","sex":"man"})');
// var obj = eval('(["a","b","c"])');
// alert(typeof obj);//返回object类型
// alert(obj['sex']);
// var obj = [1,2,3,4];
// var obj = {'name':'jack', 'age':18};
// var obj2 = {"name":"jack","sex":"man"};
// alert(typeof obj); //返回object类型
跨域:
协议、域名、端口这三个有任何一个不同,就跨域了
ajax不允许跨域请求
例如:
ajax.open('get', 'http://127.0.0.1/gz24/js09/ajax.php', true);
解决跨域请求方式一:
前端用jsonp解决
通过script标签对,请求特定的php文件
在这个文件里面输出一些js代码
通常输出一个js的函数调用
在当前页面预先准备一个函数,以形参的方式接受php页面传过来的值,形成前后端的数据交互
<script>
function chuli(res)
{
document.write(res);
}
</script>
<script src="http://127.0.0.1/gz24/js09/jsonp.php?id=6"></script>
方式二:
在后台设置允许请求的来源
header('Access-Control-Allow-Origin: http://localhost');
header('Access-Control-Allow-Origin: *');
将数组转换为字符串的方式
echo join(',', $info); 关联数组无法完美的处理,忽略
echo serialize($info);
JS里面没有反串行化,忽略
将其他类型的数据转换为json格式的字符串
echo json_encode($info);
$str = '{"name":"jack","sex":"man"}';
将json格式的字符串转换为对象或者数组(如果是索引数组转换出来还是一个array)
$res = json_decode($str, true);//加第二个参数true,转换为数组
自定义jQuery的使用
css中所有的-在js里面操作都要换成小驼峰
完美链式操作
隐式迭代(自动循环)
完美的错误处理
jQuery是$的别名
JQ对象一定是一个数组
1.传入选择器,会返回一个JQ对象
$('div');$('#blue');
2.传入html的标签,也会返回一个JQ对象
$('<p>111</p>').appendTo('body');
3.传入一个DOM对象,可以将DOM对象转换为JQ对象
var box = document.getElementById('box');
$(box).html('123');
JQ对象转换为DOM对象(obj取下标)
var obj = $('#box');
console.dir(obj);
obj[0].innerHTML = '####';
obj.get(0).innerHTML = '787';
手动循环each
$('p').each(function(i)){
this.innerHTML = '#'+i;
$(this).html('#'+i); //得到的是DOM对象,需要转换为JQ对象再用
}
获取length属性的值
$('p').size();
$('p').length();
获取相当于同辈元素的索引位置
$('#p').index();
临时存储数据
$('#p').data('key','123');
释放$符号,将$符释放为一个普通的字符;
$.onConflict();
给$符去个别名J
j('#p').html('123');
层级选择器
通配符
$('*').css('margin','0px');
所有的div、p、span
$('div,p,span').css('color','red');
后代选择器
$('ul li').css('color','red');
儿子选择器
$('ul > li').css('border','1px solid red');
紧挨着的下一个兄弟元素
$('#p + span').css('border','1px solid red');
找到最后面所有的指定兄弟元素
$('#p ~ span').css('border','1px solid red');
基本选择器
找出所有ul的后代li大集合中的第一个
$('ul li:first').css('color','red');
找出所有ul的后代li大集合中的最后一个
$('ul li:last').css('color','red');
传下标,从0开始,eq是等于的意思
$('ul li:eq(3)').css('color','red');
小于3,不包含3
$('ul li:lt(3)').css('color','red');
大于3,不含3
$('ul li:gt(3)').css('color','red');
除了有class='red'的li
$('ul li:not(.red)').css('color','red');
获取焦点时
$('input')[0].focus();
$('input:focus').css('border','5px solid red');
奇数:odd,偶数:even
$('tr:odd').css('background','red');
$('tr:even').css('background','greed');
内容选择器
p标签的innerHTML中包含#
$('p:contains(#)').css('border','1px solid red');
empty:匹配,没有子节点的元素
$('p:empty').html(123);
当了爹的p元素
$('p:parent').css('border','1px solid red');
has:匹配后代里面包含指定选择器的p标签
$('p:has(a)').css('border','1px solid red');
强大的属性选择器
包含title属性的div标签
$('div[title]').css('color'.'red');
title属性的值必须等于hello的
$('div[title=hello]').css('color','red');
title属性的值以h开头的
$('div[title^=h]').css('color','red');
title属性的值以o结尾的
$('div[title$=o]').css('color','red');
子选择器
选中符合大儿子身份的li
$('ul li:first-child').css('fontSize','50px');
选中符合小儿子身份的li
$('ul li:last-child').css('fontSize','50px');
nth:符合2儿子身份的
$('ul li:nth-child(2)').css('fontSize','50px');
符合独生子身份的
$('ul li:only-child').css('fontSize','50px');
表单选择器
:input选中所有的表单域:select、input、textarea、button
$(':input').length;
可以根据input的type的值选中表单元素
$('input:text').val('12345');
$('hehe:text').val('1234567');
$(':checked').length;
筛选
所有的P标签字体变大,第一个p的颜色变红
$('p').css('fontSize','30px').first().css('color','blue');
所有的P标签字体变大,最后一个p的颜色变红
$('p').css('fontSize','30px').last().css('color','blue');
下标从0开始
$('p').css('fontSize','30px').ep(2).css('color','blue');
给负数相当于倒数,倒数是从倒数第一开始数
$('p').css('fontSize','30px').ep(-1).css('color','blue');
filter():从当前集合中过滤出符合条件的
$('p').css('fontSize','30px').filter('.red').css('color','pink');
not():从当前集合中干掉符合条件的
$('p').css('fontSize','0px').not('.red').css('color','pink');
slice():下标从0开始数,包含前面的,不包含后面的
$('p').slice(2).css('color','red');
$('p').slice(2,5).css('color','red');
$('p').slice(-3,-1).css('color','red');
map的用法:只有map才可以return,each不行(循环遍历)
var ids = $('input:checked').map(function(){
return this.value;
}).get().join(',');
筛选:查找
下一个兄弟节点,不会找到文本节点
$('#red').next().next().css('color','red');
下面所有的兄弟
$('#red').nextAll('.red').css('color','red');
到最近的啥啥啥为止,不包含啥啥啥
$('#red').nextUntil('.red').css('color'.'red');
prev() 上一个兄弟
prevAll() 上面所有兄弟
prevUntil() 到最近的啥为止,不包含啥
parent() 找到document为止
parents() 找到所有的祖宗,找到html为止
prentsUntil
所有的元素儿子,没有文本节点
$('body').children();
在后代中找某个元素
$('body').find('span').html('这是jq改的内容');
找所有的兄弟元素(不包含自己)
$('#red').siblings().css('color','red');
筛选:串联
add追加一组不相关的集合
$('p').css('fontSize','30px').add('div').css('color','red');
end返回上一次被破坏的集合
$('p').css('fontSize','30px').add('div').css('color','red').end().css('border','1px solid red');
找到所有子节点,包括文本节点
contents()
属性操作
attr用的是原生的setAttribute()方法,可以自定义属性和删自定义属性
添加
$('#des').attr('title','hello');
$('#dex').attr('hehe','hello');
删除
$('p:first').removeAttr('abc');
alert($('p:first').attr('abc'));//getAttribute()方法
porp相当于是原生的点号来操作对象,无法自定义属性和删自定义属性
$('p:first').prop('hehe','hello');
$('#des').removeProp('hehe');
addclass操作css类"(通过class选择器控制css类)
// if (!$(this).hasClass('red')) {
// if (!$(this).is('.red')) {
// $(this).addClass('red');
// } else {
// $(this).removeClass('red');
// }
//轮流处理class
$(this).toggleClass('red');
alert($(this).html()); //innerHTML
// alert($(this).text()); //innerText专门拿文本的
});
获取textarea的值一定要从val()方法中获取,原生的js要用value属性
alert($('#t').val());
alert($('#t').html());
html()和text()的区别:text只能文本内容,html会获取标签
尺寸和位置
元素本身的宽高,不包括内边距、边距和外边距
$('#box').height();
$('#box').width();
包括内边距,不包含边框
$('#box').innerHeight();
$('#box').innerWidth();
常用:包括内边距、边框(相当于原生的offsetWidth)
$('#box').outerHeight();
$('#box').outerWidth();
位置:
返回的是一个对象,相当于原生的offsetTop和offsetLeft
$('#box').offset();
可读可写,相当于原生的scrollTop
获取滚出去的高度 chrome
$('body').scrollTop();
获取滚出去的高度 Firefox
$('html').scrollTop();
JQ的节点操作
1.创建节点
document.createElement('标签');//原生js创建节点
var div = $('<div></div>').html('xxx');//jq创建节点
2.内部插入
添加到最前面
$('body').append(div);
div.appendTo('body');
添加到最前面
$('body').prepend(div);
div.prependTo('body');
3.外部插入(添加兄弟)
添加到XXX的后面
$('#des').after(div);
div.insertAfter('#des');
添加到xxx的前面
$('#des').before(div);
div.insertBefore('#des');
4.包裹
穿外套
$('li').wrap('<div></div>');
$('ul li').wrapAll('<div></div>');//需要避免将所有的li都拉过来
穿裤衩
$('ul li').wrapInner('<dir></div>');
脱外套
一次只能脱一件,脱到body为止
$('#test').unwrap();
5.替换
$('#des').replaceWith(div);
div.replaceAll('#des');
$('p').replaceWith(div);
div.replaceAll('p');
6.删除
$('p').click(function(){
alert(1);
})
$('#des').remove().appendTo('body');//删除自己
$('#des').detach();//删除自己
$('#des').detach().appendTo('body');//删除自己,将元素删除之后再添加回来会保留原来的事件
$('html').empty(); //清空所有子元素
7.复制
$('#des').clone(true).appendTo('body'); //传了参数true,会带着事件一起克隆
window.onload
事件不能重复绑定,覆盖
ready事件
可以重复绑定
ready事件有简写方式
函数的定义不要写在ready事件里面
ready事件不会被覆盖:
$(document).ready(function(){
$('#box').html(123);
})
$(document).ready(function(){
alert(1);
})
简写方式:
$(function(){
$('#box').html(123);
//函数定义不要写在ready事件里面
function hehe()
{
alert(2);
}
})
window.onload = function(){
$('#box').html(123);
//覆盖前面的
window.onload = function(){
alert(1);
}
}
on和off,one
on:绑定多个事件,off:取消绑定事件
$('button').on('click mouseover mouseout',function(){
alert(2);
//传参就取消所有事件
$('button').off('mouseout mouseover');
})
one:一次性事件
$('div').one('click',function(){
alert('one');
})
事件委派
后追加的元素没有原来的事件
$('button').on('click',function(){
$('<button>123</button>').appendTo('body');
})
*事件委派:从父亲出发,给后代委派事件
$('body').on('click','button',function(){
$('<button>222</button>').appendTo('body');
})
hover和toggle
hover相当于空军效果
$('#box').hover(function(){
console.log('进去了');
},function(){
console.log('移出去');
});
toggle:轮流执行传入的回调函数
$('button').toggle(function(){
alert('1');
},function(){
alert(2);
},function(){
alert(3);
})
JQ的默认效果
show(时间,回调函数);//往上角收缩
slidDowm(2000,'easeInOutElastic');//往上收
fadeIn(1000); //淡入
hide(1000);//隐藏
fadeOut(out);//淡出
sildeToggle(1000);切换效果
fadeToggle(1000);切换效果
JQ的自定义动画:animate
$('button').click(function(){
$('#box').animate({
'width': '1000px',
'height': '80px',
'top': '500px',
'left': '200px'
},2000,function(){
$('#box').hide();
})
})
JQ的ajax的使用
$.get/post('url地址','要传的参数(可以直接传对象)',回调函数,返回的数据类型);
$get('ajax.php?id=5','name=ly',function(res){
alert(1);
})
$.post('ajax.php?id=5','name=ly&&xx=oo',function(res){
alert(typeof res);
},'json');//不用骗他,否则受伤的是自己
$.ajax()
一共6个参数
$.ajax({
url:'ajax.php?id=5';
daraType:'json',//指定返回数据的类型:xml,html,script,json,text,_default(不用骗他)
type:'get',//设置请求的类型:get(默认) post
data:'name=123&age=18',//传输的数据(有两种格式)
data:{age:8},//传输的数据
async:true,//同步异步:true 默认异步 false 同步
success:function(res){
alert(typeof res);
alert('res.id');
},error:function(a){
alert('错误提示');
}
});
对象的下标可以不加引号
var obj = {'name':'ly',age:19};
jQuery跨域请求
$.ajax({
url:'http://127.0.0.1/gz24/js12-jq03/ajax.php',
dataType:'jsonp',
jsonp:'hehe',
jsonpCallback:'text',
success:function(res){
alert(res);
},error:function(){
alert('错误提示');
}
})
load加载
$('#box').load('ajax.php');
$('button').click(function(){
$('#box').load('ajax.php');//会将小弟请求到的数据放入box的innerHTML
})
serialize序列化
$('button').click(function(){
//将表单项序列化为这种格式:id=1&name=xx
alert($('form').serialize());
})