python第八十八天－－－－dom js

DOM操作

1、 找到标签
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点

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

2、操作标签对应 的对象

内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
input标签
selec
属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性

/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

checkbox #可以赋值,进行是否打勾操作
obj.checked= true
obj.checked= false

class操作
<input onfocus="Focus();" onblur="Blur();" type="text" name="il" id="il" value="请输入关键字" />
标签.className // 获取所有类名
标签.classList.remove(cls) // 删除指定类名
标签.classList.add(cls) // 添加类名
标签操作
// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"

// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

操作标签
// 方式一 字符串
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二 对象
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

样式操作
var obj = document.getElementById('i1')

obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
obj.classList#类名

提交表单
document.geElementById('form').submit()

事件:
onclick='fun()'

 绑定事件两种方式
         一、
             直接标签绑定
             onclick='fun()'
         二、
             先获取dom对象 ，然后进行绑定
             onfocus
             onmouseover=function(){}
             onmouseout=function(){}
         this 当前触发事件的标签
             a. 第一种绑定方式
                 <input id='s1' type='button' onclick='fun(this)'>
                 function fun(self){
                         // self 当前点击的标签
                 }

             b.第二种绑定方式
                 <input id='xx' type='button'>
                 document.getElementById('xx').onclick=function(){
                     this.xxx
                     //this 当前调用this 的对象
                 }
             c.第三种绑定方式
                 var obj=document.getElementById('xx');
                 obj.addEventListener()

其他操作
console.log 输出框
alert 弹出框
confirm 确认框

// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载

// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器

6、位置操作
总文档高度
document.documentElement.offsetHeight

当前文档占屏幕高度
document.documentElement.clientHeight

自身高度
tag.offsetHeight

距离上级定位高度
tag.offsetTop

父定位标签
tag.offsetParent

滚动高度
tag.scrollTop

javaScript
独立的语言 ,浏览器具有JS的解释器
js存在的形式

head 中

	 <script src=".."> </script> #引入文件

	 最好放在 body中的最下方

	 变量:
	  name = 'uge3'  #全局变量
	  var name = 'uge3' #局部变量

	 基本数据类型
	 	数字
		 	JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
		 	转换：

			parseInt(..)    将某值转换成数字，不成功则NaN
			parseFloat(..) 将某值转换成浮点数，不成功则NaN
			特殊值：

			 NaN，非数字。可使用 isNaN(num) 来判断。
			Infinity，无穷大。可使用 isFinite(num) 来判断。

	 	字符串

	 			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个组内容；
				                                     $&：当前匹配的内容；
				                                     $`：位于匹配子串左侧的文本；
				                                     $'：位于匹配子串右侧的文本
				                                     $$：直接量$符号
	 	列表(数组)

	 		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( )         对数组元素进行排序
	 	字典

	 	a={k1:'v1,k2:'v2',k3:'v3'	}

	 	布尔类型 

	 		布尔类型仅包含真假，与Python不同的是其首字母小写。
			true    false
			==      比较值相等
			!=       不等于
			===   比较值和类型相等
			!===  不等于
			||        或
			&&      且

	for 循环
		a=[1,2,3,4,5,6]
		for (var i in a){
			console.log(i);
			console.log(a[i]);
		}

		for (var i =0 ;i<10;i++){
			//不支持字典循环

		}

	条件语句
		if (){
		}else if(){

		}else{

		}

		if(i==b)//值相等 就可以
		if(i===b)  //类型也要一致

		==      比较值相等
		!=       不等于
		===   比较值和类型相等
		!===  不等于
		||        或
		&&      且

	定时器

		setInterval()   #定义一个定时器

		console.log(1)

	函数
		function 函数名(形参){

		}

　　

js函数：

 三种函数：

 普通函数
 function func(){

 }

 匿名函数
 function(){
 }

 自执行函数
 (function(arg){
         console.log(arg);
     })('123')

 序列化

 JSON.stringify(list) //列表转为字符串
 JSON.parse(str)//字符串转为列表

 转义

 decodeURI( )                   URl中未转义的字符
 decodeURIComponent( )   URI组件中的未转义字符
 encodeURI( )                   URI中的转义字符
 encodeURIComponent( )   转义URI组件中的字符
 escape( )                         对字符串转义
 unescape( )                     给转义字符串解码
 URIError                         由URl的编码和解码方法抛出

 eval

 JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

 eval()
 EvalError   执行字符串中的JavaScript代码
 4、正则表达式

 1、定义正则表达式

 /.../  用于定义正则表达式
 /.../g 表示全局匹配
 /.../i 表示不区分大小写
 /.../m 表示多行匹配
 JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)

 eval 以及时间操作

 val =eval('1+1')
 时间
     Date对象
     var d= new Date()  生成一个时间对象
     d.getxxx  获取
     d.setxxx  设置

 作用域
     JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。
     切记：所有的作用域在创建函数且未执行时候就已经存在。
     function f2(){
         var arg= 111;
         function f3(){
             console.log(arg);
         }

         return f3;
     }

     ret = f2();
     ret();

     1、以函数作为作用域

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

     3、函数的作用域存在作用域链， 并且也是在被调用之前创建

     4、函数内部局部变量 提前声明

     对象
     function func(){
         this.name=n;
     }
     var obj= new func();
      1、this 代指对名象
      2、创建对象时  用 new
      ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
      function Foo (name,age) {
         this.Name = name;
         this.Age = age;
         this.Func = function(arg){
             return this.Name + arg;
         }
     }

     var obj = new Foo('alex', 18);
     var ret = obj.Func("sb");
     console.log(ret);

     以上浪费内存
     ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
     function Foo (name,age) {
     this.Name = name;
     this.Age = age;
     }
     ##原型
     Foo.prototype = {
         GetInfo: function(){
             return this.Name + this.Age
         },
         Func : function(arg){
             return this.Name + arg;
         }
     }

 //for (var i in [11, 22 ,33];) {
 //    print i;
 //}
 //
 //
 //for(var 1=0; i<10; i++){
 //    print i;
 //}
 //
 //switch(name){
 //    case '1':
 //        age=123;
 //        break;
 //    case '2':
 //        age=456;
 //        break;
 //    default:
 //        age=789;
 //
 //}
 xo="ab";
 function func(){
     var xo="3e";
     function inner(){
         console.log(xo);
     }
     return inner;
 }
 var ret=func()
 ret()