python学习笔记十三 JS,Dom(进阶篇)
2016-04-17 00:12
639 查看
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 14bool类型
//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"] //[code]字符串化names.join("_")"nike_alex_ajax_eric_john_bob"names["nike", "alex", "ajax", "eric", "john", "bob"]//长度names.length6[/code]字典
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 树
查找元素,有三种方法来做这件事:通过 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标签
<!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>事件包含:常用事件:onclickonbluronfocus...自增计数器示例: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[code]属性操作用户输入和选择的值适用于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>[/code]
创建标签
<!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莅临指导 </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>
相关文章推荐
- Python设置环境变量,改变GnomeConnectionManager的语言
- Python错误大全
- Python OS模块详解
- scrapy 环境搭建
- Python中的函数-1
- python文件操作
- 开源中国推荐博客爬虫
- introduction to python for statistics,analysis笔记3
- python判断变量类型
- Python小知识:如何截取路径中的文件名
- python闭包
- Python的变量的本质
- 【python小练】0013
- python连接数据库操作MySQL
- Python回顾与整理10:模块
- python-MySQL学习笔记-第六章-Connector/Python连接池(Connection Pooling)
- python-MySQL学习笔记-第五章-利用Connector/Python来修改数据库
- python-MySQL学习笔记-第四章-利用Connector/Python来查询数据
- 【Python】统计个人新浪微博词频并给出相应的柱状图
- 【python技巧系列】python的multiprocessing到底怎么用的问题