JS有趣代码与基础知识

1。随意编辑页面内容
分享一个有趣的东西

document.body.contentEditable='true';

在html文本中，输入此js命令，可以随意编辑页面信息。

JS学习心得笔记，更新…..

弹窗3种：
    alert()警告
    confirm()确认：取消 去人返回true，取消返回false
    prompt()提醒：输入信息框




 第一讲
        1.JS编写位置：
                    （1）body体后边；在页面中作用的代码（推荐）
                    （2）head头，初始化的代码函数，如<script src="">;
        2.基于面向对象的语言，基于底层对象，对象在底层已经存在
        3.定义
            var name = "张三";  
                变量名字无限制，无约束
                var在外部，带不带都是全局
                    在函数内部,待var是局部,不带var是全局变量
                var可以不加，但建议加上有区别，与变量作用域有关，
                    函数外，建议加var；函数里边，全局变量不加var，局部变量加var

第二讲
        JS基础对象
            1)window  //窗口对象
            2)document //文档对象
            3)document.documentElement  //html对象昂
            4)document.body     //body对象        主战场
            5)document.head     //head对象
        <window.document.documentElement> //层次顺序

        1.输出变量
            document.write("aaa");//向页面输出东西
             alert();//弹框输出
        2.字符串链接符：+；
            eg:
                var name = "张三";
                alert("my name is "+name);
        3.window.XXX        //窗口对象
            eg：window.open      //打开新窗口
                window.location.href="www.xxx.com";
                    省略成==>location="wwww";
        4.注释  //           /*     */

第三讲JS语法
        1.var imgobj=document.getElementById("id");//找到这个ID，然后可以修改此ID里的任何属性
        2.JS特效
            1.通过JS把标签转换成元素对象
            2.JS操作变迁样式
            3.JS操作标签时间
        3.JS变量类型
            1.字符串 var name="aaaaaaa";
            2.整形    var name="10";
            3.浮点
            4.布尔
            5.数组4种定义方法
                    1)var arr= new Array(); 
                        arr[0]="0";
                    2)var arr= new Array(1,2,3);
                    3)var arr=[1,2,3];
                    4)var arr=[];           arr[0]="a";
            6.对象3种定义方法  
                    1) var obj=new Object();    alert (obj);
                    2) alert(window.document.documentElement);
                    3) var obj={
                            "name":"user1",
                            "age":"30"
                            }   
                        alert(obj); //Json对象
            5.6.区别  数分为关联数组[1,2..]与索引数组[name,ages..]，关联数组在JS中就是对象
                        注意定义时候的括号，数组[] 对象{}

            7.NaN       非数字     not a number
            8.null      不存在
            9.undefined 不存在
        4.global 对象方法 类型转换
            parseInt(10.5aaa)   =>10
            parseFloat(10.5aaa)=>10.5
            typeof()            //运算符把类型信息当作字符串返回
            eval()              //把字符串表达式转成表达式执行，即要输出的东西，可以再运算后执行    
            isNaN()
            String()
            Number()
            Array()
            Object()
            Boolean()       转BOOL类型两种方法 : Boolean(num);  !!num;

第四讲
        5.运算符
            +           //字符串连接符
            new         //创建对象
            this        //本对象
            in          //检查某一个属性是否发在这个对象的里面
            instanceof  //检查某个对象是否是有构造函数产生的
            delete      //不能产出用var定义的变量，其他的可以删除



            <script>
                    +:连接符

                    new:
                        var obj=document.documentElementById("inputid");

                    this:
                        <input type="text" value="" name="text" id="inputid" onclick="this.name">

                    in: ！！！！！！！
                        var arr = ["user1","30"];
                        alert(1 in arr); =>ture
                        alert(2 in arr); =>false

                    --------!!!!!!!!!!!!!!!!!!!!!!!!!!!!-------
                        for,in组合：来遍历数组，对象
                            var obj = new Object();
                                obj.name = "user1";
                                obj.age = "22";
                                obj.sex = "man";
                            for(var i in obj){
                                alert(i+"=>"+obj[i]);       //i代表对象的属性名称，obj[]代表对象的内容
                            }
                    -------!!!!!!!!!!!!!!!!!!!!!!!!!!!!-------

                    instanceof:
                        var obj = new Object();
                            alert(obj instanceof Object);//检查OBJ是否来自Object  =>true

            </script>

                delete：
                    var num1=10;
                        num2=20;
                    delete num1;
                    delete num2;
                    alert (num1);
                    alert (num2);
                    ===>10  ,没有输出20,被删除了


                    onclick     鼠标获得焦点
                    onblur      鼠标失去焦点  


        6.JS语法
            1)switch(){
                case:break;
                }
            2)if else
            3)while
            4)for 
            5)for in
            6)with



第五讲
        JS内置对象  
            1.Math数学对象
              属性：
                Math.pi =>3.1415
              方法：
                Math.ceil() 向上取整
                Math.floor()    向下取整
                Math.round()  四舍五入取整
                Math.random() 随机取数，(0,1)
                Math.max()  取最大值
                Math.min()  取最小值

                eg:Math.floor(Math.random()*4)      //取0~3指甲你的整数

            2.date日期对象
                var dd = new Date();
                var y=dd.getFullYear();     //输出现在的年
                var m=dd.getMonth()+1;          //输出月份
                var d=dd.getDate();         //输出几号
                var h=dd.getHours();
                var i=dd.getMinutes();
                var s=dd.getSeconds();
                toLocaleString();               //时间本地化


                    eg1:页面输出一个定时器
                        var timeobj= document.getElementById("timeid");
                            setInterval("settime()",1000);//方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

                        function settime(){
                            var dd = new Date();
                            var y=dd.getFullYear();     //输出现在的年
                            var m=dd.getMonth()+1;          //输出月份
                            var d=dd.getDate();         //输出几号
                            var h=dd.getHours();
                            var i=dd.getMinutes();
                            var s=dd.getSeconds();
                            var t=(y+"-"+m+"-"+d+" "+h+":"+i+":"+s);//输出时间
                            timeobj.innerHTML=t;
                        }


                        或者
                        var timeobj= document.getElementById("timeid");
                            setInterval("settime()",1000);//方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

                        function settime(){
                            var dd = new Date();
                            var t=dd.toLocaleString();          //获取本地时间
                            timeobj.innerHTML=t;
                        }

                    eg2:
                        //随机换取图片
                        var imgobj= document.getElementById("imgid");
                        setInterval("changeImg()",1000);//

                        function changeImg(){
                            var add=Math.ceil(Math.random()*4);
                            imgobj.src=add+".jpg";
                            }


        3.定时器       //重复性的，用的多
                setInterval(function() {}, 1000);               //【每】1秒执行【一次】方法
                clearInterval();                        //停止

        4.超时器       //一次性的，用的少
                setTimeout(function() {}, 1000);            //1秒后执行【一次】方法   
                clearTimeout();                         //停止

        5.字符串函数
            属性：
                str.length;                     eg:var str="abc"; alert(str.length);
            方法:
                str.indexOf("a");       //返回a第一次出现的位置
                str.lastIndexOf("a");   //从后取返回a第一次出现的位置
                substr(0,5);    //从0开始截取,截取5个字符
                slice(0,3)  //从0位置开始，截取到第2个位置的字母,注意，它的参数是位置
                split(reg); //以reg为标准进行切割,返回到一个【数组】explode preg_split   支持正则
6讲              search(reg);    //匹配到返回的是首次出现的位置，没有返回-1 
                match();                //匹配成功，返回数组，失败返回NULL    支持正则 / /gi g匹配多个，到底；i不区分大小写
                replace();

第七讲

        6.数组函数  使用时牵头必须加数组名称
            属性：
                arr.length

            方法：
                join('-')
                pop()           //弹出并返回数组中最后一个元素，与PHP类似
                push()          //从最后添加一个元素
                shift()         //从开头【删除】一个元素
                unshift()       //从开头【添加】一个元素
                reverse();      //数组元素反转
                concat();       //数组链接      arr.concat[arr2]; 把arr与arr2链接起来
                slice(1,2);     //从数组中【截取】一部分元素     从1位置的数组开始，截取到(2-1)位置的数组
                splice(1,2,"ABC");  //从数组的1位置后边开始，截取2个数组，把他替换成“ABC” ,【删除替换】,与slice有区别
                concat();       //链接多个数组
                sort();         //排序
                        var arr=[0,1]; function show(a,b){return a-b}  alert(arr.sort(show));
                        这样才默认升序排序，b-a降序
                        return a-b 从字面上看只是一个差值而已，返回到sort()里自动执行了一个规定（负值就是a在b前面）



        7.循环：
                for 
                forIn（少用）   因为它可能还有其他信息length item，取到了所有属性，很多
                                但自己 var arr =new Array; 可以用forin    通过dom得到的最好不要，里边附带东西很多



第八讲
        1.DOM获取元素对象 
            document.getElementById();
            document.getElementsByName();
            document.getElementsByTagName();
            document.getElementsByClassName(); 

            document.all            //获取所有元素，只有IE支持，可以用来做区分浏览器
                    if(document.all){alert("ie浏览器")}

        2.【总结】元素对象常用属性：
            obj.innerHTML       //obj内里边的HTML标签
            obj.outerHTML       //obj所有的HTML标签
            obj.textContent     //obj内文本的内容
            obj.length
            obj.tagname

        3.获取几个重要的元素高度:
            1. document.body.clientHeight;//文档区域的高

            2. document.documentElement.clientHeight;//窗口可视区域的高度和宽度
               document.documentElement.clientWidth;

            3. document.documentElement.scrollHeight;//窗口的【总高度】

            4.document.documentElement.scrollTop;       //没有滚动式，高度为0，往下滚多少，计算多少
                                                        //微博等滚动下边自动加载，用它计算

            5. obj.offsetHeight;//包含边框的高
            6. obj.ClientHeight//本身的高度

            3=4+2条条件进行判断   clientHeight+scrollHeight=scrollHeight


        4.浏览器默认行为
            1.return false;
            2. event.preventDefault();      见demo.html实例


            <a href="www.baidu.com" onclick="alert(1);return false;">aaaa</a>
            阻止链接跳转  return false
            <form action="" onsubmit="alert(1);return false;"> </form>








第十讲
    JS事件.

    1.JS事件
     窗口有关的
        1. obj.onabort              //图片加载被中断时触发
        2. obj.onerror              //图片加载时拍的时候加载它
        3. obj.resize               //窗口或框架被调整尺寸
        4. obj.onload()             //页面加载完毕事件， +obj.focus() 加载完，选中obj对象，focus(是方法) 


     表单有关的
        5. obj.onfocus              //获取焦点
        6. obj.onblur               //失去焦点
        7. obj.onselect             //选中事件      与select()方法区分，一个事件，一个是方法
        8. obj.reset                //重置按钮被点击
        9. obj.onsubmit             //提交按钮被点击
        10. obj.onchange                //用户改变文本域的值的时候触发

     鼠标有关的
        11. obj.onclick()       //单击时出发
        12. obj.dbclick()       //双击时出发
        13. onMouseover         //当鼠标移动到某元素上时候，触发 = 后面的脚本函数
        14. onMousemove         //当鼠标移动。。
        15. onMousedown         //当鼠标按下时。。
        16. onMouseout          //当鼠标离开 。。
        17. onMouseup           //当鼠标 按下又抬起。。。

     键盘有关的事件
        18. onkeydown       //线盘被按下
        19. onkeypress      //键盘被按下或按住
        20. onkeyup         //键盘按键背诵开

        21.oncontextmenu        //右键菜单  

    2.JS事件方法
        getAttribute();     //获得对象下的非官方属性
            eg: <img src="" age="" name=""></img>       age ,name 为非官方私有属性，用getAttribute    

        focus()




第十三讲
    浏览器对象(BOM)
        1. window对象         //浏览器整个窗口
        2. navigator对象      //浏览器版本对象
        3. screen对象         //桌面下的分辨率
        4. history对象            //上一页面
        5. location对象           //地址栏
        6. document对象           //文档对象


        1.window 对象:
            属性:
                opener          //找到窗口的打开者，与open打开子页面，在子页面用它能找到父页面
                frames
                top             //返回顶级窗口，win.top.frames,获取所有的frame,按顺序控制win[0,1,2]
                location        //URL

            方法:
                open("url","title","窗口特性");         //var win2 = open();
                    窗口特性：
                        fullscreen=1|0; 是否全屏        //火狐谷歌不支持i,霸王广告条款
                        width=""窗口高度
                        height=""   窗口宽度
                        left/top="" 里屏幕左/上角举例
                        location=0|1    是否有地址栏
                        menubar=0|1     是否有菜单条
                close()     //关闭open打开的WIN2窗口，因为在WIN1页面中可以获取控制WIN2的东西
                alert();
                confirm();
                prompt();
                setInterval();
                clearInterval();
                setTimeout();
                clearTimeout();

                moveTo(x,y);
                moveBy(x,y);
                resizeTo();
                resizeBy();
                scrollTo(x,y);      滚动一次
                scrollBy(x,y);      依次滚动


        2. navigator对象
            1. appName  //浏览器公司
            2. userAgent    //浏览器的一些信息，包括公司名称eg:判断是否是火狐浏览器
                            //alert(navigator.userAgent.search(/firefox/i))

        3. screen对象
            属性:
                availHeight     屏幕有效宽度（除去WIN的开始菜单栏，因为浏览器界面实际显示大小就是这么大）
                availWidth
                height      屏幕高度    eg:alert(window.screen.height)
                width

        4.history

            方法:
                history.back();
                history.go();


        5.Location 地址栏对象:
            属性:
            location.href=""; #缩写为 location="";
            host                //主机名字
            port                //端口80

            方法:
            Location.reload(); #刷新当前页面
            Location.replace(); #刷新当前页面,但是没有历史记录，与reload区别只在这里



第十七讲    DOM对象和Ajax

    Dom 对象(document object model):
        简单的 DOM 对象:
            1.document
            2.document.documentElement
            3.document.body
            4.document.head
            5.document.title

        元素对象常用方法:
            1.document.getElementById();        配合set/getAttribute();可以获取非正规属性
            2.document.getElementsByTagName();
            3.document.getElementsByClassName();



        元素对象常用属性:
            1.obj.innerHTML;        不包含标签对象内的内容
            2.obj.outerHTML;        包含标签的对象内容
            3.obj.textContent;      只显示标签内的内容，无标签
            4.obj.tagName;          获取该对象所在的标签
            5.obj.getAttribute('class');

        dom 对象集合:

          图片集合
            1. images 集合        document.images 获取网页所有图片

        超链接集合
            2. links 集合     document.links
            3. anchors 集合       document.anchors 锚点，有name属性的a标签
        表格集合
            7. rows 集合      document.rows
            8. cells 集合     document.cells
        表单集合
            4. forms 集合     【见demo】实现下拉左选择，右添加
            5. elements 集合
            6. options 集合



    Ajax实现无刷新技术     和PHP通讯      返回来的一般为HTML代码
----------------------------------------------
1.获取Ajax对象xmlHttpRequest(xhr)
    xhr=new XMLHttpRequest;

    //1.生成xhr对象
    var xhr=new XMLHttpRequest;

    //2.用xhr的open方法准备如何链接PHP页面 false同步,treu异步       onreadystatechage事件
        //get时，直接?添加参数，但post怎么办？
        xhr.open("get","index.php?id=1&name=a","true");
        ///用xhr的send方法真正想index.php发起get请求
        xhr.send();

        //模拟表单POST提交数据，如何添加参数
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.open("post","index.php","true");
        var str="?id=1&name=a";
        xhr.send();
    //3.用xhr的send方法真正想index.php发起get请求
    xhr.send();

    //4.用xhr获取从php响应的数据
    xhr.responseText    //获得字符串形式的响应数据。 




2.Ajax属性
    xhr.responseText
3.Ajax方法
    xhr.open();
    xhr.send();
4.Ajax事件
    xhr.onreadystatechage=function(){}

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){  //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
Ajax和PHP交互时候，一般交互HTML代码，用字符串传，若有数组，用Json实现