python学习第46天

js序列化

var d = {'a':'aa','b':18};
序列化:
	var d_json = JSON.stringify(d); //python  json.dumps(d);
	
反序列化:
	d_json = "{"a":"aa","b":18}"
	var reverse_json = JSON.parse(d_json);  //python  json.loads()

ECMAScript(三大核心)

js语言 -- 核心

BOM操作 js操作浏览器对象模型(Browers object model)

DOM操作 js操作我们HTML文件(包括文件中的所有元素,属性等等)

Document object model

一.BOM对象浏览器对象模型

1.弹框(了解)

alert('xx');
confirm('are you sure?')

下面两个必须记住

window对象，全局BOM对象，是咱们后面学的所有对象的原始对象

2.location对象

location.href;  获取当前页面的地址
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload();  刷新当前页面

3.计时器

第一种:一段时间之后执行某个任务
	设置:var t = setTimeout(function(){confirm('你满18岁了吗?')},5000);
		var t = setTimeout("console.log('xxx')",1000);
		t就是浏览器用来记录你的计时器的标识数字
	清除:clearTimeout(t)
第二种:每隔一段时间执行某个任务
	设置:var t = setInterval(function(){confirm('弹个框!!')},3000);
	清除:clearInterval(t);

二.DOM对象

HTML文档(.html文件)

1.直接查找选择器

html代码:
	<div class="c1" id="d1"></div>
	<div class="c1 c2" id="d2"></div>
css代码:
	   .c1{
            background-color: green;
            height: 100px;
             100px;
        }
        .c2{
            background-color: red;
            /*height: 100px;*/
            /* 100px;*/
            color:red;
        }

按标签名查找: var divEle = document.getElementsByTagName('div');
按id值查找:  var d1 = document.getElementById('d1');
			示例: d1.style.height = '600px';
按类值查找:var a = document.getElementsByClassName('c1');
示例：
var d2 = document.getElementsByClassName('c1');
d2.style.color = 'green';  
报错：因为得到的是多个标签对象，会放到一个数组里面，也就是得到的d2是个标签数组对象，里面比普通数组多了一些其他的属性
	VM1527:1 Uncaught TypeError: Cannot set property 'color' of undefined
    at <anonymous>:1:16

所以需要循环来设置标签效果
for (var i in d2){console.log(d2[i])};  直接循环数组不好，因为有其他属性干扰
  VM1658:1 <div class="c1" id="d1" style="color: red;">div1</div>
  VM1658:1 <div class="c1" id="d2">div2</div>
  VM1658:1 2
  VM1658:1 ƒ item() { [native code] }
  VM1658:1 ƒ namedItem() { [native code] }
  
需要下面的方式进行循环
for (var i=0;i<d2.length;i++){console.log(i,d2[i])};

也可以通过索引取值
d2[0];

2.间接查找选择器

var div1 = document.getElementsByClassName('c1')[0]; 
div1.nextElementSibling.style.color = 'red';  找下一个兄弟标签,并改了色
div1.previousElementSibling;  找上一个兄弟
div1.firstElementChild;  找第一个儿子
div1.lastElementChild;  找最后一个儿子
div1.children;  找所有儿子,是一个数组
div1.parentElement;  找到自己的父级标签

3.文本操作

innerText
	获取文本:
		var a = document.getElementById('jd')
		a.innerText;  只获取文本内容
    设置文本:
    	a.innerText = '<a href="">校花</a>';不能识别标签,单纯的文本内容显示
innerHTML
	获取文本	
		var d = document.getElementsByClassName('c1')[0];
		d.innerHTML;  获取的内容包含标签
	设置文本:
		d2.innerHTML = '<a href="">校花</a>'; 能够识别标签,生成标签效果

4.value值操作

input标签
	html:
		<input type="text" name="username" id="username" >
	示例:
		var inp = document.getElementById('username'); 找到标签
		inp.value;  获取值
		inp.value = '200块!';  修改值

5.class类值操作

var div1 = document.getElementById('d1');
div1.classList;  // 获取标签类值
div1.classList.add('c2'); // 添加类值
div1.classList.remove('c3'); // 删除类值
div1.classList.toggle('c3');  // 有就删除,没有就添加
var t = setInterval("div1.classList.toggle('c3')",1000);  //定时器添加

6.style样式操作

var div1 = document.getElementById('d1');
div1.style.color = 'green';
//当css属性名称有-的时候，需要去掉-，并且后面单词的首字母大写
div1.style.backgroundColor = 'green';

7.HTML的label标签补充

    <label >用户名: 
        <input type="text" name="username" id="username">
    </label>
    
    <label for="password">密码: </label>
    <input type="password" name="password" id="password">

8.button补充

普通按钮,没有提交效果
<input type="button">
<button type="button">注册</button>

下面两个能够提交form表单数据
<input type="submit" value='登录'>
<button type="submit">注册</button>

示例：
<!--<label for="username">用户名</label>-->
<form action="http://www.baidu.com">
    <label>
        用户名
        <input type="text" id="username" name="username">
    </label>

<!--    <input type="submit">-->
<!--    <input type="button" value="普通按钮">-->
<!--    <button type="submit">button提交</button> 默认type="submit"，也可以触发提交数据的动作-->
<!--    <button type="button">button提交</button> type="button"普通按钮-->
</form>
<!--在form标签外面都是普通按钮-->
<input type="submit">
<button>xxx</button>

9.事件

DOM中可以为标签设置事件,给指定标签绑定事件之后,只要对应事件被触发,就会执行对应代码.

(1)常见事件

onclick 单击时触发事件

ondblclick 双击触发事件

onchange 内容修改时触发事件

onfocus 获取焦点(光标)时触发事件

onblur 失去焦点(光标)时触发事件

(2)绑定事件的两种方式

方式1
<div class="favor" onclick="doFavor(this);">赞</div>
function doFavor(self) {
        ...
}

方式2
<div class="favor">赞</div>
var dEle = document.getElementsByClassName('.favor')
dEle.onclick = function(){
	...
}