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());
})
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
