标签：live 状态改变 ali back http bst hang api innertext
前端介绍Hyper Text Markup Language：超文本标记语言
<!DOCTYPE html> //文档声明 告诉浏览器使用html的哪个版本来解析页面内容 ，此写法是告诉浏览器用最新的html5的版本解析
<html>//所有内容都在html标签内部 除了 文档声明
<head>//头 ：里面的内容是给浏览器看的 比如使用什么编码
</head>
<body>//体 ：里面的内容是给用户看的
</body>
</html>
<meta charset="UTF-8">：告诉浏览器使用哪种字符集解析
<title>Insert title here</title> 告诉浏览器 页面标题是什么，title还可以起到优化SEO的作用（让搜索引擎尽快搜索到此页面）
keywords的作用：让搜索引擎尽快的找到本页面
1. <h1></h1>.......<h6></h6> 内容标题
- align：left/center/right 水平对齐方式
2. <p></p> 段落标签 ，每个段落标签独占一行并且上下会留有空白区域
3. <hr> 水平分割线
4. <br> 换行使用方式：
<!-- usemap:使用地图 #代表当前页面 -->
<img src="../imgs/b.jpg" usemap="#mymap">
<!-- 为了保证兼容性问题 把name和id都写上 -->
<map name="mymap" id="mymap">
<!-- area区域 shape形状 rect矩形 coords坐标-->
<area shape="rect" coords="0,0,200,200"
href="../imgs/2.gif">
<area shape="circle" coords="663,473,90"
href="../imgs/d.jpg">
</map>
分组标签： 没有任何显示效果，提高代码可读性
即：<thead> <tbody> <tfoot>
<form action="提交地址" method="get/post"></form>
<input type="text" placeholder="占位文本" maxlength="最大字符长度" readonly="只读" >
<input type="password" maxlength>
<input type="radio" checked默认选中>
<input type="checkbox" id="aaa"> <label for="aaa">xxx</label>
<input type="date" >
<input type="file" >
<select name>
<option value selected></option>
<select>
<textarea rows="行数" cols="列数"></textarea>
<input type="hidden">
<input type="submit/reset/button" value="按钮标题">内联样式：在标签内部通过 style属性添加样式，弊端：只能作用于一个元素，不能复用，几乎不使用
<div style="color: red;border: 1px solid green;">我是一个div</div>
<span style="color: purple;border: 1px solid pink">我是一个span</span>
内部样式：在head标签内部通过 style子标签添加样式，好处：可以在本页面内复用样式，弊端：不能多个页面复用同一样式 ，工作中此种方式用的不多，但是学习的时候使用内部样式，主要是方便演示
<style type="text/css">
/* 标签名选择器 */
h3{
color: blue;
border: 2px solid yellow;
}
</style>
外部样式：样式代码写在单独的*.css文件中，通过link标签引入到某个html页面中，好处：样式可以复用在多个页面中
<link rel="stylesheet" href="demo01.css">
css文件：
@charset "UTF-8";
p{
color: red;
background-color: green;
}
如果三种引入方式作用的样式相同则按照下面的优先级规则来决定到底哪个生效
内联优先级最高
应用场景：当需要对页面中的某一个元素设置样式的时候使用
#标签id{
样式名称:值;
样式名称:值;
}
应用场景：当需要对页面中的多个元素设置样式的时候使用
.class{
样式名称:值;
样式名称:值;
}
通过标签内部指定属性查找对应的标签
标签名[属性名="属性值"]{
样式名称:值;
样式名称:值;
}
通过多个标签之间的上下级关系查找子元素和孙子元素和。。。。所有后代元素
基础选择器 基础选择器 基础选择器{
样式名称:值;
样式名称:值;
}
通过多个标签之间的上下级关系查找子元素。
基础选择器>基础选择器>基础选择器{
样式名称:值;
样式名称:值;
}
分组选择器可以把多种选择器通过逗号连接到一起，给多个选择器设置相同的样式 h3,p,.d1,#abc,#bcd{ color:red; }
伪类选择器
active：鼠标点击时的状态
使用方式： /* 访问过的状态 / a:visited { color: red; } / 未点击状态 / a:link { color: yellow; } / 鼠标悬停状态 / a:hover { color: blue; } / 鼠标点击时的状态 */ a:active { color: pink; }
任意元素选择器
如果需要给页面中所有的元素设置相同的样式可以使用此选择器
*{
样式名称:值;
样式名称:值;
}
/*1. 通过颜色名称赋值 red yellow green
blue pink purple white black orange gray
/*2. 6位16进制赋值 每两位表示一个颜色 红 绿 蓝 */
background-color: #ff00ff;
/*3. 3位16进制赋值 每一位表示一个颜色 */
background-color: #00f;
/*4. 通过3位 10进制赋值 每个取值0-255 */
background-color:rgb(255,255,0);
/*5. 4位10进制赋值 第四位代表透明度取值0-1 */
background-color: rgba(0,255,0,0.5);
/* 设置背景图片 */
background-image: url("../imgs/a.jpg");
/* 设置背景图片的大小 参数为宽和高 */
background-size: 100px 100px;
/* 设置背景图片不重复 */
background-repeat: no-repeat;
/* 设置背景图片的位置 left center right top bottom
第一个参数代表水平 第二个参数代表垂直*/
/* background-position: right center; */
/* 通过百分比控制位置 */
background-position:90% 90%;赋值方式：
margin: 40px; 四个外边距都是40px
margin: 20px 50px; 上下20 左右50
margin: 0 auto; 水平居中
margin: 10px 30px 60px 90px; 顺时针 上右下左
border: 粗细(像素值) 边框的样式(solid) 颜色
border: 10px inset purple;
border-bottom:5px solid yellow;
border-left:5px solid pink;
border-top:5px solid green;
border-right:5px solid black;
border-radius:55px;/*圆角 值越大越园
宽高为100*200 左外边距10 右外30 边框5px 左内8px 右内2px
100+10+30+5*2+8+2
左外边距+左边框+左内边距+元素宽度+右内边距+右边框+右外边距
文本相关属性 */
文本水平对齐方式 center/left/right
例：text-align: center;
文本修饰 none 没有 underline 下划线overline 上划线 line-through 删除线
例：text-decoration: line-through;
文本颜色 color: red;
行高 通常让文本垂直居中的时候使用行高 line-height: 100px;
文本阴影 4个参数 1. 阴影颜色 2和3是阴影的偏移值 4. 阴影的模糊度 值越小越清晰 0是不模糊
例：text-shadow: #0f0 -15px 15px 1px;
字体相关属性
font-size: 20px;
字体粗细属性 normal 不加粗 bold 加粗 lighter 比普通细一些
font-weight: lighter;
字体样式 可以设置多个值通过逗号分隔，以此检测哪个生效用哪个
font-family: "楷体";
设置斜体 font-style: italic;指子元素显示范围超出父元素范围时的设置
visible(默认 超出显示)
hidden: 超出不显示
scroll:超出滚动显示
overflow: hidden;
position定位：
浮动定位：从当前行向左或向右浮动，脱离文档流，后面元素如果不希望往上顶的添加clear:left/right/both;
html搭建页面结构和内容 CSS用来美化页面 JS给页面添加动态效果或显示动态内容
<!-- 1. 在元素的事件中添加js代码 -->
<input type="button" value="点我试试" onclick="alert(‘第一种引入方式成功！‘)">
<!-- 2. 通过script标签添加js代码 可以写在任意位置-->
<script type="text/javascript"> alert("第二种引入方式");</script>
<!-- 3.通过单独的*.js文件写js代码 以下方式引入 引入文件后不能在当前script标签体内写js代码 -->
<script type="text/javascript" src="first.js"> //这个位置不能再写js代码</script>
因为js属于弱类型语言 声明变量的时候不需要指定类型，直接赋值即可
var x = 18;
var s = "abc";
s = 20;
var b = true/false;
var y;
在js中所有的数值底层都是浮点型， 在使用过程中会自动转换整数或小数
int x = 5/2; x=?(在java中结果是2)
var x= 6/2; 3
var x = 5/2; 2.5
NaN（Not a Number）：不是一个数 ，用来判断一个变量是否为数值类型 判断方式通过isNaN()函数判断,当变量不是数的时候为true，是数为false
isNaN(20); false
isNaN("aaa"); true
通过单引号或双引号修饰一个字符串
例如：var s1 = ‘abc‘; var s2="abc";
null为对象类型的值
var p = null;
数值类型
转字符串： 18->"18" "abc"+18 "abc18"
字符串
转数字： "18"->18 "abc"->NaN "18abc"->18
转布尔值: ""空字符串转成false 其它都是true
布尔值
转数字： true->1 false->0
转字符串：true->"true" false->"false"
转数字 NaN 21+undefined= NaN NaN和任何数值进行运算都得NaN
转布尔值 undefined->false
转字符串 undefined->"undefined"
null
转数字 null->0
转布尔值 null->false
转字符串 null->"null" "abc"+null = "abcnull"
==和===：==会在比较两端变量数值之前先将变量类型统一，统一后再比较值.===会先比较类型是否相等如果相等再比较数值如果不等就直接false "666"==666 true "666"===666 false
typeof 获取变量的类型 typeof 234234+6 = "number6"
包括：if else while do while for switch case - 条件如果不是布尔类型会自动转换成布尔类型 - for 中 把int改成var， js中不支持增强for循环(foreach)
for(var i=0;i<10;i++){
}
public String run(String name,int age){ return "abc"; }
格式一： function 函数名(参数列表){ return 18; } 例如：
function fun(name,age){
return "abc";
}
格式二：
var 函数名 = function(参数列表){
return "abc";
}
得到页面元素对象的函数
var x = document.getElementById("id");
获取value值或给value赋值
var z = x.value; x.value="abc";
给元素添加文本内容
x.innerText="abc";
给元素添加html代码
x.innerHTML="<h1>abc</h1>";String 数组 日期对象 正则
字符串创建的方式
var str1 = "abc";
var str2 = new String("abc");
转大写和转小写
toUpperCase() toLowerCase();
查找字符串出现的位置
str.indexOf(‘a‘)获取a在str中第一次出现的位置
str.lastIndexOf("a")获取z在str中最后一次出现的位置
截取字符串
str.substring(start,[end]); //end可以省略
替换字符串
str.replace(old,new);
拆分字符串
str.split(":") a:b:c [a,b,c]
创建数组
var arr1 = ["刘备",50,true];
var arr2 = new Array();//空数组
数组中添加元素
arr.push("小明");
arr.push(18);
获取数组中的数据
数组 var arr = ["a",18,true]; arr = new Array();
正则
创建方式两种
var reg = /^a/i;
var reg = new RegExp("^a","i");
在元素的事件中如果执行 return false 则取消当前事件
<a href="http://tmooc.cn" onclick="return false">Tmooc</a>
失去焦点以文本框为例，当光标离开的时候，此事件触发
<input type="text" onblur="">
/* 通过声明函数的形式声明一个对象 */
function Person(name,age){
//声明属性
this.name=name;
this.age=age;
//声明方法
this.run=function(){
alert("name="+this.name+" age="+this.age);
}
}
//创建对象
var p = new Person("貂蝉",85);
p.run();
/* 声明空对象 */
function SuperMan(){
}
//创建对象
var sman = new SuperMan();
//添加属性
sman.name="克拉克";
sman.age=18;
//添加方法
sman.fly = function(){
alert("我叫"+this.name+"今年"
+this.age+"岁，我在飞");
}
//调用方法
sman.fly();
/* 第二种声明对象的方式 */
/* 以声明变量的形式创建对象 */
var p = {
"name":"吕布",
"age":25,
"run":function(){
alert("name"+this.name+" age="+this.age);
}
}
//调用对象的方法
p.run();
window中所有的属性和函数，调用时可以把window省略掉，
window中的属性称为全局属性，函数称为全局函数
window的全局函数
parseFloat/parseInt()
alert();//弹出框
confirm();//确认框
prompt();//弹出文本框
isNaN();
window的全局属性
location（地址）：
location.href 可以获取和设置浏览器当前的显示地址
location.reload() 页面刷新
history（历史）： history.length 得到当前窗口访问过的页面数量
history.forward() //访问下一个页面
history.back() // 访问上一个页面
history.go(num) 前往某个页面 0代表当前页面，1代表下个页面，
2代表下两个页面 -1 代表上一个 -2 代表上两个页面
screen（屏幕）：
width/height: 获取屏幕的分辨率
availWidth/availHeight：获取屏幕可用分辨率
navigator（导航、帮助）
navigator.userAgent 获取浏览器的版本信息
失去焦点事件
/* 窗口点击事件 */
/* onclick = function(){
//alert("窗口被点击了");
location.href="http://tmooc.cn";
} */
/* 页面加载完成时执行 */
onload = function(){
var input = document.getElementById("ip1");
input.value="abc";
}
/* 获取和失去焦点事件 */
onblur = function(){
console.log("失去焦点");
}
onfocus = function(){
console.log("得到焦点");
}
div.style.css样式属性名称 = "属性的值";
通过定时器可以实现 每隔一段时间执行某些代码
var id = setInterval(函数,3000);//每隔3秒执行函数
var h1 = document.createElement("h1");
父元素.appendChild(新元素);
父元素.insertBefore(新元素,弟弟元素);
父元素.removeChild(被删除的元素);在元素标签中添加
<input type="text" onkeydown="downfn()">
动态绑定事件
/* 动态绑定事件 */
/* mybtn.onclick = function(){
alert("动态绑定成功！");
}
*/
mybtn.onclick = myfn;
通过Event对象可以得到和事件相关的信息
通过event获得事件源 （事件源指添加事件的元素）
/* 通过event得到事件源 存在兼容性问题
有的浏览器支持target 有的支持srcElement
通过以下写法可以保证任何浏览器都能正常执行*/
var obj = event.target||event.srcElement;
alert("标签名称："+obj.nodeName);
因为jQuery就是一个js文件 所以引入方式和引入一个普通的js文件一样
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
把js转成jq
/* 得到js对象 */
var input = document.getElementById("myinput");
/* 把js对象转成jQuery对象 */
/* $是jQuery单词的缩写 $=jQuery */
var $jq = $(input);
/* 弹出文本框的value值 */
把jq转成js
/* 得到jq对象 */
var $jq = $("#myinput");
/* 把jq转成js对象 */
//第一种写法
var js1 = $jq[0];
//第二种写法
var js2 = $jq.get(0);
alert(js1.value+"="+js2.value);
标签名选择器
var $div = $("div");
id选择器
var $div = $("#id");
类选择器
var $div = $(".class");
分组选择器
var $div = $("div,#id,.class");
任意元素选择器
var $div = $("*");
获取元素的所有兄弟元素
$("#abc").siblings("div");
获取元素的哥哥元素
$("#abc").prev("div");
获取元素的哥哥们元素
$("#abc").prevAll("div");
获取元素的弟弟元素
$("#abc").next("div");
获取元素的弟弟们元素
$("#abc").nextAll("div");
创建元素
var div = document.createElement("div");
var $div = $("<div>abc</div>");
添加到页面中
$("#big").append($div); //添加到最后面
$("#big").prepend($div);//添加到最前面
插入元素
兄弟元素.after(新元素) 加载兄弟元素的后面
兄弟元素.before(新元素) 加载兄弟元素的前面
//添加到二哥前面 before
$("h1:contains(‘二‘)").before($h1);
//添加到二哥的后面 after
$("h1:contains(‘二‘)").after($h1);
删除元素
修改元素的样式css
$("div").css("color","red");
属性
$("#abc").attr("id"); 获取id的属性值
$("#abc").attr("class","aaa"); 给元素添加class属性值为aaa
文本
$("#abc").text() 获取文本内容
$("#abc").text("啊啊啊") 赋值文本内容
html
$("#abc").html() 获取文本内容
$("#abc").html("<h1>啊啊啊</h1>") 赋值文本内容 //开启定时器
setInterval(function(){
//模拟事件
$("input").trigger("click");
},3000);
hover(fn1,fn2); 等效 mouseover + mouseout
$("div").hover(function(){
$("div").css("color","red");
},function(){
$("div").css("color","green");
})
function fn1(){//隐藏
$("img").hide(3000);
}
function fn2(){//显示
$("img").show(3000,function(){
alert("啦啦啦");
});
}
function fn3(){//滑出
$("img").slideUp(2000);
}
function fn4(){//滑入
$("img").slideDown(2000);
}
function fn5(){//淡入
$("img").fadeIn(2000);
}
function fn6(){//淡出
$("img").fadeOut(2000);
}
function fn7(){//自定义
$("img").animate({"left":"250px"},1000)
.animate({"top":"250px"},1000)
.animate({"left":"0px"},1000)
.animate({"top":"0px"},1000)
.fadeOut(2000,function(){
$(this).remove();
});
}
<!-- autoplay自动播放 loop循环播放 controls显示播放面板-->
<!-- <audio src="music.mp3" autoplay="autoplay"
loop="loop" controls="controls"></audio> -->
<!-- poster视频封面 -->
<video poster="../imgs/k.jpg" controls="controls">
<source src="hero.mp4">
</video>标签：live 状态改变 ali back http bst hang api innertext
原文地址：https://www.cnblogs.com/dxllp/p/10726009.html
