js基础提高（二）

上篇写的是JavaScript的历史、基本的数据类型和基本的语法进填的话讲的就深入一些了。

js的函数

1、js函数定义的方式

(1)普通方式

语法：function 函数名(参数列表){函数体}
示例：

            function method(){
                alert("xxx");
            }
            method();

(2)匿名函数

语法：function(参数列表){函数体}
示例：

            var method = function(){
                alert("yyy");
            };
            method();

(3)对象函数

语法：new Function(参数1,参数2,…,函数体);
注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
示例：

            var fn = new Function("a","b","alert(a+b)");
            fn(2,5);

2、函数的参数

(1)形参没有var去修饰
(2)形参和实参个数不一定相等

(3)arguments对象是个数组会将传递的实参进行封装
注意：当参数缺少是默认值为Undefined，参数多的讲不会使用

function fn(a,b,c){
    //var sum = a+b+c;
    //alert(sum);
    //arguments是个数组 会将传递的实参进行封装
    for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
    }
}
fn(1,2,4,8);

3、返回值

(1)在定义函数的时候不必表明是否具有返回值
(2)返回值仅仅通过return关键字就可以了 return后的代码不执行
function fn(a,b){
return a+b;
//alert(“xxxx”);
}
alert(fn(2,3));

4、js的全局函数

(1)编码和解码

encodeURI() decodeURI()
encodeURIComponet() decodeURIComponent()
escape() unescape()

三者区别：
(1)进行编码的符号范围不同吧，实际开发中常使用第一种

(2)强制转换
- Number()
- String()
- Boolean()

(3)转成数字
- parseInt()
- parseFloat()

(4)eval()方法
将字符串当作脚本进行解析运行
eval函数用于计算表达式字符串，或者用于执行字符串中的JavaScript代码
只接受原始字符串作为参数
如果参数中没有合法的表达式和语句，则跑出异常

        //var str = "var a=2;var b=3;alert(a+b)";
        //eval(str);
        function print(str){
            eval(str);
        }
        print("自定义逻辑");

js的事件

事件
事件源
响应行为

1、js的常用事件

1.onclick:点击事件

2. onchange:域内容被改变的事件

需求：实现二级联动

        <select id="city">
            <option value="bj">北京</option>
            <option value="tj">天津</option>
            <option value="sh">上海</option>
        </select>
        <select id="area">
            <option>海淀</option>
            <option>朝阳</option>
            <option>东城</option>
        </select>
        <script type="text/javascript">
            var select = document.getElementById("city");
            select.onchange = function(){
                var optionVal = select.value;
                switch(optionVal){
                    case 'bj':
                        var area = document.getElementById("area");
                        area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                        break;
                    case 'tj':
                        var area = document.getElementById("area");
                        area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                        break;
                    case 'sh':
                        var area = document.getElementById("area");
                        area.innerHTML = "<option>浦东</option><option>杨浦</option>";
                        break;
                    default:
                        alert("error");
                }
            };              

        </script>

3. onfoucus:获得焦点的事件

4. onblur:失去焦点的事件

需求：当输入框获得焦点的时候，提示输入的内容格式;当输入框失去焦点的时候，提示输入有误

        <label for="txt">name</label>
        <input id="txt" type="text" /><span id="action"></span>
        <script type="text/javascript">
            var txt = document.getElementById("txt");
            txt.onfocus = function(){
                //友好提示
                var span = document.getElementById("action");
                span.innerHTML = "用户名格式最小8位";
                span.style.color = "green";
            };
            txt.onblur = function(){
                //错误提示
                var span = document.getElementById("action");
                span.innerHTML = "对不起 格式不正确";
                span.style.color = "red";
            };
        </script>

5. onmouseover:鼠标悬浮的事件

6. onmouseout:鼠标离开的事件

需求：div元素鼠标移入变为绿色移出恢复原色

        #d1{background-color: red;width:200px;height: 200px;}
        <div id="d1"></div>
        <script type="text/javascript">
            var div = document.getElementById("d1");
            div.onmouseover = function(){
                this.style.backgroundColor = "green";
            };
            div.onmouseout = function(){
                this.style.backgroundColor = "red";
            };
        </script>

7. onload:加载完毕的事件

等到页面加载完毕在执行onload事件所指向的函数

        <span id="span"></span>
        <script type="text/javascript">
            window.onload = function(){
                var span = document.getElementById("span");
                alert(span);
                span.innerHTML = "hello js";
            };
        </script>

2、事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中

        <input type="button" value="button"  onclick="alert('xxx')"/>

(2)将事件内嵌到html中而响应行为用函数进行封装

        <input type="button" value="button" onclick="fn()" />
        <script type="text/javascript">
            function fn(){
                alert("yyy");
            }
        </script>

(3)将事件和响应行为与html标签完全分离

        <input id="btn" type="button" value="button"/>
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                alert("zzz");
            };
        </script>

this关键字

this经过事件的函数进行传递的是html标签对象

        <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
        <script type="text/javascript">
            function fn(obj){
                alert(obj.name);
            }
        </script>

事件处理机制

冒泡机制：当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理
Event 对象
Event 对象的属性提供了有关事件的细节（例如，事件在其上发生的元素）。Event 对象的方法可以控制事件的传播。

注意：在标准事件模型中，Event 对象传递给事件句柄函数；但是在 IE 事件模型中，它被存储在 Window 对象的 event 属性中。

    <p onclick="p(event);"></p>

    //获取事件源
    var obj=e.srcElement||e.target;
    console.log(obj);

案例：计算器

<!DOCTYPE html>
<html>
  <head>
<title>计算器</title>
<meta charset="utf-8" />
<style type="text/css">
  .panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
  }
  .panel p, .panel input {
font-family: "微软雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
  }
  .panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
  }
  .panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
  }
</style>
<script type="text/javascript">
    window.onload=function(e){
    var div=document.getElementById("pannel");
    div.onclick=function(e){
    console.log(e.srcElement||e.target);
    cal(e);
    }
    }
    function cal(e){
       // 获取事件源
    var obj=e.srcElement||e.target;
    //只处理input事件
    if(obj.nodeName!="INPUT"){
    console.log("不是input");
    return;
    }
    var p=document.getElementById("screen");
    if(obj.value=="C"){
    //清空
    console.log("清空");
    p.innerHTML="";
    }else if(obj.value=="="){
    //计算
    try{
    var result=eval(p.innerHTML);
    p.innerHTML=result;
    }catch(ex){
    p.innerHTML="ERROR";
    }
    }else{
    //累加
    p.innerHTML=p.innerHTML+obj.value;
    }
    }
</script>
  </head>
  <body>
<div class="panel" id="pannel">
  <div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
  </div>
  <div>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">

<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">

<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">

<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">

<div style="clear:both"></div>
  </div>
</div>
  </body>
</html>

1、阻止事件的默认行为

IE：window.event.returnValue = false;
W3c: 传递过来的事件对象.preventDefault();

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

    //ie：window.event.returnValue = false;
    //W3c：传递过来的事件对象.preventDefault();
    //W3c标准
    if(e&&e.preventDefault){
        alert("w3c");
        e.preventDefault();
    //IE标签
    }else{
        alert("ie");
        window.event.returnValue = false;
    }

    //通过事件返回false也可以阻止事件的默认行为
    <a href="demo11.html" onclick="return false">点击我吧</a>

2、阻止事件的传播

IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
    if(e&&e.stopPropagation){
        alert("w3c");
        e.stopPropagation();
    //IE标签
    }else{
        alert("ie");
        window.event.cancelBubble = true;
    }

BOM

BOM简介

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的标准。
BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持

IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象。
由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

Window： JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当或者标签出现，Window 对象就会被自动创建。

所有的JavaScript全员对象，函数以及变量均自动成为window对象的成员
常用属性：

document:窗口中显示的html文档对象。
* Navigator*：包含客户端浏览器的信息。
Screen：包含客户端显示屏的信息。
History：包含了浏览器窗口访问过的 URL。
* Location*：包含了当前URL的信息。

DOM介绍 ##

在这些对象中其实dom最重要下来介绍DOM
DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑的 HTML 页面的基本属性。
DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM 针对任何结构化文档的标准模型
XML DOM 针对 XML 文档的标准模型
HTML DOM 针对 HTML 文档的标准模型

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
HTML DOM 是：
- HTML 的标准对象模型
- HTML 的标准编程接口

W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素都会被解析为一个节点Node，而常用的节点类型又分为
- 元素节点 Element
- 属性节点 Attr
- 文本节点 Text
- 文档节点 Document

HTML DOM 定义了针对 HTML文档的对象，可以说是一套更加适用于 JavaScript 技术开发的API

HTML DOM是对XML DOM的扩展
进行 JavaScript DOM开发可以同时使用 XML DOM和 HTML DOM

getElementById() 方法返回带有指定 ID 的元素
getElementsByTagName() 返回带有指定标签名的所有元素。
getElementByName() 返回带有指定name的所有元素。
innerHTML属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

对象

(1)window对象

弹框的方法：

提示框：alert(“提示信息”);
确认框：confirm(“确认信息”);
有返回值：如果点击确认返回true 如果点击取消返回false
```
        var res = confirm("您确认要删除吗？");
        alert(res);
```
输入框：prompt(“提示信息”);
有返回值：如果点击确认返回输入框的文本点击取消返回null
```
        var res =  prompt("请输入密码？");
        alert(res);
```

open方法：

        window.open("url地址");
        open("../jsCore/demo10.html");

定时器：

1.周期性定时器

setInterval(函数,毫秒值); 设置定时器
clearInterval(定时器的名称) 关闭定时器

//启动定时器，让浏览器每隔1S调用1次function。
//该方法返回的是已启动的定时器的ID。
var n = 0;
var id1 = setInterval(function(){
    console.log(++n);
    if(n>5) {
        //使用ID来停止定时器
        clearInterval(id1);
    }
},1000);

2.一次性定时器

setTimeout(函数,毫秒值); 设置一次性定时器
clearTimeout(定时器的名称); 关闭

//启动定时器，让浏览器推迟N秒调用一次function。
//返回的是定时器的ID，也是用来停止定时器的。
//成功执行一次后它会自动停止。
//在成功执行前(N秒内)可以通过ID提前停止它。
var id2 = setTimeout(function(){
    console.log("ok");
},3000);
//定时器就像线程一样，启动后可以和主线程
//并行执行，因为下面的代码是主线程的代码，
//在启动定时器后立刻执行，而输出OK的代码
//是支线程3S后才执行的。
clearTimeout(id2);

需求：登录时的账号密码验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
    .ok {
        color: green;
        border: 1px solid green;
    }
    .error {
        color: red;
        border: 1px solid red;
    }
</style>
<script>
    //校验账号的格式
    function check_code() {
        console.log(1);
        //获取账号
        var code =
            document.getElementById("code").value;
        //校验其格式(\w字母或数字或下划线)
        var span =
            document.getElementById("code_msg");
        var reg = /^\w{6,10}$/;
        if(reg.test(code)) {
            //通过，增加ok样式
            span.className = "ok";
        } else {
            //不通过，增加error样式
            span.className = "error";
        }
    }
    function check_pwd(){
        console.log(2);
        var code2 =document.getElementById("pwd").value;
        var span2 =
            document.getElementById("pwd_msg");
        var reg2 = /^\w{6,10}$/;
        if(reg2.test(code2)) {
            span2.className = "ok";
        } else {
            span2.className = "error";
        }

    }
</script>
</head>
<body>
    <form action="http://www.tmooc.cn">
        <p>
            账号：
            <input type="text" id="code" onblur="check_code()"/>
            <span id="code_msg">6-10位字母、数字、下划线</span>
        </p>
        <p>
            密码：
            <input type="text" id="pwd" onblur="check_pwd()" />
            <span id="pwd_msg">8-20位字母、数字、下划线</span>
        </p>
        <p><input type="submit" value="登录"/></p>
    </form>
</body>
</html>

(2)location ###

location = 地址栏

location.href=”url地址”;

注：修改href就是修改网址
跳转到百度

location.href="http://www.baidu.cn";

刷新：

location.reload();

(3)history

back(); 后退
forward(); 前进

go();
后一页

<input type="button" value="上一页" onclick="history.go(-1)">
<input type="button" value="下一页" onclick="history.go(1)">

（4）screen

screen.width 屏幕宽
screen.height 屏幕高
screen.availWidth 可用屏幕宽

screen.availHeight 可用屏幕高

    console.log(screen.width);
    console.log(screen.height);
    console.log(screen.availWidth);
    console.log(screen.availHeight);

（5）navigator

navigator.userAgent 获取浏览器信息

DOM比较重要单独写

DOM

DOM 的规定：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

提供的操作

查找节点
读取节点信息
修改节点信息
创建新节点
删除节点

读写

1. 名称:nodeName/nodeType

nodeName：节点名称
1. 元素节点和属性节点：标签和属性名称
2. 文本节点：永远是#text
3. 文档节点：永远是#document
nodeType：节点类型
返回值
1. 元素节点：返回1
2. 属性节点：返回2
3. 文本节点：返回3
4. 注释节点：返回8
5. 文档节点：返回9

2.读写节点的内容:innerHTML/innerText

value ：针对单标签如：input标签

innerHTML ：带标签

    console.log("读写节点的内容");
    var p2=document.getElementById("p2");
    console.log(p2.innerHTML);
    p2.innerHTML="1.<u>读写</u>节点";

innerText :不能带标签

    var p3=document.getElementById("p3");
    console.log(p3.innerText);
    p3.innerText="2.<b>查询</b>节点";

3.属性:setAttribute()/getAttribute()

通用api 任何版本浏览器都支持
语法：
getAttribute(“节点”,”属性”); 用于查看属性
setAttribute(“节点”,”属性”); 用修改属性值

        //修改图片的路径
        var img=document.getElementById("i1");
        console.log(img.getAttribute("src"));
        img.setAttribute("src","../images/02.jpg");

4.属性:节点.className

低版本浏览器可能使用不了（class例外，需要写成className）
语法：
节点.属性;
节点.属性=”修改的值”;

        <a href="www.baidu.com" class="qw">百度</a>
        var a=document.getElementById("a1");
        console.log(a.href);
        console.log(a.className);//输出结果为：qw
        a.href="#";

查询

1.根据Id查询（标准）

-ID： getElementById()

var ul=document.getElementById("city");
console.log(ul);

2、根据标签名查询（标准）

标签名：getElementsByTagName()
2.1在整个页面上根据标签名查询节点

var lis=document.getElementsByTagName(“li”);
console.log(lis);
2.2 在某节点下根据标签名查询器子节点

lis=ul.getElementsByTagName(“li”);
console.log(lis);

3、根据名称name查询（标准）

NAME：getElementsByName()

var inputs=document.getElementsByName(“sex”);
console.log(inputs);

4、根据class查询（非标准）

查找class的值为”south”的节点

lis=document.getElementsByClassName("south");
console.log(lis);

5.根据层次（关系）查询

关系：parentNode
5.1、查询父亲（标志）
父亲：节点.parentNode
console.log(ul.parentNode);
5.2查询孩子（标志）

- 孩子：节点.childNodes

    console.log(ul.childNodes);
    lis=ul.getElementsByTagName("li");

5.3查询孩子（非标准）

- 孩子：节点.children

    console.log("查询孩子（非标准）");
    console.log(ul.children);

5.4查询兄弟（标准）
兄弟：某节点.父亲.孩子[n]
parentNode.getElementsByTagName(“父亲节点”)[n];
var gz=document.getElementById(“gz”);
var sh=gz.parentNode.getElementsByTagName(“li”)[1];
console.log(sh);
5.5查询兄弟（非标准）
兄弟：
- 某节点.previousElementSibling
- 某节点.nextElementSibling
  console.log(gz.previousElementSibling);
  console.log(gz.nextElementSibling);

对节点的操作

创建节点

创建：document.createElement
语法：document.createElement(“节点”);
var li1 = document.createElement(“li”);
li1.innerHTML = “佳木斯”;

增加节点

追加到所有子节点之后
- 语法：父亲.appendChild(孩子)
var ul = document.getElementById(“city”);
ul.appendChild(li1);
插入到某子节点之前
- 语法：父亲.insertBefore(插入的节点,弟弟)
var gz = document.getElementById(“gz”);
ul.insertBefore(li2,gz);

删除节点

父亲删孩子（标准）
- 语法：父亲.removeChild(孩子)
  var sz = document.getElementById(“sz”);
  ul.removeChild(sz);
自己删除自己（标准）
```
sz.parentNode.removeChild(sz)
```
自己删自己(非标准)
- 语法节点.remove();
  var tj = document.getElementById(“tj”);
  tj.remove();

修改节点

语法：
- 节点.innerHTML=”修改的值”；
- 节点.innerText=”修改的值”；

自定义对象

1.直接量(JSON)

直观、简单
例：var obj = {“name”:”zs”,”age”:25,”work”:function(){}};
自己的方法封装数据，且已知数据时。
function f1(){
var stu ={“name”:”zs”,”age”:25,”work”:function(){alert(“我学java”)}};
alert(stu.name);
alert(stu.age);
stu.work();
}

2.构造器

2.1JS内置构造器

简单，灵活
Date()/RegExp()/String()/Object()
需要new的function才是构造器
自己的方法封装数据，当时未知数据，以后才知道。
function f2(){
var tch=new Object();
tch.name=”常老师”;
tch.age=20;
tch.work=function(){
alert(“我教java”);
}
alert(tch.name);
alert(tch.age);
tch.work();
}

2.1自定义构造器

麻烦，直观
封装的对象返回给他人使用
自己声明一个函数，将此函数作为构造器使用
function f3(){
var c=new Conder(“list”,26,function(){alert(“我写java”)});
alert(c.name);
alert(c.age);
c.work();
}
function Conder(name,age,work){
//this代表创建出来的对象
//this.name 给对象声明一个属性
this.name=name;
this.age=age;
this.work=work;
}

3.create方法

最新版本提出的方法，很多浏览器并未支持

注：无论采用哪种方式创建出来的对象是一样的(Object)。

时间： 2024-11-01 12:04:53