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.如果您在文档加载后使用该 ...
随机推荐
- JMeter之断言 - 响应文本
1. 响应数据: 2. 添加响应断言: 3.设置响应断言,本例中 设置 响应文本 中 包括 success 字符串的 为真,即通过. 4.如果设置 响应文本 中 包括 error 字符串的 为真, ...
- golang变量作用域问题-避免使用全局变量
最近遇到了一个变量作用域的问题,一个比较低级的问题,可能作为一个熟手不应该犯这样的低级错误,但是golang的语法特点可能让你稍微不注意就踩坑,嘿嘿. 变量作用域 全局变量的作用域是整个包,局部变量的 ...
- CSS样式中常用的字体名称
css中引入字体: @font-face { font-family: "AncientWar"; src: url('style/css/fonts/AncientWar.ttf ...
- nginx配置文件中的location理解
关于一些对location认识的误区 1. location 的匹配顺序是"先匹配正则,再匹配普通". 矫正: location 的匹配顺序其实是"先匹配普通,再匹配正则 ...
- C之多线程(例子很不错)
1.线程 线程池是一个树状结构. 多线程解决并发问题. 一个线程内部的执行顺序是线性的.而线程之间是乱序的. 若要创建一个多线程程序,它的参数必须是空指针类型. 变色龙程序: #define _CRT ...
- Linux下使用skipfish扫描网站漏洞步骤
skipfish是谷歌开发的网站安全扫描工具. 下载地址:http://pan.baidu.com/s/1kTC66lL svn更新地址(一般链接不上,网速很慢): http://skipfish.g ...
- 玩转spring boot——简单登录认证
前言 在一个web项目中,某些页面是可以匿名访问的,但有些页面则不能.spring mvc提供了HandlerInterceptor接口来应对,只需要重写preHandle方法便可以实现此功能.那么使 ...
- 17年年终总结——走过2017，迎来2018Flag
引言 记得大概从大学毕业到现在都没有写作啥总结性的文章了(ps:应该是没写过啥长篇大论了),所以也不知道怎么个起头.我也闲聊的方式起头吧. 其实跨入18年就想着写篇总结,总结下自己17年的得与失,不足 ...
- CodeChef Cards, bags and coins [DP 泛型背包]
https://www.codechef.com/problems/ANUCBC n个数字,选出其一个子集.求有多少子集满足其中数字之和是m的倍数.n $\le$ 100000,m $\le$ 100 ...
- SPOJ 7258 Lexicographical Substring Search [后缀自动机 DP]
题意:给一个长度不超过90000的串S,每次询问它的所有不同子串中,字典序第K小的,询问不超过500个. 第一道自己做的1A的SAM啦啦啦 很简单,建SAM后跑kth就行了 也需要按val基数排序倒着 ...