JAVASCRIPT通俗的基础教学
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DOM节点树
• 一个html网页由多个元素组成，包括段落<p>、链接<a>、按钮 <button>、输入框<input>等，每一个元素都可以被标记为一个特定的 节点，节点之间存在附属和并列关系，比如：
• • • • • • • • • • • <html> <head></head> <body> <h1 id=”h1”><a1 id=”a1”></a><a2 id=”a2”></a>链接1</a></h1> <h2 id=”h2”><a3 id=”a3”></a><a4 id=”a4”></a>链接2</a></h2> </body> </html> h1 h2属于并列关系，a1和h1属于附属关系。 这些并列和附属关系就组成一种树状关系图 给节点标记id就等于给节点命名，id具有唯一性 节点树的作用就是方便管理具有复杂关系的网页元素
• 带连接的：<script type="text/javascript" href=”js文件路径”> </script>
alert命令
• alert命令就是打开一个最简单的弹窗，只有一条消息和OK按钮
• alert后面的括号里直接加上你想要弹出的消息
如：alert("你好"); 效果如下：
confirm消息对话
改变元素css样式
• 使用style属性可以修改元素的样式，如下：
• • • • • • • <p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon");//通过id获取到p元素 mychar.style.color="red";//将p元素的颜色设置/修改为红色 mychar.style.fontSize="20";//将p元素的字体大小设置为20像素 mychar.style.backgroundColor ="blue";//将p元素的背景颜色设置为蓝色 </script>
目的是打开百度网站，宽300px * 高200px，无菜单，无工具栏，无状态 栏，有滚动条窗口，效果如下：
函数 function
• 通俗来说，函数就是想要达到的功能，用function来表示，函数可以 被多次调用 如：function test() { alert("你好"); } test是我们给该函数的命名，我们可以通过该命名来调用这个函数 如：<button onclick=”test()”>按钮</button> 该例子定义了一个按钮，onclick是点击事件，即点击该按钮后，test()方 法被调用
• confirm命令打开一个可以可供用户选择的对话框，包括文本消息和一 个确认按钮/一个取消按钮 • 如：confirm("你喜欢JavaScript吗?"); • 效果图如下：
prompt 消息对话框
• prompt 消息对话框用于询问一些需要与用户交互的信息,可供用户填 写信息 • 如：prompt("请输入你的姓名:"); • 效果图如下：
• 获取到元素之后就可以对该元素进行操作，如隐藏/删除/修改该元素 等（语法允许的前提下）
innerHTML属性
• innerHTML可以获取和替换html元素的内容，如文本框内的值
• • • • • • • <h2 id = “con”>原来的h2</h2> <script type="text/javascript"> var h2=document.getElementById("con");//获取h2元素并在js中命名为h2 document.write(h2.innerHTML);//输出的结果为“原来的h2”————获取 h2.innerHTML="现在的h2"//修改h2的值 document.write(mychar.innerHTML); //输出的结果为“现在的h2”————替换 </script>
• </script>
display属性
• display属性style上用于显示和隐藏页面上的元素，如： • <p id = “p1”>我是p1</p> • <p id = “p2”>我是p2</p> • <script>
var p1=document.getElementById(“p1”)//得到p1 var p2=document.getElementById(“p2”)//得到p2 p1.style.display=none;//none代表隐藏，此时p1在页面上“消失” p2.style.display=block;//block代表显示，此时p2仍然显示
变量 var
• var是定义变量的命令，用法就是在其后面加上变量名，如： var test;(此时test是一个未赋值的变量) var test=”你好”;(此时test是一个赋值为“你好”的字符串变量) • 变量代表的是特定的对象，能够被赋值
• 变量名可以任意取名，但要遵循命名规则:
1.变量名必须使用字母或者下划线(_)开始。 2.变量名必须使用英文字母、数字、下划线(_)组成。 3.变量名不能使用JavaScript关键词与JavaScript保留字。
JAVASCRIPT
js的两种存在方式
• 1，存在于html/jsp或者其他形式网页的 <script>标签中，只能被该网页使用 • 2，以.js结尾的js文件，可以被其他页面调 用，不需要<script>标签
<script>标签
• 不带链接的：<scBiblioteka Baiduipt type="text/javascript"> </script>
通过ID获取元素
• 给网页元素标记了ID之后，JS调用该元素的方法如下： • document.getElementById(“元素的id”) • document指整个html文档类 • getElementById()是document类下的一个函数，用于通过元素的ID来 获取该元素，括号里的参数为该元素的ID。
打开窗口window.open
• window.open打开一个新的网页窗口，具体用法如下：
window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')