javascript基础知识

脚本语言，浏览器具有js解释器

存在形式，加分号保证压缩后不报错，节约空间
1.head中

<script type="text/javascript(默认写type，可不写，指定为javascript)">
　　alert(123);
</script>

2.文件中，放在body中的最下面
<script src="文件路径">
　　alert(123); 弹窗
</script>

注释
// 当行注释 /*...*/ 多行注释

字符串方法
a.charAt(1) 获取字符串指定位置元素
a.substring(1,3) 切片
a.legth 获取字符串长度

变量
name = value 全局变量 var name = value 局部变量
age = parseInt('18') 类型转换，其他类型类似

<div id="i1">hello</div>
<script>

function f1(){

console.log(1); 在浏览器console界面打印

var tag = document.getElementById("i1"); 根据id获取指定标签的内容

var content = tag.InnerText 获取标签内部的内容

var f = content.charAt(0);

var l = content.substring(1,content.legth);

var new_content = f + l;

tag.InnerText = new_content;

}
setInterval("f1()", 5000); 定时器，执行代码和间隔时间，毫秒

<script>

 

Dom
直接选择器
document.getElementById 根据id获取一个标签
document.getElementsByName 根据name属性获取标签的集合
document.getElementsByClassName 根据class属性获取标签的集合(列表)
document.getElementsByTagName 根据标签名获取标签的集合

间接选择器
siblings 所有兄弟标签
NextSlibing 下一个兄弟节点
previousSlibing 上一个兄弟节点

parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

 

获取
标签.InnerText 获取标签的文本内容
标签.InnerText = value 给标签文本内容重新赋值
标签.InnerHTML 获取里面全内容
标签.value
input，获取当前标签中的值
select 获取选择的value值(selectedIndex选中的顺序，从0开始)
textarea 获取当前标签中的值

 

className 样式操作
tag.className 直接整体做操作
tag.classList 查看class属性集
tag.ckassList.add('样式名') 添加样式
tag.ckassList.remove('样式名') 删除样式

<div class="c1 c2" style="font-size:16px;"></div>
obj.style.fontSize = "16px";

属性操作
obj.setAttribute("type","text") 设置属性
obj.setAttribute() 获取属性
obj.removeAttribute("value"); 删除属性
obj.attributes 获取所有属性

创建标签，并添加到HTML中
1.通过字符串创建
var tag = "<p><input type='text' /></p>"
第一个参数只能是beforeBegin afterBegin beforeEnd afterEnd
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

2.通过对象创建
var tag = document.createElement('input')
tag.setAttribute("type","text");
tag.style.color = "red";
document.getElementById("i1").appendChild(tag)

其他
alert(123); 弹框
var v = confirm("真的要删除吗？") 确认框，返回值
console.log(v) 在console输出

location.href 获取当前url
location.href = "" 重定向
location.reload() 页面刷新

实例
onfocus 获取焦点事件 onblur离开焦点事件
<input id="i1" onfocus="Focus();" onblur="Blur();" ></input>

<script>
function Focus(){
　　var tag = document.getElementById('i1')
　　var val = tag.value
　　if (var == '请输入关键字'){
　　val = ""
　　}
}
</script>
<script>
function Blur(){
　　var tag = document.getElementById('i1')
　　var val = tag.value
　　if (var.length == 0){
　　　　val = "请输入关键字"
　　}
}
</script>

<div onclick='func();'>点我</div> 获取点操作后执行func函数
<script>
function func(){
}
</script>

全选
function ReverseAll(){
　　var tbody = document.getElementById('tb');
　　var tr_list = tbody.children;
　　for(var i=0;i<tr_list.length;i++){
　　　　var curren_tr = tr_list[i];
　　　　car checkbox = curren_tr.children[0].children[0];

　　　　if(checkbox.checked){
　　　　　　checkbox.checked = flase;
　　　　}else{
　　　　　　checkbox.checked = true;
　　　　}
　　}
}

function test(arg){ 带参数
　　return arg+1
}

匿名函数：定时器，一直执行
var obj = setInterval(function(){
　　console.log(123)
}, 5000)

clearInterval(obj) 清除定时器

定时器，只执行一次
var obj = setTimeOut(function(){
　　console.log(123)
}, 5000)

clearTimeOut(obj)

自执行函数:创建函数并自动执行
function func(rag){
　　console.log(rag);
}
// func(1)
相当于

(function(rag){
　　console.log(rag)
})(1)

javascript序列化
s = JSON.stringify(li) 将对象转换为字符串
new_li = JSON.parse(s) 反过来

转义
decodeURI 只解码url
decodeURIComponent() 都解码
encodeURI 只编码url
encodeURIComponent() 都编码
escapt() 对字符串编码
unescapr() 给转义的字符串解码
URIError 由url的编码和解码方法抛出

eval
python:
var = eval('8*8') 计算表达式的值并返回
exec(执行代码) 可以循环，没有返回值

javascript:
eval:是上面两个的合集

时间：Date类
var d = new Date() 创建当前服务器时间
d.getxxx 获取
d.getxxx 设置

 

作用域(重点)
其他语言：以代码块为作用域
python 和javascript：以函数为作用域

函数的作用域在未被调用之前，已经创建

函数的作用域存在作用域链，也是被调用前创建，从小往大找

函数内局部变量提前声明，空为undefined

javascript面向对象,this(self)代指对象
function Foo(n){
　　this.name = n;
　　this.sayName = function(){
　　console.log(this.name)
　　}
}

var obj = new Foo('we'); 创建对象
obj.sayName()

上面这种方法会执行两次，需要引入原型，像字典
Foo.prototype = {
　　'sayName' : function(){
　　　　console.log(this.name)
　　}
}

绑定事件的2种方式
1.直接绑定
<div onclick='func();' ></div>
2.获取dom对象后绑定
document.getElementById('i1').onclick=function(){}

this 当前出发事件的标签
1.
<div onclick='func(this);' ></div>

function func(self){ 当前点击的标签
}

2.
document.getElementById('i1').onclick=function(){
//this 当前点击的标签
}
3. true 捕捉，先显示前面 false 冒泡，先显示后面
document.getElementById('i1').addEventListener(onclick=function(){
　　//this 当前点击的标签
},true);
document.getElementById('i2').addEventListener(onclick=function(){
　　//this 当前点击的标签
},false);

参考w3school