python学习笔记十三 JS，Dom（进阶篇）

2021-11-29 02:06:46

JS介绍

JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用；JavaScript 是因特网上最流行的脚本语言。

JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。

  • Java（由 Sun 发明）是更复杂的编程语言。
  • ECMA-262 是 JavaScript 标准的官方名称。
  • JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

1.存在方式

<!-- 方式一 -->

<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 -->

<script type"text/javascript">

    Js代码内容

</script>

2.存放位置

JavaScript脚本通常放置在三个位置：

  • HTMlL中的head部分
  • HTML中的body部分最底部（推荐）
  • 单独以.js结尾的文件

为什么会推荐放置在body部分的最底部？因为html是从上往下执行的，假设有js文件或者js执行耗时比较久的话，下面的html代码就无法执行了。

所以放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

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

<script>

    alert('time_out');

</script>

3.变量的定义

变量定义 JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量（跟python的使用习惯不太相同），使用全局变量会出现意想不到的bug 慎用。

4、基本数据类型

数字类型的4种定义：

//1

var age = 18;

console.log(age,typeof age);

//2

Number("1234");

//3

parseInt(num);

//4

parseFloat(num);

var age = 18;
console.log(parseInt(age),typeof age)

var num = 18.9
console.log(name,typeof name);
//通过chrome浏览器 审查元素， console控制台菜单栏， 可以进入浏览器解释器

字符串的定义和方法

var n = "ajax";

var name = String("koka");

var age_str =String(18);

//字符串方法

var t1 = "abc def "

//trim == strip()去除两边空格

t1.trim()

"abc def"

t2 = t1.trim()

"abc def"

t2

"abc def"

var test = "aaaa bbb cc d "

//读取一个字符，传入下标

test.charAt(0)

"a"

test.charAt(1)

"a"

test.charAt(2)

"a"

//substring == [:] 列表分片

test.substring(0,5)

"aaaa "

// indexOf == list.index(char) 查看字符index

test.indexOf("a")

0

test.indexOf("b")

5

test.length

14

bool类型

//bool

var status = true

status

"true"

var status = Boolean(1==1)

status

"true"

数组（array）

//Arrary

var names = ['alex', 'tony', 'eric']

var names = Array('alex', 'tony', 'eric')

//添加

names.push("bob")

4

names

["alex", "eric", "john", "bob"]

//从左边添加

names.unshift("nike")

5

names

["nike", "alex", "eric", "john", "bob"]

//指定位置插入，第二个值必须是0

names.splice(2,0,"ajax")

names

["nike", "alex", "ajax", "eric", "john", "bob"]

//列表分片

names.slice(1,3)
["alex", "ajax"]

//字符串化

names.join("_")

"nike_alex_ajax_eric_john_bob"

names

["nike", "alex", "ajax", "eric", "john", "bob"]

//长度

names.length

6

字典

var items = {"k1":123,"k2":"tonyAlen"}

items

Object {k1: 123, k2: "tonyAlen"}

5、js循环语句

var li = [11,22,33,44];

//for循环 数组方式一

for(var index in li) {

    console.log(index,li[index]);
　　 //循环的结果是 下标 0，1，2，3

}

/for 循环 数组方式二

for (var i=0;i<li.length;i++){

    console.log(i,li[i]);

}

//for 循环 字典

var dic = {"k1":123,"k2":456};

for(var key in dic){

    console.log(key,dic[key]);

}

//while循环 break，continue

while(true){

    console.log("loop");

    break;

}

6、js条件语句

if(name == "ajax"){

     console.log("got it")

}

else if(name == "alex"){

     console.log("alex")

}

else{

     console.log("others")

}
// switch,case语句

var name = 1

switch(name){

    case "1":

        age = 123;

        break;

    case "2":

        age = 456;

        break;

    default:

        age = 888;

}

7、异常处理（与python类似）

try{

    var n = m;
//catch<=>except

}catch(e){

    console.log(e)

}finally{

    console.log("finally")

}

8、函数

//函数定义方式

//普通函数

function f1(arg) {

    console.log(arg);

    return "alex";

}

f1("1111");

var ret = f1(123);

console.log(ret);

// 自动执行函数 定义完自己调用

(function(arg){

    console.log(111,arg);

})("alex");

//匿名函数

var f = function(arg) {

    onsole.log(arg);

};

f("123456");

9、面向对象

//面向对象式函数定义

function Foo(name,age){

    this.Name = name;

    this.Age = age;

    this.Func = function(arg){

        return this.Name + arg;

    }

}

var obj = new Foo("ajax",18);

ret = obj.Func("ok");

console.log(obj.Name);

console.log(obj.Age);

console.log(ret);

HTML DOM （文档对象模型）

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

python学习笔记十三 JS，Dom（进阶篇）

查找元素，有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

选择器

通过 id 找到 HTML 元素

<script>

    //按照ID查找 返回一个元素

    var nid = document.getElementById("n1");

    //innerText修改值

    nid.innerText="koka";

</script>

通过标签名找到 HTML 元素

<script>

    //返回一个列表

    var lis = document.getElementsByTagName("li");

    for(var i in lis){

    var item = lis[i];

    item.innerText = i; //innerText修改指定的字符串

    }

    //按标签查找

    //添加下标 查找具体的值

    var lis = document.getElementsByTagName("li")[0];

    lis.innerText = "1231321321";

</script>

通过类名找到 HTML 元素

<script>

    //按类名查找

    var lis2 = document.getElementsByClassName("c1");

    for(var i in lis2){

        var item = lis2[i];

        item.innerText = i;

}

</script>

获取和修改HTML内容

innerText 获取标签中间的文本内容

<div>

    <div id="n1">c1</div>

    <a>asdfgefg</a>

</div>

<script>

        var nid = document.getElementById("n1");

        //innerTex修改值

        nid.innerText="abc";

</script>

输出:
　abc
asdfgefg

innerHTML 获取标签中间的html内容

假设我想要获取标签中的所有内容，不单单是标签的中间值，使用innerHTML即可

<div id="n1">

    XXXX

    <h1>YYYY</h1>

</div>
<script>

    var nid = document.getElementById("n1");
    //获取div中的所有内容

    console.log(nid.innerHTML);

</script>

console result：

　　XXXX
　　<h1>YYYY</h1>

特殊的获取

  • input系列
  • textarea标签
  • select标签
   value属性操作用户输入和选择的值 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input id="n2" type="text" value="请输入内容">

    <select id="n3">

            <option>北京</option>

            <option>上海</option>

            <option>广州</option>

    </select>

    <textarea id="n4">默认值</textarea>

    <p><input type="button" value="获取值" onclick="Getvalue();" /></p>

　　<script type="text/javascript">

    　　function Getvalue(){

          var obj1 = document.getElementById("n2");

          alert(obj1.value);

          obj1.value="";

          var obj2 = document.getElementById("n3");

          alert(obj2.value);

          obj2.value = "2";

          var obj3 = document.getElementById("n4");

          alert(obj3.value);

          obj3.value = "123456789";

     }

   </script>

</body>

</html>

事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

什么是事件？ 点击一下鼠标，按下键盘均可称为事件；

对事件做出反应？我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

绑定事件：

使用事件属性向 h1元素分配 onclick 事件：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

通过使用 JavaScript 来向 HTML 元素分配事件：

<h1 id="t1">请点击该文本</h1>

<script>

    document.getElementById("t1").onclick=function(){this.innerHTML="谢谢!"};

</script>

事件包含：

python学习笔记十三 JS，Dom（进阶篇）

常用事件：

  • onclick
  • onblur
  • onfocus
  • ...

自增计数器示例：

onclick：点击

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div>

        <div id = "num">

            1

        </div>

        <!--该input标签绑定事件驱动-->

        <input type="button" value="+1" onclick="Add();" />

    </div>

    <script>

        function Add(){

            /*

            1.找到num

            2.获取内容

            3.每点击一次自增1

            */

            var nid = document.getElementById("num"); //通过id查找元素

            var text = nid.innerText;  //innerText获取文本内容

            text = parseInt(text);

            text += 1;

            nid.innerText = text;

        }

    </script>

</body>

</html>

搜索框示例：

onfocus：元素获取焦点

onblur： 元素失去焦点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>
     //该标签绑定事件，从这可以看出一个标签可以绑定多个事件

    <input type="text" id="search" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>

    <script type="text/javascript">
        //当input标签被选中时触发事件，执行以下操作。

        function Focus() {
　　　　　　  //查找元素

            var nid = document.getElementById("search");
            //获取内容 value属性操作用户输入和选择的值适用于input，select，textarea标签

            var value = nid.value;
            //判断input标签的value输入空或"请输入关键字"

            if (value == "请输入关键字" || value.trim()=='') {

                nid.value = "";

            }

        }
　　　　　//当input标签失去焦点即不被选中后，执行以下操作

        function Blur(){

            var nid = document.getElementById("search");

            var value = nid.value;
            //未输入任何内容，继续提示请输入关键字

            if(!value.trim()){

                nid.value = "请输入关键字"

            }

        }

    </script>

</body>

</html>
创建标签
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="container" style="font-size: 14px;color: red;">aaaaaaa</div>

    <!--默认a标签会跳转，但是当我们设置onclick事件后，先执行自定义事件，再执行默认事件，假设你不想让你的a标签执行-->

    <!--默认事件,执行完自定义事件后返回false，默认事件就不再执行了。-->

    <a href="http://www.baidu.com" onclick="return AddElement();">添加</a>

    <script>

        function AddElement(){

            // 方式一

            //创建对象的方式

            var obj = document.createElement('a');

            obj.href = "http://www.python.org";

            obj.innerText = "Python";

            var container = document.getElementById('container');

            //默认右边追加

            container.appendChild(obj);

            //container.insertBefore(obj, container.firstChild);

            //container.insertBefore(obj, document.getElementById('hhh'));

            // 方式二

            // 创建标签 创建字符串的方式

            var container = document.getElementById('container');

            var obj = "<input type='text' />";

            //container.innerHTML = obj; 只能创建一次

            //'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'

            container.insertAdjacentHTML("afterEnd",obj);//反复添加

            return false

        }

    </script>

</body>

</html>

标签属性

自定义属性（通用)：

  • obj.setAttribute(name,value)
  • obj.getAttribute(name)
  • obj.removeAttribute(name)
    <div id="container" custom="xxoo" class="c1" style="font-size:48px;color:red;">

    </div>

    <script>

         var obj = document.getElementById('container');

         obj.setAttribute("db","ds")

         obj.setAttribute("class","c2")

         obj.removeAttribute("custom")

         obj.getAttribute("db")

    </script>

固定属性:

对于标签属性 通过js和dom都是可以修改和移除的。通常通过查找到的 对象.属性 即可获取到该属性的值，但是有些属性是不包含在标签内的，比如div是没有name属性，需要通过自定义

属性设置.

    <div id="container" sb="xx" class="c1" style="font-size: 48px;color: red;">

    </div>

    <script>

        var obj = document.getElementById('container');

        obj.id

        obj.id = "nid"

        obj.className  //特殊 获取class需要指定className

        obj.style.fontSize = "88px"; //特殊 style包含多个属性集合，获取style属性时，需要进入 obj.style.属性； font-size属性特殊属性通过fontSize获取。

    </script>

提交表单示例：

通过input的submit也可以提交表单，也可以通过事件实现提交表单功能，同时我们还想对提交表单进行检测不希望出现有空的提交项。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="form1" action="https://www.sogou.com/web" method="get">

        <input name="query" type="text"/>

        <!--验证，通过onclick事件绑定js提交 上面已经提到过，默认执行自定义函数，定义返回值 返回true才执行默认submit事件，否则不提交-->

        <input type="submit" onclick="return MySubmit();" value="提交验证" />

        <!--非验证，通过submit提交-->

        <input type="submit" value="submit" />
　　　　 <!--非验证，通过onclick事件绑定js提交-->

        <div onclick="return Submit();">提交事件</div>

    </form>

    <script>

        function MySubmit(){

            var q = document.getElementsByName('query')[0];

            if(q.value.trim()){

                return true;

            }else{

                alert('请输入内容');

                return false;

            }

        }

        function Submit(){
            //dom 的submit方法也支持提交表单

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

        }

    </script>

</body>

</html>

其他

setInterval("alert()",2000);  //每隔多少秒执行一次

clearInterval(obj)            //清除执行任务

setTimeout();                 //只执行一次

clearTimeout(obj)             //清除任务

cofirm　　　　　　　　　　　　　　//弹出提示框，返回true和false　

// URL和刷新

location.href   //获取当前url

location.href = "url"  
window.location.reload() //刷新或跳转

confirm示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="button" value="上来呀" onmouseover="MyConfirm();" />

    <script>

        function MyConfirm(){

            var ret = confirm("SB");

            console.log(ret);

        }

    </script>

</body>

</html>

跑马灯示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>欢迎OBJ莅临指导&nbsp;&nbsp;</title>

</head>

<body>

    <input type="button" onclick="StopInterval();" value="停下来" />

    <script>

        //每隔多少秒执行一次

setInterval("Go()",1000);

        function StopInterval(){

            //清除定时器

            clearInterval(obj1)

        }

        function Go(){

            //获取字符串

            var content = document.title;

            //获取首字母

            var firstChar = content.charAt(0)

            //获取除首字母

            var sub = content.substring(1,content.length)

            //组合新的字符串

            document.title = sub + firstChar;

            }

    </script>

</body>

</html>

上一篇：清除页面广告？身为前端，自己做一款简易的chrome扩展吧


下一篇：IE的浏览器模式和文档模式