javascript 笔记2

javascript 笔记2

"css 回顾"

    选择器，其实就是样式要作用的标签容器。

    当样式分离后，html 作用在于用标签封装数据，然后将css加载到指定的标签上。

选择器的基本分类，
        1.）标签选择器，其实就是html 中的每一个标签名。

        2.）类选择器，就是每一个标签的class 属性，用. 的形式表示。
            只用来给css 所使用。可以对不同标签进行相同样式设定。

        3.）ID 选择器，就是每一个标签的ID 属性，但是要保证ID 唯一性，用# 来表示
            ID 不仅可以被css所使用，还可以被javascript 所使用。

        选择器优先级， ID 》 class 》标签
        
        扩展选择器，
            1.）关联选择器，就是对标签中的标签进行样式定义，选择器  选择器...

            2.）组合选择器，对多个选择器进行相同样式定义，将多个选择器通过，（逗号）
                隔开的形式。

            3.）伪元素选择器，就是元素的一种状态。
                a:link  ，超链接被点前状态。
                a:visited，点击后
                a:hover ，悬停在超链接上。
                a:active ，点击链接时。
                //在定义这些状态时，有一个顺序， L V H A
                p:first-letter
                p:first-line
                p:focus
        
        "css 滤镜，就是通过一些代码完成丰富了样式。"

    当使用css的更多属性时，还需要查阅css api。

    网页设计的时候，div + css。
    div，行级区域。
    span，块级区域。
    p: 行级区域， "p中不要嵌套div"
————————————————————————————————————————————————————————————————
"javascript部分"

<script type="text/javascript" src="my.js">
</script>

js 文件就是单独的 javascript 代码。

有两种方式可以再页面内写入 javascript 代码，上面是第一种,引入方式

<script type="text/javascript">

    "这里是javascript 代码部分"

</script>  //这是直接写入的方法，和java 代码很相似，这个好啊
    
    "script 代码可以放在任何网页的任何位置，没有要求。"


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>\

没有变量的具体区分，都用 var 代表。

js 和 java 一样有很多已有对象和方法可以使用，如 String

js 的每个对象里都有一个 prototype 属性

该属性的作用是，为对象已有方法上再增加新的方法

使用方法是，对象.prototype.方法名 = 方法

如，var a = " dd ";
    function trim(){ 去空格方法 }
    String.prototype.trim = trim();
    a.trim();
       ---结果是，没有空格的 dd;

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

"dom 编程"

DOM, document object model ,文档对象模型。

将标记型文档的标签以及文档中的内容都封装成对象，

可以再对象中定义其属性和行为，可以方便操作这些对象。

dom 共有三层模型，dom1 ，将html文档封装成对象。

dom2 ，将xml 封装成了对象。

dom3 ，将xml 封装成了对象。

html
    |--head
        |--title
        |--base
        |--link
        |--meta
        |--style
        |--script
    |--body
        |--table
            |--tbody
                |--tr
                    |--td
                    |--th
        |--div
        |--a
        |--span
        |--dl
            |--dt
            |--dd
        |--form
            |--input
            |--select   //这个标签层次，像一个树形结构，那么也称为标记型文档。
                        //那这些标签以及标签的数据都是这棵树的节点。
dom树---节点。

    //当标记型文档加载进内存，那么那么内存中有了一个对应的dom 树。

    So，dom对于标记型文档的解析有一个弊端，就是文档过大，相对消耗资源。

    对于大型文档可以使用 SAX（啥可死）来进行解析。

dom 和 html 技术的组合就是 DHTML --》动态页面，动态html

动态html，是综合体，包括 html，css，dom，javascript 等技术

html，将标签进行封装。

dom，将标签封装以及标签中的内容封装成对象。

css，负责标签中数据的样式。

javascript，将三个进行融合，通过程序设计方式来完成动态效果的操作。

如果在加上，xmlHttpRequest ，就成了AJAX，
                |--//这是连接服务器的技术，javascript 因为ajax 而火了。
    
"节点类型"
    标签型节点：类型，1
    
    属性节点：类型，2
    
    文本型节点，类型，3

    注释型节点，类型，8

    document ,类型，9

        //标签之间存在空行时，会出现一个空白的文本节点，要注意。

    节点的关系，父节点，parentNode

                子节点，childNodes ，直接子节点，返回是一个节点集合

                兄弟节点，上一个兄弟节点，previousSibling
                
                        下一个兄弟节点。nextSibling

===================================================================
获取可以通过节点的层次关系完成。

也可以通过 document 对象完成。

    getElementById, 通过id 属性值获取对应的节点对象，如果有多一个id值相同，
                    获取到的是第一个 id 所属对象，尽量保证id 唯一性。

    getElementsByName,通过标签的name 属性值获取对象，返回的是一堆数组。

    getElementsByTagName,即没有id 也没有Name 时，可以通过标签名获取对象，返回的是

                        一堆对象，其实是个数组。

                        大多容器性标签都有这个方法。
-----------------------------------------------------------------------------

"window 对象"

alert 就是window 的第一个方法。

用window 的 navigator 对象可以获取到浏览器的相关信息。

    window.confirm    带 确定和取消的对话框。

    window.close    关闭窗口，关前会询问

    window.moveBy(x,y)   移动 x，y 的坐标
    
    window.moveTo(x,y)   移动到 x，y的坐标

    window.prompt("a","b") 可以获取输入的对话框，a是出现的字，b是默认值，还有返回值。

    window.setInterval("a",b); 定时器，每隔b 秒执行a事件

    window.event 获取键盘和鼠标（事件相关）
        
        window.event.keyCode 获取键盘输入的ascii 值

        window.event.returnValue 判断值后的回显

        window.event.srcElement 获取当前事件源

"window 的事件"

    window.οnlοad=function(){a} 加载完执行a 代码

    window.οnunlοad=function(){a} 关闭后执行 a 代码

    window.οnbefοreunlοad=function(){a} 关闭前执行 a 代码

"window 的方法"

    window.focus() 焦点，使窗口在最前
---------------------------------------------------------------------------------
"节点操作"
        1.定义数据封装的标签。（定义界面）

        2.确定事件源。

        3.注册事件。

        4。事件处理。

            //1. 定义div区域，拥有独立id ，上面有大，中，小 超链接
            //2. 点击每个连接可改变div 区域数据的大小
    <style type="text/css">
    .max{background-color:#FFFF99;    color:#0033FF;    font-size:36px;    }
    .min{background-color:#FF99CC;    color:#00FF66;    font-size:16px;    }
    </style>
    </head>

    <body>
    <script type="text/javascript">
        
        function changeSize(className){
            var divNode = document.getElementById("newid");
            divNode.className = className;    }
    </script>
            //使点击没有效果的专业处理方法 javascript:void(0);
    <a href="javascript:void(0)" οnclick="changeSize('max')">大</a>
    <a href="javascript:void(0)" οnclick="changeSize()">中</a>
    <a href="javascript:void(0)" οnclick="changeSize('min')">小</a><br />
    <div id="newid" >
    家里的事就分了开始的积分是电话费<br />
    家里的事就分了开始的积分是电话费<br />
    家里的事就分了开始的积分是电话费<br />
    家里的事就分了开始的积分是电话费<br />
    家里的事就分了开始的积分是电话费<br />
    家里的事就分了开始的积分是电话费<br />
    </div>
---------------------------------------------------------------------------------------
"展开闭合效果"
        
    css 属性中 有一个 布局属性 Layout Properties
        
        下有一个 overflow ，接受4 个取值，visible,auto,hidden,scroll
    
            //该属性可使显示效果，= 不显示，自动，隐藏，滚动

"获取事件源的两种方式"

    1.通过event 对象的属性 srcElement 获取

    2.把事件源对象通过this 传入。

            function list1(dtNode){
        //var dlNode = document.getElementsByTagName("dl")[0];
        //var dtNode = event.srcElement;
        var dlNode = dtNode.parentNode;
        //alert(dlNode.nodeName);
        if(dlNode.className=="open"){
            dlNode.className="close";
        }else{
            dlNode.className = "open";
        }
    }
-----------------------------------------------------------------------------------
"table 标签的操作一"

    1.使用文档的 document.createElement("table"); 方法创建表格

    2.使用元素的 tableNode.appendChild(tbodyNode); 方法添加子节点元素。

            function maketable(){
            var tabNode = document.createElement("table");
            var tbdNode = dc("tbody");
            //alert(tbdNode.nodeName);
            var trNode = dc("tr");
            var tdNode = dc("td");
            var textNode = document.createTextNode("the one");
            
            tdNode.appendChild(textNode);
            trNode.appendChild(tdNode);
            tbdNode.appendChild(trNode);
            tabNode.appendChild(tbdNode);
            document.getElementsByTagName("div")[0].appendChild(tabNode);
            event.srcElement.disabled=true;
        }
    "创建表格方法二，循环嵌套"

        function maketable(){
            var row = document.getElementsByName("rownum")[0].value;
            var col = document.getElementsByName("colnum")[0].value;

            var tabNode = dc("table");
            for(var i=1; i<=row; i++){
                var trNode = tabNode.insertRow();
                for(var j=1; j<=col; j++){
                    var tdNode = trNode.insertCell();
                    tdNode.innerHTML = "第"+i+"行"+"--"+"第"+j+"列";
                }
            }    
            document.getElementsByTagName("div")[0].appendChild(tabNode);
            event.srcElement.disabled=true;
        }

    "删除制定表格中的行和列"
        
        table.setAttribute("a","b");
                //设置table 节点中的 a 属性的值为 b 。
                等同于，table.a = "b";

        table.deleteRow(i);
                //删除第 i 行，这里是按角标删除的，所以要-1才符合要求

                function delRow(){    
                    var tabNode = document.getElementById("tabid");    
                    if(tabNode==null){
                        alert("No this table!");
                        return;
                    }
                    var rownum = document.getElementsByName("delrow")[0].value;
                    if(rownum>0 && rownum<=tabNode.rows.length)
                        tabNode.deleteRow(rownum-1);    
                    else
                        alert("You press number is wring!");
                }
                                //删除行
                var colnum = document.getElementsByName("delcol")[0].value;
                if(colnum>0 && colnum<=tabNode.rows[0].cells.length){
                
                    for(var i=0; i<tabNode.rows.length; i++){
                        tabNode.rows[i].deleteCell(colnum-1);
                    }
                }else{
                    alert("You Wrning");    
                }                        //删除列

                    //删除列其实是删除每一行中的第n 个表格，网页没有列的概念。


------------------------------------------------------------------------------------
    "表格的隔行颜色显示和相应鼠标高亮"

        1.获取表格中所有的行。
        
        2.遍历所有行，单行双行显示不同颜色。

        3.同时，设置各行鼠标相应效果，鼠标进入高亮，离开恢复原色。
        
            function trcolor(){
                var tabNode = document.getElementsByTagName("table")[0];
                        //获取表格table 节点
                var trs = tabNode.rows;
                        //获取table 节点中的所有行
                var name;
                for(var i=1; i<trs.length; i++){
                    if(i%2==1)
                        trs[i].className = "one";
                    else
                        trs[i].className = "two";
                                    //在遍历设置颜色的同时，响应鼠标事件。-|
                    trs[i].onmouseover = function(){
                        name = this.className;
                        this.className = "over";
                    };
                    trs[i].onmouseout = function(){
                        this.className = name;
                    }
                }
            }
-----------------------------------------------------------------------------------
    "checkbox 的应用"

        单选框的是否选中的状态是 checked 属性，选中为true ，没选为false。

        1.获取单选格后可以根据checked 属性，获得该项数据。

            function getSum(){
                var items = document.getElementsByName("item");
                var spanNode = document.getElementsByTagName("span")[0];
                var sum = 0;
                for(var i=0; i<items.length; i++){
                    if(items[i].checked)
                        sum += parseInt(items[i].value);
                }
                var str = sum+"元";
                spanNode.innerHTML = str.fontsize(7).fontcolor("red");
            }
            function checkAll(index){
                var allNode = document.getElementsByName("all")[index];
                var items = document.getElementsByName("item");
                for(var i=0; i<items.length; i++){
                    items[i].checked = allNode.checked;
                }
                
            }
-------------------------------------------------------------------------------------
"点击选择标签中项目，改变相应div 属性"
    
        1.selete.options[];
            //获取selete 下某个option 项目，以下标，标出是那一项

        2.selete.seletedIndex;
            //获取被选中的那一项的具体角标数。

            function change(){
                    var selNode = document.getElementById("selid");
                            //获取选择标签节点
                    var value =    selNode.options[selNode.selectedIndex].value;
                            //在下拉菜单中选择某项（点击了某项）后，就会触发 onchange事件
                            //这里就是获得被选中的那项的 value 值
                    var divNode1 = document.getElementById("cssid");
                    var divNode2 = document.getElementById("textid");
                                //获得需要的两个 div 区域。
                    divNode1.style.textTransform = value;
                            //用获取的 value 值赋给 div中的字体，使相应的字体做出改变
                                //该value 值事先设置成需要的属性，否则不会出现效果
                    divNode2.innerText = value;
                        //这个就好说了
                }
---------------------------------------------------------------------------------------