#序列化
a = [1,2,34,5]
b = JSON.stringify(a)
"[1,2,34,5]"
JSON.parse(b)
[1, 2, 34, 5]
eval:
python:
eval(表达式):
print(eval("1 + 2"))
exec(执行代码):
func = lambda x: x + 1
exec("d = func(2)")
print("d",d)
或
a = 1;b = 2
exec("c = a + b")
print("c",c)
JavaScript:
eval 就是python的2个合集
#转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符,中文字符
encodeURIComponent( ) 转义URI组件中的字符,中文字符,斜杠等
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
a = encodeURI("http://mp.blog.csdn.net/mdeditor/78513697理解")
"http://mp.blog.csdn.net/mdeditor/78513697%E7%90%86%E8%A7%A3"
decodeURI(a)
"http://mp.blog.csdn.net/mdeditor/78513697理解"
b = encodeURIComponent("http://mp.blog.csdn.net/mdeditor/78513697理解")
"http%3A%2F%2Fmp.blog.csdn.net%2Fmdeditor%2F78513697%E7%90%86%E8%A7%A3"
decodeURIComponent(b)
"http://mp.blog.csdn.net/mdeditor/78513697理解"
#时间:
Data类
var d = new Date()
d.getXXX 获取
d.setXXX 设置
#作用域
1 javascript:以函数作为作用域(除了let)
其他语言:以代码块为作用域,
public void Func(){
if(i==1){
string name = "Java";
}
console.writeline(name); //因为在java中{}是一个代码块
}
Func()
//报错
python中: 以函数作为作用域
case1:
def func():
if True:
name = "andi"
print(name)
func() //成功
case2:
def func():
if True:
name = "andi"
func()
print(name)
//报错
2.javascript的函数的作用域在函数未被调用之前,已经创建
function func(){
if(1==1){
var name = 'tony';
}
console.log(name);
}
3.JavaScript的函数的作用域存在于作用域链,并
且也是在被调用之前创建,如果执行func(),这样
输出变量x的时候,先找inner的作用域"tom",再找
func的作用域"cam",再找全局变量john
x = "john"
function func(){
var x = "cam";
function inner(){
var x = "tom";
console.log(x);
}
inner()
}
[html] view plain copy
var a = 100;
(function d1(){
var a = a; // 写成 a = a 或a = a + 10
console.log(a);
})()
注意,这样是不会有输出的,跟python一样。 外面有个全
局变量a ,在函数内部也不能a = a 需要global a才能使用
4.函数内部局部变量需要提前声明
//var a;
function func(){
console.log(a);
//var a = 'tom';
}
func();
//这样会输出undefined
因为javascript会自动先找一遍所有的局部变量,然后var a
(输出:undefined)进行声明,所以这样就会输出undefined
如果将var a = 'tom' 注释掉就会报错
[html] view plain copy
DOM
直接查找
var obj = document.getElementById('i1')
间接查找
文本内容操作:
innerText 仅文本
innerHTML 全内容
value
input 获取其中的value值
select 获取其中的value值(selectedIndex)
textarea 获取其中的value值
<span style="font-size:18px;">input框展示</span>
<!--onfocus:光标如果定位(按tab键或者鼠
标点击input框)到输入框就会执行onfocus函数;-->
<!--onblur:光标如果离开输入框,那么就会执行onblur函数;-->
<div style="width:800px;margin:100px auto;">
<input id="i1" οnfοcus="Focus();" οnblur="Blur();" value="请输入关键字"/>
<input type="text" placeholder="请输入关键字啦"/>
<!--新的浏览器直接支持这样的 -->
</div>
<script>
function Focus(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val == '请输入关键字'){
tag.value = "";
}
}
function Blur(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val == ''){
tag.value = "请输入关键字";
}
}
</script>
<strong>样式操作</strong>
className
classList
classList.add
classList.remove
obj.style.fontSize = 16px;
obj.style.backgroundColor = 'red';
<strong>属性操作</strong>
obj.attributes
obj.removeAttribute('value')
obj.getAttribute('value')
<strong>#创建标签</strong>
<input type="button" value="+1" οnclick="addEle1()"/>
<input id="i2" type="button" value="+2" οnclick="addEle2()"/>
<div id="i1">
<input type="text"/>
</div>
<script>
function addEle1(){
var tag = "<p><input type='text'/></p>";
document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
}
function addEle2(){
var tag = document.createElement('input');
tag.setAttribute('type','text');
tag.style.fontSize = '16px';
tag.style.backgroundColor = 'red';
tag.style.color = 'red';
var p =document.createElement('p');
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
}
</script>
<strong>任何标签通过DOM都能提交</strong>
<form id='i1' action="http://www.baidu.com">
<!--<input type="submit" value="submit"/>-->
<a οnclick="submitForm()">提交表单</a>
</form>
<script>
function submitForm(){
document.getElementById('i1').submit();
}
</script>
其他:
1.console.log()
2.alert(123)
3.var v = confirm(信息) #v:返回true或者false
console.log(v)
4. location.href = "" #重定向,跳转
location.reload() == location.href = location.href #页面刷新
5. var obj = setInterval(function(){},5000)
clearInterval(obj) // 清除定时器
var obj2 = setTimeout(function(){},5000); 只执行一次
clearTimeout(obj2) //清除
#行为(js)、样式(css)、结构(html) 相分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="300px" border="1px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr id="i1" οnmοuseοver="func()" οnmοuseοut="func2()">
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
<script>
var myTrs = document.getElementsByTagName('tr');
var tr_len = myTrs.length; // tr_len = 4
for(var i=0;i<(tr_len-1);i++){
//写成myTrs[i].style.backgroundColor是不行的,全局变量myTris,tr_len
// (虽然定义了var,但是定义在了函数外,在script块中)
//代码往下执行,先执行myTris,再执行tr_len,再执行for循环,
// i=0,1,2,3(这个函数只是存放在内存中,并未执行)
//当你的鼠标放到div上触发onmouseover事件的时候,i一直等于3
myTrs[i].onmouseover = function(){
// this.style.backgroundColor = 'red'; //this 当前触发事件的标签
myTrs[i].style.backgroundColor = 'red';
console.log(i);
}
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
function func(){
document.getElementById('i1').style.backgroundColor = 'blue';
}
function func2(){
document.getElementById('i1').style.backgroundColor = '';
}
</script>
</body>
<strong>绑定事件的;两种方式</strong>:
a.直接标签绑定 οnclick='xxx()' onfocus
b.先获取Dom对象,然后进行绑定
document.getElementById('i1').onclick
this,当前触发事件的标签
a.第一种绑定方式 //参考http://blog.csdn.net/qq_34964399/article/details/79330990
<input type='button' οnclick='ClickOn(this)'/>
<script>
function ClickOn(self){
//self 当前点击的标签}
</script>
b.第二种绑定方式
<input id='i1' type='button'/>
document.getElementById('i1').onclick = function(){
//this 代指当前点击的标签 (见上)
} 或 $('i1')[0].onclick = function(){}
如果用jQuery绑定 则为:
[html] view plain copy
$('i1').click(function(){})
[html] view plain copy
c.第三种绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color:red;
width:300px;
height:200px;
}
#content{
background-color:blue;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
</div>
</div>
<script>
var myMain = document.getElementById('main');
var myContent = document.getElementById('content');
myMain.addEventListener("click",function(){console.log('main')},true);
myContent.addEventListener("click",function(){console.log('content')},true);
//1.false:在w3c标准模型中,当点击content的时候就是冒泡方式
// 先输出content,再输出main(先输出内层)
//2.true:在w3c标准模型中,当点击content的时候就是
// 捕捉方式 先输出main,再输出content(先输出外层)
</script>
</body>
词法分析
#词法分析
<script>
function t1(age){
console.log(age);
var age = 27;
console.log(age);
function age(){}
console.log(age)
}
</script>
t1(3)
输出:
ƒ age(){}
27
27
active object ----->AO 词法分析 (js在执行函数前会先进行词法分析,系统有个AO对象,依次执行下面的3个步骤)
1.形式参数
2.局部变量
3.函数声明表达式
1.形式参数
AO.age = undefined //先找到形式参数t1(age)
AO.age = 3 ; //找到实际参数3,传入到形参age
2.然后分析局部变量
AO.age = undefined // 再找到局部变量var age ,此时不是执行程序,就是执行AO词法分析,不会把局部变量的27赋值
3.最后进行函数声明表达式分析,有 function age(){} 赋值给AO.age这个对象
AO.age = function age()
然后开始执行js语句
function t1(age){
console.log(age);
// 输出 function age()
var age = 27; //执行这句,把27 赋值给age
console.log(age); // 输出age
function age(){} // 没有程序调用这个函数,则不执行
console.log(age) // 最后执行这句,此时age还是27,因为function age(){}已经先进行词法分析了,此时不会执行function age(){},所以不会将名为age的函数赋值给age对象