【2017-03-28】JS基础、DOM操作
一、JS基础
1、javascript功能
⑴进行数据运算
⑵控制浏览器功能
⑶控制元素的属性、样式、内容
2、javascript位置和格式
可以放在html页的任意位置,也可以创建一个以js结尾的文件内,将该文件引用到html页内
推荐放在<html></html>后边
<script type="text/javascript">
js脚本语言位置
</script>
3、3个常用对话框
alert("警告内容")--警告对话框
confirm("选择内容")--选择对话框 确认:true 取消:false
prompt("提示内容","输入内容")--输入对话框 提示内容和输入内容都可以为空
4、定义变量 var 变量名
定义变量是统一用var来定义,var在js中是唯一可以定义变量的
5、类型转换
1.其它类型转换为整数:parseInt("值"); 能转化数字返回数字,不能转化数字返回NaN
2.其它类型转化为小数:parseFloat("值"); 能转化小数返回数值,不能转化返回NaN
3.判断是否是数字: isNaN("值") ; 是数字返回false,不是数字返回true
6、js与C#的关系
js与C#拥有同样的运算符,if语句,for循环,数组(C#有集合,结构体,js只有数组),函数
7、数组
定义 var s = new Array();
赋值 s[0]=46,s[1]="snow"
取值 s[i]
8、函数
定义函数:function aaa(){函数体}; aaa是函数名
调用函数: aaa();
<script type="text/javascript">
var arrall = new Array(); for (var i = ; i < ; i++) {
var arr = new Array();
arr[] = prompt((i + ) + "请输入姓名:");
arr[] = prompt((i + ) + "请输入性别:");
arr[] = prompt((i + ) + "请输入年龄:");
arr[] = prompt((i + ) + "请输入成绩:"); arrall[i] = arr;
} for (var i = ; i < arrall.length; i++) {
for (var j = i + ; j < arrall.length; j++) {
if (arrall[i][] < arrall[j][]) {
var zhong = arrall[i];
arrall[i] = arrall[j];
arrall[j] = zhong;
}
}
} alert('姓名:' + arrall[][] + ',性别:' + arrall[][] + ',年龄:' + arrall[][] + ',成绩:' + arrall[][] + ',第一名!'); </script>
二、DOM操作
1.先定义找到一个按钮方法的变量
var s=document.getElementById("按钮的id")
2.点击事件
s.onclick=function(){
函数体
}
3.window操作
⑴window.open("网页路径","_self/_blank","width=400 height=400 top=200 left=200")
打开一个新的窗口,_self在自身打开,_blank在新窗口打开,宽400px 高400px 距离顶部200px 距离左侧200px
⑵window.close()关闭当前窗口
关闭打开当前子窗口的源窗口:window.opener.close();
⑶window.scrollTo(x,y) 滚动页面到某个位置,x横向滚动位置,y纵向滚动位置。一般情况下x是0,调整Y值,相当于锚点
⑷window.history.go(n) 页面前进/后退 n如果是正数则前进n个页面,n如果是负数则后退n个页面
window.history.back();页面后退
window.history.forward();页面前进
⑸window.location.href 获取当前页面地址
window.location.href="路径"; 修改页面地址,会跳转页面(点击从自身跳转)
【2017-03-28】JS基础、DOM操作的更多相关文章
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- js函数 DOM操作
回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...
- JQuery基础DOM操作
DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...
- JS的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- JS基础---Dom的基本操作
DOM的增删改查 增: 1.创建一个元素节点 document.createElement() 创建新的<p> 元素:var para=document.createElement(&qu ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 5月16日上课笔记-js中DOM操作
一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...
随机推荐
- jetty各个版本对应的jdk版本
1:jetty各个版本信息 版本号 发布及维护年份 托管平台 JVM版本 支持的协议 servlet版本 JSP版本 目前状态 9.3 2015 Eclipse 1.8 HTTP/1.1 (RFC 7 ...
- 分布式任务队列Celery入门与进阶
一.简介 Celery是由Python开发.简单.灵活.可靠的分布式任务队列,其本质是生产者消费者模型,生产者发送任务到消息队列,消费者负责处理任务.Celery侧重于实时操作,但对调度支持也很好,其 ...
- css权重计算规则
1.第一等:代表内联样式,如 style=" ",权值为1000: 2.第二等:代表ID选择器,如 #content,权值为0100: 3.第三等:代表类,伪类和属性选择器,如 . ...
- 分布式文档系统_document查询内部原理
1.客户端发送请求到任意一个node,成为coordinate node2.coordinate node对document进行路由,将请求转发到对应的node,此时会使用round-robin随机轮 ...
- Java基础知识(JAVA中String、StringBuffer、StringBuilder类的区别)
java中String.StringBuffer.StringBuilder是编程中经常使用的字符串类,他们之间的区别也是经常在面试中会问到的问题.现在总结一下,看看他们的不同与相同. 1.可变与不可 ...
- vue中less的使用
1.安装:npm install less less-loader --save 2.修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加 ...
- C++了解free和delete
(转自:http://www.cnblogs.com/mrye/archive/2012/09/01/2667079.html) void MyMethod1() { using namesp ...
- mysql 解锁
show OPEN TABLES where In_use > 0;show processlist;show status like 'Table%';show status like '%l ...
- EOS 开发终极神器-vscode (你绝对找不到的干货)
https://eosfans.io/topics/323 前言:最近一直苦于EOS开发没有好用的IDE,用了很多,试了很多,都让人觉得有些差强人意.于是乎笔者在经过,长时间的查找实践中,终于找到了e ...
- [js]顶部导航和内容区布局
自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...