事件流:
dom2级事件流
三个阶段:
1,捕获阶段
2,处于目标节点
3,冒泡阶段
event.prventDefaut
event.stopPropagattion
return false
2,固定导航栏
位置信息
offset().stop
scrollTop()
scroll(fn)
3,数据流
单向数据绑定data ===>view
双向数据绑定data===>view==>data
4,单双击的问题 300ms 加定时器
5,事件对象: event
event.target:目标对象 吃蛋糕的人
event.currentTarget:当前对象 this 谁动了蛋糕
6,jquery事件
click:单击事件
mouseover|mouseout 穿过被选元素或被选的子元素
mouseenter|mouseleave 只穿过被选元素
js中的oninput:实时监听input输入框的输入
watcher?
from 表单的submit事件
阻止from表单的默认行为
事件的绑定和解绑 bind 和 unbind 在解绑之后不会执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>123</div>
<button>解绑</button>
<script src="jquery.js"></script>
<script>
$(function () {
$('div').bind('click',function () {
console.log(this.innerText);
})
$('button').click(function(event) {
$('div').unbind();
});
})
</script>
</body>
</html>
事件的委托:解决事件在后输入后不能执行的情况:以下事件为解决li的后加入执行click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>alex</li>
<li>tailiang</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
// $('ul li').click(function(event) {
// Act on the event
// alert($(this).text());
// });
// 事件委托去处理
$('ul').on('click','li',function () {
// body...
alert($(this).text());
})
// bind on
// 未来发生的事情
$('ul').append('<li class="a">俊杰</li>');
})
</script>
</body>
</html>
XMLHttpRequest:流程需要记住
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id='btn'>发送ajax</button>
<script src="jquery.js"></script>
<script>
//(1)创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 0 初始化操作 之创建XMLHttpRequest对象
console.log(xhr.readyState);
// 2.状态机
xhr.onreadystatechange = function (event) {
console.log(xhr.readyState);
switch (xhr.readyState) {
case 4:
//响应数据成功
console.log(xhr.responseText);
break;
default:
// statements_def
break;
}
}
document.getElementById('btn').onclick = function () {
// 3.打开网址
xhr.open('GET','http://localhost:8800/course',true);
//4.发送请求体的数据
xhr.send();
}
</script>
</body>
</html>
jq中的aiax代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text">
<button>提交</button>
<div class="box">
<ul>
</ul>
</div>
<div>
</div>
<script src="jquery.js"></script>
<script>
/*
$.ajax({
url:'http://localhost:8800/course',
type:'get',
dataType:'json',
success:function (data) {
console.log(data);
$('body').html(data.name);
},
error:function (err) {
console.log(err)
}
});
*/
$('button').click(function(event) {
var nameVal = $('input').val();
$.ajax({
url:'http://localhost:8800/create',
type:'post',
dataType:'json',
data:{
name:nameVal
},
success:function (data) {
console.log(data);
// $('ul').empty();
data.forEach(function (item,index) {
console.log(item);
$('<li></li>').appendTo('.box ul').text(item.name);
})
},
error:function (err) {
console.log(err)
}
});
});
</script>
</body>
</html>
js中的农历日历:网上找的
$(function () {
var CalendarData=new Array(100);
var madd=new Array(12);
var tgString="甲乙丙丁戊己庚辛壬癸";
var dzString="子丑寅卯辰巳午未申酉戌亥";
var numString="一二三四五六七八九十";
var monString="正二三四五六七八九十冬腊";
var weekString="日一二三四五六";
var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪";
var cYear,cMonth,cDay,TheDate;
CalendarData = new Array(0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96,0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A,0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x2192B,0xA95,0x71695,0x6CA,0xB55,0x50AB5,0x4DA,0xA5B,0x30A57,0x52B,0x8152A,0xE95,0x6AA,0x615AA,0xAB5,0x4B6,0x414AE,0xA57,0x526,0x31D26,0xD95,0x70B55,0x56A,0x96D,0x5095D,0x4AD,0xA4D,0x41A4D,0xD25,0x81AA5,0xB54,0xB6A,0x612DA,0x95B,0x49B,0x41497,0xA4B,0xA164B, 0x6A5,0x6D4,0x615B4,0xAB6,0x957,0x5092F,0x497,0x64B, 0x30D4A,0xEA5,0x80D65,0x5AC,0xAB6,0x5126D,0x92E,0xC96,0x41A95,0xD4A,0xDA5,0x20B55,0x56A,0x7155B,0x25D,0x92D,0x5192B,0xA95,0xB4A,0x416AA,0xAD5,0x90AB5,0x4BA,0xA5B, 0x60A57,0x52B,0xA93,0x40E95);
madd[0]=0;
madd[1]=31;
madd[2]=59;
madd[3]=90;
madd[4]=120;
madd[5]=151;
madd[6]=181;
madd[7]=212;
madd[8]=243;
madd[9]=273;
madd[10]=304;
madd[11]=334;
function GetBit(m,n){
return (m>>n)&1;
}
function e2c(){
TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]);
var total,m,n,k;
var isEnd=false;
var tmp=TheDate.getYear();
if(tmp<1900){
tmp+=1900;
}
total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38;
if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) {
total++;
}
for(m=0;;m++){
k=(CalendarData[m]<0xfff)?11:12;
for(n=k;n>=0;n--){
if(total<=29+GetBit(CalendarData[m],n)){
isEnd=true; break;
}
total=total-29-GetBit(CalendarData[m],n);
}
if(isEnd) break;
}
cYear=1921 + m;
cMonth=k-n+1;
cDay=total;
if(k==12){
if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){
cMonth=1-cMonth;
}
if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){
cMonth--;
}
}
}
function GetcDateString(){
var tmp="";
// tmp+=tgString.charAt((cYear-4)%10);
// tmp+=dzString.charAt((cYear-4)%12);
// tmp+="(";
// tmp+=sx.charAt((cYear-4)%12);
// tmp+=")年 ";
if(cMonth<1){
tmp+="(闰)";
tmp+=monString.charAt(-cMonth-1);
}else{
tmp+=monString.charAt(cMonth-1);
}
tmp+="月";
tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十"));
if (cDay%10!=0||cDay==10){
tmp+=numString.charAt((cDay-1)%10);
}
return tmp;
}
function GetLunarDay(solarYear,solarMonth,solarDay){
//solarYear = solarYear<1900?(1900+solarYear):solarYear;
if(solarYear<1921 || solarYear>2020){
return "";
}else{
solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11;
e2c(solarYear,solarMonth,solarDay);
return GetcDateString();
}
}
var D=new Date();
var yy=D.getFullYear();
var mm=D.getMonth()+1;
var dd=D.getDate();
var ww=D.getDay();
var ss=parseInt(D.getTime() / 1000);
if (yy<100) yy="19"+yy;
function showCal(){
return GetLunarDay(yy,mm,dd);
}
$(".lunar-festival").text(`农历 ${showCal()}`);
});
对时间的处理
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
==========================================================================
JS获取当前时间戳的方法-JavaScript 获取当前毫秒时间戳有以下三种方法：
var timestamp =Date.parse(new Date()); 结果：1280977330000 //不推荐; 毫秒改成了000显示
var timestamp =(new Date()).valueOf(); 结果：1280977330748 //推荐;
var timestamp=new Date().getTime(); 结果：1280977330748 //推荐;
js中单独调用new Date(); 显示这种格式 Mar 31 10:10:43 UTC+0800 2012
但是用new Date() 参与计算会自动转换为从1970.1.1开始的毫秒数
--------------------------------------------------------------------------------------------------
将字符串形式的日期转换成日期对象
var strTime="2011-04-16"; //字符串日期格式
var date= new Date(Date.parse(strTime.replace(/-/g, "/"))); //转换成Data();
--------------------------------------------------------------------------------------------------
new Date() ; //参数可以为整数; 也可以为字符串; 但格式必须正确
new Date(2009,1,1); //正确
new Date("2009/1/1"); //正确
new Date("2009-1-1"); //错误
new Date( year, month, date, hrs, min, sec) 按给定的参数创建一日期对象
参数说明：
year的值为：需设定的年份-1900。例如需设定的年份是1997则year的值应为97，即1997-1900的结果。所以Date中可设定的年份最小为1900；
month的值域为0～11，0代表1月，11表代表12月；
date的值域在1～31之间；
hrs的值域在0～23之间。从午夜到次日凌晨1点间hrs=0，从中午到下午1点间hrs=12；
min和sec的值域在0～59之间。
例 Date day=new Date(11,3,4);
//day中的时间为：04-Apr-11 12:00:00 AM
另外，还可以给出不正确的参数。
例 设定时间为1910年2月30日，它将被解释成3月2日。
Date day=new Date(10,1,30,10,12,34);
System.out.println("Day's date is:"+day);
//打印结果为：Day's date is:Web Mar 02 10:13:34 GMT+08:00 1910
--------------------------------------------------------------------------------------------------
转星期
var mydate = new Date(day1.date.replace('-',',')).getDay();
var mydateone = ["日","一","二","三","四","五","六"];
for(var i=0;i<7;i++){
if(mydate == i){
mydate = mydateone[i]
}
}
XMLHttpRequest对象属性（接收并显示当前状态）
1.readySate-记录返回请求的状态
。0-为初始化：对象已经建立，单位初始化，open方法还未调用；
。1-初始化：对象已经建立，但还未调用send方法发送请求；
。2-发送数据：send方法已调用，但HTTP头未知；
。3-数据传输中：已经接受部分数据，但响应不完全；
。4-完成：数据接受完成，此时才可以获取完整的返回数据
2.responseText-接收客户端的HTTP响应的文本内容
。只读
。当readySate为1/2，responseText值是一个空字符串；
。当readyState为3，响应信息正在接受还未完成；
。当readyState为4，表示可以响应信息已经接收完成
。xmlHttp默认响应数据编码为UTF-8
3.responseXML-在send（）执行后，将返回的信息格式化为XML Document对象
。Content-Type指定的MIME类型应该为text/HTML
。如果Content-Type不包含这种类型，responseXML在接收时将会得到一个null值
4.status-在send（）执行后，可使用status读取事物状态
。长整型数据
。返回当前请求的HTTP的状态码
。只有当readyState为3或4时才使用该属性，否则读取status会发生错误
。100-客户必须继续发送请求
。200-交易成功
。400-错误请求
。403-请求不允许
。404-没有发现文件、查询、URL
。500-服务器内部错误
。502服务器暂时不可使用
。505-服务器不支持或拒绝不支持请求头中的HTTP版本
5.statusText-send（）执行后，可通过statusText读取事物状态
。返回当前HTTP请求的状态行
。只有当readyState为3或4时才可使用该属性，否则读取state会发生错误
6.Onreadystatechange-readyState发生变化时所要执行的操作
。通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理
。在事件处理函数中根据readyState的状态值进行相应的处理