JavaScript补充

柔光的暖阳◎ 2023-06-03 05:52 4阅读 0赞

## DOM： ##

*  获取元素  
    a.按id属性，精确查找一个元素对象`var ul = document.getElementById("id");`  
    b.按标签名找一组元素节点对象,返回动态集合`var elems = parent.getElementsByTagName("tag");`  
    c.按name属性查找一组元素节点对象`var list = document.getElementsByName("name");`  
    d.通过class查找:查父元素下指定class属性的元素 ,返回动态集合`var elems = parent.getElementsByClassName（“class”）；`
 *  事件  
    a.onclick:点击  
    b.onfocus:获取焦点  
    c.onblur:失去焦点
 *  操作标签  
    a.innerText  
    b.checkbox:checked;  
    c.className;  
    d.classList:removre(‘class’)/add(‘class’);

## 页面布局 ##

*  主站：

<div class='header'>
    	<div style="width:960px;margin:0 auto;">
    			内容自动居中
    	</div>
    </div>
    <div class='content'></div>
    <div class='footer'></div>

*  后台管理布局：

position:（单独）
    	fixed;    --永远固定在窗口的某个位置
    	relative  --单独无意义
    	*absolute  --第一次定位，可以在指定位置，滚轮滚动式，不定。
    a.
    	左侧菜单跟随滚动条；（absolute）
    b.
    	左侧以及上面不动；（absolute配合overflow）
    注意：左右缩小，min-width;
    				
    ：hover使用方法：  ：hover  .p{};可以操控他下面的元素
    				
    <link rel="stylesheet" href="font-awesome.min.css"/>;引入font-awesome

## JS ##

*  存在形式
 *  注释
 *  局部变量与全局变量
 *  数据类型
 *  循环语句
 *  选择语句
 *  函数  
    a.普通函数

function func(arg){ 
    
    }

b.匿名函数

setInterval(执行的函数，400);
    setInterval(function() 
    { 
    },5000)

c.自动执行函数

function F1(arg){ 
    }
    F1(1);
    				
    (function(arg){ 
    })(1);

*  序列化

JSON.stringify(li);//把数组（对象）转化为字符串
    JSON.parse(li); //把字符串转化为对象类型（对象)

*  转义：

decodeURI(url);
    encodeURI(url);
    decodeURIComponent(url);
    encodeURIComponent(url);
    escape();
    unescape();
    	
    	客户端（cookie） =》服务器端
    	将数据经过转义后，保存在cookie

*  eval
 *  时间  
    Date类：  
    var d = new Date();  
    d当前时间；  
    d.getxxx(); 获取。。。  
    d.setxxx(); 设置。。。
 *  作用域  
    其他语言：以代码块作为作用域  
    Python：以函数作为作用域  
    JavaScript:1).以函数作为作用域  
    2).函数的作用域在函数未被调用之前，已经被创建  
    3).函数的作用域存在作用域链，并且也是在被调用之前创建  
    示例1：

xo = 'alex';
    function func() { 
    	var xo = 'eric';
    	function inner(){ 
    		console.log(xo);
    	}
    	inner();
    }
    						
    func();

示例2：

xo = 'alex';
    function func() { 
    	var xo = 'eric';
    	function inner(){ 
    		console.log(xo);
    		}
    	var xo = 'hover';
    	return inner();
    }
    						
    var ret = func();
    ret();  //hover; 原因：函数的作用域在函数未被调用之前，已经被创建；并且值覆盖
    						
    func();

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

function func(){ 
    	console.log(xp);
    	var xp = 'ale';
    }
    						
    func()； //undefined,原因只声明没定义

*  JavaScript面向对象

function foo(n) { 
    	this.name = n;
    	this.sayName = function(){ 
    			console.log(this.name);
    		}
    }
    			
    var obj = new Foo('we');
    obj.name;
    obj.sayName();

a.this代指对象  
b.创建对象时，new 函数();

原型：
    function Foo(n) { 
    	this.name = n;
    }
    			
    //Foo的原型
    Foo.prototype = { 
    	'sayName':function(){ 
    		console.log(this.name);
    	}
    }