day13 JS Dom
js两种存在形式
1：文件
2：块
放到body标签底部 防止加载js超时页面反应慢的问题 声明变量
name = "sb"; //全局变量
var age=18; //局部变量 字符串
var name = "alex"
name.charAt(1) //获取第一个元素
name.substring(0,3) //切片
name.indexOf('a') //获取'a'的下标
name.length //获取name长度 数组 字典
var li= [11,22,33] //var li = Array('11,22,33') 创建效果一样
li.push(44) //往后插入44
li.unshift(00) //往前插入00
li.splice(1,0,'sb') //往指定位置(下标为1)插入'sb' 中间元素必须是0
li.pop() //从后面移除一个
li.shif() //前边移除一个
li.splice(1,2) //从第一个下标拿走两个，2指的是个数
li.slice() //切片拿
concat //合并 n=['test'] m=li.concat(n)
li.reverse() //反转 var dic = {'k1':'v1'} 序列化反序列化
JSON.stringify(dic) //序列化
JSON.parse(s) //反序列化 循环语句(列表两种for循环，字典一种)
li = [11,22,33,44];
for (var item in li){
console.log(item,li[item]);
} //循环出来的是li列表的下标或字典的key for (var i=0;i<li.length;i++){
console.log(i,li[i])
} 异常处理
try{ }catch(e){ }finally{ } 函数
普通函数
function func1(arg){
console.log(arg);
return "sb";
}
var ret = func1(123);
console.log(ret);
匿名函数
自执行函数
(function(arg){
console.log(111,arg); })('SB');
面向对象
http://www.cnblogs.com/wupeiqi/articles/5369773.html
第二篇：Dom
document
1查找元素 基本的有三个
tags = document.getElementsByTagName('h1'); //通过tag找
document.getElementById //通过Id找
document.getElementsByClassName //通过class找 document.getElementsByName(username) //通过name获取，用于input标签
2操作元素
tags[0].innerText = '123' innerText 对div中间的内容的值进行获取修改用 例子：按钮，数字自加
<body>
<div>
<div id="num">1</div>
<input type="button" value="+1" onclick="Add()" \>
</div>
<script>
function Add() {
var nid = document.getElementById('num');
var text= nid.innerText;
text = parseInt(text);
text +=1;
nid.innerText = text; }
</script>
</body> 例子：搜索框 onfocus onblur
<body>
<input type="text" id="search" value="please input keywords" onfocus="Focus();"onblur="Blur();" \>
<script>
function Focus(){
var nid = document.getElementById('search'); //找到它
var value = nid.value; //获取他的内容
if (value =="pelease input keywords"){
nid.value = "";
}
} function Blur(){
var nid = document.getElementById('search'); //找到它
var value = nid.value; //获取他的内容
if (!value.trim()){
nid.value="please input keywords"
}
} </script>
</body> 创建标签（两种方式）
<body>
<div id="container"></div>
<a href="http://www.sou.com" onclick="return AddElement();">添加</a>
<script>
function AddElement(){
/*
//创建标签，添加至container中
var nid = document.getElementById('container');
var tag = "<input type='text'\>";
nid.innerHTML = tag;
return false
*/
var createObj = document.createElement('a'); //通过对象的方式创建标签
createObj.href = "http://www.so.com";
createObj.innerText = "搜索"; var nid=document.getElementById('container');
nid.appendChild(createObj); console.log(createObj);
return false; }
</script>
</body> 标签属性
<div> 没有name属性，如果要设置默认不存在时的属性（自定义属性） 需要用 setAttribute('name','aaa')
className = class //obj.classNmae = '';
对于style， nid.style.fontSize = ''; //-后的字母换成大写去掉杠
对于所有标签属性都的可以用 getAttribute get... del... 提交表单
//可以用submit 还可以用js 加onclick实现
//搜狗的地址：https://www.sogou.com/web?query=aa
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<div onclick="Submit();">提交</div>
</form>
<script>
function Submit(){
document.getElementById('form1').submit();
}
</script>
</body> 第二个例子 <body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<input type="submit" onclick="return MySubmit();" value="提交"/>
</form>
<script>
function MySubmit(){
var q =document.getElementsByName('query')[0];
if(q.value.trim()){
return true;
}else{}
alert("输入内容")
return false
}
</script>
</body> 定时器跑马灯
//setInterval
//clearInterval
//setTimeout <head>
<meta charset="UTF-8">
<title>你有新短消息</title>
</head>
<body>
<script>
setInterval("Func()",1000);
function Func(){
var text = document.title;
var firstChar = text.charAt(0);
var subText = text.substring(1,text.length);
var newTitle = subText + firstChar;
document.title = newTitle
}
</script>
</body>
http://www.cnblogs.com/wupeiqi/articles/5369773.html
day13 JS Dom的更多相关文章
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
随机推荐
- Iaas/paas/saas 三种模式分别都是做什么?
任何一个在互联网上提供其服务的公司都可以叫做云计算公司.其实云计算分几层的,分别是Infrastructure(基础设施)-as-a- Service,Platform(平台)-as-a-Servic ...
- pom文件继承与聚合
1.简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId和version等Maven项目必须的元素:可以配置Mave ...
- 如何编写Robot Framework测试用例1---（基本格式篇）
引子 我们使用符合Robot Framework规范的一种表格语法来编写测试用例.用例一般会是下面这个样子 这样的表格存储到一个文件中,就是一组测试用例.RF支持多种格式,如HTML,TSV,纯文本等 ...
- UAF——use after free
本文系pwn2web原创,转载请说明出处 UAF 漏洞,英文原名use after free,该漏洞简洁的可以概括为 分配一块内存 free该内存但不回收,构成悬垂指针 再次构造分配同样大小的内存,按 ...
- BZOJ 3513 idiots
题目传送门 分析: FFT一手统计两根棍子相加的方案 然后一个值2S可能会被同一根S自己乘自己得到 然后要减去 其次,A+B和B+A会被算成两种方案,所以还要除以2 然后不太好算合法的方案数,但是非法 ...
- 几种常见的排序方法总结（Python）
几种常见的排序算法总结(Python) 排序算法:是一种能将一串数据依照特定顺序进行排序的一种算法. 稳定性:稳定排序算法会让原本有相等键值的记录维持相对次序.也就是如果一个排序算法是稳定的,当有两个 ...
- 强大的 Python 任务自动化工具！invoke 十分钟入门指南
接着前面的<tox 教程>,以及刚翻译好的<nox文档>,我们继续聊聊 Python 任务自动化的话题. nox 的作者在去年的 Pycon US 上,做了一场题为<Br ...
- 【WPF学习】第二十八章 程序集资源
WPF应用程序中的程序集资源与其他.NET应用程序中的程序集资源在本质上是相同的.基本概念是为项目添加文件,从而Visual studio可将其嵌入到编译过的应用程序的EXE或DLL文件中.WPF程序 ...
- Docker扩展内容之容器开机自启
前言 部署项目服务器时,为了应对停电等情况影响正常web项目的访问,会把Docker容器设置为开机自动启动. 在使用docker run启动容器时,使用--restart参数来设置,具体参数如下详解 ...
- Docker底层架构之简介
简介 Docker 底层的核心技术包括 Linux 上的命名空间(Namespaces) 控制组(Control groups) Union 文件系统(Union file systems) 容器格式 ...