D16——C语言基础学PYTHON
Posted m1racle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D16——C语言基础学PYTHON相关的知识，希望对你有一定的参考价值。
C语言基础学习PYTHON——基础学习D16
20180927内容纲要：
1、JavaScript介绍
2、JavaScript功能介绍
3、JavaScript变量
4、Dom操作
a、获取标签
b、标签操作
c、创建标签
d、提交表单
e、事件操作
f、事件的捕捉与冒泡
5、js语法分析
6、小结
7、练习
1 JavaScript介绍
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。
很多人看到 Java 和 JavaScript 都有“Java”四个字，就以为它们是同一样东西，连我自己当初也是这样。事实上，JAVA语言和JavaScript语言是相关的，但是它们的联系并非你想像的那样紧密。首先Java语言是SUN Microsystems公司的产品，而JavaScript是Netscape公司的产品。
其次它们在功能上也有些差异：
Java在客户端的运行的应用程序叫做 Java Applet，是嵌在网页中，而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的，一个 Applet 文件（.class）用 Notepad 打开阅读，根本不能理解。Java Applet 的功能很强大，可以访问 http、ftp等协议，甚至可以在电脑上种病毒（已有先例了）。
相比之下，JavaScript 的能力就比较小了。JavaScript 是一种“脚本”（“Script”），它直接把代码写到 HTML 文档中，浏览器读取它们的时候才进行编译、执行，所以能查看 HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。它们的相同点，我想只有同是以 Java 作编程语言一点了。
2 JavaScript功能介绍
JavaScript是一门面向对象的动态语言，他一般用来处理以下任务：
- 修饰网页
- 生成HTML和CSS
- 生成动态HTML内容
- 生成一些特效
- 提供用户交互接口
- 生成用户交互组件
- 验证用户输入
- 自动填充表单
- 能够读取本地或者远程数据的前端应用程序，例如http://web-engineering.info/JsFrontendApp-Book
- 通过Nodejs实现像JAVA,C#,C++一样的服务端程序
- 实现分布式WEB程序，包括前端和服务端
3 JavaScrip变量
变量值可能为：
- 数据，如string,number,boolean
- 对象的引用：如普通对象，数组，函数，日期，正则表达式
- 特殊值null，其通常用作用于初始化的对象变量的默认值
- 特殊值undefined，已经声明但没有初始化的初始值
数组，函数，日期和正则表达式是特殊类型的对象，但在概念上，日期和正则表达式是值类型，被包装成对象形式体现。
变量，数组，函数的参数和返回值都可以不声明，它们通常不会被JavaScript引擎检查，会被自动进行类型转换。
关于变量的作用域参考：https://www.cnblogs.com/wupeiqi/p/5649402.html
1 function func(){ 2 if(1==1){ 3 var name = \'Kanghui\'; 4 } 5 console.log(name) 6 } 7 8 function func(){ 9 if(1==1){ 10 var name = \'Kanghui\'; 11 } 12 console.log(name) 13 } 14 15 16 xo = \'xiaoming\'; 17 function func(){ 18 var xo = \'lili\'; 19 function inner(){ 20 console.log(xo); 21 } 22 return inner; 23 } 24 var ret = func() 25 ret() 26 27 xo = \'xiaoming\'; 28 function func(){ 29 var xo = \'lili\'; 30 function inner(){ 31 console.log(xo); 32 } 33 var xo = \'tony\' 34 return inner; 35 } 36 var ret = func() 37 ret()
4 Dom操作
1、获取标签
获取单个元素 document.getElementById(\'i1\')
获取多个元素（列表）document.getElementsByTagName(\'div\')
获取多个元素（列表）document.getElementsByClassName(\'c1\')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById(\'i1\')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、标签操作
a. innerText 获取标签中的文本内容 标签.innerText 对标签内部文本进行重新复制 标签.innerText = "" b. className tag.className =》 直接整体做操作 tag.classList.add(\'样式名\') 添加指定样式 tag.classList.remove(\'样式名\') 删除指定样式 PS： <div onclick=\'func();\'>点我</div> <script> function func(){ } </script> c. checkbox 获取值 checkbox对象.checked 设置值 checkbox对象.checked = true
3、Dom创建标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" onclick="AddEle1();" value="添加" /> 9 <input type="button" onclick="AddEle2();" value="添加" /> 10 <div id="i1"> 11 <p><input type="text" /></p> 12 </div> 13 <script> 14 function AddEle1(){ 15 // 创建一个标签 16 //把标签添加到HTML中 17 var tag = "<p><input type=\'text\' /></p>" 18 document.getElementById(\'i1\').insertAdjacentHTML("beforeEnd",tag) 19 } 20 function AddEle2(){ 21 // 创建一个标签 22 //把标签添加到HTML中 23 var tag = document.createElement(\'input\'); 24 tag.setAttribute(\'type\',\'text\'); 25 tag.style.fontsize = \'16px\'; 26 tag.style.color = \'red\'; 27 28 var p = document.createElement(\'p\'); 29 p.appendChild(tag); 30 31 document.getElementById(\'i1\').appendChild(p); 32 33 } 34 </script> 35 </body> 36 </html>
4、提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="text" /> <input type="submit" value="提交" /> <a onclick="submitForm();">提交</a> </form> <script> function submitForm() { document.getElementById(\'f1\').submit() alert(123); var v = confirm("真的要删除吗？")； console.log(v); } //定时器，一直执行 var obj = setInterval(function () { console.log(1); clearInterval(obj); },1000); //定时器，只执行一次 setTimeout(function () { console.log(\'timeout\'); },5000); </script> </body> </html>
打开qq邮箱，删除垃圾邮件后会弹出一个已删除的框，然后再几秒钟后消失，这是怎么做到的呢？
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="status"></div> 9 <input type="button" value="删除" onclick="DeleteEle();" /> 10 11 <script> 12 function DeleteEle() { 13 document.getElementById(\'status\').innerText = "已删除"; 14 setTimeout(function () { 15 document.getElementById(\'status\').innerText = ""; 16 },5000) 17 } 18 </script> 19 </body> 20 </html>
5、事件操作
现在要实现这么一个功能：一个表格，如果把鼠标放在哪一行，哪一行就能高亮显示。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="1" width="300px"> 9 <tr onmouseover="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr> 10 <tr onmouseover="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr> 11 <tr onmouseover="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr> 12 </table> 13 <script> 14 function t1(n) { 15 var mythrs = document.getElementsByTagName(\'tr\')[n]; 16 // console.log(mythrs); 17 mythrs.style.backgroundColor = "red"; 18 } 19 function t2(n) { 20 var mythrs = document.getElementsByTagName(\'tr\')[n]; 21 mythrs.style.backgroundColor = ""; 22 } 23 </script> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="1" width="300px"> 9 <tr><td>1</td><td>2</td><td>3</td></tr> 10 <tr><td>1</td><td>2</td><td>3</td></tr> 11 <tr><td>1</td><td>2</td><td>3</td></tr> 12 </table> 13 <script> 14 var mythrs = document.getElementsByTagName("tr"); 15 var len = mythrs.length; 16 for(var i=0; i<len; i++){ 17 mythrs[i].onmouseover = function () { 18 this.style.backgroundColor = "red"; 19 } 20 mythrs[i].onmouseout = function () { 21 this.style.backgroundColor = ""; 22 } 23 } 24 </script> 25 </body> 26 </html><以上是关于D16——C语言基础学PYTHON的主要内容，如果未能解决你的问题，请参考以下文章