• JS总结



    1、javascript的特点
    是一种嵌入在网页中的程序段。(客户端脚本语言)
    是一种解释型语言,被浏览器解释执行。
    JavaScript借用了Java的名字,也使用了部分java的语法。
    增强客户端的交互功能。

    2、在网页中嵌入js的方式
    内嵌式:
    <script>
    ……
    </script>

    外联式:<script src="aa.js"></script>

    直接编写在元素的事件属性中:<input type="button" value="提交" onclick="alert()">

    超链接伪URL方式:<a href="javascript: alert('hello World');">Click</a>

    3、js变量的特点
    弱类型,不一定要初始化。
    弱类型是指变量任何数据都可以存放。可以存放数字,可以存放字符串,也可以存放对象的引用。
    正因为javascript是弱类型的语言,所以形参不能指明变量的类型。
    js变量定义:var x;

    4、js原始类型:
    undefined:
    当声明的变量未初始化时,值为undefined。
    当函数无明确返回值时,其调用结果也是undefined。

    null:表示不存在的对象。,null是从Undefined派生来的。因此null==undefined

    boolean:true或false

    number:数字型,可以是整数,可以是浮点数

    NaN表示非数字,它与自身不相等。一般发生在类型转换失败时,isNaN()较验是否为数字。

    string:可用单引号或双引号声明。比较是否相等用==,方法大部分和java类似。长度:var x = "abc";alert(x.length);

    5、使用typeof得到指定变量存放数据的类型。typeof(null) 返回object
    使用instanceof判断变量指向对象是否匹配某个类型
    var s = new String("hello world");
    var b = s instanceof String;
    alert(b); //输出true

    6、自动类型转换规则
    var x = "10"-2;结果:8 —— 自动将"10"转为Number类型
    var x="10"+2;结果:'102'-------如有一个为字符串,则是连接
    var s=9+2+"8";结果:'118' —— 先进行9+2结果为11,再和”8”连接
    var x="2"*"3";结果:6 。自动将字符串转为整形
    var y="4"*"abc";结果:NaN ——相乘如有一个为非数字NaN,则结果为非数字NaN

    ==比较内容,可以进行自动类型转换。===比较时,同时比较类型
    alert(55=='55');结果为true; alert(55==='55');结果为false;

    7、parseInt()和parseFloat,将字符串转化为number类型
    var a = parseInt("1234px"); //返回1234
    var b = parseInt("abc"); //返回NaN

    8、正则表达式:
    var x=/^a{2,8}$/;
    alert(x.test("aaa"));
    正则表达式一般用于表单验证。<form onsubmit="return checkForm()"> 如果checkForm()返回false,则阻止表单提交
    表单提交:表单对象.submit()

    9、数组:
    创建数组:var x = new Array();
    var arr = [1,2,3,4,5,6,7,8];

    arr.length; //数组长度
    arr.push(100);//追加元素。

    10、日期类型
    function setDate(){
    //创建日期对象
    var date = new Date();
    //得到年月日,时分秒
    var str = (date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 ";
    str += date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
    spanObj.innerHTML = str;

    }

    //设置时间函数
    var id=window.setInterval("执行代码",毫秒数);
    //清除时间函数
    window.clearInterval(id);

    11、Global全局对象常用方法
    isNaN():判断是否是非数字
    parseInt():将字符串转化为整型,会将第一个非数字以后的字符全部忽略,转化失败为NaN
    parseFloat():将字符串转化为浮点型,转化失败为NaN
    eval()。将字符串作为js代码执行。
    eval("alert('abc')") 等价于 alert('abc');
    encodeURI 将中文,空格重新编码

    12、js对象特点
    a、js是基于原型的面向对象语言,只有对象,没有类,没有接口。
    b、js的函数也是对象
    c、js对象的属性和方法,可以在运行期间动态的添加和删除

    13、访问、删除、遍历对象属性:
    访问对象属性:对象.属性名 var obj = {id:1}; alert(obj.id);
    对象["属性名"] var obj = {id:1}; alert(obj["id"]);

    删除属性:delete 对象.属性名

    遍历对象属性列表
    for(var x in dog1){//x为属性名,dog1["属性名"]取该对象指定属性名的值
    alert(x+" "+dog1[x]);
    }

    14、json格式对象
    var x = {};
    var obj = {name:'张三',age:30};
    var arr = [{name:'张三',age:30},{name:'李四',age:24},{name:'王五',age:28}];

    15、事件流
    事件流意味着页面上不止一个元素可响应相同的事件。
    事件冒泡(IE)。(先响应事件源,再响应父容器)
    事件捕获(NetsCape)。(先响应父容器,再响应事件源)
    事件处理(FireFox)。事件处理(可以选择先响应父容器,还是先响应事件源)

    16、事件委派的方式:

    传统事件:兼容性好,一个事件只能绑定一个函数:
    div1.onclick = function(){

    }
    div1.onclick=divClick;//只能写函数名


    现代事件:一个事件可以绑定多个函数,但兼容性差。

    一定要等待浏览器将元素加载完毕后,才能给元素添加事件。一般在window.onload中书写事件添加

    17、事件处理程序返回值
    如果事件中返回值为false,可以阻止元素默认行为

    18、event对象:事件发生时,用于描述事件信息的对象。可以获得鼠标信息和键盘信息
    var e;
    if(window.event){
    e=window.event;
    }
    else if(arguments[0]){
    e=arguments[0];
    }
    可以通过e.cancelBubble=true(IE)或e.stopPropagation()(firefox)中止事件传播

    19、事件类型
    鼠标事件:onclick(单击)、onmousemove(移动)、onmouseover(进入)、onmouseout(离开)
    键盘事件:keydown(按下)、keyup(弹起)
    html事件:window.onload(文档加载完毕后执行)、window.onunload(文档卸载完毕后执行)、onchange(下拉框选项变化执行)、onsumbit(表单提交执行)、onblur(失去焦点执行) onfocus(得到焦点执行)
    刷新页面的时候,会触发load事件和unload事件。

    20、跳转页面
    location.href="aaa.html";

    21、dom操作常见方法
    createElement()创建新元素
    appendChild() 追加元素
    removeChild()删除元素
    replaceChild():替换元素
    parentNode 父元素
    nextElementSibling下一个元素兄弟节点
    previousElementSibling上一个元素兄弟节点

    22、获得文本节点
    元素节点.firstChild-获取文本节点
    textNode.nodeValue="..." - 设置文本内容

    23、访问元素节点:
    getElementsByTagName(name):得到元素指定标记子元素集合
    getElementsByName(name):得到指定name属性的元素集合
    getElementById(id):按ID得到元素对象

    24、innerHTML:表示元素中间的文本。在老标准中,table和select不支持。
    value属性一般只用于表单元素

    25、改变元素的样式,需要style属性,如果样式中有-,则去掉-,采用驼峰命名法
    元素对象.style.backgroundColor="red";
    通过style属性操作的是内嵌样式。

    改变元素对象的class属性:
    <div class="aaa"></div>
    对象.className="aaa";

    26、
    multiple:将下拉框变为列表框,可以选中多个选项。
    判断下拉框选项是否选中:selected
    判断复选框、单选框是否选中:checked

  • 相关阅读:
    MySQL学习之——锁(行锁、表锁、页锁、乐观锁、悲观锁等)
    PhpExcel导出excel报错:net::ERR_INVALID_RESPONSE
    Java收藏
    Java项目收藏
    CentOS 6.8 安装 Erlang 及 RabbitMQ Server
    Redis 中 5 种数据结构的使用场景介绍
    Golang 实现 set 集合,变相实现 切片去重、排序 功能
    查看 Mac/Linux 某端口占用情况
    [Beego模型] 六、事务处理
    [Beego模型] 五、构造查询
  • 原文地址:https://www.cnblogs.com/zxiaoyuer/p/6986835.html
Copyright © 2020-2023  润新知