JavaScript基础和常用DOM操作-day12

JavaScript是一门编程语言，解释这门语言的是浏览器。

一、JavaScript存放在HTML页面的位置

　　1.1: JavaScript的注释方法：

　　　　在JavaScript中可以是直接使用“//”来注释单行，如果在pycharm中可以使用Ctrl + ?注释，多行用/* */

　　1.2: JavaScript可以在HTML中使用<script> you're code </script>也可以以引入文件的形式<script type="text/javascript" src="文件路径"> </script>的方式引入

　　　　注意：以文件形式引入的时候type="...."可以不用写，因为默认就是以type="test/javascript"来解释的

二、变量

　　在JavaScript中也和Python中一样有着局部变量和全局变量的区别，不同的是Python不能自己定义一个局部变量，但是在函数内部的为局部变量；在JavaScript中如果需要声明一个局部变量只需要再变量前面加上var就行了，比如我们声明一个a的局部变量只需要 var a = 'slfjdlsjdf'，全局变量则是不加上var。

三、数据类型

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

　　原始型

数字
字符串
布尔值

　　对象型

　　数组（列表）

　　字典

　　3.1： null和undefined的区别

　　null是JavaScript中的一个关键字，他一般表示一个空值

　　undefined则是这个数值没有被定义也就是没有这个“变量”

　3.2 :数字（number）

Javascrip中的数字部分浮点型和长整型，它们被统称为数字类型。

var  a = "123";
typeof a 
// string
parseInt(a);
//123

var b = "sdf";
typeof b
// string
parseInt(b);
//NaN

parseInt：将某一个字符串装换中数字类型
parseFloat(..) 将某值转换成浮点数，不成功则NaN

NaN:非数字，如果parseInt无法装换的时候值为NaN

　3.3：字符串（）

　字符串是由字符组成的数组，但在JavaScript中字符串是不可变的，可以访问字符串任意位置的问题本，但是JavaScript并未修改已知字符串内容的方法

str.lenth //获取字符串的长度 
str.trim() //移除空白，和Python中stirp一致
str.trimleft() //移除左边空白
str.trimRight(0) //移除右面空白呢
str.charAt(n) //恢复字符串第n个字符，相当于Python中的获取字符串索引
str.indexOf(substring,start) //获取下标所对应的字符串
str.lastIndexOf(substing,start) //从后往前后去下标
str.substring(from,to) //获取从from到to下标的字符串
str.slice(start,end) //切片
str.toLowerCase() //大写
str.toUpperCase() //小写
obj.split() //分割，和Python中的split一致

　3.4：布尔类型

　　布尔类型仅仅包含真假

== ：比较直相等
！=：比较值不相等
===：比较值数据类型和数据都相等
！===：不等于
&& ：且（Python中的and）
|| : 或（Python中的or）

　3.5：数组（Python中的列表）

obj.length //数组的长度大小，这个是一个属性，不是一个方法所以没有（）
obj.push //尾部追加元素，相当于append
obj.pop //删除最后一个元素，并且显示
obj.unshift() //头部插入一个元素
obj.shift() //头部删除一个元素，并显示
obj.splice(index,howmany,item) //用于替换，删除，增加数据，这个方法提供了三个参数
    //其中index意思是从哪里开始替换或者修改数据，howmany是删除或者替换多少个，item是添加或者替换后的数据
obj.slice(start，edn) //切片其中start是数组的下标，他可以是负数，如果是-1就是最后一个元素，-2就是倒数第二个元素，end是结束的下标
obj.reverse() //反转，也就是把数组中的数据倒过来
obj.join(separator)  //数据的拼接，separator是可以选参数，如果加上这个参数就是以什么“符号”或者字符串那拼接数组，拼接后的数据是string类型

obj.concat(array) //将两个数组连接到一起组成一个新的数组，array就是需要合并的数据

obj.sort() //对数组里面的元素进行排序

　3.6:其他

var dict = {name:"yan",age:18}
var dict_str = JSON.stringify(dict) //将字典序列化成字符串
JSON.parser(dict_str) //将字符串序列化成字典

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

3.7:时间对象

var da = new Date() //创建一个事件对象

da.getFullYear() //获取时间对象中的“年份”

da.getMonth() //获取月份，这里的月份比实际中少一个月所以这里需要+1

da.getDate() //获取日期

da.getHours() //获取小时

da.getMinutes() //获取分钟

da.getSeconds() //获取秒

........................

四、语句和异常

　4.1、条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

　if 语句

只有当指定条件为 true 时，该语句才会执行代码。

　语法

if (condition)
{
    当条件为 true 时执行的代码
}

实例

当时间小于 20:00 时，生成问候 "Good day"：

if (time<20)
{
    x="Good day";
}

if...else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

实例

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}

if...else if...else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

实例

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

JavaScript switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行,default是默认执行的函数。

JavaScript for 循环

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

　For 循环

　for 循环是您在希望创建循环时常会用到的工具。

　　下面是 for 循环的语法：

　　for (语句 1; 语句 2; 语句 3)
　　{
　　被执行的代码块
　　}

　　语句 1 （代码块）开始前执行

　　语句 2 定义运行循环（代码块）的条件

　　语句 3 在循环（代码块）已被执行之后执行

　　形式一

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function con() {
            var msg = ['Leon','ary','try','start'];
            for(var i=0;i<msg.length;i++){
                console.log(msg[i]);
            }
        }
        con();
    </script>
</body>
</html>

　　形式二、

通常语句 2 用于评估初始变量的条件（也就是布尔值）。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

　　形式三

　　另外一种遍历对象属性

        function con() {
            var msg = ['leon','ary','try','start'];
            for(i in msg){
                console.log(msg[i]);
            }
        }
        con();

　　while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

　　while (条件)
　　{
　　需要执行的代

while (i<5) { x=x + "The number is " + i + "<br>"; i++; }

　　时间滚动（示例）

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

        function getdate() {
            var da = new Date();
            var year = da.getFullYear();
            var month = da.getMonth();
            var day = da.getDate();
            var hours = da.getHours();
            var min = da.getMinutes();
            if(min<10){
                min = "0"+min
            }
            var se = da.getSeconds();
            if(se<10){
                se = '0'+se
            }else {
                se = se
            };
            var txt =year + '-' + day + ' ' + hours +':'+min +':'+  se;
            document.getElementById('i1').innerText = txt
        }
        setInterval(getdate,1000)
    </script>
</body>
</html>

　　字体滚动滚动（示例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">今天是一个好天气</div>
    <script>
        function func() {
            var txt = document.getElementById('i1').innerText;
            var a = txt.charAt(0);
            var b = txt.substring(1,txt.length);
            var new_txt = b + a;
            document.getElementById('i1').innerText = new_txt
        }
        setInterval(func,500)
    </script>
</body>
</html>

DOM

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

查找元素(直接查找）

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合
更多document操作请点击

查找元素（简介查找）

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素
更多：http://www.runoob.com/jsref/dom-obj-document.html

　　PS:通过间接查找我们不难发现上面的一组合下面的一组貌似的作用是一样的，但实则不太一样，通过上面的间接查找会把标签和内容一块返回，而下面的这回返回标签的对象，所以我们在以后的选择上面也是比较倾向下面这一组的。

　　HTML标签样式操作

var tag = document.getElementById('i1');
tag.classList.add('c1'); //给标签添加一个样式
tag.ClassList.remove('c1') //给标签移除一个样式

　　示例（左侧菜单）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .hide{
            display: none;
        }
        .item > .title{
            height: 40px;
            background-color: aqua;
            line-height: 40px;
        }
        .item .content a{
            display: block;
        }
    </style>
</head>
<body>
    <div class="left_meau" style=" 150px;height: 800px;border: red solid 2px">
        <div class="item">
            <div class="title" onclick="changeMeau(this);">菜单一</div>
            <!--this这里的意思是鼠标所点击的标签对象-->
            <div class="content">
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
                <a href="#">内容一</a>
            </div>
        </div>


        <div class="item">
            <div class="title" onclick="changeMeau(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 class="item">
            <div class="title" onclick="changeMeau(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 changeMeau(currentTagObj) {
            //currentTagObj所点击的标签对象
            // brotherTag 是当前点击标签的弟弟标签
            var brotherTag = currentTagObj.nextElementSibling;
            //移除弟弟标签上的hide（class）属性
            brotherTag.classList.remove('hide');
            //爷爷也就是left_meau标签下面的所有儿子也就是item标签
            var itemObjlist = brotherTag.parentElement.parentElement.children;

            //循环每一个item标签
            for(var i=0;i<itemObjlist.length;i++){
                //取到每一个item标签的对象
                var loopItemObj = itemObjlist[i];
                //如果当前点击的标签不等于循环的标签
                if(loopItemObj != brotherTag.parentElement){
                    //那么就加上hide，将数据影藏
                    loopItemObj.lastElementChild.classList.add('hide');
                }
            }
        }
    </script>

</body>
</html>

　　文本操作

　　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：失去焦点

　　属性操作

　　<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</title>
</head>
<body>
    <!--<div class="c1">我是中国人</div>-->
    <!--<input id="i1" type="checkbox" value="guoji" checked/> 男-->
    <input type="text" value="请输入内容" onfocus="onFocus(this);" onblur="onBlur(this)"/>

    <script>
        function onFocus(ele) {
            var val = ele.value;
            console.log(val);
            if(val == "请输入内容"){
                ele.value = "";
            }
        }
        function onBlur(ele) {
            var val = ele.value;
            if(val.length==0){
                ele.value = "请输入内容";
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll();" />
    <input type="button" value="反选" onclick="reveseAll();" />
    <input type="button" value="取消" onclick="removeAll();" />
    <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++){
                tdList = trList[i].firstElementChild.firstElementChild.checked = true;
            }
        }
        function removeAll() {
            var trList = document.getElementById('tb').children;
            for(var i=0;i < trList.length;i++){
                tdList = trList[i].firstElementChild.firstElementChild.checked = false;
            }
        }
        function reveseAll() {
            var trList = document.getElementById('tb').children;
            for(var i=0;i < trList.length;i++){
                if(tdList = trList[i].firstElementChild.firstElementChild.checked){
                    trList[i].firstElementChild.firstElementChild.checked = false;
                }else{
                    trList[i].firstElementChild.firstElementChild.checked = true;
                }
            }
        }
    </script>
</body>
</html>

checked常用的反选，全选和反选

<!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>

标签的添加

　　js提交表单
　　document.getElementById('f1').submit();

常用操作

console.log(..) 在F12中的console打印内容
alert(..) 弹出内容
confirm(...)
var v = confirm('是否要删除？');
console.log(v);
location.href 获取当前URL
location.href = "http://www.oldboyedu.com" 重定向
location.reload() 刷新
setInterval 设置定时器
clearInterval 清除定时器
setTimeout 设置超时时间
clearTimeout 清除超时时间

事件

　　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第三个参数
　　默认：
　　事件冒泡
　　捕获式