Python之路【第十二篇】前端之js&dome&jQuery

来源：互联网发布：网络安装公司经营范围编辑：程序博客网时间：2024/06/06 09:19

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1、存在方式

    <!--导入javascript脚本方法-->    <script type="text/javascript" src="t1.js "></script>    <!--直接在html内部编写javascript-->    <script type="text/javascript">        function func() {            alert("Hello Shuaige")        }

2、javascript代码块位置

放在<body>标签内的代码底部，为什么不能放在上面呢？为什么css的就可以放在上面呢？

注：css代码首先要记住html代码是从上往下解释的，如果css代码放在下面，在上面的代码使用css样式，如果css代码块放在下面就没有办法显示样式了

另不同的浏览器处理请求也不同：正常来说当有一个请求过来时候会把js&css一起发送过去，咱们按照最low的方式理解的话可以这么理解：如果js文件或者js耗时比较久的话，下面的html代码就无法执行了。

3、变量和函数的声明

变量：

        function m1() {            alert("shuaige")            var name = 'tianshuai'; //var 变量名 ,变量名前面加var为局部变量            age = '18';            //注这里需要注意,建议使用的时候一般不要使用全局变量!否则如果代码量比较大的            //时候容易出现调用混乱的问题        }        m1();

函数

//        普通函数        function func() {            alert("Hello Shuaige")        }//        定义一个可传参数的函数        function func(arg) {            alert(arg)        }        func('Superman')//        自执行函数,顾名思义,定义好之后可以自动执行        (function f3(arg) {alert(arg)})("Shuaige is good man");

//        匿名函数,用处不是很大了解就行        var a = function() {            alert('meinv');        };        a();

js 的展示方法有两种：

通过网页来展示

    <script type="text/javascript">        function f1() {            alert("hello shuai ge")        }        f1()    </script>

显示效果如下：

通过console来展示

    <script type="text/javascript">        function f1() {            console.log("Hello shuaige ")        }        f1()    </script>

显示效果如下：

打开google chrome F12点击"Console"，刷新页面！

4、字符串常用方法及属性

调试的地方可以在google chrome 上进行测试，F12点击"Console"

obj.trim() 去除空格

var a = "  Luotianshuai  "undefineda.trimLeft() #去除左边的空格"Luotianshuai  "a.trimRight() #去除右边的空格"  Luotianshuai"a.trim() //去除两边的空格"Luotianshuai"a"  Luotianshuai  "  #这里可以发现我执行了上面的去除空格的命令之后,实际的值是没有改变的b = a.trim()"Luotianshuai" #但是我们可以通过赋值来改变他b"Luotianshuai"

obj.charAt(index) 根据索引获取字符串里的字符

b"Luotianshuai"b.charAt(0)"L"b.charAt(1)"u"b.charAt(2)"o"

obj.substring(start,end) 获取字符的子序列，类似于切片

b"Luotianshuai"b.substring(0,3)"Luo"

obj.indexOf(char) 去字符串找指定的字符的索引值是多少

b"Luotianshuai"b.indexOf("t")3

obj.length 获取字符串的长度

b"Luotianshuai"b.length12

5、数组

声明一个数组和python中的列表类似

a = [11,22,33,44] #声明一个数组[11, 22, 33, 44]

插入

a = [11,22,33,44] #声明一个数组[11, 22, 33, 44]a.push(55) #在数组最后增加一个元素5 #这里是数组的长度a[11, 22, 33, 44, 55]a.unshift(00) #在数组最前面增加一个元素6 #长度a[0, 11, 22, 33, 44, 55]a.splice(3,0,'insert')  #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)[]a[0, 11, 22, "insert", 33, 44, 55]a.unshift(100)8

移除

a[100, 0, 11, 22, "insert", 33, 44, 55]a.pop()  # 从尾部获取55a.shift() #从开头获取100a[0, 11, 22, "insert", 33, 44]a.splice(3,1) #从指定位置获取,括号内参数为(元素的索引,后面为索引后的元素个数,包含本身)["insert"]a[0, 11, 22, 33, 44]

切片

a[0, 11, 22, 33, 44]a.slice(1,3)[11, 22]a[0, 11, 22, 33, 44]

合并

a = [11,22][11, 22]b = [44,55][44, 55]a.concat(b)[11, 22, 44, 55]a[11, 22]b.concat(a)[44, 55, 11, 22]

反转

a[11, 22]a.reverse()[22, 11]a[22, 11]

字符串格式化

a[22, 11]a.join('_')"22_11"a[22, 11]

数组长度

a[22, 11]a.length2

6、字典

字典是数组的一种特殊形式

dict1 = {'k1':123,'k2':234} #定义一个字典Object {k1: 123, k2: 234}dict1['k1']123

7、循环

js中的循环有两种方式

#第一种for (var i=0;i<10;i++) {console.log(i)}#输出结果,看本代码下第一图#第二种for (var item in a) {console.log(a[item])}#输出结果，看本代码下第二图

图二：

8、异常处理

和python中的异常处理类似，代码如下：

    <script type="text/javascript">            try{                var tiancai = isme            }catch(e) {                console.log(e)            }finally{                console.log("shuaige is so smart;")            }    </script>

显示效果如下：

DOM编程

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM编程：可以操作html所有的标签，进行找、操作！他也是javascript的一部分

1、选择器：

document.getElementById('id') 查找指定的id，然后我们可以进行操作

<body>    <div id="id_1">        123    </div>        <script type="text/javascript">        var i = document.getElementById('id_1'); //查找指定的id        i.innerText = '456'; //innerText修改指定的字符串    </script></body>

显示效果，当我们打开IE的时候123就会被修改为456

下面操作方式也类似：

document.getElementsByName('name')

<body>    <div name="name_1">        123    </div>    <script type="text/javascript">        var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个        for (var item in i) {            i[item].innerText = '456'; //innerText修改指定的字符串        };    </script></body>

document.getElementsByTagName('tagname')

<body>    <div>        123    </div>    <div>        234    </div>    <script type="text/javascript">        var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个        for (var item in i) {            i[item].innerText = '456'; //innerText修改指定的字符串        };    </script></body>

上面的代码试用jquery会非常方便就不需要重造轮子

2、注册事件

首先了解下面的意思：

事件：比如有一个“按钮”，当你点击的时候发生什么，双击的时候发生什么，这个就叫做事件！

常用事件：

onclick
onblur
onfocus
..................

举例代码如下：

写一个input的标签，首先把事件和函数进行绑定，当你一点这个按钮的时候就会自动执行，绑定的函数：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige_js_file</title>    <!--导入javascript脚本方法-->    <!--<script type="text/javascript" src="t1.js "></script>-->    <style>        .color_red {            background-color: red;        }    </style></head><body>    <div id="id_1">        234    </div>    <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->    <input type="button" onclick="edit();" value="修改" />    <script type="text/javascript">        function edit() {            var i = document.getElementById('id_1');            i.className = 'color_red';        }    </script></body></html>

那么恢复按钮呢？只要在新增一个即可

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige_js_file</title>    <!--导入javascript脚本方法-->    <!--<script type="text/javascript" src="t1.js "></script>-->    <style>        .color_red {            background-color: red;        }    </style></head><body>    <div id="id_1">        234    </div>    <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->    <input type="button" onclick="edit();" value="修改" />    <input type="button" onclick="rollback();" value="回滚"/>    <script type="text/javascript">        function edit() {            var i = document.getElementById('id_1');            i.className = 'color_red';        }        function rollback() {            var i = document.getElementById('id_1');            i.className = ''; //这里只要给他设置为空即可        }    </script></body></html>

事件列表：

事件列表

属性

此事件什么时候发生（什么时候被触发onabort图象的加载被中断onblur元素失去焦点onchange区域的内容被修改onclick当用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子）ondblclick当用户双击某个对象时调用的事件句柄onerror在加载文档或图像时发生错误onfocus元素获得焦点onkeydown某个键盘按键被按下onkeypress某个键盘按键被按下并松开onkeyup某个键盘被松开onload一张页面或一副图片完成加载onmousedown鼠标按钮被按下 onmousemove鼠标移动过来后onmouseout鼠标从某个元素移开onmouseover鼠标移动到某个元素之上onmouseup鼠标按键被松开onreset 重置按钮被点击onresize 窗口或框架被重新调整大小onselect 文本被选中onsubmit 确认按钮被点击onunload 用户退出页面

注：一个标签可以绑定多个事件！！

<input type="button" onmouseover="edit()" onmouseout="rollback()" value="修改&回滚" />

注：onload 和其他的不太一样，他是写在Javascirpt里的

    <script type="text/javascript">//        这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.        window.onload = function () {            alert("The page Load complete")        };        function edit() {            var i = document.getElementById('id_1');            i.className = 'color_red';        }        function rollback() {            var i = document.getElementById('id_1');            i.className = ''; //这里只要给他设置为空即可        }    </script>

3、常用函数

获取或修改者样式，修改上上面的例子已经写了

在看下面的例子，在标签内注册了之后，如果在函数内i.className = 'color_red'; 这样是给他设置值，如果不设置值呢？：

        function edit() {            var i = document.getElementById('id_1');            i.className = 'color_red';        }

不给他设置值：

        function edit() {            var i = document.getElementById('id_1');            console.log(i.className);        }

不给他设置：

        function rollback() {            var i = document.getElementById('id_1');            console.log(i.className)        }

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige_js_file</title>    <!--导入javascript脚本方法-->    <!--<script type="text/javascript" src="t1.js "></script>-->    <style>        .color_red {            background-color: red;        }    </style></head><body>    <div id="id_1">        234    </div>    <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->    <input type="button" onmousemove="edit()" value="修改 "/>    <input type="button" onclick="rollback()" value="修改 "/>    <script type="text/javascript">//        这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.//        window.onload = function () {//            alert("The page Load complete")//        };        function edit() {            var i = document.getElementById('id_1');            i.className = "color_red";        }        function rollback() {            var i = document.getElementById('id_1');            console.log(i.className)        }    </script></body></html>

full code

效果图如下：

获取或设置属性

获取属性

<body>    <div name="luotianshuai" id="id_1">        age 18    </div>    <input type="button" value="测试" onclick="edit()" />    <script type="text/javascript">        function edit() {            var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签            var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值            console.log(result); //输出结果在console        }    </script></body>

修改属性：

<body>    <div name="luotianshuai" id="id_1">        age 18    </div>    <input type="button" value="测试" onclick="edit()" />    <script type="text/javascript">        function edit() {            var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签            var result = i.setAttribute('name','ShuaiGe'); //修改属性            var result = i.getAttribute('name'); //获取id_1的标签的属性为name并赋值            console.log(result); //输出结果在console        }    </script></body>

获取或修改样式中的属性

修改样式属性

<body>    <div name="luotianshuai" id="id_1" style="font-size:8px;background-color:green">        age 18    </div>    <input type="button"  onclick="edit()" value="测试" />    <script type="text/javascript">        function edit() {            var i = document.getElementById('id_1'); //首先找到这个ID = id_1的标签            i.style.backgroundColor = "red";  //修改样式中的属性还有很多,可以测试        }    </script></body>

获取和上面一样很简单！

提交表单，并不是之前的那种提交表单！

看下面的例子：

<body>    <form id="form_1" action="https://www.sogou.com/">        <div>            <input type="text" name="query"/>        </div>                <!--第一个submit是可以提交的这个肯定没问题-->        <input type="submit" value="submit">        <!--第二个button可以提交吗?-->        <input type="button" value="button" onclick="go()">    </form></body>

答案当然是不可以，那怎么可以让他提交呢？在js里可以通过修改属性来让他支持提交，代码如下:

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

<body>    <form id="form_1" action="https://www.sogou.com/">        <div>            <input type="text" name="query"/>        </div>        <!--第一个submit是可以提交的这个肯定没问题-->        <input type="submit" value="submit">        <!--第二个button可以提交吗?-->        <input type="button" value="button" onclick="go()">    </form>    <script type="text/javascript">        function go() {            document.getElementById('form_1').submit();        }    </script></body>

调转页面函数

<body>    <div>        跳转范例    </div>    <div>        <!--在同一个标签内打开-->        <input type="button" onclick="jump()" value="跳转至百度" />        <!--新起一个标签打开-->        <input type="button" onclick="jump_new()" value="跳转至百度" />    </div>    <script type="text/javascript">        function jump() {            window.location.href = 'https://www.baidu.com'        }        function jump_new() {            window.open('https://www.baidu.com')        }    </script></body>

confirm() ，弹出消息提示框，显示“是”或“否”，根据用户的选择返回True 或者 Flase

    <script type="text/javascript">            var result = confirm('是否继续');            console.log(result);    </script>

setInterval("alert()",2000); clearInterval(obj) 可以理解为一个计时器

代码如下：

setInterval("alert()",2000);设置计时器

<body>    <script type="text/javascript">        function f1() {            console.log("test message print in console")        }        setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,                               //这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!    </script></body>

clearInterval(obj)；关闭计时器

<body>    <script type="text/javascript">        function f1() {            console.log("test message print in console");            clearInterval(obj); //这里是关闭计时器,他需要个句柄,所以在下面的函数中,这个obj句柄必须是全局的        }        obj = setInterval('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,                               //这里是每隔1秒执行一次,我这里测试发现,如果函数哪里不加引号就只执行一次!    </script></body>

setTimeout(); clearTimeout(obj) 也是计时器他和interval的区别就是，他只执行一次

<body>    <script type="text/javascript">        function f1() {            console.log("test message print in console");        }        obj = setTimeout('f1()',1000);//这里括号内,可以是字符串也可以是函数,我们这个是执行函数,第二个参数为毫秒,                               //这里是setTimeout所以他只执行一次    </script></body>

js实例：

跑马灯实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>帅哥很帅&nbsp;&nbsp;</title>        <!--跑马灯实例-->    <script type="text/javascript">        function run_go() { //定义一个函数            var content = document.title; //获取title的内容            var firstChar = content.charAt(0); //获取content第一个元素            var sub = content.substring(1,content.length); //获取content字符串剩余的元素            document.title = sub + firstChar; //对字符串进行新的拼接        }        setInterval('run_go()',1000); //使用interval每秒执行然后达到跑马灯的目的    </script></head><body></body></html>

搜索框实例，实用性非常高，已用在很多地方！！！

<!DOCTYPE html><html>    <head>        <meta charset='utf-8' />        <title></title>        <style>            .gray{                color:gray;            }            .black{                color:black;            }        </style>    </head>    <body>        <!--input标签内注注册了两个事件(onfocus/onblur并且事件已经绑定了函数)-->        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>        <script type="text/javascript">            function Enter(){ //函数Enter的作用,当元素获得焦点就把里面的值设置为空并把颜色设置为黑色               var id= document.getElementById("tip"); //找到id为tip的标签并赋值给id               id.className = 'black'; //给id的class设置为black               if(id.value=='请输入关键字'||id.value.trim()==''){                    id.value = ''               } //判断找到的标签的value='请输入关键里'或者你输入的内容为空            }            function Leave(){ //函数Leave的作用,当元素失去焦点就把里面的值设置为"请输入关键字"并把颜色设置为灰色                var id= document.getElementById("tip"); //找到id为tip的标签病赋值为id                var val = id.value; //吧id的value属性赋值为val                if(val.length==0||id.value.trim()==''){                    id.value = '请输入关键字';                    id.className = 'gray';                }else{                    id.className = 'black';                } //判断如果val的长度为0,或者用户输入为空字符,吧id的value设置为"请输入关键字"                  //否则吧id.class设置为black            }        </script>    </body></html>

搜索框或者输入框使用的实例，常用！

效果图如下：

当鼠标没有点击去之前（元素没有获得焦点）

当鼠标点进去之后（元素获得焦点）

jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

要想使用jQuery首先得导入代码如下（附加简单应用）：

dom也很有用，对于了解jQuery有很大帮助

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige</title>    <style>        .r {            background-color:red; /* 给标签设置背景颜色为红色*/        }    </style></head><body>    <div id="id_1">        123    </div>    <div class="c1">1</div>    <div class="c1">2</div>    <div class="c1">3</div>    <!--导入Jquery文件-->    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>    <script>        $(function () {alert('Hello shuaige');}); //当页面执行完后加载        //这里$是什么呢? 他可以理解为jQurey创建的对象,类似于python中的类创建的对象,对象去调用方法一样.!!!仅仅是类似        $('#id_1').text('456');        //分解  $('#id_1') 找到id为id_1的标签,并把里面的内容修改为456        //这里虽然永不倒dom但是,会dom对jQurey有很大的帮助        $('.c1').addClass('r');        //分解  $('.c1') 找到class为c1的标签    </script></body></html>

就可以这么理解:$('这部分是选择').操作(function () {} )

阅读全文

0 0