第三天 Javascript

JavaScript

比较运算符

　　比较类型

　　　　类型相同：直接比较　　

　　　　　　　　　　*字符串按照字典顺序比较，按位逐一去比较，直到得出大小。

　　　　类型不同：先转换类型再比较

　　　　　　　　　　*===（全等于） 比较的是值和类型，先比较类型是否相同，不相同直接返回false，相同的话再去比较值。

　　　　　　　　　　*==比较的是值

逻辑运算符

　　&&：与（短路）

　　||或（短路）

　　!非

　　　　其他类型转boolean：

　　　　　　number：0和NaN为假，其他为真。

　　　　　　string：除了空字符串（“”），其他都为true

　　　　　　undefined&null：都是false

　　　　　　对象：所有对象都为true  

三元运算符

　　　　格式 ：

　　　　　　　　var result = 表达式?值1:值2；

　　　　　　　　如果表达式为true，选择值1，如果表达式为false，选择值2。

特殊语法（不建议使用，了解就行）

　　　　1、语句以；结尾，如果是一条语句可以不写；，可以省略（不建议使用）

　　　　2、在函数中变量定义可以使用var关键字，也可以不使用。（不建议使用）

　　　　　　　　*使用  就是局部变量

　　　　　　　　*不使用 就是全局变量

流程控制语句

　　　　差不多都和Java基础使用的方式一致。

　　　　if....else...

　　　　switch

　　　　　　*java中switch()，括号里只可以接收byte、short、int、char、枚举（1.5）、String（1.7）

　　　　　　*javascript中，括号里可以接收任何数据类型。

　　　　while

　　　　do.....while

　　　　for　　

基本对象

function  函数对象

　　　　1、创建

　　　　　　　1、　function 方法名（形式参数列表）{方法体}

　　　　　　　2、 var 方法名=function（形式参数列表）{方法体}

　　　　2、方法

　　　　3、属性

　　　　　　　　length：代表形参的个数

　　　　4、特点

　　　　　　1、方法定义时，形参类型不用写，返回值类型也不写。

　　　　　　2、方法是一个对象，如果定义方法名称相同的方法 ，前面的方法会被覆盖。

　　　　　　3、在JS中，方法的调用只与方法的名称有关，与方法的参数列表无关。

　　　　　　4、在方法声明有一个隐藏的内置对象（数组）arguments数组，封装了所有的实际参数。

　　　　　　　　//获取所有参数的和。

　　　　　　　<script>
        　　　　　　   function run(){
             　　　　　　   var sum=0 ; //先初始化定义一个
               　　　　 for(var i = 0 ;i<arguments.length;i++){
                   　　 sum+=arguments[i];
              　　　　  }
              　　  document.write(sum);
         　　　　   }
           　　 run(3,5,6,9);
            
            
        </script>

　　　　5、调用

　　　　　　方法名称 （实际参数列表）

Array对象

　　Array对象

　　　　1、创建

　　　　　　　　1、var arr = new Array(元素列表);

　　　　　　　　2、var arr = new Array(默认长度);

　　　　　　　　3、var arr = [元素列表];

　　　　2、方法

　　　　　　　join（参数），将数组的元素按指定的分隔符拼接成字符串。

　　　　3、属性

　　　　　　　　length：数组的长度。

　　　　4、特点

　　　　　　　　在JS中数组的类型可变，长度可变

Date日期对象

　　　　1、创建

　　　　　　　　var date = new Date();

　　　　2、方法

　　　　　　　　toLocaleString()    返回当前对象对应的本地时间本地字符串格式。

　　　　　　　　getTime()   获取毫秒值，当前时间到1970年1月1日零点的毫秒值。

Regexp正则表达式

　　正则表达式：定义一个字符串的组成规则

　　　　创建

　　　　　　1、var reg = new Regexp("正则表达式");

　　　　　　2、var reg  = /正则表达式/;

　　　　方法

　　　　　　test（参数）验证参数是否和正则表达式匹配。

DOM简单学习

　　　　功能：控制HTML文档的内容

　　　　代码：获取页面标签（元素）对象。

　　　　　　　　*document.getElementById("id");通过元素的id获取对象。

　　　　操作Element对象

　　　　　　　　修改属性值：

　　　　　　　　　　　　*明确获取的对象是哪一个

　　　　　　　　　　　　*查看API找其中可以设置的属性

　　　　　　　　修改标签体内容：

　　　　　　　　　　　　先获取标签的对象

　　　　　　　　　　　　　　var ele = document.getElementById("id");

　　　　　　　　　　　　再修改内容

　　　　　　　　　　　　　　通过innerHTML方法：ele.innerHTMl = 要修改成的内容。

事件的简单学习

　　　　功能：某些组件执行了某些操作后，触发了某些代码的执行。

　　　　如何绑定事件：

　　　　　　1、直接在html标签上，指定事件的属性，属性值就是JS代码

　　　　　　　　事件：onclick---单击事件

　　　　　　2、通过js代码获取元素对象，指定事件属性，设置一个函数如（function fun01(){}）。

　　　　　　　　　　　　//先获取img标签的对象
            　　　　　　  　　　　  var pho = document.getElementById("pho");
               　　　　　　　　 //修改指定元素的值,绑定事件
              　　　　　　　　　　  pho.onclick = fun01;

BOM(Browser Object Model)浏览器对象模型

　　　　　将浏览器的各个组成部分封装成对象。

　　　　　组成：　　

　　　　　　　　Window    窗口对象

　　　　　　　　Navigator  浏览器对象（不重要）

　　　　　　　　Screen    显示器屏幕对象（不重要）

　　　　　　　　History   历史记录对象

　　　　　　　　Location    地址栏对象

window对象

　　　　创建：

　　　　方法：

　　　　　　1、与弹出框有关的方法

　　　　　　　　　　alert()显示带有一段信息和确认按钮的警告框。

　　　　　　　　　　*confirm()显示带有一段信息以及确认按钮和取消按钮的对话框。

　　　　　　　　　　　　　　*如果点击确认按钮，则方法返回true，

　　　　　　　　　　　　　　*如果点击取消按钮，则方法返回false；

　　　　　　　　　　prompt()显示可提示用户输入的对话框

　　　　　　　　　　　　　　*返回值是获取用户输入的值。

　　　　　　2、与打开关闭有关的方法。

　　　　　　　　open()打开一个新的浏览器窗口

　　　　　　　　　　　　*返回一个新的window对象

　　　　　　　　close()关闭一个浏览器窗口

　　　　　　　　　　　　*谁调我，我关谁。

　　　　　　3、与定时器有关 的方法。

　　　　　　　　setTimeout()：是指定毫秒值后调用函数或计算表达式。

　　　　　　　　　　　　参数：

　　　　　　　　　　　　　　　　1、JS代码或方法对象

　　　　　　　　　　　　　　　　2、毫秒值

　　　　　　　　　　　　　*返回值唯一标识，用于取消定时器。

　　　　　　　　clearTimeout()：取消有setTimeout设置的timeout

　　　　　　　　setInterval()：按照指定的周期（毫秒值）来调用函数或表达式

　　　　　　　　clearInterval()：取消由interval设置的timeout。

　　　　属性：

　　　　　　　　1、获取其他BOM对象。

　　　　　　　　　　　　history　　　对 History 对象的只读引用

　　　　　　　　　　　　location　　用于窗口或框架的 Location 对象

　　　　　　　　　　　　Navigator　　对 Navigator 对象的只读引用

　　　　　　　　　　　　screen　　对 Screen 对象的只读引用。

　　　　　　　　2、获取DOM对象

　　　　　　　　　　document   对Document对象的只读引用

　　　　特点：

　　　　　　window 对象不需要存在可以直接使用。如window.方法名。

　　　　　　window引用可以省略，如方法名（）

location：地址栏对象

　　　　创建

　　　　　　1、window.location()

　　　　　　2、location()

　　　　方法

　　　　　　reload()重新加载当前页面；刷新

　　　　属性

　　　　　　href：设置或返回完整的URL

DOM：

　　　　概念：（Document Object Model）

　　　　　　　　将标记语言文档的各个组成部分，封装成对象，使用这些对象对标记语言进行增删改查的操作

　　　　DOM被分为三个不同的部分

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

　　　　　　　　*Document：文档对象

　　　　　　　　Element：元素对象

　　　　　　　　Attribute：属性对象

　　　　　　　　Text：文本对象

　　　　　　　　Comment：注释对象

　　

　　　　　　　　Node：节点对象，其他5个的父对象

　　　　　XML DOM-针对XML文档的标准模型

　　　　　HTML  DOM-针对HTML文档的标准模型。

　　　　核心DOM模型：

　　　　　　Document：文档对象　　

　　　　　　Element：元素对象

　　　　　　Node：节点对象，其他5个的父对象

　　　　Document：文档对象

　　　　　　　　创建：window.document 和document直接获取

　　　　　　　　方法

　　　　　　　　　　　　1、获取Element对象

　　　　　　　　　　　　　　　　getElementById（id值），根据id属性值获取id对象，id是唯一的

　　　　　　　　　　　　2、获取其他Dom对象

　　　　　　　　　　　　　　　　createElement（元素名称）通过指定名称创建一个元素对象

　　　　　　　　　　　　　　　　createTextNode（）创建文本节点

　　　　　　　　属性

　　　　　　　　　　　　Element：元素对象

　　　　　　　　　　　　　　1、获取/创建     通过document来获取和创建

　　　　　　　　　　　　　　2、方法

　　　　　　　　　　　　　　　　　　removeAttribute()删除属性

　　　　　　　　　　　　　　　　　　setAttribute()设置属性

　　　　　　　　　　　Node：节点对象，其他5个的父对象

　　　　　　　　　　　　　　特点：所有DOm对象都可以认为是一个节点。

　　　　　　　　　　　　　　方法：CRUD  dom树

　　　　　　　　　　　　　　　　　　appendchild() 向节点的子节点列表的末尾添加一个新的子节点

　　　　　　　　　　　　　　　　　　removechild() 删除当前节点指定的子节点

　　　　　　　　　　　　　　　　　　replacechild()  用新节点替换子节点

　　　　　　　　　　　　　　属性：

　　　　　　　　　　　　　　　　　　parentNode()：返回当前节点的父节点

　　　　　　　　案例：动态表格

　　　　

 
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{
                border: 1px solid ;
                
                margin: auto;
                 500px;
            }
            th,td{
                text-align: center;
                border: 1px solid;
            }
            div{
                text-align: center;
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="text"id="id"placeholder="请输入编号" />
            <input type="text"id="uname"placeholder="请输入名字" />
            <input type="text"id="sex"placeholder="请输入性别" />
            <input type="button"id="ad"value="添加" />
        </div>
        <table id="table">
            <caption>学生信息表</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>001</td>
                <td>安林</td>
                <td>男</td>
                <td><a href="javascript:void(0)"onclick="fun01(this)" >删除</a> </td>
            </tr>
            <tr>
                <td>002</td>
                <td>安林林</td>
                <td>男</td>
                <td><a href="#"onclick="fun01(this)" >删除</a> </td>
            </tr>
        </table>
        <script>
            //绑定单击事件
            document.getElementById("ad").onclick = function(){
                //获取文本框的内容
                var id = document.getElementById("id").value;
                var name  = document.getElementById("uname").value;
                var sex = document.getElementById("sex").value;
                //创建td，设置td的文本为文本框的内容
                var td_id = document.createElement("td");//创建td
                var text_id = document.createTextNode(id);//将id的文本通过createTextNode文本节点进行赋值 ，然后添加到元素中
                td_id.appendChild(text_id);
                var td_name = document.createElement("td");
                var text_name = document.createTextNode(name);
                td_name.appendChild(text_name);
                var td_sex = document.createElement("td");
                var text_sex = document.createTextNode(sex);
                td_sex.appendChild(text_sex);
                //创建a标签的td
                var td_a = document.createElement("td");
                var aa = document.createElement("a");
                aa.setAttribute("href","#");
                aa.setAttribute("onclick","fun01(this);");
                var text_a = document.createTextNode("删除");
                aa.appendChild(text_a);//将元素都添加到标签中
                td_a.appendChild(aa);//将标签添加到td中
                
                //创建tr
                var tr = document.createElement("tr");
                //将td添加到tr中
                tr.appendChild(td_id);
                tr.appendChild(td_name);
                tr.appendChild(td_sex);
                tr.appendChild(td_a);
                //获取table，将tr添加到table中。
                var table = document.getElementById("table");
                table.appendChild(tr);
                
                
                }
            //删除一行
                function fun01(obj){
                    var table = obj.parentNode.parentNode.parentNode;
                    var tr = obj.parentNode.parentNode;
                    table.removeChild(tr);
                    
                
            }
        </script>
        
        
    </body>
</html>

HTML DOM

　　　　标签体的设置和获取：innerHTML。可以进行追加使用+=。

　　　　使用html元素对象的属性

　　　　控制样式

　　　　　　　1、使用元素的style属性来设置

<div id="div1">大家好</div>
        <script>
            //1、使用style属性来设置样式
            //先获取该标签的对象    
            var div1 = document.getElementById("div1");
            //再绑定单击事件
            div1.onclick = function(){
                div1.style.border ="1px solid red";
                div1.style.width = "500px";
                div1.style.fontSize = "40px";
            }
            
        </script>

　　　　2、提前定义好类选择器，通过元素的className的属性来设置其class属性值。

　　　　　　　　代码如下：

　　　　

<style>
            .d1{
                border: 1px solid red ;
                 400px;
                font-size: 50px;
            }
            .d2{
                border: 3px solid black;
                 200px;
                font-size: 30px;
            }
        </style>
<div id="div2">
            大家好我是div2.
        </div>
        <script>
            var div2 = document.getElementById("div2");
            div2.onclick = function(){
                div2.className = "d2";
            }
        </script>

事件：

　　　　概念：某些组件被执行了某些操作后，触发某些代码的执行。

　　　　　　*事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了

　　　　　　*事件源：组件。如：按钮，文本输入框。。。

　　　　　　*监听器：代码。

　　　　　　*注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

　　　　常见的事件：

　　　　　　1、点击事件：

　　　　　　　　　　onclick：单击事件

　　　　　　　　　　ondblclick：双击事件

　　　　　　2、焦点事件：

　　　　　　　　　　onblur：失去焦点   一般用于表单的校验

　　　　　　　　　　onfocus：元素活动焦点

　　　　　　3、加载事件：

　　　　　　　　　　1、onload：一张页面或一张图像完成加载。

　　　　　　4、鼠标事件：

　　　　　　　　　　　onmousedown  鼠标按钮被按下

　　　　　　　　　　　　　　*定义方法时，定义一个形参接收event对象

　　　　　　　　　　　　　　*event对象的button属性可以获取鼠标哪个按钮被点击了

　　　　　　　　　　　　　　*左键是0，滚轮是1，右键是2.

　　

document.getElementById("aa").onmousedown = function(num){//num是参数
				alert(num.button);//num.button获取那个鼠标按钮对应的值。
			}

　　　　　　　　　　　onmouseup   鼠标按钮被松开

　　　　　　　　　　　onmousemove   鼠标被移动。 

　　　　　　　　　　　onmouseover   鼠标移到某元素上

　　　　　　　　　　　onmouseout   鼠标从某元素移开

　　　　　　5、键盘事件

　　　　　　　　　　　onkeydown   键盘被按下

　　　　　　　　　　　onkeyup   键盘被松开

　　　　　　　　　　　onkeypress   键盘按下并松开

　　　　　　6、选中和改变事件

　　　　　　　　　　　onselect  文本被选中

　　　　　　　　　　　onchange   域的内容被改变时会调用：可以用于省内二级联动。代码如下：

<script>
        // 定义二维数组,存储城市信息
        var cities = new Array();
        cities[0] = new Array("海淀区","昌平区","朝阳区");
        cities[1] = new Array("郑州市","开封市","洛阳市","平顶山市");
        cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
        cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
        cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
        
        //改变指定的值
        function fun(obj){
            //通过obj获取value的值，然后将值传给二维数组获取指定的一维数组
            var arr = cities[obj];
            //获取city的对象
            var city = document.getElementById("city");
            city.innerHTML = "<option>----请-选-择-市----</option>";//将每次都进行清空
            //遍历获取的一维数组
            for(var i = 0 ; i<arr.length;i++){
                city.innerHTML += "<option>"+arr[i]+"</option>";//将每一个值都添加到city中
            }
        }
    </script>
    <body>
        <select id="province" onchange="fun(this.value)" style="150px">
            <option value="">----请-选-择-省----</option>
            <option value="0">北京</option>
            <option value="1">河南省</option>
            <option value="2">山东省</option>
            <option value="3">河北省</option>
            <option value="4">江苏省</option>
        </select>
        <select id="city" style="150px">
            <option value="">----请-选-择-市----</option>
        </select>
    </body>

　　　　　　　　

　　　　　　7、表单事件

　　　　　　　　　　　onsubmit    确认按钮被点击

　　　　　　　　　　　　　　*用于表单 的校验 

　　　　　　　　　　　　　　　　如果为false表单将不会提交，如果为true，表单将提交

　　　　　　　　　　　onreset   取消按钮被点击

　　总结 ：

　　　　JavaScript很重要，无论是学前端还是学后端都要精通它，感觉对逻辑没啥要求，主要还是记标签记方法，

　　　　　　就一句话我一个学后端的还怕前端的这一点东西吗。。。分分钟征服JavaScript！！！