Python学习：javascripts和DOM简单使用

Python学习：Javascripts和DOM操作

矮哥linux运维群： 93324526 笔者QQ：578843228

二、JavaScript

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

1、如何编写

1. 存在形式

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
  
<!-- 方式二 -->
<script type"text/javascript">
    //Js代码内容
</script>

2. 位置

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

    <body>
    
    <script>...</script>
    </body>

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

2、变量

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

// var a = 123; // 局部变量
// b = 123;     // 全局变量

    var name = 'aige';
    function func() {
         name = 123;
        var name = 666;
    }
    func();
    alert(v);

JavaScript中代码注释：

单行 //
多行 /* */

注意：此注释仅在Script块中生效。

3. 声明函数

// 普通函数

    function func(arg){
        alert(123);
    }
    func("alex")

// 普通函数，自执行函数

    (function(arg){
        alert(123);
    })("alex")
    
    (function(arg){})("alex")

// 匿名函数,当做参数传递

    function(){
        alert(123);
    }
        // 匿名函数的应用
        function func(arg){
            arg()
        }
        func(function(){alert(123)})

4、数据类型

JavaScript 中的数据类型分为原始类型和对象类型：

原始类型
数字
字符串
布尔值
对象类型
数组
“字典”
...

undefined

     // 未定义 var age;
            function func(a1,a2){
                alert(a1);
                alert(a2);
            }
            func(1)
null          // 空值

数字

    var age = 123.123;
    var v = typeof age; # number
    alert(v);
    
    isNaN         //判断是否是非数字
    parseInt()    //转换成整形
    parseFloat(num)  //转换成浮点型

字符串方法

    obj.length                           长度
    
    obj.trim()                           移除空白
    obj.trimLeft()
    obj.trimRight)
    obj.charAt(n)                        返回字符串中的第n个字符
    obj.concat(value, ...)               拼接
    obj.indexOf(substring,start)         子序列位置
    obj.lastIndexOf(substring,start)     子序列位置
    obj.substring(from, to)              根据索引获取子序列
    obj.slice(start, end)                切片
    obj.toLowerCase()                    大写
    obj.toUpperCase()                    小写
    obj.split(delimiter, limit)          分割

数组

    obj.length          数组的大小

    obj.push(ele)       尾部追加元素
    obj.pop()           尾部获取一个元素
    obj.unshift(ele)    头部插入元素
    obj.shift()         头部移除元素
    obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                        obj.splice(n,0,val) 指定位置插入元素
                        obj.splice(n,1,val) 指定位置替换元素
                        obj.splice(n,1)     指定位置删除元素
    obj.slice( )        切片
    obj.reverse( )      反转
    obj.join(sep)       将数组元素连接起来以构建一个字符串
    obj.concat(val,..)  连接数组
    obj.sort( )         对数组元素进行排序

字典

    info = {name: 'aige',age: 18};

5、序列化

    JSON.stringify
    JSON.parse

6、转义

decodeURI( )                   URl中未转义的字符
decodeURIComponent( )   URI组件中的未转义字符
encodeURI( )                   URI中的转义字符
encodeURIComponent( )   转义URI组件中的字符
escape( )                         对字符串转义
unescape( )                     给转义字符串解码
URIError                         由URl的编码和解码方法抛出

7、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

eval() 
EvalError   执行字符串中的JavaScript代码

8、时间

JavaScript中提供了时间相关的操作，时间操作中分为两种时间：

时间统一时间
本地时间（东8区）
动态时间展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1"></div>

    <script>
        function currentDate() {
            var da = new Date();

            var year = da.getFullYear();
            var month = da.getMonth()  + 1;
            var day = da.getDate();

            var hours = da.getHours();
            var minutes = da.getMinutes();
            var seconds = da.getSeconds();

            var txt = year + "-" + month + "-" + day + " " + hours+":"+minutes+":"+seconds;

            document.getElementById('i1').innerHTML = txt;
        }

        setInterval(currentDate,1000);

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

9、条件&循环&异常处理

1、条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch
if

    if(条件){
 
    }else if(条件){
         
    }else{
 
    }

switch

    switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

2、循环语句

JavaScript中支持三种循环语句，分别是：

var names = ["aige", "can-H", "can"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

var names = ["aige", "can-H", "can"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

while(条件){
    // break;
    // continue;
}

3、异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

注：主动跑出异常 throw Error('xxxx')

DOM

DOM+HTML操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1"></div>
    <div class="c1">1</div>
    <div class="c1">2</div>
    <div class="c1">3</div>
    <div class="c1">4</div>
    <script>

        // var obj = document.getElementById('i1');
        var objList = document.getElementsByClassName('c1');
        for(var i=0;i<objList.length;i++){
            objList[i].innerHTML = "aige";
        }

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

1、面向对象

    // 面向对象
    function Foo(name,age){
        this.Name = name;
        this.Age = age;
    }
    
    obj = new Foo('aige',18);
    obj.Name
    
    
    function Foo(name,age){
        this.Name = name;
        this.Age = age;
    }

    Foo.prototype={
        "show":function(){
            alert(this.Name);
        }
    }

    // 利用原型实现方法重用
    Foo.prototype.show = function(){
            alert(this.Name);
    }
    
    obj1 = new Foo('aige',18);
    obj1.show()
    
    obj2 = new Foo('aige',18);
    obj2.show()

2、利用HTML文档+JavaScript+DOM实现操作HTML数据

1. 查找

  document.getElementById             根据ID获取一个标签
  document.getElementsByName          根据name属性获取标签集合
  document.getElementsByClassName     根据class属性获取标签集合
  document.getElementsByTagName       根据标签名获取标签集合

2. 间接查找

    #这个会把空白符也找出来。例如回车，包括文本
    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点
     
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素

3. HTML标签样式操作

    var tag = document.getElementById('i1');
    tag.classList.add('c1')  //给标签添加样式
    tag.classList.remove('c1')  //给标签移除样式
    
    <div class='c1 c2'></div>
    tag.className    "c1 c2"
    tag.classList    ['c1','c2']

菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .item .title{
            height: 40px;
            background-color: cadetblue;
            line-height: 40px;
        }
        .item .content a{
            display: block;
        }
    </style>
</head>
<body>
    <div style="width: 200px;height: 600px;border: 1px solid #dddddd">

        <div class="item">
            <div class="title" onclick="changeMenu(this);">菜单一</div>
            <div class="content">
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="changeMenu(this);" id="m2">菜单二</div>
            <div class="content hide">
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
                 <a href="#">内容二</a>
            </div>
        </div>

        <div class="item">
            <div class="title" onclick="changeMenu(this);">菜单三</div>
            <div class="content hide">
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
                 <a href="#">内容三</a>
            </div>
        </div>


    </div>

    <script>

        function changeMenu(currentTagObj) {
            // console.log(currentTagObj);
            // currentTagObj当前点击的标签

            // contentTagObj  当前点击的标签的弟弟
            var contentTagObj = currentTagObj.nextElementSibling;
            contentTagObj.classList.remove('hide');

            // itemObjList  当前点击的标签的父亲的父亲的所有儿子
            var itemObjList = contentTagObj.parentElement.parentElement.children;

            // 循环当前标签的所有 父辈
            for(var i=0;i<itemObjList.length;i++){
                var loopItemObj = itemObjList[i];
                // 只处理当前标签的大爷和叔叔
                if(loopItemObj != contentTagObj.parentElement){
                    loopItemObj.lastElementChild.classList.add('hide');
                }
            }
        }
    </script>
</body>
</html>

4. 文本操作

    innerText         只获取文本
    innerHTML         获取文本以及标签
  
    innerText = "文本"
    innerHTML = "HTML格式解析"
    
    input:
        document.getElementById('username').value
        document.getElementById('username').value = "asdf"
        
    PS:
        <input type="text" id="key" value="请输入关键字" onfocus="keyFocus();" onblur="keyBlur();" />
  
        onfocus: 获取焦点
        onblur： 失去焦点

搜索框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" id="key" value="请输入关键字" onfocus="keyFocus();" onblur="keyBlur();" />

    <script>
        function keyFocus() {
            console.log('获取焦点');
            var val = document.getElementById('key').value;
            if (val == "请输入关键字"){
                document.getElementById('key').value = "";
            }
        }
        
        function keyBlur() {
            console.log('失去焦点');
            var val = document.getElementById('key').value;
            if(val.length>0){

            }else{
                document.getElementById('key').value = "请输入关键字";
            }

        }

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

5. 属性操作

    <div id='i1'></div>
    
    <input id='ck' type="checkbox" />
    
    自定义属性
        attributes                // 获取所有标签属性
        setAttribute(key,value)   // 设置标签属性
        getAttribute(key)         // 获取指定标签属性
               
    内置属性：
        obj.id
        
            checkbox
                - obj.checked   true或false

实例，多选反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll();" />
    <input type="button" value="取消" onclick="removeAll();"/>
    <input type="button" value="反选" onclick="reverseAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>c1.com</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>c2.com</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>c3.com</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>c4.com</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script>
        function checkAll() {
            var trList = document.getElementById('tb').children;
            for(var i=0;i<trList.length;i++){
                var tr = trList[i];
                tr.firstElementChild.firstElementChild.checked = true;
            }
        }
        
        function removeAll() {
            var trList = document.getElementById('tb').children;
            for(var i=0;i<trList.length;i++){
                var tr = trList[i];
                tr.firstElementChild.firstElementChild.checked = false;
            }
        }

        function reverseAll(){
            var trList = document.getElementById('tb').children;
            for(var i=0;i<trList.length;i++){
                var tr = trList[i];
                if(tr.firstElementChild.firstElementChild.checked){
                    tr.firstElementChild.firstElementChild.checked = false;
                }else{
                    tr.firstElementChild.firstElementChild.checked = true;
                }
            }

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

6. 创建标签

    对象方式 ***

标签操作
创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "aige"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/can-H"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/can-H'>矮哥</a>"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" id="inp" />
    <input type="button" value="添加" onclick="addElement();" />

    <ul id="container">
        <li>内容一</li>
    </ul>

    <script>
        function addElement() {
            // 获取用户输入的内容
            var val = document.getElementById('inp').value;


            // 创建标签(对象) *****
            var tag = document.createElement('li');
            tag.innerHTML = val;

            // 将对象添加到 append
            document.getElementById('container').appendChild(tag);


            /*
            var tag = "<li>" + val +"</li>";
            document.getElementById('container').insertAdjacentHTML("beforeEnd",tag);
            */

            document.getElementById('inp').value = "";
        }
    </script>
</body>
</html>

7. js提交表单

document.getElementById('f1').submit();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="text" />
        <input type="submit" value="提交" />
        <input type="button" value="b提交"  onclick="submitForm();/>
        <div onclick="submitForm();" >asdf</div>
    </form>
    <script>
        function submitForm() {
            document.getElementById('f1').submit();
        }
    </script>
</body>
</html>

8. 常用操作

    console.log(..)     // 输出到检查里的console
    alert(..)           // 弹窗
    confirm(...)        // 弹窗   不能自己加样式，想好看自己写模态对话框
    var v = confirm('是否要删除？');
    console.log(v);
    location.href    // 获取当前URL
    location.href = "http://www.oldboyedu.com"  // 重定向
    location.reload()  // 刷新
    setInterval       // 定时器 
    clearInterval     // 清除定时器
    setTimeout        // 只执行一次的定时器
    clearTimeout      // 中断
    var obj1= setInterval(function () {
        console.log('1');
        clearInterval(obj1);
    },1000);
    var obj2= setInterval(function () {
        console.log('2');
        clearInterval(obj2);
    },1000)

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="删除" onclick="removeEle();" />
    <div id="i1"></div>

    <script>
        function removeEle() {
            document.getElementById('i1').innerHTML = "删除成功";

            var obj = setTimeout(function () {
                document.getElementById('i1').innerHTML = "";
            },5000);

            clearTimeout(obj);



        }
//        var obj1= setInterval(function () {
//            console.log('1');
//            clearInterval(obj1);
//        },1000);
//        var obj2= setInterval(function () {
//            console.log('2');
//            clearInterval(obj2);
//        },1000)
    </script>
</body>
</html>

9. 事件

常用事件：onblur onchange onclick ondblclick onfocus onkeydown onmouseout onmouseover
同一个事件，只能被绑定一次

    1. 绑定事件
            <div id='i1' onkeydown='func(this,event,123);'> 点我 </div>
           function func(a,b,c){
                // a -> 当前被点击的标签对象  document.getElementById('i1')
                // b -> 当前事件相关的信息
                // c = 123
           }

    2. 绑定事件 ***************
            <div id='i1'> 点我 </div>
            
            <script>
                document.getElementById('i1).onclick = function(event){
                    // event -> 当前事件相关的信息
                    // this  -> 当前被点击的标签对象
                }
                document.getElementById('i1).onclick = function(event){
                    // event -> 当前事件相关的信息
                    // this  -> 当前被点击的标签对象
                }
            </script>
    一个事件只能被绑定一次
        
    3. 绑定事件
    
        document.getElementById('i1').addEventListener('click',function(){
            console.log(111);
        },true)
        document.getElementById('i1').addEventListener('click',function(){
            console.log(222);
        },true)
        
       PS: addEventListener第三个参数
           默认：
                事件冒泡
                捕获式

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1">asdfasdf</div>


    <script>
//        document.getElementById('i1').onclick = function () {
//            console.log(111);
//        };
//
//        document.getElementById('i1').onmouseover = function () {
//            console.log(222);
//        }
        document.getElementById('i1').addEventListener('click',function(){
            console.log(111);
        })
        document.getElementById('i1').addEventListener('click',function(){
            console.log(222);
        })
    </script>
</body>
</html>

属性	此事件发生在何时...
onabort	图像的加载被中断
onblur	元素失去焦点
onchange	域的内容被改变
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双机某个对象时调用的事件句柄
onerror	在加载文档或图像时发生错误
onfocus	元素获得焦点
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onload	一张页面或一副图像完成加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标被移开
onmouseover	鼠标移到某个元素之上
onmouseup	鼠标按键被松开
onreset	重置按钮被点击
onsubmit	确认按钮被点击
onunload	用户退出页面

posted @ 2017-05-29 16:03 汉克书阅读(451) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

汉克书

http://hankbook.cn

Python学习：javascripts和DOM简单使用

Python学习：Javascripts和DOM操作

二、JavaScript

1、如何编写

1. 存在形式

2. 位置

2、变量

3. 声明函数

4、数据类型

5、序列化

6、转义

7、eval

8、时间

9、条件&循环&异常处理

1、条件语句

2、循环语句

3、异常处理

DOM

1、面向对象

2、利用HTML文档+JavaScript+DOM实现操作HTML数据

1. 查找

2. 间接查找

3. HTML标签样式操作

4. 文本操作

5. 属性操作

6. 创建标签

7. js提交表单

8. 常用操作

9. 事件

公告

汉克书

http://hankbook.cn

Python学习：javascripts和DOM简单使用

Python学习：Javascripts和DOM操作

二、JavaScript

1、如何编写

1. 存在形式

2. 位置

2、变量

3. 声明函数

4、数据类型

5、序列化

6、转义

7、eval

8、时间

9、条件&循环&异常处理

1、条件语句

2、循环语句

3、异常处理

DOM

1、 面向对象

2、利用HTML文档+JavaScript+DOM实现操作HTML数据

1. 查找

2. 间接查找

3. HTML标签样式操作

4. 文本操作

5. 属性操作

6. 创建标签

7. js提交表单

8. 常用操作

9. 事件

公告

1、面向对象