javascript与事件

2022/7/21 14:24:38

本文主要是介绍javascript与事件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

javascript与事件

js常用事件

  1. js捕捉回车键
    1. js回调函数的event参数(一直都有传,就看你有没有接,有没有接的需求)
    2. event.keyCode(事件句柄:onkeydown)
  2. keyup事件

js回调函数概念

  1. 某事件发生时,执行某函数

js代码的执行顺序

  1. 注意加载元素与对元素进行操作的前后关系

js运算符

  1. void运算符

    <a href="javascript:void(0)" onclick="window.alert('test code')" />
    //既保存超链接样式,点击之后执行一段js代码,同时又不能完成页面跳转
    //void(表达式)执行表达式,但是不返回任何结果
    

js控制语句

  1. 常见控制语句

  2. js特殊的控制语句

    1. for...in...

    2. with语句

      	<script type="text/javascript">
      		
      		//js for..in..的两个使用场景
      
      		//场景一:对象
      		alert("场景1:对象");
      		function User(username, password) {
      			this.username = username;
      			this.password = password;
      		}
      
      		var user = new User("xun", "just a test");
      
      		for(var value in user){
      			alert(typeof value);
      			alert(value);
      			alert(user[value]);
      		}
      
      		//场景二:数组
      		alert("场景2:数组");
      		var arry = [false, true, 3.14, "test"];
      		for(var index in arry){
      			alert(typeof index);
      			alert(index);
      			alert(arry[index]);
      		}
      
      
      		//js with(带上)语句
      		with(user){
      			alert(username + "," + password);
                  //相当于:alert(user.username + "," + user.password)
      		}
      	</script>
      

js内置数组对象Array

  1. 对数组越界问题做了内部处理,未定义的为undefined
  2. 常用方法
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>js内置数组对象</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            //js内置数组对象Array
            var array1 = new Array();
            alert(array1.length);
            var array2 = new Array(3);
            alert(array2.length);
            var array3 = new Array(2, 3);
            alert(array3.length);   
            //常用:var array = [];
            //特点:自动扩容

            //内置数组对象常用方法
            var array4 = array3.reverse();  //数组3自身元素也发生了反转
            alert("array3: " + array3.join("-"));
            alert("array4: " + array4.join("-"));

            //js内置数组对象可以模拟数据栈
            array3.push(1);
            alert("array3: " + array3.join("-"));
            var lastElt = array3.pop();
            alert("last element: "  + lastElt);
        </script>
    </body>
</html>

js的BOM编程

  1. window.open 与window.close

    1. window.open(url, 新窗口打开位置)
    2. window.close()关闭当前窗口
  2. window.confirm()确认框

    1. 确定,返回true
    2. 取消,返回false
  3. window.history.

    1. window.history.go(1/-1)前进/后退
    2. window.history.back()后退
  4. window.location.href 或者 document.location.href (href可以去掉)

  5. 设置当前窗口为顶级窗口

    if(window.top != window.self){
        window.top.location = window.self.location
    }
    

图解BOM与DOM

image

JSON

  1. eval函数
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>eval函数</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            var jsonData = "{\"username\":\"zhangsan\", \"password\":\"123\"}";
            window.eval("var jsonObj = " + jsonData);
            alert(jsonObj.username + "," + jsonObj.password);
        </script>
    </body>
</html>


这篇关于javascript与事件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程