day15 html、js
HTML
加减框代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.inp{
border: 0;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
height: 25px;
margin: 0;
padding: 0;
float: left;
}
.sp{
display: inline-block;
height: 25px;
width: 25px;
text-align: center;
line-height: 25px;
float: left;
}
</style>
</head>
<body>
<div style="border: 1px solid #dddddd;display: inline-block;">
<div class="sp">-</div>
<input class="inp" type="text" />
<div class="sp">+</div>
</div>
</body>
</html>
针对无法加载的图片提示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: 0;
}
</style>
</head>
<body>
<div>
<div class="item">
<a href="http://www.etiantian.org">
<img src="2.jp" alt="图片">
</a>
</div>
</div>
</body>
</html>
css样式优先级应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none !important;
}
.c1{
color: red !important;
}
.c2{
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">asdfasdfasdfasdf</div>
</body>
</html>
css标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1[alex='a']{
color: red;
}
</style>
</head>
<body>
<div>
<div class="c1" alex="a">1</div>
<div class="c1" alex="b">2</div>
<div class="c1">3</div>
<div class="c1" alex="a">4</div>
</div>
</body>
</html>
用户登入边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.icon-name{
background-image: url('i_name.jpg');
height: 16px;
width: 16px;
display: inline-block;
}
.icon-pwd{
background-image: url('i_pwd.jpg');
height: 16px;
width: 16px;
display: inline-block;
}
</style>
</head>
<body>
<div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px;" />
<span class="icon-name" style="position: absolute;top:2px;right: 0;"></span>
</div>
</body>
</html>
通过内部边距撑外边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1:hover{
background-color: #2459a2;
}
.c2:before{
content: '666';
}
.c2:after {
content: '777';
}
.left{
float: left;
}
.item{
background-color: red;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="c1">ddd</div>
<div class="c2">888</div>
<div style="background-color: red" class="clearfix">
<div class="left" style="height: 100px;background-color: green">1</div>
<div class="left">2</div>
</div>
</body>
</html>
显示三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.icon{
display: inline-block;
border-top: 15px solid transparent;
border-right: 15px solid red;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
JavaScript
javascript变成语言由浏览器编译执行
1.1 javascript语言存在的形式：
文件
当前代码块
放置位置：body内部的最下面
1.2 变量
局部变量 var a=123
全局变量 a=123
javascript的应用注意使用方法：变量先设置为局部变量，如果有需要成为全局变量，单独设置为全局变量
1.3 数据类型
原始数据类型
数字（Number）parseInt(): 将某值转换成数字，不成功则
字符串（string）：
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
字符串应用再跑马灯例子中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1" style="display: inline-block; background-color: green; color: white;">欢迎莅临指导 </div>
<script>
// 每秒执行1次f1函数
setInterval("f1()", 1000);
// 定义函数
function f1(){
// js获取某一个标签 id=i1
var tag = document.getElementById('i1');
// 获取标签的内容
var text = tag.innerText;
// 获取第一个字
var a = text.charAt(0);
// 获取剩余的字
var sub = text.substring(1, text.length);
// 拼接字符串
var new_str = sub + a;
// 重新赋值
tag.innerText = new_str;
}
</script>
</body>
</html>
布尔数据类型
== 等于，比较值
=== 等于，比较类型及值
!= 不等于
!== 不等于，比较类型及值
&& 且
|| 或
数组：
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.join(sep)
Python
JavaScript: li.join"_"
常见功能：
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
其他序列化
JSON.string
JSON.parse(b)
1.4 javascript程序语句和异常
a:条件判断语句
分别为if...else.... switch
1 if(条件){ 2 3 }else if(条件){ 4 5 }else{ 6 7 }
1 switch(name){ 2 case '1': 3 age = 123; 4 break; 5 case '2': 6 age = 456; 7 break; 8 default : 9 age = 777; 10 }
b：循环语句
1 var names = ["alex", "tony", "rain"]; 2 3 for(var i=0;i<names.length;i++){ 4 console.log(i); 5 console.log(names[i]); 6 }
1 var names = ["alex", "tony", "rain"]; 2 3 for(var index in names){ 4 console.log(index); 5 console.log(names[index]); 6 }
1 while(条件){ 2 // break; 3 // continue; 4 }
c:异常处理
1 try { 2 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 3 } 4 catch (e) { 5 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 6 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 7 } 8 finally { 9 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 10 }
主动抛出异常：throw Error('xxxx')
函数：
javascript函数基本分成三类
// 普通函数
function func(arg){
return true;
}
// 匿名函数
var func = function(arg){
return "tony";
}
// 自执行函数
(function(arg){
console.log(arg);
})('123')
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
java作用域
javascript区块级作用域
function Main(){
if(1==1){
var name = 'seven';
}
console.log(name);
}
// 输出： seven
补充：标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字，用于指定变量属于块级作用域。
javascript采用函数作用域
在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。
function Main(){
var innerValue = 'seven';
}
Main();
console.log(innerValue);
// 报错：Uncaught ReferenceError: innerValue is not defined
javascript作用链
由于JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。
xo = 'alex';
function Func(){
var xo = "seven";
function inner(){
var xo = 'alvin';
console.log(xo);
}
inner();
}
Func();
