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.如果您在文档加载后使用该 ...
随机推荐
- IDEA新建Maven项目
Maven是什么? 当我们在开发一个项目的时候,不可避免地会使用到第三方的类库,而它们又可能依赖着另外的Jar包,又得引入其他Jar包,而且我们很容易就会引漏掉~然后就会报错,有时候报的错会让我们花掉 ...
- HSSF、XSSF和SXSSF区别以及Excel导出优化
之前有写过运用POI的HSSF方式导出数据到Excel(见:springMVC中使用POI方式导出excel至客户端.服务器实例),但这种方式当数据量大到一定程度时容易出现内存溢出等问题. 首先,PO ...
- Spring ioc，aop的理解
什么是控制反转? 控制反转是一种将组件依赖关系的创建和管理置于程序外部的技术. 由容器控制程序之间的关系,而不是由代码直接控制 由于控制权由代码转向了容器,所以称为反转 依赖注入,作用是避免手工在各代 ...
- Android原生代码与html5交互
一.首先是网页端,这个就是一些简单的标签语言和JS函数: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- 重拾Python(2):如何安装第三方库（Windows）
使用python进行数据分析或者数据处理时,往往需要使用一些库,而使用库之前必须安装它.Anaconda内置了很多常用的第三方库,可以满足绝大部分需求,比如numpy.pandas.matplotli ...
- jQuery选择器概述
1.基本选择器:1) #id : 根据给定的id匹配一个元素:2) .class: 根据给定的类名匹配元素:3)element: 根据给定的元素名匹配元素:4)* : 匹配所有元素:5)selecto ...
- 100、RESTful API
本篇导航: RESTful RESTful API设计 基于django实现 基于Django Rest Framework框架实现 一.RESTful REST与技术无关,代表的是一种软件架构风格, ...
- python小白之路
阅读目录: 第一章:计算机基础 计算机硬件.操作系统.网络协议 第二章:python基础 初识python.常量变量.输入输出运算符.条件与循环语句.数字与字符串.列表与字典.元组与集合.阶段小测.字 ...
- ABP 数据迁移
我主要是在项目部署的时候.当添加一个租户的时候.那么租户是有一个单独的数据库.而我的并没有用多租户单数据库. 因此我的模块里面有一个领域事件 当租户添加时将生前表生成到对应的数据库中.如果那位网友有更 ...
- JVM学习(一)
一.gc日志查看与分析 在sever端的run.xml中run和debug中加入如下参数: <jvmarg value="-XX:+PrintGCDateStamps"/&g ...