zoukankan      html  css  js  c++  java
  • java-前端之js

    js:
    js的三种形式:
    <!-- 事件:就是用户的操作或者动作,就是js被调用的时机;如:单机事件,双击事件 -->
    <!-- 1.事件定义式:在定义事件时直接写js -->
    <input type="button" value="btn1" onclick="alert('点我干嘛')"/>
    <!-- 2.嵌入式:在script标签内写js该标签可以写在网页的任意位置 -->
    //js注释和java一样/**/
    /*1.js中的函数都是公有的因此不用修饰符修饰*/
    /*2.js中的函数不用声明返回值类型*/
    function f2(){
    //js中单引号和双引号一样
    alert("点你咋啦");}
    <!-- 3.文件调用式:在js文件内写js -->
    <script src="my.js"></script>


    js中:
    //直接所写的代码有两种情况
    //1.定义函数,该函数是在页面加载后用户点击按钮时调用的.
    //2.直接书写js,这样的js是在页面加载时直接调用的,其调用的时机甚至比body还早.有可能出现某些标签获取为为定义状态;
    //alert("谁让你打开的");
    console.log("控制台打印一下");
    //1..声明变量并输出到浏览器控制台
    var x;
    console.log(x);
    x = 5;
    console.log(x);
    x = "你妹";
    console.log(x);
    var y = 6;
    console.log(y);
    //2..数据类型
    var s = "hello";
    var n = 3.14;
    var b = true;
    console.log(s);
    console.log(n);
    console.log(b);
    //3..隐式转换
    console.log(s+n);
    console.log(s+b);
    console.log(n+b);
    console.log(b+b);
    //4..强制转换
    console.log(parseInt(3.14));
    console.log(parseInt("5.63"));
    console.log(parseInt("zxc"));
    console.log(parseInt(""));
    //5..类型判断
    console.log(typeof(s));
    console.log(typeof(n));

    console.log(isNaN(56));
    console.log(isNaN("56"));
    console.log(isNaN("a56"));
    console.log(isNaN("zxc"));
    console.log(isNaN(parseInt("")));
    //6.运算符
    console.log(5=="5");
    console.log(5==="5");
    //7.条件
    //js可以用任何数据做条件,当以非boolean做条件时,空值等价于false,非空值等价于true
    //空值:0,null,"",NaN,undefined
    //这样设计的目的,时为了简化判断的逻辑.
    var k = 0;
    if(k){console.log("ok");}
    var w = 6;
    w && console.log("好");


    //根据id获取标签
    var input = document.getElementById("num");
    js调试技巧:
    1.看报错信息(在浏览器控制台看)
    2.打桩(跟踪程序执行的过程,查看关键步骤变量的值)
    3.排除法(删除一半代码保留一半代码看是否报错,用于定位问题)


    js中api整理:
    //1.String对象:主要的方法和Java一样,看看手册
    //2.Number对象
    var n = 3.1415926;
    console.log(n.toFixed(3));
    //3.Array对象
    //1)如何创建数组
    var a1 = ["zhangsan",25,false];
    console.log(a1[0]);
    var a2 = new Array();
    a2.push("lisi");
    a2.push(28);
    a2.push(true);
    console.log(a2[1]);
    //结论:无论用什么方式创建出来的数组都一样,
    //它们都是Object数组,可以存任意类型的数据.
    //2.倒转方法
    var arr = [5,12,8,1,6,4,7];
    arr.reverse();
    console.log(arr);
    //3.排序方法
    //由于js中的数组都是Object数组,所以:它默认按照字符串由小到大进行排序.
    arr.sort();
    console.log(arr);
    arr.sort(function(a,b){
    return a-b;
    });
    console.log(arr);
    //4.Math--和Java相似,看看手册
    //5.Date
    //1)如何创建日期对象
    var d1 = new Date();
    console.log(d1);
    var d2 = new Date("2017/10/01 10:00:00");
    console.log(d2);
    //2)如何格式化日期
    console.log(d1.toLocaleDateString());
    console.log(d1.toLocaleTimeString());
    //3)读写时间分量
    var y = d1.getFullYear();
    var m = d1.getMonth()+1;
    var d = d1.getDate();
    var h = d1.getHours();
    var mm = d1.getMinutes();
    var s = d1.getSeconds();
    var now = y+"年"+m+"月"+d+"日 "+h+"时"+mm+"分"+s+"秒";
    console.log(now);
    //6.RegExp
    //1)如何创建正则对象
    var str = "you can you up,no can no bb.";
    var reg = /no/;
    //2)正则对象的方法:test
    //检测字符串内是否包含和正则相匹配的子串
    console.log(reg.test(str));
    //3)正则对象的方法:exec
    //普通模式:
    //从字符串内找出与正则相匹配的第1个子串
    console.log(reg.exec(str));
    //全局模式:
    //第1次调用,则从字符串内找出与正则相匹配的第1个子串
    //第n次调用,则从字符串内找出与正则相匹配的第n个子串
    reg = /no/g;
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    //4)字符串中支持正则的方法
    //replace,match,search
    //看看手册
    //7.Function对象
    //声明函数,即定义函数对象
    function sum() {
    var s = 0;
    if(arguments.length) {
    for(var i=0;i<arguments.length;i++) {
    s += arguments[i];
    }
    }
    return s;
    }

    //onload是页面加载事件,在页面加载完成时,由浏览器自动触发.
    window.onload = function(){
    //alert(1);
    //1.读取节点的名称及类型
    var p1 = document.getElementById("p1");
    console.log(p1.nodeName);
    console.log(p1.nodeType);
    console.log(document.nodeName);
    console.log(document.nodeType);
    //2.读写节点的内容
    //双标签中间的文本是内容,如<a>内容</a>
    //innerHTML(带标签)
    var p2 = document.getElementById("p2");
    console.log(p2.innerHTML);
    p2.innerHTML = "2.DOM操作包含<u>查询</u>节点";
    //innerText(忽略标签)
    var p3 = document.getElementById("p3");
    console.log(p3.innerText);
    p3.innerText = "3.DOM操作包含<u>增删</u>节点";
    //3.读写节点的值
    //表单控件(label除外)内的文字就是值
    var input = document.getElementById("btn");
    console.log(input.value);
    input.value = "BBBBB";
    //4.读写节点的属性
    //1)通过get/set方法(可以读写任何属性)
    var img = document.getElementById("i1");
    console.log(img.getAttribute("src"));
    img.setAttribute("src","../images/02.jpg");
    img.removeAttribute("src");
    //2)通过属性名(少数的几个属性可以用该方式)
    //id, className, style
    var a = document.getElementById("a1");
    console.log(a.style.color);
    a.style.color = "blue";}

    我是初学者,如有更新不好的,欢迎这位大神指出,谢谢大家!

    更多精彩以后更新,转载注明!

  • 相关阅读:
    如何理解cat的输入输出重定向
    Vagrant网络设置
    Vagrant入门
    设计模式的原则
    单例模式
    LRU 实现缓存
    java注解
    java8---lambda表达式
    JUC--Callable 以及Lock同步锁
    JUC--闭锁 CountDownLatch
  • 原文地址:https://www.cnblogs.com/CaiNiao-TuFei/p/7633504.html
Copyright © 2011-2022 走看看