• 初识js(第一篇)


    初识javascript

    js是前端中作交互控制的语言,有了它,我们的前端页面才能“活”起来。学好这么语言显得非常重要,但是存在一定难度,所以一定要认真学习,充满耐心。

    js书写规范

    1.严格区分大小写
    2.每一行完整的语句要用 ;
    3.代码要缩进
    4.js必须用半角符号

    注册事件

    document.getElementById获取div的id,点击发生事件

    document.getElementById('box').onclick = function(){
    	this.innerHTML = "<h1>this is innerhtml<h1>"
    }
    

    onmouseenter onmouseover 鼠标划入
    onmouseleave onmouseout 鼠标划出(配对使用)

    document.getElementById('box').onmouseover = function(){
    			this.innerHTML = "hello!world"
    		}
    document.getElementById('box').onmouseout = function(){
    			this.innerHTML = " "
    		}
    

    定义变量

    var v_name = document.getElementById('id_name');
    

    注:不能使用js关键字或保留字,可以使用字母、下划线、字符、数字,但不能用数字开头。

    数据类型

    1. number js的不区分整数和浮点数
    2. string 字符串
    3. boolean true / false 布尔
    4. object null 数组
    5. function 函数
    6. undefined 未定义
    例:
    var a = 123;
    alert(typeof a)
    

    写入函数

    document.write("hello,world!");可解析html标签
    windows.onload =  function(){
        document.write("写入最后,重新生成页面");
    }注:window.onload作用是放在文档流最后解析
    

    获取对象

    获取id
    var obox = document.getElementById('box');
            obox.onclick = function(){
        		alert('123')
        	}
    获取class
    var obox = document.getElementsByClassName('box')[2];
        	obox.onclick = function(){
        		alert('456')
        	}
    获取标签
    var obox = document.getElementsByTagName('div')[0];
        	obox.onmouseover = function(){
        		this.innerHTML = "<h1>test<h1>";
        	}	
    先获取父级ID,然后获取子级标签
        	var obox = document.getElementById('box');
        	var opx = obox.getElementsByClassName('op');
    获取name,在input标签里使用
    var names = document.getElementsById("user")[0];
            names.value = "hello";
    更改id名称
        	obox.id = "qwe";
    

    js更改样式

    <style type="text/css">
                *{margin:0;padding:0;}
                #box{
                	 100px;
                	height: 100px;
                	background: green;           	
                }
                .op{
                	border:2px solid blue;
                }
    </style>
            
    <div id="box"></div>
        <button id="bn1">变换</button>
        <button id="bn2">还原</button>
    
        <script>
    	    var obox = document.getElementById('box');
    	    var onx1 = document.getElementById('bn1');
    	    var onx2 = document.getElementsById('bn2');
    	    onx1.onclick = function(){
    	    	obox.className = "op";
    	    }
    	    onx2.onclick = function(){
    	    	obox.className = "";
    	    }
    	</script>
    

    for循环

    		for(var i=0;i<4;i++){
    			alert(i)
    		}//循环
    		
    for(var i=0;i<5;i++){
    			if(i == 2){
    				continue;//跳过继续下一个
    			}
    			alert(i);
    		}
    

    附:

    sublime快捷语法:#box>.op*3
    效果:

    <div id="box">
        	<div class="op"></div>
        	<div class="op"></div>
        	<div class="op"></div>
    </div>
    

    ul>li*5>a[herf="#"]{$}

    <ul>
    	<li><a href="#">1</a></li>
    	<li><a href="#">2</a></li>
    	<li><a href="#">3</a></li>
    	<li><a href="#">4</a></li>
    	<li><a href="#">5</a></li>
    </ul>
    
  • 相关阅读:
    玩转Web之servlet(二)---servlet常见错误
    c++日历v1.12版
    c++学籍管理系统
    一个菜鸟程序员的反思
    HTML5_拖放
    HTML5_智能表单
    CSS处理溢出
    CSS 中浮动的使用
    CSS 中定位的使用
    CSS 中区块的使用_宽高属性
  • 原文地址:https://www.cnblogs.com/zhuzq/p/9534458.html
Copyright © 2020-2023  润新知