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 ...
随机推荐
- VB2008新特性
1.扩展方法 (Extension Methods) 给Person类扩展Print方法 Public Module PersonExtension <System.Runtime.Compil ...
- 8 -- 深入使用Spring -- 3...1 Resource实现类UrlResource
8.3.1 Resource 实现类------UrlResource : 访问网络资源的实现类 1.访问网络资源 访问网络资源通过UrlResource 类实现,UrlResource是java.n ...
- vux ajax请求 及 跨域
1)使用 AjaxPlugin 插件(在组件里使用) 引入插件 import { AjaxPlugin } from 'vux' 初始化 export default { components: { ...
- 使用 urllib 发送请求
urllib.request.urlopen(url, data=None, timeout=n) 用于发送HTTP请求并得到响应内容 In []: import urllib.request In ...
- CMD打开模拟器
CMD-> CD d:\android\android-sdk-151\tools-> (这里的路径是你emulator.exe所在的路径) emulator -avd avdname-& ...
- ARM9通过NFS挂载根文件系统
当开发板启动以后可以通过在超级终端发送命令来配置NFS. 首先得给开发板一个IP地址,用下面的命令配置即可: #ifconfig 192.168.0.10 经过上面的配置以后在各自的终端中应该都能PI ...
- 深入浅出MongoDB应用实战开发
写在前面的话: 这篇文章会有点长,谨此记录自己昨天一整天看完<深入浅出MongoDB应用实战开发>视频时的笔记.只是在开始,得先抛出一个困扰自己很长时间的问题:“带双引号的和不带双引号的j ...
- Android 自定义 View 浅析
Android 自定义 View 浅析 概括 说到自定义 View ,就一定得说说 android 系统的UI绘制流程.再说这个流程之前,我们先看一下在每一个 activity 页面中我们的布局 ui ...
- 【EF框架】另一个 SqlParameterCollection 中已包含 SqlParameter。
查询报表的时候需要通过两次查询取出数据. 第一次,用count(*)查出总数: 第二次,用rownumber分页取出想要的页内容: 为了防止sql注入,使用SqlParameter来传递参数 var ...
- win7 开机自启动控制
直接用win+r运行 --- 输入 msconfig 去除“OneNote”开机自启动方法:取消勾选,点击 “应用” ,然后点击“确定” 即可