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 ...
随机推荐
- Android输出日志到电脑磁盘
使用Eclipse查看Log有时候挺恶心的,有些Log ADB会自动的清除,所有有时候导致抓不到有效的Log,把Log保存到文件,然后通过文本查看器查看,感觉好Happy,下面就是脚本文件: adb ...
- PHP压缩html网页代码原理(清除空格,换行符,制表符,注释标记)
本博启用了一个叫wp super cache的页面压缩工具, 源代码没有去查看,不过原理很简单. 我们可以自己动手书写一个压缩脚本. 清除换行符,清除制表符,去掉注释标记 .它所起到的作用不可小视. ...
- Python中的and/or
在Python中,可以通过and,or和not进行逻辑运算,下面就来看看and和or的简单介绍. 逻辑与-and 对于包含and运算的表达式,Python解释器将从左到右扫描,返回第一个为假的表达式值 ...
- ios开发之--两次模态弹出后,怎么返回最上层的页面
解决方法如下: self.presentingViewController.view.alpha = ;[self.presentingViewController.presentingViewCon ...
- Windows系统下运行某些程序时缺少“Msflxgrd.ocx”的解决方法
出现这样的错误就是系统缺少相应的库文件,我们安装即可. 下载Msflxgrd.ocx,这里提供一个下载网址:https://www.ocxme.com/files/msflxgrd_ocx 64位系统 ...
- linux-满足多字符条件统计行数
测试数据: 2017-10-24 14:14:11:1123 [ INFO] order_type=add,order_id=9150882564978710367790292017-10-24 14 ...
- PHP代码审计笔记--XSS
跨站脚本攻击(Cross Site Scripting),为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.Web程序代码中把用户提 ...
- 搭建ntp服务器
1.同步网络时间 先关闭掉ntp服务,使用ntpd同步网络时间. /etc/init.d/ntpd stop ntpdate 2.hk.pool.ntp.org 网络时间可以从http://www.p ...
- springboot---->springboot中的校验器（一）
这里面我们简单的学习一下springboot中关于数据格式化的使用.冬天花败,春暖花开,有人离去,有人归来. springboot中的校验器 我们的测试环境是springboot,对请求的person ...
- js - 预加载+监听图片资源加载制作进度条
这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...