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 ...
随机推荐
- Eclipse------使用Maven install出错：编码GBK的不可映射字符
使用Maven install时报错:编码GBK的不可映射字符 原因:Maven默认使用GBK进行编码 解决方法: 在pom.xml文件中添加如下代码即可 <project> <pr ...
- SpringMVC由浅入深day01_7入门程序小结
7 入门程序小结 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法. 前端控制器配置: 处理器映射器: 非注解处理器映射器(了解) 注解的处理器映射器(掌握) ...
- html+jquery制作网页地图
http://jvectormap.com/ <!--StartFragment --> JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 ...
- Objective-C语法之动态类型(isKindOfClass, isMemberOfClass,id)等
对象在运行时获取其类型的能力称为内省.内省可以有多种方法实现. 判断对象类型 -(BOOL) isKindOfClass: classObj 判断是否是这个类或者这个类的子类的实例/ 判断是否是这个类 ...
- java.security.NoSuchAlgorithmException: SHA1PRNG SecureRandom not available
好久没有使用MyEclipse10了,今天打开看了以前大学的项目,在Tomcat7中发布启动,我嚓嘞,报错: SEVERE: Exception initializing random number ...
- 2018.8.23几日重新编译OSG+OE+Qt遇到的问题
Qt安装多个版本的时候,注意屏蔽掉不使用的Qt,例如OE中的CMakeLists.txt中的# FIND_PACKAGE(Qt4) 使用以前编译好的libcurl.dll现在出现"无法定位序 ...
- U3D优化
容易忽略的美术资源的优化: 优化的美术制作真是一种感觉和经验的积累,能看出制作水平的不是做的效果多么犀利,而是得看制作的效果与对机器的要求等的性价比. 关于合并: 100个三角形的MESH,在渲染时 ...
- codeforces水题100道 第三题 Codeforces Beta Round #47 A. Domino piling (math)
题目链接:http://www.codeforces.com/problemset/problem/50/A题意:一个NxM的举行中最多能放多少个1x2的矩形.C++代码: #include < ...
- JSP基本用法（一）运行机制和语法
一.概述 JSP是一种建立在Servlet规范功能上的动态网页技术,在网页文件中嵌入Java代码和JSP标记用于产生动态内容. 本文简单介绍JSP的运行机制和JSP的语法. 二.JSP的运行机制 JS ...
- ldap objectclass
LDAP中,一个条目必须包含一个objectClass属性,且需要赋予至少一个值.每一个值将用作一条LDAP条目进行数据存储的模板:模板中包含了一个条目必须被赋值的属性和可选的属性. obj ...