javascript基础06
splice
var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
splice方法有添加、删除、替换的功能,它有三个参数,第一个是位置,第二个是删除多少个,第三个是添加的东西。
String 对象
String 对象用来处理文本。 事实上任何一个字符串常量都是一个String对象,可以将其直接作为对象来使用。
获得字符串长度:length
提取字符串:
charAt() 这个是获取单个字符的。
substr() 从开始位置截取,第二个参数是截取长度
substring() 从开始位置截取,第二参数是结束位置,但不包括这个位置,它不能接受负数
slice() 与上面的一样,但可以接受负数
查找替换字符串:
indexOf() 获取指定字符串的首次出现的位置,第二个参数是获取位置的开始。
lastIndex() 获取指定的字符串最后出现的位置
replace() 替换局部字符串,第一个参数被替换,第二个为替换,在正则里也很有用
search() 查找到指定的字符串,并返回回来,在正则里也是这样
其他方法:
toLowerCase() 转成小写字母
oUpperCase() 转成大写字母
window对象
系统消息框 alert()
确认对话框 confirm()
输入对话框 prompt()
打开新窗口 window.open()
window.open("http://www.baidu.com","_blank","width=300, height=200");
定时器setInterva() , setTimeout():
定时器可以说是js前端最常用的工具,几乎所有的逐渐变化的动态效果都会使用到定时器,
比如 说图片滚动,渐隐渐现,拖拽等等.定时器分两种分别是settimeout和setinterval.
注意:
一、定时器在事件里或会出现多次执行这个定时器时,一定要清除定时器,不是定时器会叠加而出现定时器在加速的一样现象或怪异的
事情,这就是定时器叠加的问题,如果定时器叠加了,亡羊补牢是不行的,会发现怎么都清除不了了,所以一定要在定时器执行前清除一次,
因为清除定时器的方法就算没有东西可以给它清除,它也不会报错,因为这一点我们就不用怕清除空的变量会报错,所以大胆清除。
二、this与定时器,this在定时器里,它会指向window,这个问题,一定知道,不是以后会被这种问题弄的不敢使用this,this是上下文环境,
这个上下文环境就是所在的执行环境会受到哪个环境的影响,一般都是作用域的父级作用域,但总有些例外的如定时器,无论你在那里使用它
都是指向window,为什么呢?写着写着突然懂了。。。。。。
因为window.setInterval()。。。。懂了吗?它的上级执行环境是window啊啊啊啊啊啊啊。。。
如果不懂什么是执行环境,什么是作用域,请看javascript高级程序设计,里面有详细说明:第三版第四章4.2节
history对象
history对象是window对象的子对象,对应于浏览器的 历史记录。
window.history.go(-1); window.history.go(1);history.back(); history.forward();
Location对象
Location对象也是window对象的子对象,通过它可以获取或设置浏览器的当前地址。
1.跳转到其它页面window.location.href = "http://www.163.com"; location.href = "http://www.163.com";2.重新载入页面(刷新)location.reload();
navigator对象
Navigator对象包含着有关web浏览器的信息,它也是window的属性,可以用 window.navigator 引用它,也可以用navigator引用例:获取浏览器内部代号,名称,操作系统等信息var info = navigator.userAgent; alert(info);
ie8以下的版本判断:
/*ie版本获取开始*/ var DEFAULT_VERSION = "8.0"; var ua = navigator.userAgent.toLowerCase(); var isIE = ua.indexOf("msie")>-1; var safariVersion;if(isIE){safariVersion = ua.match(/msie ([\d.]+)/)[1];if(safariVersion <= DEFAULT_VERSION ){alert(safariVersion);} } /*ie版本获取结束*/
版本获取到了就可以干很多事情了,如兼容方面的,我们可以换一套样式表来在ie8以下表现出兼容的版本的网页,这个就像media查询一样。
以下是自己做的一个思维导图,人懒不想写了。
选择器目前就那么多,如果要分细,还有表格专用的选择器,表单专业的选择器。
操作表格的方法:
tHead : 头部
tBodies : 正文
tFoot : 尾部
rows : 行
cells : 列
如 oTab.tBodies[0].rows[1].cells[1].innerHTML
这是首先获取到表格的table元素,然后使用上面的操作获取但所需要的元素。
表单操作:
form标签的里面的name值很重要,比id重要。
他可以直接获取name值,获取文档对象
obj.name
如 <form id="from"> <input type="text" name="text1" > </form>var oFrom=document.getElementById("from");var oText=oFrom.text1;
注意前方高能:
在多方面的测试下,发现这些选择器大部分都不能动态获取的,就是在没有这个元素前去获取它,浏览器会报错的,而只有document.getElementsByTagName()可以
做到这一步,所以需要动态获取,还是标签选择器比较好。
下面为测试代码:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>/*在我的测试下,只有document.getElementsTagName()动态获取*/window.οnlοad=function(){var oTag1=document.getElementsByTagName("div");var oTag=document.querySelectorAll(".div");document.body.innerHTML="<div class='div'></div><div class='div'></div><div class='div'></div><div class='div'></div>";alert("querySelectorAll: "+oTag[1]);alert("TagName: "+oTag1[1]); }</script> </head> <body></body> </html>
每一日推:
今天来个文字搬运工
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>文字搬运工</title> <style> body{margin:0;padding:0;background:#EEE;font-size:14px;font-family:Arial, Helvetica, sans-serif; } ul{list-style:none;padding:0;margin:0; }#wrap{width:750px;margin:0 auto;border:10px solid #C6C6C6;background:#fff;padding:10px; } #wrap:after{content:"";display:block;clear:both; } #text{display:block;width:280px;height:400px;float:left;border:none;background:#FFC68C;padding:10px;outline:none;resize:none; }#btn{width:120px;height:400px;float:left;padding:15px;text-align:center; } #btn .btn0{width:100px;height:30px;text-align:center;outline:none;background:#ff7600;border:none;color:#CCC;cursor:pointer; } #btn .btn0:hover{background:#F95100; } #move{height:10px;width:100px;margin-left:15px;opacity:0;} #move li{float:left;margin-left:3px;background:#ff7600;width:10px;height:10px; } #move li.active{background:#F30; }#contains{width:280px;height:400px;padding:10px;float:left;background:#A6A6FF;word-wrap:break-word; }</style> <script> window.οnlοad=function(){var oText=document.getElementById("text");var oBtn=document.getElementById("btn");var oInp=oBtn.getElementsByTagName("input")[0];var oP=oBtn.getElementsByTagName("p")[0];var aSpan=oP.getElementsByTagName("span");var oUl=document.getElementById("move");var aLi=oUl.getElementsByTagName("li");var oContains=document.getElementById("contains");var num=1;oInp.offOn=true;oBtn.count=0;oBtn.num=0;for(var i=0;i<aLi.length;i++){aLi[i].index=i;}oInp.οnclick=function(){if(oInp.offOn&&oText.value!=""){oUl.style.opacity=1;clearInterval(oBtn.timer);oBtn.timer=setInterval(act,100);oText.val=oText.value;aSpan[1].innerHTML=oText.val.length;oInp.offOn=!oInp.offOn;clearInterval(this.timer);this.timer=setInterval(function(){beginMove();},100);}}function act(){aLi[oBtn.count].className="";oBtn.count=aLi[oBtn.num].index;aLi[oBtn.num].className="active";oBtn.num++;oBtn.num%=aLi.length;}function beginMove(){if(num<=oText.val.length){var arr=oText.val.split("",num);var str=oText.val.substring(num);oText.value=str;aSpan[0].innerHTML=arr.length;oContains.innerHTML=arr.join("");num++;}else{num=1;clearInterval(oBtn.timer);clearInterval(oInp.timer);oUl.style.opacity=0;oInp.offOn=!oInp.offOn;}}} </script> </head> <body><div id="wrap"> <textarea id="text"></textarea> <div id="btn"><input type="button" class="btn0" value="把文字右移"><p><span>0</span>/<span>0</span></p><ul id="move"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li></ul> </div> <div id="contains"></div> </div></body> </html>
转载于:https://www.cnblogs.com/520lin/p/5856482.html
javascript基础06相关推荐
- JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- JavaScript基础06-day08【if练习、条件分支语句switch、for循环】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
目 录 前言 JavaScript(基础+高级)配套资料下载 JavaScript 基础 学习地址 学习笔记 day 05(P001-P006)[2016.11.22] day 06(P007-P ...
- JavaScript基础和js概括
js内容概括: Html 结构化 CSS 样式 JavaScript 行为交互 01.JavaScript基础 02.JavaScript操作BOM对象 03.JavaScript操作DOM对象 ** ...
- JavaScript基础内容
1.1 JavaScript基础概念: JavaScript (ECMAScript) :JavaScript 是脚本语言.JavaScript和ECMAScript通常被人用来表达相同的含义,但是J ...
- JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...
- Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍 变量 变量类型 基本的数据类型Number String Boolean underfined null typeof运算符 引用的数据 ...
最新文章
- Exchanging Partitions and Subpartitions with Tables--官方文档
- 都21世纪20年代了,还有人问我学网络安全干嘛,你自己看吧
- boost::safe_numerics模块测试对文字的 constexpr 操作
- SharePoint开发 - Excel数据导入到SharePoint自定义列表(数据视图方式)
- 五个在线图形工具创建简单的设计元素
- Android onActivityResult中requestCode与resultCode区别
- html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
- html text align属性,CSS中的text-align属性怎么用
- 理清javascript的相关概念 DOM和BOM
- 360修复上不了网络连接服务器失败,360断网急救箱网络连接配置修复不了怎么办-修复不了的解决办法...
- python读坐标像素_python如何读取像素值
- html图片与文字的排版6,HTML文字与排版
- Fedora下使用flatpak安装QQ
- DS18B20的CRC验证算法
- 7-12 个位数字统计 (15 分)
- 实现太阳系行星公转动画实例(CSS+HTML5 源码)
- 戴尔服务器温度显示器,选择Dell UltraSharp 27的四大理由:有温度的科技更近人心...
- flutter bloc记录
- C# 上传WPS Excel 后台转换成txt,再压缩为ZIP
- 如何用JavaScript一次性抓取网站图片、种子等资源(正则表达式的应用)
热门文章
- PHP strtoupper函数解析
- 【JZ38 字符串的排列】
- 统计字符串中字幕出现的数量(Map案例)
- 初中三年级计算机表格考试模拟,初中三年要做这些事情,三张表格说透初中三年,收藏必看...
- android x86 5.1 微信,微信5.1终于来了!微信5.1安卓版正式发布
- Python 3,一行代码处理各种时间转换,从此跟datetime,time模块说拜拜 ~ ~ 不收藏算我输!!!
- 陌陌发布新版 增加阅后即焚和短视频功能
- 计算机组成原理是答案,计算机组成原理(上)_答案mooc
- 【实时渲染】屏幕空间特效和多边形技术
- 怎样恢复sd卡数据?靠这几个方法