本节内容

一、JS

JS即JavaScript,让html动起来

1、独立的语言，浏览器具有js解释器
    浏览器的console里可以编写JS


2、JavaScript代码存在形式：
    - Head中
            <script>
                //javascript代码
                alert(123);
            </script>
            
            <script type="text/javascript">
                //javascript代码
                alert(123);
            </script>
    - 文件
        <script src='js文件路径'> </script>
        
    PS: JS代码需要放置在 <body>标签内部的最下方。先显示内容提高用户体验度，再慢慢加载js。
    
3、注释
    当行注释 //
    多行注释  /*     */
    
4、变量：
    
    python：
        name = 'alex'
    JavaScript:
        name = 'alex'     # 全局变量
        var name = 'eric' # 局部变量
    
5、写Js代码：
    - html文件中编写
    - 临时，浏览器的终端 console
    
      
6、基本数据类型
    数字
        a = 18;
    字符串(是由一个个字符组成的)
        a = "alex"
        a.chartAt(根据索引位置取出组成字符串a的字符)
        a.substring(切片。起始位置，结束位置)
        a.lenght    获取当前字符串长度
        ...
    数组(即是python中列表)
        a = [11,22,33]
        obj.splice(start, deleteCount, value, ...)  (从哪个下标开始操作,要删除的数量,是否有值)插入、删除或替换数组的元素
                obj.splice(n,0,val) 指定位置插入元素
                obj.splice(n,1,val) 指定位置替换元素
                obj.splice(n,1)     指定位置删除元素
        Python中：'-'.join([alex,jack])  --> 字符串的方法，将列表用-连接并转换成字符串
        JS中：[alex,jack].join('-')  --> 列表的方法，将列表用-连接并转换成字符串

    字典
        a = {'k1':'v1','k2':'v2'}

    布尔类型
        true和false小写（Python中首字母大写）
  
7、for循环
    a. 循环时，循环的元素是索引。var不要忘记写（局部变量），不写变成全局变量了
    
        a = [11,22,33,44]
        for(var item in a){
            console.log(item);
        }
        --> item是数组a的下标
        
        a = {'k1':'v1','k2':'v2'}
        for(var item in a){
            console.log(item);
        }
        --> item是字典a的key
        
    b.
        for(var i=0;i<10;i++){
            
        }
        
        a = [11,22,33,44]
        for(var i=0;i<a.length;i=i+1){
            
        }
        
        不支持字典的循环（字典的key不只是数字，而且字典是无序的）
    
    c.
        while(条件){
        
        }
    
  
8、条件语句
    a、
        if(条件){
        
        }else if(条件){
            
        }else if(条件){
            
        }else{
            
        }
    
    b、
        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }
                    
    ==   值相等
    ===  值和类型都相等
    &&   代表and
    ||   代表or

9、函数
    function func(arg){
        return arg+1
    }
    var result = func(1)
    console.log(result);
    
    a、普通函数：
        function func(){
            
        }
    
    b、匿名函数：
        setInterval(执行的函数，5000);
        
        普通函数：
        setInterval("func()"，5000);
        匿名函数：
        setInterval(function{
            console.log(123);
        }，5000);
        ------------------------------------
        
        myTrs[i].onmouseover = function () {
                //谁调用这个函数，this就指向谁
                this.style.backgroundColor = 'red';
            };
    
    c、自执行函数（创建函数，并且自动执行）：
        普通函数：
        function func(){
            
        }
            
        //两个小括号，前一个定义函数，后一个(1)是传递的实参
        (function(arg){
            console.log(arg)
        })(1)
        
10、序列化    
    JSON.stringify(对象)    -- 对象转字符串
    JSON.parse(字符串)        -- 字符串转对象

11、转义
    客户端(cookie)  -->  服务器端
    将数据经过转义后，保存在cookie中
    
12、eval
    Python：
        val = eval(表达式)  如eval("1+1")，有返回值
              exec(代码)    没有返回值    
    
    JavaScript：
        eval是Python中eval和exec的合集
        
13、时间
    通过Date类，操纵时间
    
    var d = new Date()

    d.getXXX 获取时间
    d.setXXX 设置时间

14、作用域
    ================= 1.以函数作为作用域（除了let）=================
    
    其他语言：以代码块(括号)作为作用域
        public void Func(string v){
            if(1==1){
                    string name = 'Java';
            }
            console.writeline(name);
        }
        Func()
        //报错
        
    Python：以函数作为作用域
        情况一：
            def func():
                if 1==1:
                    name = 'alex'
                print(name)
            func()
            //成功
            
        情况二：
            def func():
                if 1==1:
                    name = 'alex'
                print(name)
            func()
            print(name)
            //报错
        
    JavaScript：以函数作为作用域(默认)
            
            function func(){
                if(1==1){
                    var name = 'alex';
                }
                console.log(name);
            }
    
    ================= 2.函数的作用域在函数未被调用之前，已经创建=================
    
    ================= 3.函数的作用域存在作用域链，并且也是在被调用之前创建=================
    示例一：
        xo = "alex";
        
        function func(){
            var xo = "eric";
            function inner(){
                var xo = 'tony';
                console.log(xo);
            }
            inner()
        }
        
        func()
        
    事例二：
        xo = "alex";
        
        function func(){
            var xo = "eric";
            function inner(){
                console.log(xo);
            }
            return inner;
        }
        
        var ret = func()    //函数体inner，作用域链是"解释器"解释函数时就生成
        ret()    //eric
    
    示例三：
        xo = "alex";
        
        function func(){
            var xo = "eric";
            function inner(){
                console.log(xo);
            }
            var xo = 'tony';
            
            return inner;    
        }
        
        var ret = func()    //函数体inner，因为代码按照顺序解释执行
        ret()    //tony
    
    ================= 4.函数内局部变量提前声明=================
    示例一：
        function func(){
            console.log(xxoo);
        }
        func();
        //程序直接报错
        
    示例二：
        function func(){
            console.log(xxoo);
            var xxoo = 'alex';
        }
        解释器解释代码过程中,找到函数所有局部变量,函数内局部变量提前声明：var xxoo;
        
        func();
        //undefined
    
15、JavaScript面向对象(函数的变种)
                
    JavaScript面向对象:    
            
        function Foo(n){
            this.name = n;
            this.syName = function(){
                console.log(this.name)
            }
        }
        var obj1 = new Foo('we');
        obj1.name
        obj1.sayName()
        
        var obj2 = new Foo('wee');
        obj2.name
        obj2.sayName()
        
        
        a、this代指对戏那个(相当于Python中self)
        b、创建对象时，结构为 -> new 函数()

    Python的面向对象：
        class Foo:
            def __init__(self,name):
                self.name =  name
            
            def sayName(self):
                print(self.name)
    
        obj1 = Foo('we')
        obj2 = Foo('wee')

    
    原型(对象共用的东西放在原型中，节省生成对象内存资源的使用)：
                
        function Foo(n){
            this.name = n;
        }
        
        #Foo的原型    
        Foo.prototype = {
            'sayName':function(){
                console.log(this.name)
            }
        }
        
        var obj1 = new Foo('we');
        obj1.sayName()    //对象通过原型去找
        
        var obj2 = new foo('wee');

JS笔记

更多JS介绍参考：http://www.cnblogs.com/wupeiqi/articles/5602773.html

1、结构说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--JavaScript简单代码块-->
    <!--JS代码需要放置在 <body>标签内部的最下方。先显示内容提高用户体验度，再慢慢加载js-->
    <input type="text" id="user" >
    <input type="button" onclick="GetData();" value="点我" />
    <script>
        function GetData(){
            var i = document.getElementById('user');
            alert(i.value);
        }
    </script>
</body>
</html>

JavaScript简单代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入commons.js中写好的script-->
    <script src="commons.js"></script>
    <script type="text/javascript">
        //javascript代码
        alert(123);
    </script>
</head>
<body>

</body>
</html>

引入commons.js中写好的script

2、JS字符串操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--JavaScript字符串操作以及跑马灯实例-->
    <div id="i1">欢迎老男孩莅临指导</div>

    <script>
        function func(){
            // 根据ID获取指定标签的内容,定于局部变量接受
            var tag = document.getElementById('i1');
            // 获取标签内部的内容
            var content = tag.innerText;
            // 获取content字符串内第一个字符
            var f = content.charAt(0);
            // content获取子序列，切片是content.slice(1,content.length)
            var l = content.substring(1,content.length);
            // 字符串拼接,将第一个字符移到最后
            var new_content = l + f;    //迎老男孩莅临指导欢,老男孩莅临指导欢迎...
            // 更新document.getElementById('i1')中内容
            tag.innerText = new_content;
        }
        setInterval('func()', 500);//间隔0.5s不断执行，造成一个字幕不断滚动的效果
    </script>
</body>
</html>

JavaScript字符串操作以及跑马灯实例

3、模态对话框示例(全选、取消、反选)

<!DOCTYPE html>
<html lang="en">
<head>
    <!--示例之模态对话框，全选、取消、反选-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">

    <div>
        <!--onclick鼠标点击按钮执行函数-->
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">

                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>

        </p>

    </div>
    <!-- 弹出框结束 -->

    <script>
        //一定要加分号，js程序真正运行时有可能会自动压缩成一行
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }

        function ChooseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;

            }
        }

        function CancleAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;

            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

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

View Code

4、左侧菜单示例

<!DOCTYPE html>
<html lang="en">
<!--后台管理左侧菜单-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">
            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>



    </div>

    <script>
        function ChangeMenu(nid){
            var current_header = document.getElementById(nid);

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }

            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>

View Code

5、input输入框内动态提示示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--input输入框提示,(onfocus光标聚焦到框内,onblur光标移除),placeholder最新浏览器支持的简便方法-->
    <div style="width: 600px;margin: 0 auto">
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字">
        <input type="text" placeholder="请输入关键字">
    </div>
    <script>
        function Focus() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if (val === "请输入关键字") {
                tag.value = ""
            }
        }
        function Blur() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if (val.length == 0) {
                tag.value = "请输入关键字"
            }
        }

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

input输入框内动态提示示例

6、动态添加新标签示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--创建标签，并添加到HTML中-->
    <input type="button" onclick="AddEle1();" value="+"/>
    <input type="button" onclick="AddEle2();" value="+"/>
    <div id="i1">
        <p><input type="text"/></p>
    </div>
    <script>
        function AddEle1() {
            //创建一个标签(字符串形式)
            //将标签添加到标签i1里面
            var tag = "<p><input type=\"text\"/></p>";
            //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            //标签前、标签后、标签内前边后边
            document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
        }
        function AddEle2() {
            //创建一个标签（document.createElement）
            //将标签添加到标签i1里面
            var tag = document.createElement('input');
            tag.setAttribute('type','text');
            tag.style.fontSize ='16px';
            tag.style.color = 'red';

            var p = document.createElement('p');
                p.appendChild(tag);

            document.getElementById('i1').appendChild(p);
        }

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

点击按钮添加新的input（两种方式）

7、任何标签都可提交(附示例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="http://www.oldboyedu.com">
        <input type="text"/>
        <input type="submit" value="提交"/>
        <a onclick="submitForm();">提交吧</a>

    </form>
    <script>
        function submitForm() {
           document.getElementById('f1').submit()
        }
    </script>

</body>
</html>

a标签提交示例

8、定时器interval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="DeleteEle();"/>
    <script>
        function  DeleteEle() {
            document.getElementById('status').innerText = '已删除';
        }
        setTimeout(function () {
            document.getElementById('status').innerText = '';
        },5000);        //单次定时器
        var obj = setInterval(function(){
            console.log(1);
            clearInterval(obj);                //清除多次定时器
        },5000);   //多次定时器

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

单次、多次定时器

9、面向对象示例

<!DOCTYPE html>
<html lang="en">
<!--后台管理左侧菜单-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">
            //第一种绑定方式，传入this
            <div id='i1' class="header" onclick="ChangeMenu(this);">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id='i2' class="header" onclick="ChangeMenu(this);">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id='i3' class="header" onclick="ChangeMenu(this);">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id='i4' class="header" onclick="ChangeMenu(this);">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>



    </div>

    <script>
        function ChangeMenu(nid){
            //var current_header = document.getElementById(nid);
            var current_header = nid;

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }

            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>

左侧菜单示例

10、行为、样式、结构相分离的页面

<!DOCTYPE html>
<html lang="en">
<!--行为、样式、结构  相分离的页面-->
<!--js     css   html    -->
<!--DOM0写法-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #t1{
            border: 1px;
            width: 300px;
        }
    </style>
</head>
<body>
    <table id="t1">
        <tr onmouseover="t1(0)" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(1)" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(2)" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        function t1(n) {
            var myTrs = document.getElementsByTagName("tr")[n];
            //console.log(myTrs)

            myTrs.style.backgroundColor = 'red';
        }
        function t2(n) {
            var myTrs = document.getElementsByTagName("tr")[n];
            //console.log(myTrs)

            myTrs.style.backgroundColor = '';
        }
    </script>
</body>
</html>

DOM0写法

<!DOCTYPE html>
<html lang="en">
<!--行为、样式、结构  相分离的页面-->
<!--js     css   html    -->
<!--DOM1写法-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #t1{
            border: 1px;
            width: 300px;
        }
    </style>
</head>
<body>
    <table id="t1">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        //先获取到要操作的对象标签
        var myTrs = document.getElementsByTagName("tr");
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            //函数作用域
            //i=0,i=1,i=2
            myTrs[i].onmouseover = function () {
                //谁调用这个函数，this就指向谁
                this.style.backgroundColor = 'red';
            };
            myTrs[i].onmouseout = function () {
                //谁调用这个函数，this就指向谁
                this.style.backgroundColor = '';
            };
        }
    </script>
</body>
</html>

DOM1写法

11、冒泡和捕捉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            background-color: red;
            width: 300px;
            height: 400px;
        }
        #content{
            background-color: pink;
            width: 150px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>

    <script>
        var mymain = document.getElementById('main');
        var mycontent = document.getElementById('content');
        //false冒泡BubblingPhase（后边的先执行），true捕捉CapturePhase（前边的先执行）
        mymain.addEventListener('click',function () {console.log('main')},false);
        mycontent.addEventListener('click',function () {console.log('content')},false);

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

点击鼠标一次console输出两个不同内容

12、JS词法分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            background-color: red;
            width: 300px;
            height: 400px;
        }
        #content{
            background-color: pink;
            width: 150px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>

    <script>
//        function t1() {
//            console.log(name);
//            var name = "alex";
//        }

        function t1(age) {
            console.log(age);   //function
            var age =27;
            console.log(age);   //27
            function age() {

            }
            console.log(age);   //27
        }

        t1(3)

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

View Code

13、JS正则

 1 /.../  用于定义正则表达式
 2 /.../g 表示全局匹配
 3 /.../i 表示不区分大小写
 4 /.../m 表示多行匹配
 5 
 6 1、test  匹配 - 判断字符串是否符合规定的正则表达式
 7     ------------默认
 8     rep = /\d+/;    （正则表达式，其对应Python中正则表达式是"\d+"）
 9     rep.test("asdfoiklfasdf89asdfasdf")
10     默认情况下匹配到就返回 --> true
11     
12     ------------加^$
13     rep = /^\d+$/;            ^(以\d+开头)和$(以\d+结尾)，即纯数字
14     rep.test("asdfoiklfasdf89asdfasdf")
15     返回 --> true
16     
17 2、exec  获取 - 获取匹配的数据
18     ------------默认
19     rep = /\d+/;
20     str = "wangshen_67_houyafa_20"
21     rep.exec(str)
22     默认情况下只取第一个匹配到的值,返回数组 --> ["67"]
23     
24     ------------分组匹配
25     JavaScript is more fun than Java or JavaBeans!
26     var pattern = /\bJava(\w*)\b/;            --> \b代表单词边界，\B代表非单词边界；
27     # ["JavaScript", "Script"]                --> (\w*)分组匹配，即正常匹配完成后，再次在结果中用括号内的正则匹配
28     
29     ------------/.../g 表示全局匹配
30     JavaScript is more fun than Java or JavaBeans!
31     var pattern = /\bJava\w*\b/g;
32     # ["JavaScript"]
33     # ["Java"]
34     # ["JavaBeans"]
35     # null
36     
37     ------------全局+分组
38     JavaScript is more fun than Java or JavaBeans!
39     var pattern = /\bJava(\w*)\b/g;
40     # ["JavaScript",'Script']
41     # ["Java", ""]
42     # ["JavaBeans", "Beans"]
43     # null
44 
45 3、多行匹配：
46     默认就是多行匹配
47     ^$

正则介绍

更多正则介绍参考：http://www.cnblogs.com/wupeiqi/articles/5602773.html (其他4)

14、JS事件执行顺序

 1 默认事件与其绑定的自定义事件(函数)执行顺序
 2 
 3     默认事件先执行：
 4         checkbox
 5         
 6     自定义(事件绑定的函数)先执行(可根据情况阻止后续事件发生)
 7         a
 8         submit
 9         ...
10         
11     -------------    
12     <form>
13         
14         <input type='type' />
15         <input type='password' />
16         <input type='submit' />
17         
18     </form>
19 
20     $(':submit').click(function(){
21         
22         $(':text,:password').each(function(){
23             ...
24             return false;
25         })
26         return false;
27     })   
28 
29     input,checbox

默认事件与其绑定的自定义事件(函数)执行顺序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--默认事件与其绑定的自定义事件(函数)执行顺序-->
 9         <!--默认事件先执行：-->
10             <!--checkbox-->
11         <!--自定义(事件绑定的函数)先执行(可根据情况阻止后续事件发生)-->
12             <!--a-->
13             <!--submit-->
14     <input type="checkbox">
15 
16     <script src="jquery-1.12.4.js"></script>
17     <script>
18         $(':checkbox').click(function () {
19             var v = $(this).prop('checked');
20             console.log(v);
21         })
22     </script>
23 </body>
24 </html>

checkbox绑定click事件执行顺序示例

15、JS登录注册验证浅析

 1 登录注册验证
 2 
 3     JS： 验证    (粗略过滤，减小后端服务器压力，可能被禁用)
 4          
 5          各种验证
 6          
 7             $(':submit').click(function(){
 8                 
 9                 $(':text,:password').each(function(){
10                     ...
11                     return false;
12                 })
13                 return false;
14             })   
15     
16     
17     后端：Python实现验证    (防止前端JS不好用)
18     
19     业务处理
20     ....
21     
22     
23     --------注册验证写一个例子

View Code

二、DOM

DOM全称是Document Object Model(文档对象模型),是为HTML和XML提供的API。在这里JS可以通过DOM动态的修改网页

一、查找:
    Dom将整个html转换成文档对象，JS通过Dom找到并操作标签，让html动起来
    
    获取单个元素                    document.getElementById('i1')
    获取多个元素（数组、列表）   document.getElementsByTagName('div')
    获取多个元素（数组、列表）   document.getElementsByClassName('c1')
    
    a. 直接找
        document.getElementById             根据ID获取一个标签
        document.getElementsByName          根据name属性获取标签集合
        document.getElementsByClassName     根据class属性获取标签集合
        document.getElementsByTagName       根据标签名获取标签集合
    
    b. 间接
        tag = document.getElementById('i1')
        
        parentElement           // 父节点标签元素
        children                // 所有子标签
        firstElementChild       // 第一个子标签元素
        lastElementChild        // 最后一个子标签元素
        nextElementtSibling     // 下一个兄弟标签元素
        previousElementSibling  // 上一个兄弟标签元素
            
    
二、操作
    1、文件内容操作:
        
        a. innerText
        
        获取标签中的文本内容
        标签.innerText
        
        对标签内部文本进行重新复制
        
        标签.innerText = ""
        
        b. className
            tag.className =》 直接整体做操作
            tag.classList.add('样式名')   添加指定样式
            tag.classList.remove('样式名')   删除指定样式

            PS：点这个图标就执行函数（ onclick='func();' ）
            
                <div onclick='func();'>点我</div>
                <script>
                    function func(){
                    
                    }
                
                </script>

        c. checkbox  
                获取值
                checkbox对象.checked
                设置值
                checkbox对象.checked = true
                
        区别：
            innerText        - 只获取、操作文本
            innerHTML        - 获取、操作所有内容
            value
            input        - value获取当前标签中的值
            select      - 获取选中的value的值(selectedIndex索引值)
            textarea    - value获取当前标签中的值
        
        搜索框的示例
            通过判断光标来修改input的value，onfocus光标聚焦到框内,onblur光标移除
            placeholder最新浏览器支持的简便方法

    2、样式操作：
        className
        classList
            classList.add
            classList.remove
        
        <style>
            .c1{
                font-size:16px;
                color:red;
                ..
            }
        </style>
        <div class='c1 c2' style='font-size:16px'></div>
        
        obj.style.fontSize = '16px';
        obj.style.color = 'red';
    
    3、属性操作：
    
        obj.setAttriibute(属性名，值)    -设置属性值
        obj.getAttriibute(属性名，值)    -获取属性值
        obj.removeAttriibute(属性名)    -删除
        obj.attriibutes  -获取所有属性
    
    4、创建标签，并添加到HTML中:
        a、字符串形式
        b、对象的方式
            document.createElement('input')
    
    5、提交表单
        任何标签通过DOM都可以提交Form表单
        document.getElementById('f1').submit()
    
    6、其他操作
        console.log()                 输出框
        alert()                       弹出框
        var v = confirm(信息)         确认框,v=true或false
         
        // URL和刷新
        location.href                获取当前URL
        location.href = "url"        重定向当前URL，跳转
        location.reload()            重新加载，页面刷新
         
        // 定时器
        var obj = setInterval(function(){},5000)   多次定时器
        clearInterval(obj)                清除多次定时器
        
        var o2 = setTimeout(function(){},5000)    倒计时执行的单次定时器
        clearTimeout(o2)             清除单次定时器

三、事件
    onclick,onblur,onfocus
    
    行为、样式、结构  相分离的页面
    js      css    html    
    
    1、绑定事件两种方式：
        a.直接标签绑定onclick='xxx()' onfocus
        b.先获取Dom对象，然后进行绑定
            document.getElementById('xx').onclick
            document.getElementById('xx').onfocus
            
    2、this,当前触发事件的标签
        a.第一种绑定方式    
            <input type='button' onclick='ClickOn(this)'>
            
            function ClickOn(){
                //self代指当前点击的标签
            }
            
        b.第二种绑定方式（推荐）
            <input id='i1' type='button'>
            document.getElementById('i1').onclick = function ClickOn(){
                //this代指当前点击的标签
            }
            
        c.第三种绑定方式（DOM2）
            var mymain = document.getElementById('main');
            var mycontent = document.getElementById('content');
            //false冒泡BubblingPhase（后边的先执行），true捕捉CapturePhase（前边的先执行）
            mymain.addEventListener('click',function () {console.log('main')},false);
            mycontent.addEventListener('click',function () {console.log('content')},false);
            
    3、作用域示例
        var myTrs = document.getElementsByTagName("tr");
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            //函数作用域，for循环时函数并没有执行
            //i=0,i=1,i=2
            myTrs[i].onmouseover = function () {
                //谁调用这个函数，this就指向谁
                this.style.backgroundColor = 'red';
            };
            myTrs[i].onmouseout = function () {
                //谁调用这个函数，this就指向谁
                this.style.backgroundColor = '';
            };
        }
        
    4.JavaScript词法分析(函数没有执行)
        活动对象active object -----> AO
        1.形式参数
        2.局部变量
        3.函数声明表达式（优先级高，函数未执行也会被解析）
    
    
    手册
    Sublime Text -->插件emmet

DOM笔记

更多DOM介绍参考：http://www.cnblogs.com/wupeiqi/articles/5643298.html

参考：

http://www.cnblogs.com/wupeiqi/articles/5602773.html

http://www.cnblogs.com/wupeiqi/articles/5643298.html

posted on 2018-03-05 15:32 大小孩阅读(168) 评论(0) 收藏举报

刷新页面返回顶部

大小孩

公告

本节内容

一、JS

1、结构说明

2、JS字符串操作

3、模态对话框示例(全选、取消、反选)

4、左侧菜单示例

5、input输入框内动态提示示例

6、动态添加新标签示例

7、任何标签都可提交(附示例)

8、定时器interval

9、面向对象示例

10、行为、样式、结构相分离的页面

11、冒泡和捕捉

12、JS词法分析

13、JS正则

14、JS事件执行顺序

15、JS登录注册验证浅析

二、DOM