JavaScript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、JavaScript代码存在形式

1 <!-- 方式一 -->
2 <script type"text/javascript" src="JS文件"></script>
3  
4 <!-- 方式二 -->
5 <script type"text/javascript">
6     Js代码内容
7 </script>

2、JavaScript代码存在位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

1 如：
2  
3 <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
4 <script>
5     alert('123');
6 </script>

3、变量

  • 全局变量
  • 局部变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量

1 var name = "seven"  # 局部变量
2 age = 18            # 全局变量

注：注释 // 或 /* */

4、基本数据类型、

数字（Number）

1 var page = 111;
2 var age = Number(18);
3 var a1 = 1,a2 = 2, a3 = 3;
4 parseInt("1.2");
5 parseFloat("1.2");

 字符串(String)

 1 var name = "wupeiqi";
 2 var name = String("wupeiqi");
 3 var age_str = String(18);
 4  
 5 常用方法：
 6     obj.trim()
 7     obj.charAt(index)
 8     obj.substring(start,end)
 9     obj.indexOf(char)
10     obj.length

布尔(Boolean)

1 var status = true;
2 var status = false;
3 var status = Boolen(1==1)

数组(Array)

 1 var names = ['alex', 'tony', 'eric']
 2 var names = Array('alex', 'tony', 'eric')
 3  
 4 常用方法：
 5     添加
 6         obj.push(ele)                   追加
 7         obj.unshift(ele)                最前插入
 8         obj.splice(index,0,'content')   指定索引插入
 9     移除
10         obj.pop()                       数组尾部获取
11         obj.shift()                     数组头部获取
12         obj.splice(index,count)         数组指定位置后count个字符
13       
14     切片
15         obj.slice(start,end)          
16     合并
17         newArray ＝ obj1.concat(obj2)  
18     翻转
19         obj.reverse()
20       
21     字符串化
22         obj.join('_')
23     长度
24         obj.length
25  
26  
27 字典
28 var items = {'k1': 123, 'k2': 'tony'}

序列化和反序列化

1 var items = {'k1': 123, 'k2': 'tony'}
2 
3 s = JSON.stringify(items)      #序列化字典
4 
5 m = JSON.parse(s)         #反序列化

undefined

1 undefined表示未定义值
2 var name;

null

1 null是一个特殊值

5、循环语句

 1 var names = ["alex", "tony", "rain"];
 2  
 3  
 4 // 数组：方式一
 5 for(var i=0;i<names.length;i++){
 6     console.log(i);
 7     console.log(names[i]);
 8 }
 9  
10  
11 // 数组：方式二
12 for(var index in names){
13     console.log(index);
14     console.log(names[index]);
15 }
16  
17 var names = {"name": "alex", "age": 18};
18  
19  
20 // 字典：方式一
21 for(var index in names){
22     console.log(index);
23     console.log(names[index]);
24 }
25  
26  
27 // while循环
28 while(条件){
29     // break;
30     // continue;
31 }

6、条件语句

 1 //if条件语句
 2  
 3     if(条件){
 4  
 5     }else if(条件){
 6          
 7     }else{
 8  
 9     }
10  
11 var name = 'alex';
12 var age = 1;
13  
14 // switch,case语句
15     switch(name){
16         case '1':
17             age = 123;
18             break;
19         case '2':
20             age = 456;
21             break;
22         default :
23             age = 777;
24     }

7、异常处理

1 try{
2  
3 }catch(e) {
4  
5 }finally{
6  
7 }

 8、函数

 1 函数的声明
 2     function func(arg){
 3         return true;
 4     }
 5          
 6 匿名函数
 7     var func = function(arg){
 8         return "tony";
 9     }
10  
11 自执行函数
12     (function(arg){
13         console.log(arg);
14     })('123')

9、面向对象

 1 function Foo (name,age) {
 2     this.Name = name;
 3     this.Age = age;
 4     this.Func = function(arg){
 5         return this.Name + arg;
 6     }
 7 }
 8  
 9 var obj = new Foo('wu', 18);
10 var ret = obj.Func("sb");
11 console.log(ret);

 

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

1、选择器

1 document.getElementById('id');
2 document.getElementsByName('name');
3 document.getElementsByTagName('tagname');
4 document.getElementsBycClassName('classname');

2、内容

 1 innerText
 2 innerHTML
 3  
 4 var obj = document.getElementById('nid')
 5 obj.innerText                       # 获取文本内容
 6 obj.innerText = "hello"             # 设置文本内容
 7 obj.innerHTML                       # 获取HTML内容
 8 obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容
 9  
10  
11 特殊的：
12     input系列
13     textarea标签
14     select标签
15  
16     value属性操作用户输入和选择的值

3、创建标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="container"></div>
 9     <a href="http://www.baidu.com" onclick="return AddElement();">添加</a>
10     <script type="text/javascript">
11         function AddElement(){
12             var createObj = document.createElement('a');
13             createObj.href = "http://www.baidu.com";
14             createObj.innerText = "百度一下"
15 
16             var container = document.getElementById("container");
17             container.appendChild(createObj)
18             return false;
19         }
20     </script>
21 </body>
22 </html>
 1 方式一：(推荐)
 2     var obj = document.createElement('a');
 3     obj.href = "http://www.etiantian.org";
 4     obj.innerText = "老男孩";
 5  
 6     var container = document.getElementById('container');
 7     //container.appendChild(obj);
 8     //container.insertBefore(obj, container.firstChild);
 9     //container.insertBefore(obj, document.getElementById('hhh'));
10  
11 方式二：
12     var container = document.getElementById('container');
13     var obj = "<input  type='text' />";
14     container.innerHTML = obj;
15     // 'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'
16     //container.insertAdjacentHTML("beforeEnd",obj);

 4、标签属性

var obj = document.getElementById('container');
固定属性
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";
 
自定义属性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

5、提交表单

document.geElementById('form').submit()

 6、事件

特殊的：

window.onload = function(){}
        //jQuery：$(document).ready(function(){})
        //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

特殊参数：this，event

7、其他功能

console.log()
alert()
confirm()
 
// URL和刷新
location.href
location.href = "url"  window.location.reload()
 
// 定时器
setInterval("alert()",2000);   
clearInterval(obj)
setTimeout();   
clearTimeout(obj)

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>
跑马灯
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>
搜索框

 

jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

http://www.php100.com/manual/jquery/

1、选择器和筛选器

实例:加载
实例:左侧菜单
实例:Tab菜单-css
实例:Tab菜单-html

2、属性和css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            bottom: 0px;
            right: 0px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div style="height: 2000px;"></div>

<div onclick="GoTop()" class="back hide">返回顶部</div>

<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">

    function GoTop(){
        //返回顶部
        $(window).scrollTop(0);
    }

    $(function(){

        $(window).scroll(function(){
            //当滚动滑轮时，执行函数体

            //获取当前滑轮滚动的高度
            var top = $(window).scrollTop();

            if(top>100){
                //展示“返回顶部”
                $('.back').removeClass('hide');
            }else{
                //隐藏“返回顶部”
                $('.back').addClass('hide');
            }
        });
    });

</script>

</body>
</html>
实例:返回顶部
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script type="text/javascript" src='jquery-1.8.2.js'></script>
        <script type="text/javascript">
            $(function(){
                $('#selectAll').click(function(){
                    $('#checklist :checkbox').prop('checked',true);
                })
                $('#unselectAll').click(function(){
                    $('#checklist :checkbox').prop('checked',false);
                })
                $('#reverseAll').click(function(){
                    $('#checklist :checkbox').each(function(){
                        $(this).prop('checked',!$(this).prop('checked'))
                    })
                })

            })            
        </script>
    </head>
    <body>
        <div id='checklist'>
            <input type='checkbox' value='1'/>篮球
            <input type='checkbox' value='2'/>足球
            <input type='checkbox' value='3'/>羽毛球
        </div>
        <input type='button' value='全选' id='selectAll' />
        <input type='button' value='不选' id='unselectAll' />
        <input type='button' value='反选' id='reverseAll' />
    </body>
</html>
实例:多选，反选和取消
实例:滚动菜单

3、文档处理

4、事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>
实例:移动面板

5、扩展

下载：https://files.cnblogs.com/files/wupeiqi/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip
实例:表单验证

6、ajax和跨域

下载：https://files.cnblogs.com/files/wupeiqi/ajax_demo.zip
实例:ajax
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />


<div id="container"></div>

<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function AjaxRequest() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',
                success: function (data) {
                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })

                }
            });
        }
</script>
</body>
</html>
实例:Ajax跨域

 作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selfHomework</title>
    <style>
        .tableAttr{
            border:1px solid black;
            width:300px;
            text-align:center;
            margin: 100px auto 0px auto;
        }
        .tableAttr td{
            border:1px solid black;
        }
        .hiden{
            display:none;
        }
        .edit{
            background-color: #ADADAD;
            width: 500px;
            height: 300px;
            margin: auto;
        }
        .edit .bj{
            width: 300px;
            margin: 0px auto;
            padding-top: 30px;
        }
        .edit .tj{
            width: 50px;
            height: 30px;
            margin-left: 80px;

        }
        .edit .qx{
            width: 50px;
            height: 30px;
            margin-right: 80px;
        }
        .red-color{
            border:2px red solid;
        }
    </style>
</head>
<body>
    <script src="jquery-2.2.3.js"></script>
    <table class="tableAttr">
        <tbody>
            <tr id="1">
                <td>1</td>
                <td>2</td>
                <td class="ed">编辑</td>
            </tr>
            <tr id="2">
                <td>11</td>
                <td>22</td>
                <td class="ed">编辑</td>
            </tr>
            <tr id="3">
                <td>111</td>
                <td>222</td>
                <td class="ed">编辑</td>
            </tr>
        </tbody>
    </table>
    <div class="edit hiden">
        <div class="bj">ID:<input type="text" id="key" value=""></div>
        <div class="bj">NUM:<input type="text" id="num" value=""></div>
        <div class="bj">
            <button class="tj">提交</button>
            <button class="qx">取消</button>
        </div>
    </div>
    <script type="text/javascript">
        var lock = 0
        var edit_id = 0
        //编辑操作
        $(".ed").click(function(){
            if(lock == 1){
                return false;
            }
            lock = 1;
            edit_id=$(this).parent().attr("id");
            $(".edit").removeClass("hiden");
            $(this).siblings().each(function(i){
                if(i==0){
                    $("#key").val($(this).text());
                }
                if(i==1){
                    $("#num").val($(this).text());
                }
            })
        })
        //提交
        $(".tj").click(function(){
            var key_val = $("#key").val().trim();
            var key_num = $("#num").val().trim();
            if(key_val==""){
                $("#key").addClass("red-color");
                alert("请输入有效内容");
                return false;
            }else if($("#key").hasClass("red-color")){
                $("#key").removeClass("red-color");
            }
            if(key_num==""){
                $("#num").addClass("red-color");
                alert("请输入有效内容");
                return false;
            }else if($("#num").hasClass("red-color")){
                $("#num").removeClass("red-color");
            }
            $(".edit").addClass("hiden");
            $("#"+edit_id).children().each(function (i) {
                if(i==0)  {
                    $(this).text(key_val);
                }
                if(i==1){
                    $(this).text(key_num);
                }
            })
            lock = 0;
        })
        //取消
        $(".qx").click(function(){
            $(".edit").addClass("hiden");
            lock = 0;
        })

    </script>
</body>
</html>
homework