JavaScript&DOM

JavaScript

　　独立的语言，浏览器具有js解释器

js的书写方式：

1、js的第一种书写方式

<script>
    alert('fdsfdsf')
</script>

2、js的第二种书写方式

<script src="a.js"></script>

ps：JS代码块放置在<body>标签的最下方

3、注释方式

3.1 单行注释

3.2 多行注释

/*fdsfdsf
dsfdsf
*/

4、变量

局部变量

　var name = 'alex';

全局变量

name = "alex";

(1).变量对大小写敏感（y 和 Y 是两个不同的变量）

(2).第一个字符必须是字母、下划线（_）或美元符号（$）

(3).余下的字符可以是下划线、美元符号或任何字母或数字字符

5、数据类型

5.1数字

var num = 10;

5.2字符串

　　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)        // 分割

　5.3列表 (数组)

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

5.4字典

var dict = {"name":"alex", "age":"22"}
dict.name        // 调用方式一
dict['name']    // 调用方式二

5.6 bool

true or false

6、基本的运算符

　　算术运算符：

    　+   -    *    /     %       ++        --
　　var total = num++;      // total = num; num+1;
　　var total = ++num;      // num = num + 1; total = num;
　　console.log(total);

　　比较运算符：

　　>   >=   <    <=    !=(值不相等就成立)    ==(值相等就成立)    ===（值跟类型都相等才成立）   !==（值跟类型都不相等才成立）

　　逻辑运算符：

　　     &&   ||   ！

　　赋值运算符：

   　　 =  +=   -=  *=   /=

　　字符串运算符：

   　　 +  // 如果两边是数字就计算，两边操作数有一个或两个是字符串就做连接运算

7、流程控制

7.1、顺序结构

           console.log(“吃饭”);
           console.log(“睡觉”);
           console.log(“打豆豆”);

7.2、分支结构

　　7.2.1单分支结构

　　if(表达式){
　　命令
　　}

　　7.2.2双分支

　　if(表达式){
　　命令
　　}else{
　　命令
　　}

　　7.2.3多路分支

　　if(表达式){
　　命令
　　}else if(表达式){
　　命令
　　}else if(表达式){
　　命令
　　}else{
　　命令
　　}

　　7.2.4switch...case

　　switch (expression){   
　　case label1 :
　　statement1; break;
　　case label2 :
　　statement2; break;
　　    default :  
　　statementdefault 
　　}

7.3 循环结构

for循环

1.1列表循环时，循环的元素是索引

        var a = [11,22,33,44];
        for (var item in a){
            console.log(a[item])
        }

以上代码运行结果

1.2循环列表方式二

        var a = [11,22,33,44];
        for (var i = 0;i<a.length;i=i+1){
            console.log(a[i])
        }

以上代码运行结果：

2.字典循环时，循环的元素是key

        var a = {'k1':'v1','k2':'v2'}
        for (var item in a){
            console.log(a[item])
        }

以上代码运行结果：

v1
v2

while循环（do...while）

　　var n = 0;
　　do{
　　console.log('fdsfs')
　　n = n + 1;
　　}while(n<3);

7.4 函数三种书写方式

函数在javascript里面是一等公民的位置　　

普通函数

function test(arg){
　　console.log();
}
// 调用方式：
test(arg);

函数当成变量

var func = function(){
　　console.log('fdsfs');
}
// 调用方式：
func();

匿名函数

setInterval(function () {
    console.log(123)
},2000);

自执行函数

(function(arg){
　　console.log(arg)
})(123)
// 调用方式：
// 直接执行上面的函数

7.5.系统函数

　　　7.5.1、序列化

    　　　　JSON.stringify(obj)    // 序列化，把对象转换成字符串
   　　 　　JSON.parse(str)        // 反序列化，把字符串转换成对象

　　　7.5.2、转义

js将数据经过转义后，保存在cookie中

   　　 　　decodeURI( )                      // URl中的字符转中文
    　　　　decodeURIComponent( )             // URI中的字符转中文
    　　　　encodeURI( )                      // URI中的中文转字符
    　　　　encodeURIComponent( )             // URI中的':/=?&'转字符
   　　 　　escape( )                         // 对字符串转义
    　　　　unescape( )                       // 给转义字符串解码
    　　　　URIError                          // 由URl的编码和解码方法抛出

　　7.5.3.eval

　　　　python:
　　　　　　val = eval(表达式)
　　　　　　　　  exec（执行代码,不能获取返回值）
　　　　JavaScript:
　　　　　　eva(l既可以执行表达式，也可以执行代码。)

　　7.5.4时间

var d = new Date()
d        // 显示当前完整时间
d.getDate()        //显示当前day
d.getMinutes()    //显示当前minutes

作用域：

<script>

    function func() {
        for (var i=0;i<3;i++){
            setInterval(function () {
                console.log(i)
            },1000)
        }
    }
    func();    
</script>

以上代码输出：很多个3

JavaScript 正则表达式

/.../      // 用于定义正则表达式
/.../g     // 表示全局匹配
/.../i     // 表示不区分大小写
/.../m     // 表示多行匹配，默认多行匹配

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，存在就返回子串的起始位置，不存在则返回-1。

'exc'.search(/e/)      // 结果为0

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

'exc'.replace(/xc/,'fg')　　// 结果为efg

test() 方法 用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

/e/.test('exc')　　// 检测字符e是否在字符串exc里，结果为true

exec() 方法 用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

/e/.exec('exc')[0]　　// 检测字符e是否在字符串exc里，结果为"e"

非全局模式
    获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
    var pattern = /\bJava\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /\b(Java)\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
全局模式
    需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
    var pattern = /\bJava\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /\b(Java)\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

跑马灯实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">欢迎光临</div>
    <script>
        function f1() {
            var tag = document.getElementById('i1');
            var tagtext = tag.innerText;
            var f = tagtext.charAt(0);
            var l = tagtext.substring(1, tagtext.length);
            var new_content = l + f;
            tag.innerText = new_content ;
        }
        setInterval('f1();', 1000)
    </script>
</body>
</html>

DOM

1.HTML Document Object Model（文档对象模型）
2.HTML DOM 定义了访问和操作HTML文档的标准方法
3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）

一、选择器：

1.直接选择器

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

实例：

document.getElementById('i1')                 //访问id为i1的元素
document.getElementsByName('aa')              //访问所有包含name属性为aa的元素，返回一个列表
document.getElementsByTagName('input')        //访问所有<input>元素,返回一个列表
document.getElementsByClassName('c1') 方法    //访问标签属性为c1的所有元素，返回一个列表
document.getElementById("main").getElementsByTagName("p");   //访问所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）

2.间接选择器

　　parentNode          // 父节点
　　childNodes          // 所有子节点
　　firstChild          // 第一个子节点
　　lastChild           // 最后一个子节点
　　nextSibling         // 下一个兄弟节点
　　previousSibling     // 上一个兄弟节点
 
　　parentElement           // 父节点标签元素
　　children                // 所有子标签,得到一个列表
　　firstElementChild       // 第一个子标签元素
　　lastElementChild        // 最后一个子标签元素
　　nextElementtSibling     // 下一个兄弟标签元素
　　previousElementSibling  // 上一个兄弟标签元素

二、操作

1、内容

innerText   // 文本
outerText
innerHTML   // HTML内容
outerHTML  
value       // 值

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4.提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id='f1' action="http://www.baidu.com">
    <a onclick="confirm();">跳转</a>
</form>
    <script>
        function confirm() {
            document.getElementById('f1').submit()
        }
    </script>
</body>
</html>

5、弹出框和输出框

console.log                 //输出框
alert                          //弹出框
confirm                     //确认框

6、获取URL和刷新

// URL和刷新
location.href                // 获取URL
location.href = "url"    // 重定向
location.reload()          // 重新加载

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="confirm();">跳转</a>
    <script>
        function confirm() {
            location.href = 'http://www.baidu.com';
        }
        console.log('href',location.href);

//        location.reload()
    </script>
</body>
</html>

7、定时器

// 定时器
setInterval                 // 多次定时器
clearInterval              // 清除多次定时器
setTimeout                // 单次定时器
clearTimeout             // 清除单次定时器

setInterval('执行的代码',间隔时间) 　　// setInterval会先执行eval('执行的代码')

<script>
    function f1() {
        s1 = setInterval("console.log(123);",2000);　　//这里的s1要设置成全局变量
    }
    function f2() {
        clearInterval(s1)
    }
    f1();
    // setInterval('f2()',6000)   //方式一
    setInterval(f2,6000)　　　　　　//方式二
</script>

8、事件

onclick、onfocus、onmouseover...

写一个行为（js）、样式（css）、结构（HTML）相分离的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: pink;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1">dsfds</div>
    <div class="c1">hhhd</div>

<script>
    var mydiv = document.getElementsByClassName('c1');
    var len = mydiv.length;
    for (var i=0;i<len;i++){
        mydiv[i].onclick = function () {
        this.innerText = 'gogogo';　　//谁调用的this，this就是谁（这里的this如果改成mydiv[i]，当点击的时候，触发的都是mydiv[1]）
        this.style.color = 'red'
    }
    }
</script>
</body>
</html>

当绑定的两个事件重叠的时候，是冒泡方式执行的，先执行里面的，再执行外面的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: pink;
            width: 300px;
            height: 200px;
            z-index: 10;
        }
        #i2{
            background-color: aquamarine;
            width: 150px;
            height: 100px;
            z-index: 1;
        }

    </style>
</head>
<body>
    <div id="i1">
        <div id="i2"></div>
    </div>
<script>
    var mydiv1 = document.getElementById('i1');
    var mydiv2 = document.getElementById('i2');
    mydiv1.onclick = function () {
        console.log(1);
    };
    mydiv2.onclick = function () {
        console.log(2);
    }
</script>
</body>
</html>

同时绑定多个事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: pink;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1" id="i1">dsfds</div>
    
<script>
    var mydiv = document.getElementById('i1');
    mydiv.addEventListener('click',function () {
        console.log('aaa')
    },false);　　//这里的false表示冒泡（从内到外），如果改成true就是捕捉（从外到内），就会先执行外面的，再执行里面的。
    mydiv.addEventListener('click',function () {
        console.log('bbb')
    },false);
</script>
</body>
</html>

左侧菜单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            height: 20px;
            width: 100px;
            background-color: pink;
        }
        .hide{
            display: none;
        }

    </style>
    
</head>
<body>
    <div>
        <div class="item">
            <div id="i1" class="header" onclick="func('i1')">标题一</div>
            <div class="content">
                <div>内容</div>
                <div>内容</div>
                <div>内容</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="func('i2')">标题二</div>
            <div class="content">
                <div>内容</div>
                <div>内容</div>
                <div>内容</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="func('i3')">标题三</div>
            <div class="content">
                <div>内容</div>
                <div>内容</div>
                <div>内容</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="func('i4')">标题四</div>
            <div class="content">
                <div>内容</div>
                <div>内容</div>
                <div>内容</div>
            </div>
        </div>

    </div>

    <script>
        function func(nid) {
            var p = document.getElementById(nid).parentElement.parentElement;
            var item = p.children;
            for (var i=0;i<item.length;i++){
                var content = item[i].children[1];
                content.classList.add('hide')
            }
            document.getElementById(nid).nextElementSibling.classList.remove('hide')
        }
    </script>

</body>
</html>

posted on 2017-02-24 09:57 周小百阅读(226) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

xone

公告

JavaScript

js的书写方式：

1、js的第一种书写方式

2、js的第二种书写方式

ps：JS代码块放置在<body>标签的最下方

3、注释方式

4、变量

5、数据类型

5.1数字

5.2字符串

5.3列表 (数组)

5.4字典

5.6 bool

6、基本的运算符

算术运算符：

比较运算符：

逻辑运算符：

赋值运算符：

字符串运算符：

7、流程控制

7.1、顺序结构

7.2、分支结构

7.2.1单分支结构

7.2.2双分支

7.2.3多路分支

7.2.4switch...case

7.3 循环结构

for循环

while循环（do...while）

7.4 函数三种书写方式

普通函数

函数当成变量

匿名函数

自执行函数

7.5.系统函数

7.5.1、序列化

7.5.2、转义

7.5.3.eval

7.5.4时间

作用域：

JavaScript 正则表达式

跑马灯实例

DOM

一、选择器：

二、操作

实例：

左侧菜单实例

　5.3列表 (数组)

　　算术运算符：

　　比较运算符：

　　逻辑运算符：

　　赋值运算符：

　　字符串运算符：

　　7.2.1单分支结构

　　7.2.2双分支

　　7.2.3多路分支

　　7.2.4switch...case

　　　7.5.1、序列化

　　　7.5.2、转义

　　7.5.3.eval

　　7.5.4时间