关于JS的一些东西
1.声明Js代码域
1.在head标签中使用script声明js代码域
<head>
....
<!--声明js代码域-->
<script type="text/javascript">
function test(){
alert("哈哈,js学习起来很简单!!!");
}
</script>
</head>
2.在head标签中使用script引入外部声明的js文件
<head>
....
<!--声明js代码域-->
<!--引入外部声明好的js文件-->
<script src="js/my.js" type="text/javascript" charset="utf-8">
</script>
</head>
2.js的变量学习:
js的变量学习:
1 js的变量声明
使用var关键字进行变量声明,格式如下:
var 变量名=初始值;
例如: var a="呵呵";
2 js变量的特点
a、变量声明只有var关键字,声明的变量可以存储任意类型的数据。
b、js中的代码可以不适用分号结尾,但是为了提升代码的阅读性,建议使用分号。
c、js中的变量允许出现同名变量,但是后面的会将前面的覆盖。
d、声明不赋值,默认值是undefined
3 js的数据类型
使用换件typeof判断变量的数据类型
number:数值类型
string:字符类型,注意:在js中字符可以使用单引号也可以使用双引号
boolean:布尔类型
object:对象类型
4 js的变量强转
使用Number()函数:将其他数据类型转换为数值类型,转换失败返回NaN(not a number)
使用Boolean()函数:将其他数据类型转换为布尔类型,有值返回true,无值返回false;
5 特殊的值
null object
undefined undefined
NaN number
3.js的运算符和逻辑结构
等值符:==
如果类型一致则直接比较值,如果类型不一致则先使用Number强转为同一类型后再比较值
等同符:===
先判断类型,如果类型一致则再比较内容,如果类型不一致则直接fasle
4.js 的数组
1.js的数组的声明
var arr1=new Array();//声明一个空数组
var arr2=new Array(长度)//声明指定长度的数组。
var arr3=[]//声明一个空数组,也可以在声明时直接赋值,例如:var arr3=["a","b","c"];
2.js数组的使用
数组的赋值
数组名[角标]=值;注意:js中赋值可以跳跃角标赋值,不存在的角标也可以赋值,会对数组的大小进行改变。
3.数组的取值:
var 变量名=数组名[角标名]
注意:如果获取的角标没有数据,则返回undefined;
4.js的数组的特点
特点1:
js中的数组可以存储任意类型的数据。
特点2:
js的数组可以通过length属性动态的改变长度。可以增加,也可以缩短。
注意:
如果是增加,则使用逗号进行占位
如果是缩减则从后往前减少存储的数据。
5.js的数组的遍历:
普通for循环:for(var i=0;i<arr.length;i++){}
增强for循环:for(var i in arr){}
注意:增强for循环中,循环条件声明的变量记录的是角标。
5.js的数组的常用操作方法:
数组名.pop()//移除并返回最后一个元素。
数组名.push(要添加的数据)//在数组最后追加数据,并返回新的长度。
6.js的函数学习:
函数的声明:
第一种声明方式:
function 函数名(形参1,形参2,...){函数体....}
第二种声明方式:
var 变量名=new Function("形参名1","形参名2",....,"函数体"); 注意:在js中函数是作为对象存在的。
第三种声明方式:
var 变量名=function()(形参1,形参2,...){函数体....}
函数的形参:
在js中函数的形参在调用的时候可以不赋值,不报错,但是默认为undefined
在js中函数的形参在调用的时候可以不完全赋值,依次赋值。
注意:js中没有函数重载,只有函数覆盖。
函数的返回值:
在函数内部直接使用return语句返回即可,不需要返回值类型
注意:默认返回undefined;
函数的调用:
1、在加上代码域中直接调用(主要进行页面资源初始化)
2、使用事件机制(主要实现和用户之间的互动)
3、作为实参传递(主要是动态的调用函数)
注意:小括号为函数的执行符,函数名()才会被执行,直接函数名则作为对象使用。
注意:js的代码区域只有一个,包括引入的js代码,浏览器会将引入的js文件和内部声明的js代码解析成一个文件执行。js代码的调用和声明都在一个区域内。
7.js 的事件机制
单双击事件:
单击事件: onclick.
双击事件: ondblclick
鼠标移动事件:
鼠标悬停事件:onmouseover 当鼠标在HTML元素之上时触发
鼠标移出事件:onmouseout 当鼠标移出某个HTML
元素时触发
键盘事件:
键盘下压事件:onkeydown 当键盘被按下时触发
键盘弹起事件:onkeyup 当键盘弹起时触发
焦点事件:
获取焦点:onfocus 当获取焦点时触发
失去焦点:onblur 当失去焦点时触发值改变事件:
专门给select标签使用:
onchange事件当下拉框的值改变时触发
页面加载事件:
专门给body标签使用onload 当页面加载成功后触发
注意:
事件是作为HTML标签的属性来使用的。
一个HTML元素可以同时使用多个事件,但是注意事件之间的相互干扰。
8.js 的常用方法和对象
String对象:操作字符的。
使用:字符串.函数名即可
大小写转换:
toUpperCase() 转换大写
toLowerCase() 转换小写
字符串截取
substr(0,1) 从指定开始位置截取指定
长度的子字符串
substring(0,1) 从指定位置开始到指定的结束位置的子字符串(含头不含尾)
查找字符位置
indexOf 返回指定字符第一次出现的位置。
lastIndexOf 返回指定字符最后一次出现的位置。
Date对象:
使用: var 变量名=new Date();注意:获取的是客户端的时间,不能作为系统功能校验的时间的。
Math对象:
使用:Math.函数名
random()
round()
ceil()
floor()
Global对象
eval() 将字符串转换为js代码执行
isNaN() 判断Number强转后是否是数字
parseInt()
parseFloat()
9.js 的window 对象的常用属性
window对象的属性学习
opener属性
location属性:作用:地址栏属性,该属性是一个对象,封存了浏览器对地址栏的操作信息例如:url
使用:URL操作: window.location.href//返回当前网页的URL信息
window.location.href="资源路径"//跳转指定的URL资源。
页面刷新:作用:重新加载页面资源。window.location.reload();
history属性:
forward()//前进,相当于浏览器中的前进功能
back()//后退,相当于浏览器中的后退功能
go()//跳转指定的历史记录
screen属性:获取分辨率
window.screen.width
window.screen.height
10.js 的document 获取HTML 元素对象
documnet对象学习:
解释:
document对象是浏览器对外提供的封存了当前运行的HTML文档信息的一个对象
通过此对象可以让我们灵活的操作HTML文档,达到修改,完善HTML文档的目的。
使用:
document获取HTML元素对象
直接方式:
通过ID
var 变量名=document.getElementById("uname");//返回指定的HTML元素对象
通过name
var 变量名=document.getElementsByName("name属性值");
通过标签名
var 变量名=document.getElementsByTagName("标签名");
注意:返回的是存储了该网页中指定的标签的所有对象的数组。
间接方式:
父子关系:
先获取父级节点(参照直接方式)通过父级节点获取子节点数组
var 变量名=父节点对象.childNodes;
注意:子节点数组中会包含文本节点,可以使用nodeType属性筛选出来所有的HTML节点(nodeType值为1)
子父关系:
先获取子元素对象(参照直接方式)通过子元素对象获取父元素对象
var 变量名=子元素对象.parentNode
兄弟关系:
先获取当前元素,根据兄弟关系选择对应的获取方式
var 变量名=元素对象.previousSibling; //兄
var 变量名=元素对象.nextSibling; //弟
document操作元素对象的属性
获取:
元素对象.属性名//返回属性值
修改:
元素对象.属性名=值
注意:
不要修改标签的name和id属性
document操作元素内容:
获取HTML元素对象
获取:
元素对象.innerHTML :返回所有的内容包括HTML标签
元素对象.innerText :返回所有的文本内容,不包括HTML标签
操作元素的内容
修改:
元素对象.innerHTML="新的内容" HTML标签会被解析,覆盖原有内容
元素对象.innerText="新的内容" HTML标签不会被解析,覆盖原有内容
注意:
如果在修改是需要保留原有内容,则使用:元素对象名+="新的内容";
document操作元素对象的样式
获取HTML元素对象
操作样式:
添加样式:
元素对象名.style.样式名=样式值
修改样式:
元素对象名.style.现有样式名=新的样式值
注意:
还以通过元素对象.className="类选择器名"来添加样式。
document操作元素对象的文档结构
第一种方式:使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有子节点
父节点=子节点对象.parentNode
父节点.removeChild(子节点对象)//删除指定的子节点。
第二种方式:获取元素对象
新建节点:
var 变量名=document.createElement("标签名")//返回创建的HTML元素对象
添加节点
节点对象.属性=属性值// 设置节点属性的值
节点对象.appendChild(节点对象);
删除节点
节点对象.removeChild(节点对象);
11.js操作form表单
获取form表单对象
使用id: var fm=document.getElementById("fm");
使用name属性:var frm=document.frm;
获取form下的所有表单元素对象集合
fm.elements
form表单的常用方法
表单对象.submit();//提交表单数据。
form的属性操作:
表单对象名.action="新的值"//动态的改变数据的提交路径
表单对象名.method="新的值"//动态的改变提交方式
js表单元素的通用属性
只读模式:
readonly="readonly"//不可以更改,但是数据可以提交
关闭模式:
disabled="disabled"//不可以进行任何的操作,数据不会提交。
12.js操作form表单元素
js操作多选框、单选框
被选中状态下在js中checked属性值为true,未选中状态为false;
js操作下拉框:
被选择的option对象在js中selected属性值为true,未选中为false
js校验form表单
关于JS的一些东西的更多相关文章
- 借鉴一些关于js框架的东西
八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
- js 对象的_proto_
js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...
- 在Visual Studio上开发Node.js程序
[题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studio上的插件以方便开发.结果还真找到了一个,来自微软的Node.js Tools for Visual Studio ...
- 浅析JS中的模块规范(CommonJS,AMD,CMD)
如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS ...
- 浅析JS中的模块规范(CommonJS,AMD,CMD)////////////////////////zzzzzz
浅析JS中的模块规范(CommonJS,AMD,CMD) 如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. ...
- JS, Node.js, npm简介
序 听过JS,听过Node,也听过Node.js,还听过npm,然而并不是很清楚的知道都代表什么,这两天调接口,然后前端同学很忙,就自己把前端代码拿过来跑了,也趁机了解一下这几个概念,下边做个小的总结 ...
- node.js入门及express.js框架
node.js介绍 javascript原本只是用来处理前端,Node使得javascript编写服务端程序成为可能.于是前端开发者也可以借此轻松进入后端开发领域.Node是基于Google的V8引擎 ...
- js作用域和词法分析
都知道js中不存在类似于c++等语言的块级作用域,例如for循环中定义的变量,其实是属于当前对象下的属性,同一对象下可以随便访问.只有函数可以限定一个变量的作用范围,即函数才是变量的作用域. 对于函数 ...
随机推荐
- 445. Add Two Numbers II 链表中的数字求和
[抄题]: You are given two non-empty linked lists representing two non-negative integers. The most sign ...
- java 线程Thread 技术--volatile关键字
java 语言中允许线程访问共享变量,为了保证共享变量能被准确和一致的更新,Java 语言提供了volatile 关键字,也就是我们所说的内存一致性: 问题抛出:(尝试去运行下面代码,以及将volat ...
- tiny4412 --uboot移植(1)
开发环境:win10 64位 + VMware12 + Ubuntu14.04 32位 工具链:linaro提供的gcc-linaro-6.1.1-2016.08-x86_64_arm-linux-g ...
- Python开发——基础
注释 单行注释 # 被注释的内容 多行注释 """ 被注释的内容 """ 解释器路径 #!/usr/bin/env python # 用于L ...
- Django跨域(前端跨域)
前情回顾 在说今天的问题之前先来回顾一下有关Ajax的相关内容 Ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页 ...
- dpkg: error: dpkg status database is locked by another process
First run: lsof /var/lib/dpkg/lock Then make sure that process isn't running: ps cax | grep PID If i ...
- Available Captures for Rook LT999
On an 8 x 8 chessboard, there is one white rook. There also may be empty squares, white bishops, an ...
- Python中添加中文注释报错SyntaxError: Non-UTF-8 code starting with '\xc1'
问题:在文本编辑器中编辑Python文件时添加中文注释,运行python文件时报错.SyntaxError: Non-UTF-8 code starting with '\xc1' 解决方法:在文本开 ...
- SAS 逻辑库
SAS逻辑库 SAS逻辑库是一个或多个SAS文件的集合,用于组织.查找和管理 SAS文件.SAS逻辑库管理的SAS文件包括SAS数据集.SAS目录.已编 译的SAS程序,以及多维数据库文件等. 1.逻 ...
- SGU 176 Flow construction (有源有汇有上下界最小流)
题意:给定 n 个点,m 条有向边,如果有向边的标号是1的话,就表示该边的上界下界都为容量 ,如果有向边的标号为0的哈,表示该边的下界为0,上界为容量 ,现在问,从 1 到 n 的最小流是多少,并输出 ...