js学习总结

js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，方法基于对象 事件驱动函数，它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

js的组成:
    ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
    BOM:浏览器对象模型
    DOM:文档对象模型
作用:
    修改html页面的内容
    修改html的样式
    完成表单的验证

html和js的整合
    方式1:内部编写js
        <script type="text/javascript">js代码</script>
    方式2:
        外部有一个独立的js文件 后缀名:.js
        在html中通过script的src属性导入
        <script src="js的路径"></script>
注意:
    一旦使用了src属性,那么script标签体中的js代码将不再执行了.
js中变量声明:

 var 变量名=初始化值;
    var 变量名;
        变量名=初始化值;

注意:
    var可以省略 建议不要省略
    一行要以分号结尾,最后一个分号可以省略,建议不要省略
数据类型:

    原始类型(5种)

         Undefined

         Null
        String 用引号引起来的内容
        Number
        Boolean

通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
        typeof 变量|值;
    若变量为null,使用typeof弹出的值 object

使用typeof的返回值
    undefined - 如果变量是 Undefined 类型的 
    boolean - 如果变量是 Boolean 类型的 
    number - 如果变量是 Number 类型的 
    string - 如果变量是 String 类型的 
    object - 如果变量是一种引用类型或 Null 类型的
引用类型

运算符:

关系运算符:> 、>=   、<   、<=
    两边值都是字符串,比较ascii码
    两边都是数字,和java一样
    一边是数字,一遍是字符串形式的数字, 可以比较    如3>"2"
    一边是数字,一遍是普通字符串 可以比较 值永远是false
 等性运算符 == ===
        == :只判断值是否相同
        ===:不仅判断是否相同,还要判断类型是否相同
js的语句
    if while for 和java一样
获取元素:
    var obj=document.getElementById("id值");
获取元素的value属性
    var val=document.getElementById("id值").value;
设置元素的value属性
    document.getElementById("id值").value="sdfsdf";
获取元素的标签体 
    var ht=document.getElementById("id值").innerHTML;
设置元素的标签体
    document.getElementById("id值").innerHTML="ssss";
定义函数:
        方式1:
            function 函数名(参数){
                函数体;
            }  
        方式2:
            var 函数名=function(参数){
                函数体;
            }
注意:
    函数声明的时候不用声明返回值类型
    参数列表上不要写参数类型
    通过return结束方法和将值返回
js中的事件:
    常见的事件:
    单击: onclick
    表单提交: onsubmit 加在form表单上的 οnsubmit="return 函数名()" 注意函数返回值为boolean类型
    页面加载: onload
js:事件驱动函数
 事件和函数绑定

方式1:通过元素的事件属性
    通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>
方式2:派发事件
        document.getElementById("id值").onxxx=function(){...};
        document.getElementById("id值").onxxx=函数名;

定时器(BOM-window对象) 

      setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期函数

      setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数清除定时器   

      clearInterval(id):

      clearTimeout(id):
操作元素:
    document.getElementById("")
操作css属性
    document.getElementById("id").style.属性="值"
        属性:就是css中属性 css属性有"-" 例如:backgroud-color
        若有"-" 只需要将"-"删除,后面第一个字母变大写即可
注意:
    只要是window对象的属性和方法,可以把window省略
        window.onload 等价于 onload
        window.setInterval() 等价于 setInterval()

bom(浏览器对象模型)总结
所有的浏览器都有5个对象
    window:窗口
    location:定位信息 (地址栏)
    history:历史
window对象详解:
    如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

常用的属性:
    通过window可以获取其他的四个对象
        window.location 等价域 location
        window.history 等价于 history
        ...
常用的方法
    消息框
        alert("...."):警告框
        confirm("你确定要删除吗?"):确定框 返回值:boolean
        prompt("请输入您的姓名"):输入框 返回值:你输入的内容
    定时器
        setInterval(code,毫秒数):周期执行
        setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
    清除定时器
        clearInterval(id):
        clearTimeout(id):
    打开和关闭
        open(url):打开
        close():关闭
/
location:定位信息
    常用属性:
        href:获取或者设置当前页面的url(定位信息)
        location.href; 获取url
        location.href="...";设置url 相当于 a标签
//
history:历史
    back();后退
    forward():向前
    ★go(int)
        go(-1) 相当于 back()
        go(1) 相当于 forward()
注意:
    在方法中(function()) this指代的是当前的元素(当前dom对象)
    例如:
        <input type="text" name="username" id="username" οnblur="loseFocus(this.value)">
    方法:
        function loseFocus(obj){
        alert(obj);
        }
/
事件总结:
    常见的事件:
        焦点事件:★
        onfocus
        onblur
表单事件:★
       onsubmit
       onchange 改变
页面加载事件:★
      onload
鼠标事件(掌握)
    onclick
鼠标事件(了解)
    ondblclick:双击
    onmousedown:按下
    onmouserup:弹起
    onmousemove:移动
    onmouserover:悬停
    onmouserout:移出
键盘事件(理解)
    onkeydown:按下
    onkeyup:弹起
    onkeypress:按住

了解
    阻止默认事件的发生
    阻止事件传播
获取元素:
    document.getElementById("id"):通过id获取一个元素
    document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组
Array:
    常用属性:
        length:数组的长度
/

案例3-隔行换色
    //页面加载成功
οnlοad=function(){
    //1.获取所有的tr
var arr=document.getElementsByTagName("tr");
    //alert(arr);
    //alert(arr.length);

//2.判断奇偶数 添加不同的样式 遍历数组
for(var i=1;i<arr.length;i++){
if(i%2==0){
arr[i].style.backgroundColor="#FFFFCC";
}else{
arr[i].style.backgroundColor="#BCD68D";
}
}
}
//

dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
    通过document可以获取其他节点:
    常用方法:
        document.getElementById("id值"):获取一个特定的元素
        document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
        document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
        document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
    设置获取获取节点的value属性
        dom对象.value;获取
        dom对象.value="";设置
    设置或者获取节点的标签体
        dom对象.innerHTML;获取
        dom对象.innerHTML="";设置
    获取或者设置style属性
        dom对象.style.属性;获取
        dom对象.style.属性="";设置
    获取或者设置属性
        dom对象.属性
/
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
关于文档的操作 在 xml dom 的document中
关于元素的操作 在 xml dom 的element中
appendChild(dom对象):在一个元素下添加孩子
数组:
语法:
    new Array();//长度为0
    new Array(size);//指定长度的
    new Array(e1,e2..);//指定元素
非官方
    var arr4=["aa","bb"];
常用属性:
    length
注意:
    数组是可变的
    数组可以存放任意值
    常用方法:(了解)
        存放值:对内容的操作
        pop():弹 最后一个
        push():插入 到最后
        shift():删除第一个
        unshift():插入到首位
    打印数组:
        join(分隔符):将数组里的元素按照指定的分隔符打印
    拼接数组:
        concat():连接两个或更多的数组，并返回结果。
对结构的操作:
    sort();排序
    reverse();反转

引用类型总结:
    原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
    Array:数组
    String:
语法:
    new String(值|变量);//返回一个对象
    String(值|变量);//返回原始类型
    常用方法:
        substring(start,end):[start,end)
        substr(start,size):从索引为指定的值开始向后截取几个
        charAt(index):返回在指定位置的字符。
        indexOf(""):返回字符串所在索引
        replace():替换
        split():切割
    常用属性:length
Boolean:
    语法:
        new Boolean(值|变量);
        Boolean(值|变量);
        非0数字 非空字符串 非空对象 转成true
Number
    语法:
        new Number(值|变量);
        Number(值|变量);
   注意:
        null====>0 
        fale====>0 true====>1
        字符串的数字=====>对应的数字
        其他的NaN
Date:
    new Date();
    常用方法:
        toLocalString()
RegExp:正则表达式
    语法:
        直接量语法 /正则表达式/参数
        直接量语法 /正则表达式/

new RegExp("正则表达式")
new RegExp("正则表达式","参数") 
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)

全局:
★
decodeURI() 解码某个编码的 URI。 
encodeURI() 把字符串编码为 URI。

Number():强制转换成数字
String():转成字符串

parseInt():尝试转换成整数
parseFloat():尝试转换成小数

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。 

转载于:https://www.cnblogs.com/wfforever/p/7607191.html