zoukankan      html  css  js  c++  java
  • 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{
             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>
    
  • 相关阅读:
    利用FormData对象实现AJAX文件上传功能及后端实现
    $.ajax not function(已 解决:jQuery库冲突解决办法)
    什么是docx,pptx等的正确MIME类型?
    session_end
    cookies.Expires (小技巧)
    如何生成静态页面的五种方案(转)
    Request.UserHostAddress和Request.Url.Host(小技巧)
    单点登录的一些实现
    框架页的session和cookies
    在IHttpHandler使用session
  • 原文地址:https://www.cnblogs.com/sexiaoshuai/p/7730214.html
Copyright © 2011-2022 走看看