11、JavaScript 学习记录-基础
来源:互联网 发布:网络舆论使思考更多元 编辑:程序博客网 时间:2024/06/03 21:57
一、目的:了解基础知识,学习使用 js 操作浏览器元素
二、笑话
Java 和 JavaScript 的关系,就是雷锋和雷峰塔的关系。
三、基础
1、JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。
2、HTML 定义了网页的内容;CSS 描述了网页的布局;JavaScript 网页的行为。
3、第一个示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title></head><body> <script> document.write("<h1>h1标签</h1>") </script> <button type="button" onclick="alert('像Storm一样飞')">点我</button></body></html>页面效果如下:
四、JavaScript 用法
1、可以放到head中
2、放到body中
3、直接调用外部文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title> <script> document.write("<h2>h2标签</h2>") </script></head><body> <script> document.write("<h1>h1标签</h1>") </script> <button type="button" onclick="alert('像Storm一样飞')">点我</button> <script src="abc.js"></script></body></html>
五、JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
1、JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
(1)使用 window.alert() 弹出警告框。
(2)使用 document.write() 方法将内容写到 HTML 文档中。
(3)使用 innerHTML 写入到 HTML 元素。
(4)使用 console.log() 写入到浏览器的控制台。
示例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title></head><body> <h1 id="h1">这是一个h1标签</h1> <script> window.alert("Hello JavaScript"); document.write(Date()); document.getElementById('h1').innerHTML = "修改后的内容"; a = 1; c = a + 1; console.log(c); </script></body></html>
六、JS HTML DOM (自动化会用到)
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
1、HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
2、通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
(1)JavaScript 能够改变页面中的所有 HTML 元素
(2)JavaScript 能够改变页面中的所有 HTML 属性
(3)JavaScript 能够改变页面中的所有 CSS 样式
(4)JavaScript 能够对页面中的所有事件做出反应
3、查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
(1)通过 id 找到 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
本例查找 id="intro" 元素:
实例
var x=document.getElementById("intro");
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
如果未找到该元素,则 x 将包含 null。
(2)通过标签名找到 HTML 元素
本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
实例
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
(3)通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:
实例
var x=document.getElementsByClassName("intro");
4、操作HTML元素
(1)改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
document.getElementById(id).innerHTML=新的 HTML
本例改变了 <p>元素的内容:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title></head><body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script></body></html>实例讲解:
上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)
(2)改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(id).attribute=新属性值
本例改变了 <img> 元素的 src 属性:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title></head><body> <img src="https://www.baidu.com/img/bd_logo1.png" id="imgid"> <script> document.getElementById("imgid").src="http://img3.imgtn.bdimg.com/it/u=1039330913,1100665204&fm=27&gp=0.jpg"; </script></body></html>
5、DOM 元素
(1)删除已有的HTML元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title></head><body> <img src="https://www.baidu.com/img/bd_logo1.png" id="imgid" name="imgname"> <script> document.getElementById("imgid").removeAttribute('name'); </script></body></html>查看该元素代码,发现没有name属性,证明删除成功。
(2)添加HTML元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Storm</title></head><body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是一个新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script></body></html>这段代码创建新的<p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("这是一个新段落。");
然后您必须向 <p> 元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素:
element.appendChild(para);
6、附录:属性和方法
- 11、JavaScript 学习记录-基础
- JavaScript基础学习零碎知识记录
- JavaScript学习记录01--基础篇之javascript简介
- JavaScript 学习笔记-基础记录(一)JS API下载
- JavaScript 的学习记录。
- JavaScript 学习点滴记录
- javascript 学习记录
- javascript学习记录
- JavaScript学习记录
- Javascript 常见学习记录
- javascript学习记录
- javascript学习记录
- 学习记录--javascript多态
- JavaScript学习记录
- JavaScript学习记录(一)
- JavaScript学习记录(二)
- JavaScript学习记录(三)
- JavaScript学习记录(四)
- 二分查找
- ASP.NET状态管理之三(隐藏域HiddenField)
- select得到结果集,然后循环更新另一张表
- Java异常的深入研究与分析
- 多线程理论知识
- 11、JavaScript 学习记录-基础
- 贝叶斯学习总结
- 为什么要在多线程中进行数据同步
- YOLO算法学习及训练
- synchronized 在多线程中的一些 理论
- linux编辑文件,中途退出再进入编辑操作
- 第三次Java作业继承
- 小结多态
- mysql一条SQL一次插入大容量数据