11.28JavaScript学习
JavaScript输出
JavaScript通常用于操作HTML元素，如果要访问某个HTML元素，使用document.getElementById(id)方法，使用id属性标识HTML元素
文档输出
document.write("<p>hello<p>"):直接将<p>元素写道HTML文档输出中
JavaScript语句是发给浏览器的命令，告诉浏览器该做什么
JavaScript代码是JavaScript语句的序列，浏览器按照编写顺序依次执行每条语句
当没有事件函数时，需要将id放在script的前面，要不然会出错
<p id="myPoint">content</p>
<script>
document.getElementById("myPoint").innerHTML=Date()
</script>
JavaScript代码块
JavaScript可以分批的组合起来，代码块用{}表示，代码块的作用是一并的执行语句序列
function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}
JavaScript是脚本语言，浏览器在读取代码时，逐行地执行脚本代码；对于传统编程来说，会在执行前对所有代码进行编译
JavaScript使用//进行单行注释；使用/× ×/多行注释
变量是用于存储信息的容器
JavaScript中的所有事物都是对象：字符串（String）、数字（Number）、数组（Array）、日期（Date）等等，对象是拥有属性和方法的数据
JavaScript函数，由事件驱动的可重复执行的代码
function function_name()
{
代码块
}
当某个事件发生时直接调用该函数，可由JavaScript任何位置调用
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
调用带参数的函数，可以向其中传递值
function function_name(var1, var2)
{
代码块
}
带有返回值的函数，希望将函数返回值返回调用他的地方，通过return语句就可以实现，遇到return语句就直接返回
function function_name()
{
var a=5;
return a;
}
var b = function_name();
即使不把它存为变量，也可以使用返回值
局部JavaScript变量：在函数内部声明的变量，函数运行以后被删除
全局JavaScript变量：在函数外部声明的变量，网页上的所有脚本和函数都可以访问它，网页关闭后被删除
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明：carname = "deng"
HTML DOM文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
DOM模型被构造为对象树
通过可编程的对象模型，js获得了足够的能力创建动态的HTML
1）改变HTML中的元素
2）改变HTML的属性
3）改变CSS的样式
4）对页面中的所有时间做出反应
查找HTML元素：要操作HTML元素，必须要找到该元素
1）通过id找到该元素
2）通过标签找到该元素
3）通过类名找到该元素
找到HTML元素最简单的方法就是通过id找到该元素
var a = document.getElementById(id)
如果找到该元素，该方法将以对象的形式返回该元素
如果没有找到，返回null
通过标签名找到HTML元素
var x = document.getElementById('main')
var y = x.getElementsByTagName('p')
首先找到id='main'的元素，再找main中所有的<p>元素
DOM改变HTML的内容
document.write()输出流写入文档中
修改HTML内容的最简单的方法就是使用innerHTML属性
document.getElementById(id).innerHTML= new HTML
改变HTML的属性
document.getElementById(id).attribute = new value
<img id='a' src='abc.png'>
<script>
document.getElementById('a'').src='xxx.jpg'
</script>
改变HTML的样式：document.getElementById("demo").style.color="blue";
JavaScript HTML DOM事件：对HTML事件作出反应
在事情发生时执行JavaScript代码，比如用户在HTML元素上点击时
如果用户在点击某个元素时执行代码，请向一个HTML属性添加JavaScript代码
onclick=JavaScript
HTML事件的例子
1.用户点击鼠标时
2.网页已经加载时
3.图像已经加载时
4.当鼠标移动到元素上时
5.输入字段被改变时
6.提交HTML表单时
7.触发按键时
<h1 onclick="this.innerHTML='haha!'">The first JavaScript sample</h1>
鼠标点击该元素时，文本内容发生变化
向元素分配onclick事件
onload和onunload事件：会在用户进入或离开页面触发，可用于处理cookie
onload事件可用户检测访问者的浏览器类型和浏览器版本，并基于这些信息加载浏览器的正确版本
加载浏览器时，判断浏览器cookie是否可用
<body onload="checkCookie()">
</body>
onchange事件：常结合对输入字段的验证来使用，会在域的内容改变时发生
<input name="input_name" type="text" onchange="uperrCase()"><br>
onmouseover和onmouseout事件
用于在用户的鼠标移至HTML元素上方或移出元素时触发函数
div.red_block{
background-color: aquamarine;
width: 100px;
height: 80px;
text-align: center;
margin: 2px;
padding: 2px;
align-content: center;
}
<div class="red_block" onmouseover="myOver(this)" onmouseout="myOut(this)">please click me!</div>
function myOver(obj) {
obj.innerHTML="I am very happy!"
}
function myOut(obj) {
obj.innerHTML="you leave, I am very sad..."
}
onmousedown和onmouseup以及click事件构成了点击鼠标的所有部分
点击鼠标触发onmousedown事件
释放鼠标时触发onmouseup事件
完成鼠标点击时，触发onclick事件
img.myPic{
margin: 2px;
padding: 2px;
width: 100px;
height:80px;
}
<img class="myPic" id="myImg" src="/static/img/dyx.png" onmousedown="myDown()" onmouseup="myUp()">
function myDown() {
document.getElementById("myImg").style.opacity=0.4;
}
function myUp() {
document.getElementById("myImg").style.opacity=1;
}
onfocus获得字段焦点
<input name="input_name" id="myInputId" type="text" onchange="uperrCase()" onfocus="myFocus()">
function myFocus() {
document.forms["myForm"]["input_name"].style.background="green";
}
HTML DOM元素
创建新的HTML元素：向HTML DOM添加元素，必须要创建出该元素称为元素节点，然后在一个已经存在的元素添追加该元素
<div id="div1">
<p id="p1">
This is paragram 1
</p>
<p id="p2">
This is paragram 2
</p>
</div>
//创建新的p3元素
var para = document.createElement("p3")
//往p元素添加文本，首先创建文本节点
var node = document.createTextNode("This is paragram 3")
//向p元素追加这个文本节点
para.appendChild(node)
//找到一个已有的元素
var element = document.getElementById("div1")
//在已有的元素中追加新的元素
element.appendChild(para)
删除HTML元素
var element1= document.getElementById('p1')
var element2= document.getElementById('p2')
element1.removeChild(element2)
如果能够在不引用父元素的情况下，删除某个元素就太好了
常用的解决方法：找到需要删除的子元素，然后使用其parentNode属性来找到父元素
var child = document.getElementById('p1')
child.parentNode.removeChild(child)
11.28JavaScript学习的更多相关文章
- 201521123082 《Java程序设计》第11周学习总结
201521123082 <Java程序设计>第11周学习总结 标签(空格分隔):java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. Answe ...
- 201521123067 《Java程序设计》第11周学习总结
201521123067 <Java程序设计>第11周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线 ...
- 201521123045 <java程序设计>第11周学习总结
201521123045 <java程序设计>第11周学习总结 1. 本周学习总结 2. 书面作业 2. 书面作业 Q1.1.互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问 ...
- 2018面向对象程序设计（Java）第11周学习指导及要求
2018面向对象程序设计(Java)第11周学习指导及要求 (2018.11.8-2018.11.11) 学习目标 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: ...
- 20172333 2017-2018-2 《Java程序设计》第11周学习总结
20172333 2017-2018-2 <Java程序设计>第11周学习总结 教材学习内容 对于Android Studio的安装以及对安卓的一些基本组成,比如说四大组件Acticity ...
- 20145202马超 2016-2017-2 《Java程序设计》第11周学习总结
20145202马超 2016-2017-2 <Java程序设计>第11周学习总结 教材学习内容总结 XX 教材学习中的问题和解决过程 教材学习有问题先去https://shimo.im/ ...
- C++11并发学习之三：线程同步（转载）
C++11并发学习之三:线程同步 1.<mutex> 头文件介绍 Mutex又称互斥量,C++ 11中与 Mutex 相关的类(包括锁类型)和函数都声明在 <mutex> 头文 ...
- 面向对象程序设计（JAVA） 第11周学习指导及要求
2019面向对象程序设计(Java)第11周学习指导及要求 (2019.11.8-2018.11.11) 学习目标 理解泛型概念: 掌握泛型类的定义与使用: 掌握泛型方法的声明与使用: 掌握泛型接 ...
- 20175316盛茂淞 2018-2019-2 《Java程序设计》第11周学习总结
20175316 <Java程序设计> 第11周学习总结 教材内容学习总结 第十三章 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用UR ...
随机推荐
- Windows系统下运行某些程序时缺少“Msflxgrd.ocx”的解决方法
出现这样的错误就是系统缺少相应的库文件,我们安装即可. 下载Msflxgrd.ocx,这里提供一个下载网址:https://www.ocxme.com/files/msflxgrd_ocx 64位系统 ...
- head first python 支持网站（可下载所有的代码和示例）
http://examples.oreilly.com/0636920003434/
- U3D 使用VS编程组件
http://visualstudiogallery.msdn.microsoft.com/6e536faa-ce73-494a-a746-6a14753015f1 http://visualstud ...
- inux跟踪线程的方法：LWP和strace命令
摘要:在使用多线程程序时,有时会遇到程序功能异常的情况,而这种异常情况并不是每次都发生,很难模拟出来.这时就需要运用在程序运行时跟踪线程的手段,而linux系统的LWP和strace命令正是这种技术手 ...
- Onpaint和OnDraw的区别
(一) OnPaint 和 OnDraw (1)OnPaint是WM_PAINT消息的消息处理函数,在OnPaint中调用OnDraw,一般来说,用户自己的绘图代码应放在OnDraw中. (2)OnP ...
- 《C++ Primer Plus》第16章 string类和标准模板库 学习笔记
C++提供了一组功能强大的库,这些库提供了很多常见编程问题的解决方案以及简化其他问题的工具string类为将字符串作为对象来处理提供了一种方便的方法.string类提供了自动内存管理动能以及众多处理字 ...
- Java实现给定字符串的倒序输出
1.除2判中法: public static String orderDesc(String str){ byte [] bytes = str.getBytes(); for ( int i = 0 ...
- c++ map使用问题【运行结果不一样】
map经常把指针作为key,这种情况下. 我们经常会很自然的以为,如果要取元素时,会按照我们存的顺序拿到元素. 但是事实上不是这样的,因为map取得时候是按key的大小排序的,而如果用指针作为key, ...
- axure rp ----专业的快速原型设计工具
Axure RPAxure的发音是』Ack-sure』,RP则是』Rapid Prototyping』快速原型的缩写.Axure RP Pro是美国Axure Software Solution公司的 ...
- H.264 White Paper学习笔记（二）帧内预测
为什么要有帧内预测?因为一般来说,对于一幅图像,相邻的两个像素的亮度和色度值之间经常是比较接近的,也就是颜色是逐渐变化的,不会一下子突变成完全不一样的颜色.而进行视频编码,目的就是利用这个相关性,来进 ...