Day15 Javascipt内容补充

JavaScript函数：

 

函数：
		function 函数名(a,b,c){
			执行代码
		}
		

1，如何去找到标签		
Dom直接选择器：
		1，找到标签
			#获取单个元素
			document.getElementById('id')
			整个html的id不可重复
			
			#获取多个元素
			document.getElementByTagName("div")
			或者
			document.getElementByClassName('class')
		
		
Dom间接选择器：
		也就是说先找到一个标签，然后去找他的上级，下级，父级等标签
		tag = document.getElementById('id')
		
		parentElement           // 父节点标签元素
		children                // 所有子标签
		firstElementChild       // 第一个子标签元素
		lastElementChild        // 最后一个子标签元素
		nextElementtSibling     // 下一个兄弟标签元素
		previousElementSibling  // 上一个兄弟标签元素
		可以利用tag.方法来使用
		
		
2，操作标签
		标签.innerText=""   		#对标签内的元素重新赋值	
		标签.className=""			#改掉class的值
		标签.classList.add=""		#添加指定样式
		标签.classList.remove=""	#删除指定样式
		
	实现菜单切换的小例子模型：
	<div onclick='func()'>点我</div>
	<script>
		function func(){
		}
	</script>
		
		
函数分为了三种：
		普通函数：
			function func(arg){
			}
		匿名函数：
			function(){
				console.log(123);
				}
		自执行函数：
			function func(){
			}
			func()	
		
如果一个项目里边需要用到多个网站的js,可以针对不同的网站的js定义函数
function 张洋(){
	function f1(){
	}
}

function egon(){
	function f1(){
	}
}

 

 

JavaScript序列化以及转义：
序列化：
JSON.stringify(li)：将一个列表转化成字符串
JSON.parse(s):将字符串转换成列表

转义：将URL的中文转移成字符串
	客户端(cookie)  ==>  服务器端（一般都是将cookie等信息转义后存到电脑上）
	decodeURI()：URI未转义的字符
	encodeURIComponent():转义uri组件中的字符
	escape()：对字符串进行转义
	unescape():给转义字符串串解码
	

eval:
	python:val = eval(表达式)
				 exec(执行代码)
	JavaScript：
		   eval
		  
时间操作：
	Date类
	var d = new Date()

 

 

<input type='text' id='inp'   value='123'  class='c1'>
var ele_inp=document.getElementById('inp');
ele_inp.onclick=function(){
      console.log(this.getAttribute('value'))  ;
      this.setAttribute("value",'666');
      this.style.color='red';        //点击文字变红
      this.style.border='red 1px  solid'   //  点击边框变红，有宽度
}

 

 

onchange事件：

当点击了以后发生了改变只执行的操作。

<body>
<select name="pro" id="s1">
　　 <option>请选择省份</option>
    <option value="111">河南省</option>
    <option value="222">河北省</option>
    <option value="333">东北省</option>
</select>
<script>
    var ele_select=document.getElementById("s1");
    ele_select.onchange=function () {
        alert(1234)
　　　　　console.log(ele_select.value)
    }
</script>

 

 

节点操作：

<body>
<style>
    .outer{
        width: 300px;
        height: 300px;
        border: 1px solid  red;
    }
</style>

<div class="outer">
    <h1>hello</h1>
    <a href="http://www.baidu.com">click</a>
</div>
<!--<hr>-->
<button class="add">ADD</button>
<script>
    var ele_addBtn=document.getElementsByClassName("add")[0];
    var ele_outer=document.getElementsByClassName("outer")[0];
    ele_addBtn.onclick=function () {
        //创建节点对象
        //document.createElement("a")  创建一个空的a标签
        var ele_a= document.createElement("a");
        ele_a.innerHTML='click';  //文本赋值
        ele_a.href="http://www.baidu.com";

        //添加节点对象   父节点.appendChild(添加节点)
        ele_outer.appendChild(ele_a);
    }
</script>
</body>

 

posted @ 2017-10-25 17:40  sexiaoshuai  阅读(170)  评论(0)    收藏  举报