js讲解

js:
html - 就是页面上有哪些东西，就给每一个东西取个名字
css - 设置界面上这些东西都是什么样
javascript - 界面上这些东西的动画效果，数据获取及交互

脚本语言，与C#很相近

顺序语句、分支语句、循环语句

顺序语句 - 如果你要取某一个元素进行操作，1、将JS代码写在元素的下部，2、window.onload事件中
分支 - if...else if...else..
循环 - for(var i = 0;i<=10;i++){循环体};

定义变量 - var a =‘aaa’, var a = 10,
数组 - 不固定类型，不固定长度 ， a.length

函数 - function 函数名(){ };

JS的DOM操作：
一、window:
1、window.onload - 当页面加载的时候可以调用某些函数

2、window.open(1,2,3,4) - 打开新页面，
1 - 打开页面的地址：'http://www......'
2 - target：_blank 新页面中打开
3 - 打开窗口的样式，toolbar=no:没有工具栏; menubar=no:无菜单栏;status=no:无状态栏；
width,height:打开时的宽度和高度;top等
left=100:打开窗口距离屏幕的左边距;也有
resizable=no:打开的窗口大小不可调;
scrollbars=no;不出现滚动条;
location=no;不出现地址栏;

注意：window.open('xxx','','')

3、window.opener - 打开页面2的原页面，可以在页面2中控制原页面

4、window.close(); - 关闭当前页面

5、window.setInterval('要执行的代码',执行的间隔时间-毫秒); - 重复的执行代码
6、window.setTimeout('要执行的代码'，执行等待的时间-毫秒); - 等待一段时间再执行代码

它俩都可以用一个变量来接收，var a = window.setInterval('xxx',1000);
如果你想让它停，window.clearInterval(a);

7、window.navigate('url'); - 页面跳转
8、window.moveTo(x,y); - 将浏览器的位置定位
9、window.resizeTo(x, y); -先写！！！！！
10、window.scrollTo(x,y); - 很像锚点

二、window.history
window.history.back();

三、window.location
window.location.href - 当做值来使用，返回当前页面的地址

最重要的！：Document对象
1、id来取值 - document.getElementById('要取的ID'); - 返回的就是一个对象
3、class来取值 - document.getElementsByClassName('xxx'); -返回一堆对象

4、标记名来取值 - document.document.getElementsByTagName('xxx'); -返回一堆对象
2、name来取值 - document.getElementsByName('要取的name'); -返回一堆对象

innerHTML = '';如果赋值标记，那会把标记编译显示
innerText = '';放啥给你看啥，放标记也不会给你编译

注意！！！
普通标记可以依靠以上方法来取到内容，但是表单元素需要使用value属性来获取里面的内容

==========================================================================
文本类：
text - 文本框
password - 密码框
textarea - 文本域
hidden - 隐藏域
按钮类：
submit - 提交
button - 普通按钮
image - 图片按钮
reset - 重置按钮
选择类：
radio - 单选框
checkbox - 复选框
select option - 下拉列表
file - 文件上传对话框
==========================================================================

！！！radio和checkbox对应的值应该放在一个label中，并且设置label的for=对应的radio的ID！！！放for，点label也可以选中对应的选择框

html认识的一些属性会实行相应的效果；不认识的一些属性，会原封不动给扔出来，不认识的属性可以放主键值有关，跟后台保密数据无关的数据，人在代码里可以看到
==========================================================================

1、添加，删除，修改，获取属性
setAttribute('属性名','属性值'); - 添加、修改
removeAttribute('属性名'); - 删除
getAttribute('属性名'); --获取属性

<input id="btn1" type="button" value="按钮1" disabled="disabled" />
    <input id="btn2" type="button" value="按钮2" />

        <script type="text/javascript">
            //取出按钮2，注册事件
            document.getElementById('btn2').onclick = function () {
                var obtn1 = document.getElementById('btn1');
                //让按钮1变为可用
                obtn1.removeAttribute('disabled');
                //让按钮1的文字变为可用
                obtn1.setAttribute('value', '可用');
                //让按钮2变为不可用
                this.setAttribute('disabled', 'disabled');
                //把按钮2的文字弹出
                alert(this.getAttribute('value'));
            }  
        </script>

2、添加，删除，修改样式
对象.style.样式名=值;

<style type="text/css">
        #div1 {
            position: relative;
             100px;
            height: 100px;
            background-color: red;
        }
    </style>

<div id="div1"></div>
            <input id="btn1" type="button" value="我是一个按钮" />
            <input id="btn2" type="button" value="又一个按钮" />


            <%--点击按钮移动--%>
            <script type="text/javascript">
                var timer = null;//记录定时器

                document.getElementById('btn2').onclick = function () {
                    //document.getElementById('div1').style.left = document.getElementById('div1').offsetLeft + 10 + 'px'; --距离左边十个像素，点击移动
                    timer = window.setInterval('ccc()', 20);
                }


                function ccc() {
                    //获取div1
                    var odiv1 = document.getElementById('div1');
                    //让div1向右移动一下
                    odiv1.style.left = odiv1.offsetLeft + 1 + 'px';
                    if(odiv1.offsetLeft>=500)
                    {
                        window.clearInterval(timer);
                    }
                }
            </script>

            <%--点击按钮颜色变化--%>
            <script type="text/javascript">
                var list = new Array();
                list[0] = 'green';
                list[1] = 'yellow';
                list[2] = 'blue';
                list[3] = 'red';
                var num = 0;

                //获取按钮，注册点击事件
                document.getElementById('btn1').onclick = function () {
                    //将div1的北京颜色改为绿色
                    document.getElementById('div1').style.backgroundColor = list[num];
                    num++;
                    if (num == 4) {
                        num = 0;
                    }
                }
            </script>

3、事件们
onclick - 点击事件
ondblclick - 双击事件
onmouseover / onmouseout - 鼠标移入/移除事件

onmousemove - 鼠标移动时触发
onchange - 内容改变时触发（焦点丢失时触发）
onfocus - 焦点进入事件
onblur - 焦点丢失事件

onkeydown / onkeyup / onkeypress - 按键按下、抬起、按下并抬起

==========================================================================
<input id="btn2" type="button" value="又一个按钮" runat="server" onclick="aaa()" onserverclick="Page_Load" />

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Page_Load" OnClientClick="aaa()" />

注意！！！
表单元素，添加了runat = "server"，就变成了服务器控件，服务器就可以看到它了，
此表单元素的onclick事件是js代码事件，onserverclick是C#服务器代码事件

vs

服务器控件，OnClick是C#服务器事件，OnClientClick是js事件

 倒计时按钮可用

<input id="btn1" type="button" value="同意(3)" disabled="disabled" />

            <script type="text/javascript">
                var time = 3;
                var bbb = window.setInterval('aaa()', 1000)

                function aaa() {
                    //取出按钮
                    var obtn1 = document.getElementById('btn1');
                    //让按钮的显示文本开始倒计时
                    time--;

                    if (time == 0) {
                        window.clearInterval(bbb);
                        obtn1.value = "同意";
                        obtn1.removeAttribute('disabled')
                        return;
                    }
                    obtn1.value = "同意（" + time + "）";
                }
            </script>