1.封装ajax方法
'use strict'
// console.log('a');
/*********************封装函数************************/
// Document.prototype.getByClassName = function(className){
// var allDomArr = Array.prototype.slice.call(document.getElementsByTagName('*'),0);
// // console.log(allDomArr);
// var filterArr = [];
// function dealClassName(dom){
// var reg = /\s+/g;
// var itemArr = dom.className.replace(reg, ' ').trim().split(' ');
// return itemArr;
// }
// allDomArr.forEach(function (ele, index) {
// var itemArr = dealClassName(ele);
// for(var i = 0; i < itemArr.length; i++) {
// if(className == itemArr[i]){
// filterArr.push(ele);
// break;
// }
// }
// })
// return filterArr;
// }
// console.log(document.getByClassName('demo'));
/********************ajax****************/
// form:
// method: get, post
// action: 服务器地址
// enctype: application/x-www-form-urlencoded(默认值)(表示文件发送前编码成字符格式)multipart/form-data(把文件变成文件上传表单)
// ajax技术能局部获取数据，还不刷新页面、且异步获取数据
// new XMLHttpRequest()可以创建ajax对象但IE不认识
// newa ActiveXObject('Microsoft.XMLHTTP')主流浏览器创建ajax文档
/*****************兼容性写法**************************/
// 流程：
// 1.手机/电脑
// 2.app
// 3.商家 商品 地址
// 4.提交订单 交钱
// 5.监控 物流信息
// 6.拿到餐 处理掉
// 1.浏览器
// 2.Ajax对象
// 3.open('GEt', 'URL'，'true');
// 4.send('data');
// 5.onreadystatechange readyState==4//readyState有四个值（0：:未初始化，1：读取中， 2：:已读取， 3：交互中， 4：:完成status =（404 ： 文件没找到，用户端错误，200：成功， 500 ：服务器内部错误， 303 : 服务器错误
// 6.callback
// var xml = null;
// if(window.XMLHttpRequest{
// xml = new XMLHttpRequest();
// }else{
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// xml.open('GET', 'getNews.php', true);
// xml.send();
// xml.onreadystatechange = function(){
// if(xml.readyState == 4){
// if(xml.status == 200){
// console.log('3333');
// }
// }
// }
function Ajax(method, url, flag, data, callback){
var app = null;
if(window.XMLHttpRequest){
app = new window.XMLHttpRequest();
}else{
app = new window.ActiveXObject('Microsoft.XMLHTTP');
}
method = method.toUpperCase();
if(method === 'GET'){
app.open(method, url + '?' + data, flag);
app.send();
}else if (method === 'POST'){
app.open(method, url, flag);
app.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
app.send(data);
}
app.onreadystatechange = function(){
if(app.readyState === 4){
if(app.status === 200){
callback(app.responseText);
}else{
alert('error');
}
}
}
}
/*************************************************/
// var aaa = 'username=aimee&age=18';
// function ajax(method, url, flag, data, callback) {
// var xml = null;
// if(window.XMLHttpRequest){
// xml = new XMLHttpRequest();
// }else {
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// if(method == 'GET') {
// xml.open(method, url + '?' + data, flag);
// xml.send();
// }else if(method == 'POST') {
// xml.open(method, url, flag);
// xml.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// xml.send(data);
// }
// xml.onreadystatechange = function () {
// if(xml.readyState == 4) {
// if(xml.status == 200) {
// callback(xml.responseText);
// }
// }
// }
// }
// function showData(data) {
// console.log(data)
// }
// function alertData(data) {
// alert(data);
// }
// ajax('GET', 'post.php', true, aaa, alertData);
2.js时间线
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--<script type="text/javascript" src="js-timeline-717.js" defer>
开启异步加载外部文件
像名是defer值是defer的属性我们可以缩写
加载完成之后拿回来先不执行，
1.直到dom文档解析完成之后（是指domtree解析完成）
2.它只有IE能用
3.它里面也可以写东西，在引入外部文件的情况下(ie6之前)
</script>-->
<!-- // <script type="text/javascript" src="js-timeline-717.js" async>
开启异步加载外部文件
1.它什么时候加载完成，什么时候执行
2.它是主流浏览器所采用的，也是w3c标准所用的
3.它里面不能写脚本
</script> -->
<!-- 以上两个都不阻塞页面 ，但不适合做兼容性写法，因此这两个都不用-->
</head>
<body>
<!-- dom tree css tree
dom css结合形成
rander tree(渲染树)
-->
<!-- <img src="" alt=""> 先把标签塞到dom 树，然后异步加载图片-->
<!-- 实现按需加载-->
<style type="text/css">
.div{
display: inline-block;
width: 60px;
height: 30px;
border-top:0px;
border-bottom:solid 1px black;
border-left:0px;
border-right:solid 1px black;
}
</style>
<div class="div"align='center'style=""valign="top">name</div>
<script>
var obj = {
'number': '序号',
'teamname': '队名',
'name':'姓名'
}
oDiv = getElementsByTagName('div');
console.log(odiv.value);
// obj1 = new object(){
// }
// var oBtn = document.getElementsByTagName('button')[0];
// oBtn.onclick = function(){
// var oScript = document.createElement('script');
// oScript.src="js-timeline-717.js";
// document.body.appendChild(oScript);
// }
// var oBtn = document.getElementsByTagName('button')[0];
// oBtn.onclick = function(){
// canLoad();
// }
// function canLoad(){
// var oScript = document.createElement('script');
// oScript.src="js-timeline-717.js";
// document.body.appendChild(oScript);
// setInterval(function(){
// test();
// },(1000))
// }
// canLoad();
// function canLoad(url,callback){ //异步加载封装函数
// var oScript = document.createElement('script');
// oScript.src=url;
// if(oScript.readyState){
// oScript.onreadystatechange = function(){
// oScript.onreadystatechange = null;
// if(oScript.readyState == "complete"||oScript.readyState == 'loaded'){
// obj[callback]();
// }
// }
// }else{
// oScript.onload = function(){ //IE没有onload，但IE有readystate ： loading complete||loaded
// oScript.onload = null;
// obj[callback]();
// }
// }
// document.body.appendChild(oScript);
// }
// canLoad('js-timeline-717.js','test');
// js加载时间线，目的提高页面加载效率
// 给他一个监听
// document.onreadystatechange = function(){
// console.log(document.readyState)
// }
// document.addEventListener('DOMContentLoaded',function(){
// console.log('DOMContentLoaded');
// })
</script>
</body>
</html>
//js代码
'use strict'
// // console.log('a');
// // Json是一种数据格式,属性名必须用双引号
// var obj = {"name" : "byron","age" :18};
// //这种格式是为了规范标准前后端
// // 数据包以字符串或者数字传送
// // ajax async javascript and xml 用javascript异步的获取数据格式
// var obj = {"name" : "byron","age" :18};
// console.log(JSON.stringify(obj));//把对象封装成字符串
// var obj = '{"name" : "byron","age" :18}';
// console.log(JSON.parse(obj));//把字符串还原为对象
// 异步加载js
var obj = {
test:function(){
console.log('js-timeline-717.js')
}
}
'use strict'
// console.log('a');
// BOM: Browser Object Model
//window对象
// 集合
// iframe也可以引用窗口
// 方法
// alert()
// clearInterval()
// clearTimeout()
// open(URL/name/features/replace)
// close()
// confirm()//给出弹窗，返回布尔值
// print()//打印页面
// prompt()//显示可提示用户输入的对话框
// resizeTo(width,heigh)//用于设置宽高
// scrollBy()
// scrollTo()
// 属性
// closed
// function scrollWindow()
// {
// window.scrollTo(1000,500)
// }
// navigator
// history
// location :hash host herf pathname port protocol search
// Doctype渲染模式
// lable
// 标签上面天生就有的叫特性，没有的叫做属性
// setAttribute('key', 'value')；可以强制给标签加属性
// 图片预加载
// var oImg = new Image();
// oImg.src = 'xxx.jpg';
// oImg.onLoad = function(){
// document.body.appendChild(oImg);
// }
// 图片懒加载：需要才加载
// Math.random();生成一个[0，1）的随机数
// var oUl = document.getElementsByTagName('ul')[0];
// for(var i = 0; i < 1000; i++){
// var oLi = document.createElement('li');
// oUl.appendChild(oLi);
// }
// console.log('a');
var oUl = document.getElementsByTagName('ul')[0];
var oFrag = document.createDocumentFragment();//创建文档碎片
for(var i = 0; i < 1000; i++){
// debugger;//可以这样设置断点找错误，也可以在浏览器里面设置断点
var oLi = document.createElement('li');
oFrag.appendChild(oLi);//用文档碎片先装li
}
oUl.appendChild(oFrag);//将文档碎片插ul中
// cdn缓存服务器，解决网络拥塞问题，它可以实现浏览器的缓存
3.前端基础（h,p,ul,ol,li,img,)
<!-- <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>This is paragraph</p>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<strong>
<em>斜体</em>
</strong>
<del>188</del>
<div style="width:100px;height:100px"></div>
html编码
   1 空格
<>
a<br>换行b
有序列表
大家喜欢的marvel英雄
orderlist
<ol type="a" reversed="reverded"start="5">
<li>精钢狼</li>
<li> 变形精钢 </li>
<li> 美国队长 </li>
<li> 23 </li>
square
disc
</ol>
<ul type="circle">
<li>精钢狼</li>
<li> 变形精钢 </li>
<li> 美国队长 </li>
<li> 用于功能子项的编写 </li>
list item
</ul>
注释的作用：1.备注 2.调错
快捷键ctri+?
<img src="网址" alt="这是xx" title="">
1.网上的url
2.相对地址 (在同一文件夹下，可以略写)
3.绝度地址（全写）
alt 图片占位符
title 图片提示符
<!-- 英语趣配音 英语流利说 -->
<!-- <a href="" target="-">www.baidu.com</a>超文本引用 -->
<!-- 1.超级链接 a的缩写anchor
2.锚点
3.发邮件/打电话
4.协议限定符-->
<!-- <div id="one">爱心</div>
<br>
<a href="#one">123</a>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
div+css
</body>
</html> --> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul>li{
float: left;
margin: 0 8px;
padding: 0 5px;
font-weight:bold;
font-size: 14px;
height: 26px;
line-height: 26px;
color: #f40;
}
ul>li:hover{
background-color: #f40;
color: #fff;
border-radius: 15px;
}
</style>
</head>
<body>
<!-- <div style="width:100px;height:100px;background-color:yellow;">a 2<3>1</div>
-->
<!-- <ul type="square" >
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul> -->
<!-- /*<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul>li{
float: left;
margin: 0 8px;
font-weight:bold;
font-size: 14px;
height: 26px;
line-height: 26px;
color: #f40;
}
</style>*/ -->
<!--
a<br>b换行 -->
<!-- <img src="F:\相册\thumb\IMG_20160916_095010.jpg.JPG" alt="这是湖面" title="湖面"> -->
<!-- <a href="http://www.baidu.com " target="_blank">www.baidu.com</a> -->
<a href="javascript:while(true){alert('你想多了吧')}">高清美图</a>
</body>
</html>
4.前端基础(css选择器,权重,select,form)
/*span{
width:100px;
height:100px;
background-color: yellow;
}
#only {width:200px;
height:200px;
background-color: red;
}*/
div.demo{
display: inline-block;
background-color: red;
background-image: url("C:\Users\BYRON\Desktop\成绩单.png");
}
/*s*/
/*div{
width:100px;
height:100px;
background-color:yellow;
}*/
/*span{
width:100px;
}*/
/* *{
background-color:black;
width:400px;
height:400px;
}*/
#only{
width:250px;
height:250px;
background-color:blue;
}
/*优先级:*+!important>行间样式>id>class>标签>通配符
但id与class不能叠加
div里层层递减
一个人可以对应几个class--.*/
/* 权重：
*——0
tag——1
class——10
id——100
行间——1000
！important——无限大*/
/*西部世界
黑镜*/
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- <form method="get" action="地址">
<!--组件 数据名 数据值 -->
<!-- <p>账户：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<input type="submit">
1.苹果<input type="radio" name="fruit" value="苹果"> --><!-- 单选框 --><!-- name值相同 --><!-- checkbox复选框 -->
<!-- 2.西游<input type="radio" name="fruit" >
3.茄子<input type="radio" name="fruit">
<input type="submit">
<h1>chose your sex</h1>
<p>female:<input type="radio" name="sex" value="female"checked="checked"></p>
<p> male:<input type="radio" name="sex" value="male"></p>
<input type="submit"value="登录">
<input type="text" name="username" style="color:#999" value="请输入关键字" onfocus="if(this.value==''){this.value='请输入关键字'；this.style.color='#424242'}" onblur="if(this.value==''）{this.value='请输入关键字'">
<h1>PROVINCE</h1>
<select name="province">
<option>黑龙江</option>
<option>吉林</option>
<option>辽宁</option
</select>
</form> -->
<!-- css的引入 -->
<!-- 1.行间样式 -->
<!-- 2.页面级css -->
<!-- 3.外部css文件 -->
<!-- 4.@import -->
<!-- 1.id选择器 -->
<!-- 2.class选择器 -->
<!-- 3.标签选择器 -->
<!-- 4.通配符选择器 -->
<div id="only">123</div>
<!-- <div id="only1">234</div>
darryRing -->
<div class="demo">123</div>
<!-- 1.优先级
2.标签分类 -->
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<form method="get" action="">
<p>
username:<input type="text" name="username" style="color:#999" onfocus="if(this.value=='请输入关键字'){this.value=''; this.style.color='#424242';}"onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#999'}"value="请输入关键字">
</p>
<p>
password:<input type="password" name="password">
</p>
<h6>choose your city!!!</h6>
<select name="province">
<option value="bei">北</option>
<option value="shang">上</option>
<option value="guang">广</option>
<option value="sheng">深</option>
</select>
<input type="submit" value="提交">
</form>
<!-- 1.行间引入
<div style="width:100px;height:100px;background-color:red;">123456789</div> -->
<!-- 2.页面级css
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div>5616</div> -->
<!-- 3.外部引入
<link rel="stylesheet" type="text/css" href="lesson3.css">-->
<!-- 选择器
1.id
2.class
3.标签
4.通配符*
5.父子/派生
直接子元素
css88参考手册
例子：
<div id="only"class="only1">
<span>159753</span>
</div>
<div class="only1">
<span>159753</span>
</div>-->
</body>
</html>
5.前端基础(其余所有标签)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson4.css">
</head>
<body>
<div>123</div>
<span>123s</span>
<div>叫你撒看</div>
<!-- <div>块级元素：
1.可以设置宽和高
2.独自占据一行
div p ol li ul form address
行级元素：
1.不能设置宽和高
2.根据自身内容决定占据空间大小
块级元素列表:
<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为
<fieldset>元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体（正文）
<td>表格中的标准单元格
<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行
行级块元素
1.可以设置宽高
2.根据自身内容决定占据空间大小
img input
行内元素列表:
<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为
<input> 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量
盒模型
</div> -->
</body>
</html>
6.前端基础(position定位,bfc,文档流)
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="lesson5.css">
</head>
<body>
<!--
bfc
标准文档流布局
层模型
position:absolution;
1.被抽离更高的层面上了，后面元素看不到
2.他以最近离他有定位的父级进行定位，如果没有以浏览器边框为坐标轴定位
3.Z-index提层
相对定位
position:relative;
固定定位 position:fixed;
1.脱离原来位置进行定位
2.一浏览器边框进行定位
经典布局：三列布局
-->
<div class="q">
<div class="w">djfk</div>
</div>
</body>
</html>
7.javascript基础语法
// var a=123;
// document.write(a);
// var num=1&&2;
// 1<2&&document.write('举案说法你看得见')
// var score = parseInt( window.prompt('input'));
// if(score>90&&score<=100){
// document.write('alibaba');
// }
// if(score>80&&score<=90){
// document.write('tencent')
// }
// if(score>70&&score<=80){
// document.write('新浪')
// }
// if(score>60&&score<=70){
// document.write('蘑菇街')
// }
// if(score<=60){
// document.write('shit!!!');
// }
// 比较三个数的大小：
// var a = parseInt(window.prompt('input'));
// var b = parseInt(window.prompt('input'));
// var c = parseInt(window.prompt('input'));
// if(a>b) {
// if(a>c){
// document.write(a);
// }else{
// document.write(c);
// }
// }else{
// if(b>c){
// document.write(b);
// }else{
// document.write(c);
// }
// }
// var count=0;
// for(var i=0;i<10;i++){
// count+=i;
// }
// document.write(count);
// for(i=0;i<100;i++){
// document.write(i+' ')
// }
// var i=100;
// for(;i--;){
// document.write(i+" ")
// }
// for(var i=0;i<100;i++){
// if(i%2!=0&&i%3!=0){
// document.write(i+" ")
// }
// }
// var count=0;
// for(var i=0;i<1000;i++){
// count+=i;
// if(count>=200){
// document.write(i);
// i=2000;
// }
// }
// never-ending loop(无限死循环)
// 作业
// 1.计算2的n次幂，n可输入，n为自然数。
// var num = parseInt(window.prompt('input'));
// var mi=1;
// if(num>0){
// for(var i=1;i<=num;i++){
// count*=2;
// }
// document.write(count)
// }else {
// document.write('1');
// }
// 2.计算n的阶乘，n可输入
// var num = parseInt(window.prompt('input'));
// var jiecheng=1;
// if(num>0){
// for(var i=1;i<=num;i++){
// jiecheng*=i;
// }
// document.write(jiecheng)
// }else {
// document.write('1');
// }
// 3.著名的斐波那契额数列
// var n = parseInt(window.prompt('input'));
// var f1=1;
// var f2=1;
// var temp=1;
// for (var i=3;i<=n+1;i++){
// var temp = f2;
// f2 = f1 + f2;
// f1 = temp;
// }
// document.write(temp);
// 1 1 2 3 5 8 13 21
// var n = prompt("请输入数字n")
// var num1 = 1;
// var num2 = 1;
// for(var i = 3; i <= n; i++) {
// var temp = num2;
// num2 = num1 + num2;
// num1 = temp;
// }
// alert(num2);
// 4.编写一个程序，输入一个三位数的正整数，输出时反向输出
// var num = parseInt(window.prompt('input'));
// var b=num%1000;
// var s=num%100;
// var g=num%10;
// document.write(g*100+(s-g)+(b-s)/100);
// 5.输入a,b,c三个数字，打印出最大的。
// var a = parseInt(window.prompt('input'));
// var b = parseInt(window.prompt('input'));
// var c = parseInt(window.prompt('input'));
// if(a>b) {
// if(a>c){
// document.write(a);
// }else{
// document.write(c);
// }
// }else{
// if(b>c){
// document.write(b);
// }else{
// document.write(c);
// }
// }
// 6.打印出100以内的质数
// var count=0;
// for( var i=1;i<=100;i++){
// for( var j = 0 ;j<=i;j++){
// if(i%j==0){
// count++;
// }
// }
// if(count==2){
// document.write(i+" ");
// }
// count=0;
// }
// var count=0;
// for( var i=2;i<=100;i++){
// for( var j = 1 ;j<=Math.sqrt(i);j++){
// if(i%j==0){
// count++;
// }
// }
// if(count==1){
// document.write(i+" ");
// }
// count=0;
// }
<!-- 块级元素可以放块级元素
p子元素不能放div -->
<!-- ASCII
65 A 66 B
97 a 98 b
'2'>'10'
unfined=null!=0;
逻辑词：
$$规则：
1.先判断第一个表达式的运算结果，然后往后看
2.如果第一位运算结果为假，则返回第一位结果。
实例：
1.用在if语句
2.用作短路语句
||规则：
找到真为止
实例：
1.if
2.后续要用到e在，在IE浏览器中e没有值，在google chrome下有值，用于浏览器的兼容性
!
1.把后面的值先转换成布尔值，然后取反
2.！！把字符串转换成布尔值
if语句：if(条件成立){执行的代码}else{不成立执行的代码};
for循环执行顺序
8.javascript数据类型
// var s=4;
// document.write(s);
// 课堂记录
// switch (){
// case 1:
// document.write();
// break;
// case 2:
// document.write();
// break;
// default:
// document.write(error);
// }
// 不受值类型约束
// break用于跳出循环语句
// continue结束本次循环
// 数组 对象
// var a="01010101";
// var b=Number(null);
// document.write(b);
// var c = parseInt("a" , 2);
// var d = c.toString(16);
// document.write(d);
// for(var i=0;i<10;i++){
// if(i%5==0){
// continue;
// }
// document.write(i);
// }
// var arr=[1,2,3,4,5];
// document.write(arr);
// document.write(arr.length);
// var obj={
// lastname : 'deng',
// age : 50,
// sex : "undefined",
// wife : { lastname : "xiaobao"}
// }
// obj.lastname="xiaoddeng";
// var num=NaN;
// document.write(typeof(num));
// var num=parseInt('1234a');
// console.log(num);
// 作业：
// var num=10101010;
// console.log(alert(typeof(num)));
// console.log(alert(typeof(undefined)));
// console.log(alert(typeof(NaN)));
// alert(typeof(null));object
// var a="123abc"
// alert(typeof(+a));number
// alert(typeof(!!a));boolean
// alert(typeof(a+''));toString
// alert(1=='1');true
// alert(NaN==NaN);false
// alert(NaN==undefined);false
// alert(11=='11');true
// alert(1==='1');false
// alert(parseInt("123abc"));123
// var num = 123123.345789;
// alert(num.toFixed(3));123123.346;
// alert(typeof(typeof(a)));String
9.javascript函数,预编译
// function bar(){
// return foo;
// foo=10;
// function foo(){}
// var foo=11;
// }
// console.log(bar());
// console.log(bar());
// function bar(){
// foo = 10;
// function foo(){}
// var foo = 11;
// return foo;
// }
// function fn(a){
// var a=123;
// function a(){}
// var b = function (){}
// function d () {}
// }
// fn(1);
//第一二步
//var AO = {
// a : undefined,
// b : undefined
// }
// 第三步
//var AO = {
// a : 1,
// b : undefined
// }
// 第四步
//var AO = {
// a : function a () {},
// b : undefined，
// d : function d () {}
// }
// 5.1lesson9
// 预编译
// 在执行前，形成ao对象
// Ao{
// }
// 找形参和变量声明
// a : undefind,
// b : undefind,
// 执行期上下文
// 作用域解释
// 闭包
// 累加器
// function demo(){
// var count = 0;
// function a(){
// count ++;
// console.log(count);
// }
// return a;
// }
// var add = demo();
// add();
// add();
// add();
// add();
// function eater () {
// var food = "";
// var obj = {
// eat : function(){
// if(food){
// console.log('I am eating ' + food);
// food = "";
// }else{
// console.log("empty")
// }
// },
// pushFood : function (myFood){
// food = myFood;
// }
// }
// return obj;
// }
// var eater1 = eater();
// eater1.pushFood('apple');
// eater1.eat();
// eater1.eat();
// 立即执行函数：
// （特点：执行完就再也找不到了,有初始化的作用）
// var num = (function b (a,b){
// console.log('a');
// return a + b
// }(1,2));
// num=3
// 能被执行的一定是表达式
// 函数只能被定义或者被执行，但只能实现一个
// 前面加一元正负运算符（除*/外）
// (function (){
// console.log('a');
// }())
//w3c提倡的形式
// function test (){
// var arr =[];
// for (var i = 0; i < 10; i ++){
// arr[i] = function(){
// console.log(i);
// }
// }
// return arr
// }
// var myArr = test();
// for (var j = 0; j < 10; j ++){
// myArr[j]();
// }
// function test (){
// var arr =[];
// for (var i = 0; i < 10; i ++){
// (function (j){
// arr[j] = function(){
// console.log(j);
// }
// }(i));
// }
// return arr
// }
// var myArr = test();
// for (var j = 0; j < 10; j ++){
// myArr[j]();
// }
10.对象，及增删改查
// 对象
// var mrDeng = {
// lastName : "Deng",
// firstName : "baobao",
// age : 36,
// sex : "male",
// health : undefined,
// wife : {
// name : "xiaoliu"
// },
// card : ['visa','master','unionpay'],
// girlfriend :{
// name : 'xiaowang'
// },
// smoke : function(){
// console.log('I am smoking, cool!~~~');
// }
// }
// 增，删，改，查
// 对象的创建方法
// 1.对象字面量/对象直接量 plain Object
// var obj = {
// }
// 2.构造函数 （1.系统自带2.人工自定义）
// var obj = new Object();
// Date ();
// function Car(color){
// 隐式创建 var this = {}
// this.color = color;
// this.heigth = 1400;
// this.lang = 4950;
// this.width = 1900;
// this.wheel = 4;
// this.health = 100;
// this.run = function(){
// this.health --;
// return this;
// }
// }
// var car = new Car('red');
// var car1 = new Car('green');
// function Student(name,sex, age){
// this.name = name;
// this.sex = sex;
// this,age = age;
// this.school = 'duyi';
// this.grade = '9qi';
// this.teacher = 'prof.ji';
// }
// 小驼峰式/大驼峰式（命名方法）
// 1.用new就会隐式创建 var this = {}
// 2.封装
// 3.后面会返回this
// 包装类 ：目的为了不报错
// 原始值 没属性和方法(原始值不可更改)
// 引用值
// var str = 'abcd';
// //new String('abcd').length -->4
// str.length;
// //delete
// 只有表达式能执行
// 当一个表达式被执行之后，它就会失去对原有函数的引用
// 解释，动态 pathy脚本类语言
// 每次执行完，就会消失
// 作业
// 1.
// a = 100;
// function demo(e) {
// function e() {}
// arguments[0] = 2;
// document.write(e + " ");
// if(a) {
// var b = 123;
// function c() {
// // 猪都能做出来
// }
// }
// var c;
// a = 10;
// var a;
// document.write(b + " ");
// f = 123;
// document.write(c + " ");
// document.write(a + " ");
// }
// var a;
// demo(1);
// document.write(a + " ");
// document.write(f + " ");
// 2.
// var str = false + 1;
// document.write(str);
// var demo = false == 1;
// document.write(demo);
// if(typeof(a)&&-true + (+undefined) + ""){
// document.write('基础扎实');
// }
// if(11 + "11" * 2 == 33) {
// document.write('基础扎实');
// }
// !!" " + !!"" - !!false||document.write('你觉得能打印，你就是猪');
// lesson12
// 大样本随机对照双盲测试
// 对象 object 让存储更清晰，更直白
// 存放方法和属性
// 可以执行的操作增删改查
// var mrDeng = {
// name : "deng",
// age : 35,
// sex : "male",
// son : "xiaodeng",
// wife : {name : 'nvwang'},
// MyName : function() {
// console.log('we are human!');
// }
// }
// delete mrDeng.age
// plainobject 对象字面量/对象直接量
// 构造函数 工厂
// var obj = new object();
// 自定义构造函数（大驼峰式）
// function Person() {}
// var person = new Person();
// 可以通过传递参数改变
// 系统内部原理
// 原始值不能有属性不能有方法
// 包装类
// 当访问值时系统会构造一个对象然后销毁
// String 有长度
// function Person(name, age, sex){
// this.name
// }
// 改变this指向，参数列表不同
11.继承(圣杯模式)
// 圣杯模式：
// 第一种
// var inherit = (function () {
// var F = function () {};
// return function (Origin, target){
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
// }())
// 第二种
// function inherit(Origin,Target){
// function F(){};
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
12.函数原型、原型链
// 原型
// Person.prototype = {
// abc = 123
// }
// 这个属性天然就有
// 对象 有属 性，有方法
// 一切皆对象5
// 原型定义 ：原型是function对象的一个属性
// ，它定义了构造函数制造出的对象的公共祖先。
// 通过该构造函数产生的对象，可以继承该原型的属性和方法。
// 原型也是对象
// 增
// 改 不能通过改变自己而改变原型
// 但可以通过改变原型改变儿子的属性
// 删 .detele
// 查
// Person.prototype.abc = '123';
// function Person(){
// this.name = 'laodeng';
// this.sex = 'male'
// }
// var person = new Person();
// var person1 = new Person();
// Person.prototype.LastName = 'yinxuan';
// Person.prototype.sex = 'female';
// 优点1：可以利用原型特点和概念，提取共有属性
// 优化前
// function Car(color){
// this.height = 1400;
// this.width = 1900;
// this.length = 4900;
// this.color = color;
// this.name = "BMW";
// }
// var car = new Car('red');
// var car1 = new Car('green');
// 代码重复较多，效率较低
// 优化后
// Car.prototype.height = 1400;
// Car.prototype.width = 1900;
// Car.prototype.length = 4900;
// Car.prototype.name = "BMW";
// function Car(color){
// //var this = {
// // __proto__ : Car.prototype
// //}
// this.color = color;
// }
// var car = new Car('red');
// var car1 = new Car('green');
// Person.prototype.lastName = "Cong";
// function Person(){
// }
// var person = new Person();
// var obj = {
// lastName : "Luo"
// }
// 4.constructor 建筑物 构造器
// var person2 = new person.constructor();
// 原型链
//一个对象查看一个属性，如果这个对象上面没有这个
//属性，那么系统就会沿着这个对象的————proto————去继续找这个属性，
//而且，基本每个对象都有————proto————
// 原型上面可以有原型
// Grand.prototype.lastName = "Ji";
// function Grand(){
// }
// var grand = new Grand();
// Father. prototype = grand;
// function Father(){
// }
// function Person(){
// }
// var person = new Person();
// var father = new Father();
// Son.prototype = fatrer;
// 绝大多数对象都继承自object.prototype
// javascript 里面绝大多数对象都继承自object.prototype
// var demo = {
// name : '123'
// }
// var obj = Object.create(null);
// document.write(demo.toString());
// obj.toString = function(){
// return "他可以有toString属性"
// }
// document.write(obj);
// document.write(123);
// document.write({});
// document.write([1,3,5,3,6]);
// document.write("abc");
// Object.prototype.toString.call(123);
// 目的把数字文本化展现出来
// 做题 （用友笔试题）
// display : none;别展示出来，能让元素彻底隐藏
// visibility : false; 含蓄的隐藏
// a标签里面不能包含a标签
// div里面不能包含p标签
// parseInt用于截断字符串中的非数字部分
// 引用值比的是地址
13.this
// document.write(123);
// function Person(){
// this.name = 'peter';
// this.age = 23;
// }
// var person = new Person();
// var obj = {
// sex : "female"
// }
// Person.call(obj);//call 改变了this的指向
// function Person(name, age){
// this.name = name;
// this.age = age;
// }
// var person = new Person();
// var obj = {
// sex : "female"
// }
// Person.call(obj, 'Byron', 22);
//用途:改变this指向，传参列表不同
// function Person(name, age, sex){
// this.name = name;
// this.age = age;
// this.sex = sex;
// }
// function Student(name, age, sex, grade, teacher){
// Person.call(this, name, age, sex);
// this.grade = grade;
// this.teacher = teacher;
// }
// var student = new Student('Byron', 20, 'male', 100, 'Ji');
//apply的用法和call类似，不过它里面只能传除this之外的一个参数，
//所以如果要传多个参数时，可以采用数组的方法
//上面的这个等价于下面
// function Person(name, age, sex){
// this.name = name;
// this.age = age;
// this.sex = sex;
// }
// function Student(name, age, sex, grade, teacher){
// Person.apply(this, [name, age, sex]);
// this.grade = grade;
// this.teacher = teacher;
// }
// var student = new Student('Byron', 20, 'male', 100, 'Ji');
// 共享原型
// Person.prototype.lastName = "Byron";
// function Person(){
// }
// Son.prototype = Person.prototype
// function Son(){
// }
// var son = new Son();
//A构造函数， 想继承， B构造函数的原型
//共享原型的方式
// function inherit(Origin, Target){
// Target.prototype = Origin.prototype;
// }
// Person.prototype.lastName = 'Byron';
// function Person(){
// }
// function Son(){
// }
// // 圣杯模式
//1.
// function inherit(Origin, Target){
// function F(){};
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
// inherit(Person, Son);
//2.雅虎YUI3
// var inherit = (function(){
// var F = function () {};
// return function(Origin, Target){
// F.prototype = Origin.prototype;
// Target.prototype = new F();
// Target.prototype.constructor = Target;
// Target.prototype.uber = Origin.prototype;
// }
// }())
// 闭包的作用私有化变量
// 14.第二小节
// 命名空间，管理变量,避免变量污染，适用于模块开发
// var org{
// department1 : {
// jicheng : {
// timer : 12;
// speed : 123;
// }
// },
// department2 : {
// }
// }
// var Jicheng = org.department1.jicheng
// Jicheng.timer
// 操作属性，属性名拼接，不能用点
// 枚举，遍历(专门为对象)
// for in （对人工定义的原型没有删选能力）
// hasOwnProperty(用来删选自己原型上的东西，过滤方法)常与for in 连用
// ...（属性）in...（对象） 用来判断 前面属性是后面对象上的
// ...(A)instanceof...(B) 看A是否是由B构造出来的{a的原型链是否有B的原型}
14.递归，克隆，
// document.write('hello world!!!');
// var a = 123;
// RS coin
// 比特币
// 作业type
// this
// 1.函数预编译过程中this-->window
// function test(){
// console.log(arguments);
// }
// test();
// 2.在全局作用域中this-->window
// 3.call/apply可以改变this的指向
// 4.谁调用函数，this就指向谁
// 递归
// function fn(n){
// if(n == 1){
// return 1;
// }
// return n * fn(n - 1);
// }
// fn(10);
// arguements.callee代表自身的引用
// var num = (function (n){
// if (n == 1){
// return 1;
// }
// return n * arguments.callee(n - 1);
// }(10))
// function test(){
// console.log(arguments.callee);
// }
// test();
// caller执行本函数的环境的应用
// function test(){
// demo();
// }
// function demo(){
// console.log(demo.caller);
// }
// test();
// 克隆 完全相同
// 找到一个对象里面里的所有属性，
// 1.判断是否是引用值typeof（） object boolean undefined number function string
// 2.查看 for in拆分
// 3.查看具体的类型 （区别一个对象是数组还是对象三种方法1.Object.prototype.toString 2.constructor构造器3.instanceof(判断前后的原型链是否相同)分别判断类型）
// 4.Object.prototype.toString constructor instanceof(判断前后的类型是否相同)分别判断类型
// function deepClone(origin,target){
// var tostr = Object.prototype.toString,
// compare = '[object Array]';
// for (var prop in origin){
// }
// }
// 方法一（存在问题，引用值不独立）
// function clone(origin,target){
// for(var prop in origin){
// if(origin.hasOwnProperty(prop)){//origin.hasOwnProperty(prop)对属性的判断，是不是自己的属性,而不是原型链上的东西
// target[prop]=origin[prop];
// }
// }
// }
// var obj = {
// name : "abc",
// age : 100,
// sex : "female",
// card : ['visa','daad','dada','deas']
// }
// var demo = {
// }
// // clone(obj,demo);
// // 方法二
// function deepClone(origin,target){
// var toStr = Object.prototype.toString,
// compare = '[object,Array]';
// for (var prop in origin){
// if(origin.hasOwnProperty(prop)){
// //判断每一个属性，是否是原始值
// if(typeof(origin[prop]) == 'object'){
// if(toStr.call(origin[prop]) == compare){
// target[prop] = [];
// }else{
// target[prop] = {};
// }
// deepClone(origin[prop], target[prop])
// }else{
// target[prop] = origin[prop];
// }
// }
// }
// }
// 三目运算符 2 > 1 ? 1 : 0 简化版的if，关注运算结果
// function deepClone(origin,target){
// var toStr = Object.prototype.toString,
// compare = '[object,Array]';
// for (var prop in origin){
// if(origin.hasOwnProperty(prop)){
// //判断每一个属性，是否是原始值
// if(typeof(origin[prop]) == 'object'){
// target[prop] = (toStr.call(origin[prop]) == compare) ? [] : {};
// deepClone(origin[prop], target[prop])
// }else{
// target[prop] = origin[prop];
// }
// }
// }
// }
15.数组
// 数组 定义两种方法 1.var arr = []; 2.var arr = new Array(20)
//var arr = [20] != var arr = new Array[20]
// 如果里面没有数组不报错 只会为undefined
// 稀松数值 var arr = [1, 2, , , 3, 6]
// var arr = [1, 2, 3];
// 数组的读写
// 改变原数组的数组方法
// push在尾部加东西
//（追加的小知识点
// Person.prototype = {
// name : "proto",
// callName : function (){
// console.log(this.name);
// }
// }
// function Person(name){
// this.name = name;
// }
// var person = new Person('Jack');
// person.callName();
// var arr = [2, 4, 1, 6, 25, 3, 6, 2, 0]
// Array.prototype.push = function(){
// // this.[this.length] = target;
// for(var i = 0; i < arguments.length; i ++){
// this[this.length] = arguments[i];
// }
// }
// arr.push(4);
// document.write(arr);
// pop从后往前依次剪切（类似于栈操作first in last out）
// shift依次从头往出拿走
// unshift从头往里面加东西
// reversre倒叙
// splice(从第几位切，切多少长度，往切口插数)切片
// sort 排序（按ascall码大小）
// 当function 返回值为负数时，那么两相比较的数，前面的数在前
// 当function 返回值为正数时，那么两相比较的数，后面的数在前
// arr.sort(function(a, b){
// if(a > b){
// return-1;
// }else{
// return 1;
// }
// return a-b;
// a-b升序
// b-a降序
// });
// var deng = {
// name : "deng",
// sex : "male",
// age : 45
// }
// var cheng = {
// name : "st",
// sex : "male",
// age : 21
// }
// var sitong = {
// name : "charlie",
// sex : "male",
// age : 31
// }
// var arr = [sitong, cheng, deng];
// arr.sort(function(a, b){
// return a.age - b.age;
// })
// 乱序排序
// arr.sort(function(){
// return Math.random() - 0.5;
// });
// 不可改变原数组
// toString把数组取出来
// concat连接
// slice(从第几位开始截取，截取几位) 内部原理：用负数加上长度
// join用“ ”连起来
// split 以什么为拆分点来拆分数组
// var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// arr = arr.join("_");
// 原因散列操作要比栈操作块
// 但实际应用栈操作块
// 作业
// 1. type 封装一个类 function type(target){} 当传一个数返回一个结果类如 type(123)--> number
// 2.javascript模式 58页
// 3.javascript权威指南 32 - 200页
// 数组去重
// var arr = [1, 3, 2, 4, 4, 4, 5, 12, 20, 5, undefined, undefined];
// // Array.prototype.unique = function () {
// arr.sort(function(a, b){
// return a - b;
// });
// }
// 第一题
// function type(target){
// if(target = null || undefined){
// if(typeof(target) == undefined){
// return undefined;
// }else{
// return null;
// }
// } else {
// if(target.constructor == function Object() { [native code] }){
// return 'Object';
// }else if(target.constructor == function Array() { [native code] }){
// return 'Array';
// }else if(target.constructor == function Number() { [native code] }){
// return 'Number';
// }else if(target.constructor == function Boolean() { [native code] }){
// return 'Boolean';
// }
// }
// type(123); function Object() { [native code] }
// type('123');function String() { [native code] }
// type({}); function Object() { [native code] }
// type([]); function Array() { [native code] }
// type(true); function Boolean() { [native code] }
// type(undefined);无constructor
// type(null);无constructor
// js六大数据类型：number、string、object、Boolean、null、undefined
// console.log(typeof(undefined));
// 第二题数组去重
// function deleteAgain(target){
// target.sort(function (a, b){//排序
// return a - b;
// })
// for(var i = 0; i < target.arguments, i ++){
// if(target[i] = target[i + 1]){
// target.slice(i, 1);
// }
// }
// return target;
// }
// deleteAgain(arr);
// arr.sort(function (a, b){//排序
// return a - b;
// }) // 能运行通过
// function deleteAgain(target){
// target.sort(function (a, b){//排序
// return a - b;
// })
// }
// deleteAgain(arr); // 能通过
lesson16
// "use strict";//字符串不报错
// var a = 'hello world!!!';
// console.log(a);
// Object.prototype.toString.call();//-->[object, null]
// var a = [1, 2, 5, 3, 3, 2, 1, 5];
// Array.prototype.unque = function(){
// var obj = {};
// var arr = [];
// var len = this.length;
// if(!obj[this[i]]){
// obj[this[i]] = "123";
// arr.push(this[i]);
// }
// return arr
// }
// 类数组 的核心是length
// var obj = {
// "0" :
// }
// function Person(){
// }
// console.log(Person.callee);
// try {
// } catch (e){
// }
// with(){}
//*****课后习题****
//1. // type判断类型
// function type(target){
// //typeof 可以判断的类型 undefined boolean number function string
// // 不能判断的类型 null object array 包装类 -->object
// if(target === null){
// return null;
// }
// var strTemple = typeof(target);
// var toStr = Object.prototype.toString;
// if(strTemple == 'object'){
// switch (toStr.call(target)){
// case "[object Array]":
// return 'array';
// case "[object Object]":
// return 'object';
// case "[object Number]":
// return 'object--Number';
// case "[object String]":
// return 'object--String';
// case "[object Boolean]":
// return 'object--Boolean';
// }
// }else{
// return strTemple;
// }
// }
//2. //数组去重
// var arr = ['a', 'a', 'b', 'b', undefined, undefined, 0, 0];
// Array.prototype.unique = function (){
// var obj = {};
// var arr = [];
// var len = this.length;
// for(var i = 0; i < len; i ++){
// if(!obj[this[i]]){
// obj[this[i]] = 'temple';
// arr.push(this[i]);
// }
// }
// return arr;
// }
//正式课程部分
// 类数组
// function test(){
// console.log(arguments)
// console.log(arguments.length);
// console.log(push(1));//没有这个方法
// }
// test(1,2,3,4);
// var obj = {
// "0" : 'a',
// "1" : 'b',
// "2" : 'c',
// "length" : 3,
// "push" : Array.prototype.push
// }
// obj.push(123);
// Array.prototype.push = function(target){
// this[this.length] = target;
// this.length ++
// }
// 阿里笔试题
// var obj = {
// "1" : 'a',
// "2" : 'b',
// "length" : 4,
// "push" : Array.prototype.push,
// "splice" : Array.prototype.splice
// }
// obj.push('c');
// obj.push('d');
// 结果
// obj = {
// "1" : 'a',
// "2" : 'b',
// "4" : 'c',
// "5" : 'd',
// "length" : 6,
// }
// 报错调试
// try...catch(try只能捕捉逻辑错误不能捕捉语法解析错误)
// try{
// // console.log('a');
// console.log(a);
// }catch(e){
// // console.log('b');
// console.log(e.name + " :" + e.message);
// }finally{}
// console.log('next');
// EvalError
// RefereenceError 非法或不能识别的引用数值
// SyntaxError 语法解析错误
// TypeError 操作数类型错误
// ecmascript --> es es5.0 es3.0 es6.0
// es5严格模式
// function demo(){
// console.log(arguments.callee);
// }
// demo();
// function test(){
// "use strict" //局部严格模式
// console.log(arguments.callee);
// }
// test();
// with它能够改变作用域链
// Dom操作
// var div = document.getElementsByTagName('div');
// var target = document.getElementsByClassName('target');
// var demo = document.getElementById('demo');
// var speed = 0.5;
// setInterval(function(){
// speed += speed / 7;
// demo.style.left = parseInt(demo.style.left) + speed + 'px';
// demo.style.top = parseInt(demo.style.top) + speed +'px';
// },100);
16.DOM部分(增删改查)
"use strict"
// console.log('q');
// Document Object Model
// dom 查
// var div = document.getElementsByTagName('div');
// var div = document.getElementById('only');
// var div = document.querySelector('.warrper span');
// var div = document.getElementByName('div')[0];
// w3c标准 IE9一下不兼容
// 节点的四个属性
// nodeName 只读
// nodeValue 可读可写
// nodeType
// attributes 节点行间属性
// function test(){
// console.log(arguments.callee)
// }
// test();
// console.log(Object.prototype.caller(test));
// 笔记部分
// Document Object Model 文档对象模型
// DOM定义了表示和修改文档所需的对象、
// 这些对象的行为和属性以及这些对象之间的关系。
// DOM对象即为宿主对象，由浏览器厂商定义，
// 用来操作html和css功能的一类对象的集合。
// 也有人称DOM是对HTML以及XML的标准编程接口。
// 查
// var div = document.getElementById('only');
// 注意点在IE8一下，不区分ID的大小写，且返回匹配name属性的元素
// var div = getElementsByTagName('div')[0];通过标签名选择(*表示全选) 实时的选择
// var div = document.getElementsByClassName('');IE8及IE8一下无法使用
// var div = document.getElementsByName();但只能用于form img ifrome
// .remove();表示销毁
// var span = document.querySelector('.warrper > .content span'); > 表示直接子元素选择器 非实时修改
// var span = document.querySelectorAll('.warrper > content span')IE7及IE7以下没有
// node 节点； tag 标签； Element 元素
// 遍历节点树
// var Strong = getElementsByTagName('strong');
// 打印台 Strong.parentNode 顶层为document Strong.childNodes
// 节点的类型：元素节点--1 属性节点--2 文本节点--3 注释节点--8 document--9 DocumentFragment--11 不能跨级访问
// div.firstChild div.lastChild
// css文本类属性，可以继承
// div.nextSibling 下一个兄弟节点 div.previousSibling 前一个兄弟节点
// 基于元素节点树的遍历
// parentElement返回当前父元素节点 顶层是html
// children只返回当前元素的元素子节点
// childElementCount 返回子元素的个数
// firstElementChild返回的是第一个元素子节点
// lastElementChild返回的是最后一个元素子节点
// 节点的四个属性：
// 节点的标签名:nodeName 只读不可写
// 节点的内容：nodeValue 可读可写（text comment）
// 获取节点的类型 nodeType 返回值为一个数字
// 一个节点行间所有属性的集合，是类数组：attributes
// DOM结构树
// |Document —— |HTMLDocument
// |HTMLHeadElement
// |Text |HTMLBodyElement
// |CharacterData —— |Comment |HTMLTitleElement
// Node |HTMLParagraphElement
// |HTMLInputElement
// |Element —— HTMLElement ——|HTMLTableElement
// |.....etc.
// |Attr
// getElementById方法定义在Document.prototype上，即Element节点上不能使用
// getElementsByName方法定义在HTMLDocument.prototype上
// getElementsByTagName方法定义在Document.prototype以及Element.prototype
// document.body = body
// document.head = head
// document.documentElement = html
// 作业：
// 1.遍历元素节点树（在原型链上编程）
// 2.封装函数，返回元素e的第n层祖先元素节点
// function retParent(e, n){
// while(e && n){
// e = e.parentNode;
// n --;
// }
// return e;
// }
// var em = document.getElementsByTagName('em')[0];
// 3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负返回前面的，n为0，返回自己。（要兼容全部浏览器）
// function retSibling(e, n){
// while(e && n){
// if(n > 0){
// if(e.nextElementSibling){
// e = e.nextElementSibling;
// }else{
// for(e = e.nextSibling; e && e.nodeType != 1;e = e.nextSibling);
// }
// n --;
// }else{
// if(e.previousElementSibling){
// e = e.previousSibling;
// }else{
// for(e = e.previousSibling; e && e.nodeType != 1;e = e.previousSibling);
// }
// n ++;
// }
// }
// return e;
// }
// em = document.getElementsByTagName('em')[0];
// 4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题
// function hasChildren(){
// var div = document.getElementsByTagName('div')[0];
// var child = div.childNodes;
// var arr = [];
// var len = child.length;
// for(var i = 0; i < len; i ++){
// if(child[i].nodeType == 1){
// arr.push(child[i]);
// }
// }
// return arr;
// }
// hasChildren();
// 5.自己封装hasChildren()方法，不可用children属性
// Element.prototype.hasChildren = function(){
// var child = this.childNodes,
// len = child.length;
// for(var i = 0; i < len; i ++){
// if(child[i].nodeType == 1){
// return true;
// }
// }
// return false;
// }
// var div = document.getElementsByTagName('div');
lesson18
'use strict'
// 创建节点
// var div = document.createElement('div');
// var text = document.createTextNode('dadad');
// var comment = document.createComment('this is ');
// 插入节点
// document.body.appendChild(div); 插入到最后面
// document.body.insertBefore(a, b) 插入a 在b 之前， 有剪切的功能
// 删除节点
// div,removeChild(text); 剪切 子节点
// div.remove(); 自毁
// 替换节点
// parentNode.replaceChild(newChild, originChild); 也是剪切
// 元素节点操作(操作台)
// div.innerHTML = '' 能读能写（多用于改值）
// div.innerText 能读能写（多用于取值）
// 请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。
// <div class="example">
// <p class="slogan">姬成，你最帅!</p>
// </div>
// var div = document.createElement('div');
// var p = document.createElement('p');
// var text = document.createTextNode('成哥，帅');
// p.appendChild(text);
// div.appendChild(p);
// document.body.appendChild(div);
// div.className = 'example';
// p.setAttribute('class','slogan');
// 作业
// 1.封装函数insertAfter();功能类似insertBefore();
Element.prototype.insertAfter = function(origin, target){
var nextDom = target.nextElementSibling;
var parentDom = this;
if(!nextDom){
parentDom.appendChild(origin);
}else{
parentDom.insertBefore(origin, nextDom);
}
}
// 2.将目标节点内部的节点顺序倒置
// 3.怎么将红色的小方框动起来
lesson19
'use strict'
// 插入一个Dom在一个元素的后面即定义一个insertAfter()方法
// var oWrapper = document.getElementById('wrapper');
// // oWrapper.insertBefore(contentb,contenta);
// Element.prototype.insertAfter = function(origin, target){
// var nextDom = target.nextElementSibling;
// var parentDom = this;
// if(!nextDom){
// parentDom.appendChild(origin);
// }else{
// parentDom.insertBefore(origin, nextDom);
// }
// }
// oWrapper.insertAfter(contentb, contentc);
// 创造一个remove()方法可以自己销毁自己
// Element.prototype.remove =function(){
// return this.parentNode.removeChild(this);
// }
// var oContenta = contenta.remove();
// 将目标元素逆序输出
// Element.prototype.reverseDom = function(){
// var arr = Array.prototype.slice.call( this.children).reverse();
// this.innerHTML = '';
// console.log(arr);
// for(var i = 0; i < arr.length; i ++){
// this.appendChild(arr[i]);
// }
// }
// wrapper.reverseDom();
// 数组方法： forEach map filter reduce reduceRight
// var arr = [{name: "鹿晗", flowers: 99959, sex: "male"},
// {name: "黄子韬", flowers: 66656, sex: "male"},
// {name: "吴彦祖", flowers: 22256,sex: "male" },
// {name: "赵丽颖", flowers: 65446, sex: "female"},
// {name: "宋茜", flowers: 45659, sex: "female"},
// {name: "黄磊", flowers: 88888, sex: "male" },
// {name: "赵薇", flowers: 64561, sex: "female"},
// {name: "杨幂", flowers: 16115, sex: "female"}]
// // 1.把所有男星选出来
// // arr.filter(function(ele, index){
// // return ele.sex == "male";
// // })
// // 2.根据flowers排序
// var orderArr = arr.filter(function(ele, index){
// return ele.sex == "male";
// }).sort(function(a, b){
// return a.flowers - b.flowers;
// });
// // 3.添加Dom
// orderArr.forEach(function(ele, index){
// var oLi = document.createElement('li');
// oLi.innerText = ele.name + 'flowers' + ele.flowers
// demo.appendChild(oLi);
// });
// arr.forEach(function(ele, index){
// console.log(ele, index);
// })
// map
// Array.prototype.map = function(func){
// var arr = this;
// var newArr = [];
// for(var i = 0; i < arr.length; i ++){
// newArr.push(func(arr[i], index));
// }
// return newArr;
// }
// arr.map(function(ele, index){
// console.log(ele, index);
// ele.componey = 'cst'
// return ele;
// })
// filter 过滤
// Array.prototype.filter = function(func){
// var arr = this;
// var newArr = [];
// for(var i = 0, i < arr.length, i++){
// if(func(arr[i], i)){
// newArr.push(arr[i]);
// }
// }
// return newArr;
// }
// console.log(arr.filter(function (ele, index){
// if(ele.sex == 'male'){
// return true;
// }else{
// return false;
// }
// }));
// var oDate = new Date();
// oDate.getTime();
// 计时器
// setTimeout(function(){
// alert('辉帅')
// }, 3000);
// setInterval(function(){
// console.log('辉哥帅');
// },3000);
// var flag = true;
// setTimeout(function(){
// flag = false;
// }, 2000)
// clearInterval()
17.setInterval和setTimeout
// // 定时器
// setInterval(function(){
// console.log('a');
// },1000)
// 两个参数，先等1000毫秒
// setTimeout(function(){
// console.log('a');
// },1000)
// 延迟执行
// var count = 0;
// var timer = setInterval(function(){
// console.log('a');
// },1000)
// clearInterval(timer)
// clearTimeout(timer)
// 它们都是window属性 this指向windows
// 计时器 三分钟
// var minute = document.getElementsByTagName('input')[0];
// var second = document.getElementsByTagName('input')[1];
// var minuteCount = 0;
// var secondCount = 0;
// var timer = setInterval(function(){
// secondCount ++;
// if(secondCount == 59){
// minuteCount ++;
// second = 0;
// }
// minute.value = minuteCount;
// second.value = secondCount;
// if(minuteCount == 3){
// clearInterval(timer);
// }
// },1000)
// 查看滚动条位置(w3c标准 IE8及以下IE8以下不兼容)
// window.pageXOffset
// window.pageYOffset
// document.body.scrollLeft + document.documentElement.scrollLeft（ IE8及以下IE8）
// 查看滚动条的方法
// function getScrollOffset(){
// if(window.pageXOffset){
// return{
// x : window.pageXOffset,
// y : window.pageYOffset
// }
// }else{
// return{
// x : document.body.scrollLeft + document.documentElement.scrollLeft
// y : document.body.scrollTop + document.documentElement.scrollTop
// }
// }
// }
// 查看可视化窗口的尺寸
// window.innerWidth
// window.innerHeight
// 混杂模式能兼容之前的标准（向后兼容）
// function getViewportOffset(){
// if(window.innerWidth){
// return{
// w : window.innerWidth,
// h : window.innerHeight
// }
// }else if(document.compatMode == "CSS1Compat"){
// return{
// w : document.documentElement.clienWidth,
// h : document.documentElement.clienHeight
// }
// }else{
// return{
// w : document.body.clienWidth,
// h : document.body.clienHeight
// }
// }
// }
// DTD文档类型声明
// document.compatMode可以判断是不是混杂模式
// 查看元素的几何尺寸
// getBoundingClientRect(); 返回一个对象 兼容性很好
// 返回的结果不是实时的
// offsetWidth offsetHeight
// offsetLeft offsetTop
// offsetParent 找它的父级
// 滚动条移动 window.scroll(x, y) y是定位
// window.scrollBy(x, y) y是累价值
// 脚本化CSS
// div.style
// window.getComputedStyle(div, false) 获取的都是绝对值 获取的是展示出来的样式
// 获取属性方法
// function getStyle(elem, prop){
// if(window.getComputedStyle){
// return window.getComputedStyle(elem, false)[prop];
// }else{
// return elem.currentStyle[prop];
// }
// }
// 作业:1.求出其相对文档的定位坐标getElementPostion
// 2.轮播图
18.事件
'use strict'
// 事件
// 举个例子
// demo.onclick = function(){
// alert('跪下')
// }
// 背景变色
// var times = 1;
// demo.onclick = function(){
// if(times ++ % 2 !== 0){
// demo.style.backgroundColor = 'red';
// }else{
// demo.style.backgroundColor = 'orange';
// }
// }
// demo.onmouseenter = function(){
// demo.style.backgroundColor = 'red';
// }
// demo.onmouseleave = function(){
// demo.style.backgroundColor = "orange";
// }
// 1.绑定事件(对象.的方式会产生覆盖，但w3c标准不可以)
// 给div绑定鼠标点击事件 让它对点击这种事件可以进行处理， 执行绑定事件
// addEventListener（w3c标准方法，不会覆盖但如果绑定相同的函数时，就只执行一次）
// demo.addEventListener('click', function(){ //匿名函数
// alert('帅')
// }, false);
// [] !== [] {}!=={} function(){} !==function(){}
// demo.onclick =function(){
// alert('帅')
// demo.onclick = null;//撤销
// }
// IE8以前 attachEvent();
// demo.attachEvent('onclick', test); // 如果test不同就会依次执行，不会省略
// 绑定事件的兼容方法
// function addEvent(dom, type, handle){
// if(dom.addEventListener){
// dom.addEventListener(type, handle, false);
// }else if(dom.attachEvent){ //detachEvent()
// function temp(){
// handle.call(dom);
// }
// temp.name = handle;
// dom[type] = [].push(temp);
// dom.attachEvent('on' + type, temp);
// }else{
// dom['on' + type] = handle;
// }
// };
// addEvent(demo, type, handle)
// 取消默认事件 ele.onclick
// function removeEvent(dom, type, handle){
// if(dom.removeEventListener){
// dom.removeEventListener(type, handle, false);
// }else if (dom.detachEvent){
// for(var i = 0; i < dom.click.length; i++){
// if(dom.click[i].name === handle){
// dom.detachEvent('on' + type, dom.click[i]);
// }
// }
// }else{
// dom.['on' + type] = null;
// }
// }
// removeEvent(demo, 'click', testCst)
// 事件处理模型 事件冒泡，事件捕获
// 事件冒泡
// oD.addEventListener('click', function(){
// console.log('oD bubble');
// },false);
// oC.addEventListener('click', function(){
// console.log('oC bubble');
// },false);
// oB.addEventListener('click', function(){
// console.log('oB bubble');
// },false);
// document.addEventListener('click',function(){
// console.log('document bubble');
// },false);
// // 事件捕获
// oD.addEventListener('click', function(){
// console.log('oD catch');
// },true);
// oC.addEventListener('click', function(){
// console.log('oC catch');
// },true);
// oB.addEventListener('click', function(){
// console.log('oB catch' );
// },true);
// document.addEventListener('click',function(){
// console.log('document catch');
// },true);
// 结论对于整个模型来说事件都是先捕获后冒泡
// 然而对于事件源来说那个事件先注册，哪个事件先执行
// focus（聚焦input外面不可能有input，所以没有必要冒泡）, blur, change, submit, reset, select等事件不冒泡
// 作业：女星排行榜（没做）
lesson22
'use strict'
oWrapper.onclick = function(){
alert('wrapper');
}
oContent.onclick = function(){
alert('content');
// window.location.href = 'https://www.baidu.com';
window.location.href = oContent.getAttribute('href');
}
oBox.onclick = function(e){
alert('box');
// e.stopPropagation(); //w3c标准阻止冒泡的方法
// e.cancelBubble = true; IE8以下版本浏览器
// return false;
}
// 阻止默认事件
var a = document.getElementsByTagName('a')[0];
console.log(a.getAttribute('href'));
19.运算符和条件语句
比较运算符：
1.通过比较得出结果为布尔值，侧重结果；
2.赋值符号==；
3.不等于！=；
3.'a'<'b'=true;
4.0-127 ASCI 0-255 ASCII unicode(万国码)
65 A 66 B 97a 98b。
5.‘10’ <‘2’=true（字符串的值作比较）;
6.undifined=null！=0；
7.被认定为false的值 undefined,null,NaN,"",0,false。
8.逻辑运算$$ || !
9.与运算&& ： 如果第一位计算结果为真，那么计算第二个表达式的结果，
并且返回第二个表达式的结果，如果第一位计算结果为假，那么返回第一个表达式的运算结果
10.短路语句（举例1>2&&document.write('举案说法你看得见')）。
11.或运算 || 如果第一个表达式计算结果为真，那么直接返回第一个表达式运算结果，
如果第一个表达式运算结果为假，那么计算第二个表达式，并将第二个表达式的运算结果返回。
12.e:后需要用到这个E,在IE下，E没有值，但有window.event在goole chrome下有值，
或运算符会多用于兼容性的写法。
13.！：把后面的值，先转换成布尔值，然后再取反。
14.if( 条件){ 如果条件成立执行这里面的语句 }else{ 不成立则执行这里面的语句}
15.互联网公司0-100分划分（H1B工作签证 60W-20W）
90-100 （蚂蚁金服） alibaba microsoft facebook goole
80-90 tencent toutiao 美团 网易
70-80 百度 携程 小米 新浪（渣浪） 58同城
60-70 蘑菇街 去哪网
60以下 怎么可能
var score = parseInt( window.prompt('input'));
if(score>90&&score<=100){
document.write('alibaba');
}
if(score>80&&score<=90){
document.write('tencent')
}
if(score>70&&score<=80){
document.write('新浪')
}
if(score>60&&score<=70){
document.write('蘑菇街')
}
if(score<=60){
document.write('shit!!!');
}
16.为了使语句互斥用else if(必须条件互斥)
var score = parseInt( window.prompt('input'));
if(score>90&&score<=100){
document.write('alibaba');
}
else if(score>80&&score<=90){
document.write('tencent')
}
else if(score>70&&score<=80){
document.write('新浪')
}
else if(score>60&&score<=70){
document.write('蘑菇街')
}
else if(score<=60){
document.write('shit!!!');
}
else{
document.write('error');
}
17.当短路语句不在关注返回结果时，就可以用短路语句代替if语句
18.输入三个数，判断大小并输出
var a = parseInt(window.prompt('input'));
var b = parseInt(window.prompt('input'));
var c = parseInt(window.prompt('input'));
if(a>b) {
if(a>c){
document.write(a);
}else{
document.write(c);
}
}else{
if(b>c){
document.write(b);
}else{
document.write(c);
}
}
19.for循环
真正的for循环我们关注的是顺序
for（ 1;2 ;3）{4}
首先执行1
然后判断2是否成立-->判断2结果是否为true
然后执行4
然后执行3
然后判断2是否成立-->判断2结果是否为true
当2的结果为false时停止循环
例子：
for(i=0;i<100;i++){
document.write(i+' ')
}
var i=100;
for(;i--;){
document.write(i+" ")
}
for(var i=0;i<100;i++){
if(i%2!=0&&i%3!=0){
document.write(i+" ")
}
} var count=0;
for(var i=0;i<1000;i++){
count+=i;
if(count>=200){
document.write(i);
i=2000;
}
}
20.正则
'use strict'
// console.log('a');
/*********************封装函数************************/
// Document.prototype.getByClassName = function(className){
// var allDomArr = Array.prototype.slice.call(document.getElementsByTagName('*'),0);
// // console.log(allDomArr);
// var filterArr = [];
// function dealClassName(dom){
// var reg = /\s+/g;
// var itemArr = dom.className.replace(reg, ' ').trim().split(' ');
// return itemArr;
// }
// allDomArr.forEach(function (ele, index) {
// var itemArr = dealClassName(ele);
// for(var i = 0; i < itemArr.length; i++) {
// if(className == itemArr[i]){
// filterArr.push(ele);
// break;
// }
// }
// })
// return filterArr;
// }
// console.log(document.getByClassName('demo'));
/********************ajax****************/
// form:
// method: get, post
// action: 服务器地址
// enctype: application/x-www-form-urlencoded(默认值)(表示文件发送前编码成字符格式)multipart/form-data(把文件变成文件上传表单)
// ajax技术能局部获取数据，还不刷新页面、且异步获取数据
// new XMLHttpRequest()可以创建ajax对象但IE不认识
// newa ActiveXObject('Microsoft.XMLHTTP')主流浏览器创建ajax文档
/*****************兼容性写法**************************/
// 流程：
// 1.手机/电脑
// 2.app
// 3.商家 商品 地址
// 4.提交订单 交钱
// 5.监控 物流信息
// 6.拿到餐 处理掉
// 1.浏览器
// 2.Ajax对象
// 3.open('GEt', 'URL'，'true');
// 4.send('data');
// 5.onreadystatechange readyState==4//readyState有四个值（0：:未初始化，1：读取中， 2：:已读取， 3：交互中， 4：:完成status =（404 ： 文件没找到，用户端错误，200：成功， 500 ：服务器内部错误， 303 : 服务器错误
// 6.callback
// var xml = null;
// if(window.XMLHttpRequest{
// xml = new XMLHttpRequest();
// }else{
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// xml.open('GET', 'getNews.php', true);
// xml.send();
// xml.onreadystatechange = function(){
// if(xml.readyState == 4){
// if(xml.status == 200){
// console.log('3333');
// }
// }
// }
function Ajax(method, url, flag, data, callback){
var app = null;
if(window.XMLHttpRequest){
app = new window.XMLHttpRequest();
}else{
app = new window.ActiveXObject('Microsoft.XMLHTTP');
}
method = method.toUpperCase();
if(method === 'GET'){
app.open(method, url + '?' + data, flag);
app.send();
}else if (method === 'POST'){
app.open(method, url, flag);
app.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
app.send(data);
}
app.onreadystatechange = function(){
if(app.readyState === 4){
if(app.status === 200){
callback(app.responseText);
}else{
alert('error');
}
}
}
}
/*************************************************/
// var aaa = 'username=aimee&age=18';
// function ajax(method, url, flag, data, callback) {
// var xml = null;
// if(window.XMLHttpRequest){
// xml = new XMLHttpRequest();
// }else {
// xml = new ActiveXObject('Microsoft.XMLHTTP');
// }
// if(method == 'GET') {
// xml.open(method, url + '?' + data, flag);
// xml.send();
// }else if(method == 'POST') {
// xml.open(method, url, flag);
// xml.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// xml.send(data);
// }
// xml.onreadystatechange = function () {
// if(xml.readyState == 4) {
// if(xml.status == 200) {
// callback(xml.responseText);
// }
// }
// }
// }
// function showData(data) {
// console.log(data)
// }
// function alertData(data) {
// alert(data);
// }
// ajax('GET', 'post.php', true, aaa, alertData);
21.CSS3媒体查询
<html lang="en">
<head>
<meta charset="utf-8">
<title>meitichaxun</title>
<style type="text/css">
.content{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.content .time{
display: inline-block;
flex-grow: 1;
width: 20%;
}
.content .time img{
width: 100%;
}
@media screen and (max-width: 180px){
.content .time{
display: inline-block;
width: 100%;
}
}
/* @media screen and (min-width: 180px) and (max-width: 370px){
.content .time{
display: inline-block;
width: 50%;
}
}*/
/* @media screen and (min-width: 370px) and (max-width: 540px){
.content .time{
display: inline-block;
width: 33.33%;
}
}*/
/* @media screen and (min-width: 540px) and (max-width: 800px){
.content .time{
display: inline-block;
width: 25%;
}
}*/
/* @media screen and (min-width: 800px) and (max-width: 1190px){
.content .time{
display: inline-block;
width: 20%;
}
}*/
/* @media screen and (orientation: portrait){ 竖屏
.content div{
width: 50px;
height: 50px;
background: red;
}
}
@media screen and (orientation: landscape){ 横屏
.content div{
width:60px;
height: 60px;
background: orange;
}
} */
/* .wrapper{
position: relative;
perspective: 1200px;
perspective-origin: 50% 50%;
top: 110px;
left: 110px;
height: 233px;
width: 233px;
}
.wrapper .item{
transform-style: preserve-3d;
width: 100px;
height: 100px;
background: orange;
transform: translateZ(0px);
} */
</style>
</head>
<body>
<div class="content">
<!-- <div></div> -->
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
<div class="time"><img src="4 白凤.jpg" alt=""></div>
</div>
<!-- box-shadow影响性能 -->
<!-- <div class="wrapper">
<div class="item">A</div>
</div> -->
</body>
</html>
行、块级元素
<!-- ============================================ -->
<!-- ================= 块属性 ================== -->
<!-- ============================================ -->
<!-- <div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form> -->
<!--
1.每一个快属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始
（因为每一个块属性标签都会直接占据一整行的内容，导致下面的内容也只能从新的一行开始）
2.块属性标签都是可以设置宽度、高度，行高，距顶部距离，距底部距离
3.块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%
4.块属性标签是可以直接嵌套的
5.p标签中不能嵌套div标签
-->
<!-- ============================================ -->
<!-- ================= 行属性 ================== -->
<!-- ============================================ -->
<!--
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等
-->
<!--
1.行属性标签它和其它标签处在同一行内
2.行属性标签无法设置宽度，高度 行高 距顶部距离 距底部距离
3.行属性标签的宽度是直接由内部的文字或者图片等内容撑开的
4.行属性标签内部不能嵌套行属性标签（a链接内不能嵌套其他链接）
-->
笔试题
1、inline：<span></span>,<strong></strong>,<em></em>,<a></a>,<del></del>
block:<p></p>,<ol></ol>,<li></li>,<ul></ul>,<div></div>,<form></form>,<adress></adress><table></table><h1-6>;
行内元素转化为块级元素：display : block;
2、css代码三中引入方式：
行间样式
页面级css
引入css文件 link
style标签下写 @import url();
3、web标准：行为、样式、结构相分离
4、简化代码：
<style type="text/css">
*{
margin: 0 10px;
padding: 0;
}
#content{
background:#ffffff;
}
#content div{
font-size: 14px;
text-align: center;
color: #e9e9e9;
}
#nav{
background-color: #e0e0e0;
}
5、浏览器中margin默认值为8px；
6、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
body{
padding: 0;
margin: 0;
}
#my-defined{
width: 100px;
height: 100px;
padding: 0 100px;
margin: 10px 20px 30px 40px;
border: 1px solid orange;
background: orange;
}
</style>
</head>
<body>
<div id="my-defined"></div>
</body>
</html>
html中orange颜色的区域宽度是302px
orange区域距离页面左边40px，上10px
7、用css、html编写一个两列布局的页面，要求右侧宽度为200px；左侧自动扩展。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
.right{
float: right;
width: 200px;
height: 100px;
background:red;
}
.left{
height: 100px;
margin-right: 200px;
background: black;
}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>
8、居中一个浮动元素：
<style type="text/css">
#my-defined{
position: absolute;
width: 300px;
height: 500px;
left: 50%;
right: 50%;
margin-left: -150px;
margin-top: -250px;
}
</style>
9、画出下图示意图：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
#page{
width: 520px;
}
.nav{
width:200px;
float: right;
background: orange;
}
.main{
width: 200px;
float: left;
padding-left: 110px;
background: black;
}
.sub{
width: 100px;
float: left;
margin:10px 0 10px -100px;
}
.nav,.sub{
border: 10px deshed #000;
height: 300px;
background: orange;
}
.sub{
height: 280px;
}
</style>
</head>
<body>
<div id="page">
<div class="main"><div class="sub"></div></div>
<div class="nav"></div>
</div>
</body>
</html>
10、form表单中method属性值及其区别：
（1）GET 使用URL 或Cookie 传参，而POST将数据，放在BODY中。
（2）GET 的URL会有长度上的限制， POST可以传输很多数据。
（3）POST比GET安全。
但其实HTTP协议里没有规定POST数据就要放在BODY里， 也没有要求GET数据就一定要放在URL中而不能放在BODY中。
HTTP协议对GET和POST 都没有对数据的长度进行限制，两方面原因造成数据限制的原因
①早起浏览器会对URL长度进行限制（浏览器URL输入框）
②浏览器会对Content-length进行限制，这是为了服务器安全和稳定。
11、去掉ul>li结构中前面的圆点，并且解决li前面的空余、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>liangxi</title>
<style>
ul {
height: 100px;
padding: 0;
list-style: none;
border: 1px solid black;
}
</style>
</head>
<body>
<ul><li></li></ul>
</body>
</html>
12、JavaScript中typeof可能返回的结果：12.Number,string,boolean,object,undefined,function;
13、已知数组var arr = ["goole","microsoft","oracle","阿里"，"freewheel","IBM","爱立信"，"百度"，"企鹅"，"美团"，"去哪儿"，"58同城"，"新浪"，"搜狐"，"大众点评"，"360","汽车之家"，"巨人网络"，"携程"，"4399","凤凰网"，"人民网"]，亲们，如果你想进前十的公司，请用效率最高的方法将此数组按照顺序链接成字符。
<script type="text/javascript">
var arr = ["goole","microsoft","oracle","阿里","freewheel","IBM","爱立信","百度","企鹅","美团","去哪儿","58同城","新浪","搜狐","大众点评","360","汽车之家","巨人网络","携程","4399","凤凰网","人民网"];
console.log(arr.join(','));
</script>
14、写出html、css、JavaScript注释代码形式：
html：<!-- -->
css:/* */
js://
15、编写一段JavaScript脚生成下面这段DOM结构。
<div class="exmple">
<p class="slogan">成哥，你最帅!</p>
</div>
<script type="text/javascript">
var $Div = document.createElement('div');
var $P = document.createElement('p');
$Div.className = "exmple";
$P.className = "slogan";
$Div.appendChild($P);
document.body.appendChild($div);
$P.innerHTML = "成哥，你最帅！";
</script>
16、为html元素绑定一个事件，如点击事件。写出兼容各个浏览器的事件绑定方法。
<script type="text/javascript">
function addEvent(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if (elem.attachEvent) {
elem['temp' + type + handler] = handler;
elem[type + handler]= function (){
elem['temp' + type + handler].call(elem);
};
elem.attachEvent('on' + type,elem[type + handler])
}else{
elem['on'+type]=handler;
}
}
</script>
17、Call,apply:作用都是改变this指向；
区别：传参的方式不同，call直接传，apply利用数组的形式传参；
18、封装ajax
<script type="text/javascript">
function ajax(method, url, flag, callback, data){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new window.XMLHttpRequest();
}else{
xhr = new ActiveXObject('Mirosoft.XMLHTTP')
}
if(method === 'GET'){
xhr.open('GET', url + '?' + data, flag);
xhr.send();
}else if(method === 'POST'){
xhr.open('POST', url, flag);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
if(xhr.status === 200){
callback(xhr.responseText);
}
}
}
}
</script>
19、数组去重 eg：var arr = ['a','b',234,23,'a','b',3,1,234]
<script type="text/javascript">
Array.prototype.unique = function () {
var arr = [],
obj = {},
len = this.length;
for(var i = 0;i < len;i++){
if(!obj[this[i]]){
obj[this[i]] = "11";
arr.push(this[i]);
}
}
return arr;
}
</script>
20、如今有个ul，如果有十亿个li；要求点击li触发事件，弹出对应li的内容
<ul>
<li></li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerHTML);
}
</script>
21、阻止事件冒泡和事件默认时间
<script type="text/javascript">
//取消冒泡
function stopBubble(e) {
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
//阻止默认事件
function cancelHandler(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
</script>
22、什么是DOM：
DOM是操作css，html的一套编程接口；
DOM对象即为宿主对象，浏览器厂商定义的；
DOM定义了表示和修改文档所需的方法。
对html和xml编程借口不是css
23、利用JavaScript取非行间样式，要求兼容性各个浏览器
<script type="text/javascript">
function getComputedStyle(obj,styleProp){
if (window.getComputedStyle) {
return window.getComputedStyle(obj,false)[styleProp];
}else{
return obj.currentStyle[styleProp];
}
}
</script>
24、运行test()和new test()的结果是什么：
<script type="text/javascript">
var a = 5;
function test(){
a=0;
alert(a);
alert(this.a);
var a;
alert(a);
}
</script>
结果是：0 5 0 , 0 undefined 0
25、有字符串"aaaaabbbccccddddeeefgaa",转换为连续不重复的字符串
<script type="text/javascript">
var str = "aaaaabbbccccddddeeefgaa";
var reg = /(.)\1*/g;
console.log(str.replace(reg,"$1"));
</script>
26、一串连续数字实现打点功能：100000000转换成：1.000.000.000
<script type="text/javascript">
var str = "1000000000";
var reg = /(?=(\B)(\d{3})+$)/g;
console.log(str.replace(reg,"."));
</script>
27、写出运算结果：
<script type="text/javascript">
alert(typeof(a))--undefined
alert(typeof(undefined))--undefined
alert(typeof(NaN))--number
alert(typeof(null))--object
var a = "123abc";
alert(typeof(+a));--number
alert(typeof(!!a));--boolean
alert(typeof(a + ""));--string
alert(1 == "1"); --true
alert(NaN == NaN); --flase
alert(NaN == undefined);--flase
alert("11" + 11);--1111
alert(1==="1")--flase
alert(parseInt("123abc"))--123
var num = 1232123.3456789;
alert(num.toFixed(3));--1232123.346
//toFixed只在number类型上可以用，保留几位有效数字，四舍五入
// typeof(typeof(a))--string
</script>
28、打印当前年月时分秒
<script type="text/javascript">
var date = new Date();
console.log(date.getFullYear + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"+ date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒");
</script>
29、css中，font-size设置的是字体的高；单位是px，em是相对值。
30、有html结构：
<div style="background-color:red;margin:0 0 100px 0;">123</div>
<div style="background-color:red;margin:200px 0 0 0;">234</div>
他们之间的间距是：200px
31、简单说说自定义构造函数创建对象的原理：
在函数的最前面隐式的加上 this = {}；最后隐式的返回 return this；
32、写出一种原型链实现继承的方式：圣杯模式
<script type="text/javascript">
var inherit =(function(){
var F = function(){};
return function(P,C){
F.prototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
C.prototype.uber = P.prototype;
}
}());
</script>
33、深度克隆：
<script type="text/javascript">
Array.prototype.deepClone = function (parent, child) {
var child = {} || child;
var toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in parent){
if(parent.hasOwnProperty(prop)){
if(typeof(parent[prop]) === "object"){
child[prop] = (toStr.call(parent[prop]) === arrStr) ? []:
{};
deepClone(parent[prop], child[prop]);
}else{
child[prop] = parent[prop];
}
}
}
}
</script>
34、描述预编译过程：
（1）创建AO对象；
（2）找形参和变量声明，将变量和形参作为AO对象的属性名，值为undefined；
（3）将实参和形参相统一；
（4）在函数体里找函数声明，将函数声明作为AO对象的属性名，将函数体作为赋值对象赋予函数名。
35、介绍js语言特点：
单线程；脚本语言；解释性语言，解释一行执行一行；ECMA标注；弱数据类型语言；可以跨平台；
36、介绍主流浏览器以及他们相应的内核，介绍浏览器分为哪几部分，内核呢？
浏览器分为：shell与内核（js引擎，渲染引擎，其他）
主流浏览器：IE（trident）；chrome（webkit/blink）；safari（webkit）；Firefox（Gecko）；Opera（presto）；
37、简述js时间线的顺序：
1、创建Document对象，开始解析web页面。document.readyState = 'loading'。
2、遇到link外部css，创建线程加载，并继续解析文档。
3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6、当文档解析完成，document.readyState = 'interactive'。
7、文档解析完成后（就是所有dom节点都解析完），所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;
8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。
10、从此，以异步响应方式处理用户输入、网络事件等。
38、异步加载js的几种方案：
defer async
异步加载兼容性写法：
<script type="text/javascript">
function asyncLoaded (url,callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (script.readySate) {
script.onreadystatechange = function (){
if (script.readySate == "complete" || script.readySate == "loaded") {
obj[callback]();
script.onreadystatechange = null ;
}
}
}else{
script.onload = function(){
obj[callback]();
}
}
script.src = url ;
document.head.appendChild(script);
}
</script>
39、打印结果：
<script type="text/javascript">
var a = (10*3-4/2 + 1)%2,
b = 3;
b %= a + 3;
console.log(a++);
console.log(--b);
</script>
结果：1 2
40、使用原生js，addEventListener,给每个li元素绑定一个click事件，输出他们的顺序。
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<script type="text/javascript">
var liCollection = document.getElementsByTagName('li'),
len = liCollection.length;
for (var i = 0; i < len; i++) {
(function(j){
liCollection[j].addEventListener('click',function(){
console.log(j);
}false);
}(i))
}
</script>
41、一个字符串由[a-z]组成，找出第一个只出现一次的字母
<script type="text/javascript">
Array.prototype.unique = function() {
var len = this.length,
obj = {},
arr = [];
for(var i = 0; i < len; i++){
if(!obj[this[i]]) {
obj[this[i]] = "1";
arr.push(this[i]);
}
}
return arr;
}
var str = "abaadf";
var arr = str.split("");
var arr1 = arr.unique();
console.log(arr1[0]);
</script>
42、打印结果：
<script type="text/javascript">
var name = "222";
var a = {
name:"111",
say:function(){
console.log(this.name);
}
}
var fun = a.say;
fun();
a.say();
var b = {
name:"333",
say:function(fun){
fun();
}
}
b.say(a.say);
b.say=a.say;
b.say();
</script>
结果： 222 111 222 333
43、
<script type="text/javascript">
var str = "你成哥很帅";
str.length = 3;
console.log(str);
</script>
执行结果为：你成哥很帅
原因：原始值不可改变
44、请用多种方法创造对象：
字面量 var obj = {}；
构造函数 var obj = new Object{};
var obj = Object.create(原型)
45、解决污染全局变量
命名空间，闭包
46、枚举一个对象中所有自有属性：
<script type="text/javascript">
Person.prototype.lastName = "ji";
function Person(name,age){
this.name = name;
this.age = age ;
}
var oPerson = new Person ('cheng',123);
for(var prop in oPerson){
if(oPerson.hasOwnProperty(prop)){
console.log(oPerson[prop]);
}
}
</script>
47、让数组里的数据从大到小排列：
<script type="text/javascript">
arr.sort(function(a,b){
return a - b;
}());
</script>
48、es5严格模式如何使用，应该注意些什么：
<script type="text/javascript">
全局严格模式:直接加 字符串："use strict";
局部函数内严格模式（推荐）
function test(){
"use strict";
}
注意：不支持with,arguments.callee,func.caller,变量赋值前必须声明，局部this必须被赋值(Person.call(null/undefined) 赋值什么就是什么),拒绝重复属性和参数
</script>
49、选择html元素节点几种方法，以及他们各自的兼容性问题及特点：
<script type="text/javascript">
getElementsByTagName()[0];
getElementById();
getElementsByName();
getElementByClassName(); interactive8及以下不兼容
querySelectorAll();非实时ie7及以下不兼容
querySelector();非实时ie7及以下不兼容
1.getElementById方法定义在Document.prototype上，即Element节点上不能使用。
2.getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document以外不能使用(xml document,Element)
3.getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
4.HTMLDocument.prototype定义了一些常用的属性，body,head,分别指代HTML文档中的<body><head>标签。
5.Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素
6.getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义
</script>
50、说出节点类型的值为1,2,3,8,9的值对应的节点是什么：
元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9 单独成一类 文档节点
<!-- DocumentFragment —— 11 文档碎片 -->
<!-- 获取节点类型 nodeType -->
51、鼠标事件的触发顺序：
mousedown; focus; mouseup; click;
右键事件：
<script type="text/javascript">
elem.onmousedown = function (e) {
if(e.button == 2){
alert("右键点击")
}
}
</script>
52、数据格式JSON转换为字符串，以及把字符串转换为JSON的方法
<script type="text/javascript">
JSON.parse(); string — > json字符串
JSON.stringify(); json — > string
</script>
53、BOM对象及其功能：
Window JavaScript 层级中的顶层对象，表示浏览器窗口。
属性：
closed 返回窗口是否已被关闭。
document 对 Document 对象的只读引用。
history 对 History 对象的只读引用。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
Navigator 包含客户端浏览器的信息。
属性：
appCodeName 返回浏览器的代码名。
方法：
javaEnabled() 规定浏览器是否启用 Java。
Screen 包含客户端显示屏的信息。
属性：
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
width 返回显示器屏幕的宽度。
History 包含了浏览器窗口访问过的 URL。
属性：
length 返回浏览器历史列表中的 URL 数量。
方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
Location 包含了当前 URL 的信息。
属性：
href 设置或返回完整的 URL。
方法：
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
54、说明position定位的值有什么区别，如果有不能兼容的问题，如何解决
absolute 绝对定位
relative 相对定位
fixed 相对可视区定位，而且脱离原来位置 ie6不能用
sticky回去查一查
55、添加css代码使得ul外观可以包住li：
<style type="text/css">
ul{
list-style: none;
padding: 0;
}
ul>li{
float: left;
}
ul:after{
content:"";
display:inline-block;
clear:both;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
56、熟知的选择优先级关系（权重）
！important 无穷大
style（行间样式） 1000
id 100
class/属性/伪类 10
标签/伪元素 1
通配符* 0
57、display值及含义
display值： inline---行级元素，不沾满整行，不可以改变宽高
block----块级元素 沾满整行 可以改变宽高
inline-block----行级块元素 不占满整行 可以改变宽高
58、写一个输入框，带有js功能，鼠标聚焦提示消息信息，失去焦点显示提示信息
<style type="text/css">
input{
border: 1px solid black;
color: #999;
}
.fontGrey{
color: #999;
}
.fontNormal{
color: #424242;
}
</style>
</head>
<body>
username:<input tyoe="text" value="请输入用户名"onfocus="if(this value='请输入用户名'){this.value='';this.className='fontNormal'}"onblur="if(this.value==''){this.value='请输入用户名';this.className='fontGrey'}" onchange="console.log(this.value)">
</body>
59、写出打印结果并说明原因：
<script type="text/javascript">
function fn(a,b){
arguments[0] = 1;
console.log(a);
fn(2,1);
}
打印：1;
原因：实参，形参相统一;
</script>
60、将下列变量转化为小驼峰形式：my-first-name->myFirstName
<script type="text/javascript">
var str = "my-first-name";
var reg =/-(\w)/g;
var test = str.replace(reg,function($,$1){
return $1.toUpperCase();
});
console.log(test);
</script>
61、将aaaaabbbb字符串调换成bbbbaaaa形式
<script type="text/javascript">
var str = "aaaabbbb";
var reg = /(\w{4})(\w{4})/g;
console.log(str.replace(reg,"$2$1"));
</script>
网友评论