JavaScript基础教程2-20160612
1.JavaScript之操作html元素，Dom
Dom是抽象出来的网页对象，需要了解面向对象的思想；调用对象下的方法实现相应的功能
使用JS调用dom来创建标签.
//document是网页对象
(1)方法1
<html>
<body>
<div id='t1'></div>
<script type='text/javascript'>
//创建a标签
var tag = document.createElement('a');
tag.href="http://www.baidu.com"
tag.innerText = '点我啊' //把a标签放到id为t1的div块里面
var id1 = document.getElementById('t1')
id1.appendChild(tag) </script>
</body>
</html>
#createElement:创建元素节点。
#getElementById:返回带有指定ID的元素对象
#appendChild(tag):把tag子子节点添加到id1的父节点里
#innerText:元素的文本值
（2）方法2
<html>
<body>
<div id='t1'></div>
<script type='text/javascript'>
//创建a标签
var tag = "<a href='http://www.jd.com'>点我啊</a>" //把a标签放到id为t1的div块里面
var id1 = document.getElementById('t1')
id1.innerHTML= tag; </script>
</body>
</html>
#innerHTML:节点元素的文本值
2.使用JS修改页面的CSS样式
<html>
<head>
<style>
.show{
}
.hide{
display:none;
}
</style>
</head>
<body>
<div id='t1' class='show'>点我啊</div>
</body>
<script type='text/javascript'>
var id1 = document.getElementById('t1');
id1.className = 'hide'
</script>
</html>
3.使用JS修改标签属性//把其中div为name=xiaohong改为xiaolan
<html>
<head>
</head>
<body>
<div id='t1' class='show' name='xiaohong'>点我啊</div>
</body>
<script type='text/javascript'>
var id1 = document.getElementById('t1');
console.log(id1.getAttribute('name'));
id1.setAttribute('name','xiaolan');
console.log(id1.getAttribute('name'));
</script>
</html>
4.使用JS去修改样式
<body>
<div id='t2' style='width:500px;height:200px;border:2px solid #333;'>
<script type='text/javascript'>
var id2 = document.getElementById('t2');
var width = id2.style.width;
console.log(width);
id2.style.width = '100px'; </script>
</body>
5.使用JS来提交表单
（1）原先的模式，submit
<form action="http://www.sogou.com/web?" method='GET'>
<input type='text' name='query'/>
<input type='submit' value='提交' />
</form>
//原先input标签下直接有submit类型，直接提交给action选项那去了
（2）通过按钮伪造一个表单提交的东西
<body>
<form id='F1' action="http://www.sogou.com/web?" method='GET'>
<input type='text' name='query' />
<input type='button' value='伪提交' onclick="Foo();">
</form> <script type='text/javascript'>
function Foo(){
document.getElementById('F1').submit()
}
</script>
</body>
//onclick指定button被点击的时候执行了Foo函数.Foo函数定义的时候，通过getElementById方法找到某个表单元素对象，进而对象的submit方法提交表单
//提交表单的这个js调用更加灵活
6.JS特效之鼠标点击文本框输入内容和移走文本框显示提示信息效果实现
涉及到几个知识点
onblur：元素失去焦点
onfocus：元素获得焦点
<head>
<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
</head>
<body>
<input type='text' class='gray' id='d1' value='请输入关键字' onfocus='Enter();' onblur='Leave();' />
<script>
function Enter(){
var id1 = document.getElementById('d1');
id1.className = 'black'
if(id1.value=='请输入关键字'||id1.value.trim()==''){
id1.value='';
}
}
function Leave(){
var id1 = document.getElementById('d1');
var val = id1.value
if(val.length==0||id1.value.trim()==''){
id1.value = '请输入关键字';
id.className = 'gray';
}else{
id1.className = 'black';
}
}
</script>
</body>
//核心思想在于，当鼠标点击进去的时候，元素获得焦点，会调用Enter()函数，Enter函数会把这个文本框的css样式改为black，然后判断当前的文本框内容是否为空或者是否为默认的请输入关键字，如果是把内容置空
//当鼠标移除之后，元素失去焦点，调用Leave函数，Leave函数会判断当前文本框中的内容长度是否为0或者是否为多个空格，如果是，把文本框内容置为初始值，样式是灰色；如果里面有内容，把样式改为黑色
7.JS特效之进度条and跑马灯功能
里面主要涉及到的知识点有setInterval和clearInterval
setTimeout和clearTimeout
（1）进度条功能
//每隔半秒去服务器端抓一次数据，进度+10%，如果最后超过100了，停止
//进度条功能是通过更改div快的width宽度来实现的
//setInterval实现每隔几秒执行一下什么函数
//clearInterval保证用来达到某个特殊条件来退出那个循环
<html>
<head>
<meta charset="utf-8">
<title>你好，欢迎来到我的网站</title> </head>
<body>
<div style="width: 500px; background-color: #ddd;">
<div id='pro' style="width: 10%;background-color: green; height: 10px;"></div>
</div> <script type="text/javascript">
pro = 10
function Foo() {
var id1 = document.getElementById('pro');
pro = pro + 10;
if(pro >= 100){
clearInterval(interval)
}else{
id1.style.width = pro+'%';
}
id1.style.width = pro+'%';
}
interval = setInterval('Foo()',500);
</script> </body>
</html>
//setTimeout和clearTimeout功能只保证某个函数隔半秒执行一次，执行一次后就终止了；常见用于删除某个邮件的时候，提示消息删除成功，然后停留5秒后，提示消息消失的功能
（2）跑马灯功能
//基本知识原理一样，用来实现title头中的内容滚动显示
//核心思想setInterval每隔几秒执行以下什么函数
<html>
<head>
<meta charset="utf-8">
<title>你好，欢迎来到我的网站</title> </head>
<body>
<!-- <div style="width: 500px; background-color: #ddd;">
<div id='pro' style="width: 10%;background-color: green; height: 10px;"></div>
</div> --> <script type="text/javascript">
function Go(argument) {
// body...
var content = document.title;
var firstChar = content.charAt(0);
var sub = content.substring(1,content.length);
document.title = sub + firstChar;
}
setInterval('Go()',500);
</script> </body>
</html>
（3）补充知识点----如果每隔2秒跑一次进度条更新的东西，如果跑一半了，不想让它继续往后跑了，直接停止了。怎么弄？
//调用知识点clearTimeout来实现
//此处建立了个button按钮，点击的效果呢，是执行函数stop。来调用clearTimeout来终止循环
<html>
<head>
<meta charset="utf-8">
<title>你好，欢迎来到我的网站</title> </head>
<body>
<div style="width: 500px; background-color: #ddd;">
<div id='pro' style="width: 10%;background-color: green; height: 10px;"></div>
</div>
<input type="button" name="" value="别闹" onclick="Stop();">
<script type="text/javascript">
pro = 10
function Foo() {
var id1 = document.getElementById('pro');
pro = pro + 10;
if(pro >= 100){
clearInterval(interval)
}else{
id1.style.width = pro+'%';
}
id1.style.width = pro+'%';
}
interval = setInterval('Foo()',1000);
function Stop() {
// body...
clearTimeout(interval);
}
</script> </body>
</html>
JavaScript基础教程2-20160612的更多相关文章
- 《JavaScript基础教程（第8版）》PDF
简介:JavaScript基础教程(第8版)循序渐进地讲述了JavaScript及相关的CSS.DOM.Ajax.jQuery等技术.书中从JavaScript语言基础开始,分别讨论了图像.框架.浏览 ...
- javascript基础教程学习总结(1)
摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- web前端学习（四）JavaScript学习笔记部分（1）-- JavaScript基础教程
1.JavaScript基础教程 1.1.Javascript基础-介绍.实现.输出 1.1.1.JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务端.p ...
- javascript 基础教程[温故而知新一]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- JavaScript基础教程1-20160612
1.javascript是一门浏览器运行的脚本语言和java没关系 2.javascript语言写在哪里? (1)可以写单独的文件里面去调用(推荐采用此方法) index.html <head& ...
- [JavaScript] 学习笔记-JavaScript基础教程
1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...
- JavaScript基础教程复习笔记
document.write("<h1>这是一个标题</h1>"); 您只能在 HTML 输出中使用 document.write.如果您在文档加载后使用该 ...
随机推荐
- 计算器（Ext）
<html> <head> <title>计算器</title> <meta charset="UTF-8"> < ...
- Android ui 透明度设置
格式如#00FFFFFF,前两位代表不透明度的十六进制.00表示完全透明,FF就是全不透明.依次递增. <?xml version="1.0" encoding=" ...
- Mybatis (一)
1 DAO层框架 框架:是一种整体的解决方案. 1.1 JDBC的步骤 1.2 Hibernate执行的步骤 1.3 MyBaits 2 Mybatis简介 Mybatis是支持定制化SQL.存储过程 ...
- Shader 入门笔记(三) ShaderLab 初识
Unity中,Unity Shader 都是ShaderLab 来编写的.ShaderLab 是Unity提供的编写Unity Shader 的一种说明性语言. 1)Properties :定义了着色 ...
- 【原创】源码角度分析Android的消息机制系列（四）——MessageQueue的工作原理
ι 版权声明:本文为博主原创文章,未经博主允许不得转载. MessageQueue,主要包含2个操作:插入和读取.读取操作会伴随着删除操作,插入和读取对应的方法分别为enqueueMessage和ne ...
- 利用 secureCRT 直接上传下载文件 (sz,rz)
在window下向linux传送文件的方法. 首先在window中安装SecureCRT,然后在快速连接中建立一个到linux的连接,当然,你要先知道你的系统的ip,在终端中键入ifconfig可以查 ...
- bzoj 3597: [Scoi2014]方伯伯运椰子 [01分数规划 消圈定理 spfa负环]
3597: [Scoi2014]方伯伯运椰子 题意: from mhy12345 给你一个满流网络,对于每一条边,压缩容量1 需要费用ai,扩展容量1 需要bi, 当前容量上限ci,每单位通过该边花费 ...
- POJ 3608 Bridge Across Islands [旋转卡壳]
Bridge Across Islands Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10455 Accepted: ...
- 利用Effmpeg 提取视频中的音频（mp3）
在B站看到一个up发的病名为爱的钢琴曲,感觉很好听,然后当然是要加入歌单啊.然而不知道怎么转换成mp3,找来找去找到了EFFmpeg 这篇只是达到了我简单的需求,以后可能会有EFFmpeg更详细的使用 ...
- 使用VS Code开发asp.net core (下)
第一部分: https://www.cnblogs.com/cgzl/p/8450179.html 本文是基于Windows10的. Debugging javascript 打开wwwroot/js ...