js初步用法
js
js引入方式:
1.方式一
通过script标签引入
2.方式二
通过script标签引入 ,src属性 引入一个外部的js文件
注意: 如果你使用了script标签的src属性 那么在其标签体内的js代码不起作用了
语法:
1.ECMAScript语法规范
livescript
2.BOM浏览器对象模型
3.DOM文档对象模型
1.变量定义:
var i=1;
var m;
js中也有注释一说:
单行注释//
多行注释 /**/
语句结束分号结尾 可以不写 建议写上
2.数据类型
原始类型:
Undefined:变量初始值 如果函数没有返回值 你却接收了
String:用""引起来
Number:数值
Boolean:true|false
Null:null 一个对象的占位符
typeof运算符 它会判断当前变量的数据类型 如果它是原始类型 会返回数据类型的类型值(小写) 如果不是返回一个object
引用类型:
new 对象();
3.控制语句
跟java基本一致
if for
4.运算符
跟java基本一致
关系运算符
> >= < <=
1.比较双方 如果都是number类型 跟java一致
2.比较双方 都是普通字符串 它会比较两者的ascci码
3.比较双方 一方是number 一方是可以转换成number累性 隐式转换再比较
4.比较双方 一方是number 一方是不可转化字符串 直接返回false
等性运算符
==
===
== 比较两个变量字面值相同即可返回true
=== 在比较字面值相同的基础之上 判断类型是否相同
5.函数
定义
方式一
function 函数名(参数列表){
js代码块
}
方式二 匿名函数
var f=function (参数列表 ){
}
注意:
调用函数
函数名(参数列表);
参数声明过程 参数列表不写类型
如果你想要有返回值 只需要在函数结束结束用return 关键字 返回结果即可
6.事件
表单提交事件
单击事件 onclick
页面加载成功事件 onload
事件绑定
方式一
通过标签的事件属性来绑定
方式二
派发机制
元素.事件名=function(){
}
var obj=document.getElementById("ID");
定时器:
定义:
方式一
setInterval(函数名,周期性的间隔的毫秒值);
方式二
setInterval("函数名()",周期性的间隔的毫秒值);
方式三
setInterval(function(){
js代码块
},周期性的间隔的毫秒值);
两种定时器
定时器定义的函数会有一个返回值 返回值就是它的id
1.周期性定时器
var intervalId=setInterval(函数名,周期性的间隔毫秒值)
2.一次性定时器
var timeoutId=setTimeout(函数名,延迟的毫秒值);
清除定时器:
1.清除周期性定时器
clearInterval(周期性定时器的id);
2.清除一次性定时器
clearTimeoout(一次性定时器的id);
BOM 浏览器对象模型
Window:
//如果是你要获取的是window的属性 或方法 window可以不写
常用属性:
用它获取其他几个常用属性
var history=window.history;
history===window.history
常用方法:
弹出框类:
alert("信息");//弹出警告框
confirm("你确认删除吗");//弹出一个确认框
prompt("输入信息的提示信息",默认值);//弹出一个输入框 如果你确定 返回你输入值 如果取消 null
定时器:
打开和关闭:
open(url);
close();
History:
forward:前进一个页面
back:后退一个页面
go(1);
1:前进一个页面
-1:后退一个页面
Location:
href:设置值 跳转
dom操作
获取元素
var obj=document.getElementById("");
//获取值
obj.value
//设置值
obj.value=值
//获取标签体内容
obj.innerHtml;
//设置
obj.innerHtml=值
使用正则表达式校验数据
1.编写正则表达式
1.用户名的正则:var reg=/^[a-z0-9_-]{3,16}$/
2.密码:/^[a-z0-9_-]{6,18}$/
3.电子邮箱:/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
4.空字符串: /^\s*$/
2.使用正则表达式的test()方法
reg.test(value);
事件总结:
必须掌握:
onsubmit:表单提交事件
onclick:单击事件
onload:页面加载成功事件
onfocus:获取焦点
onblur:丢失焦点
需要了解:
跟鼠标相关:
onmouseup:鼠标弹起
onmousedown:鼠标按下
onmouseover:鼠标悬停
onmouseout:鼠标离开
onmousemove:鼠标移动
ondblclick:鼠标双击
跟键盘相关:
onkeyup:按键弹起
onkeydown:按键按下
onkeypress:按键按下并弹起
跟表单相关:
onreset:重置表单事件
onchange:改变事件
DOM
文档对象模型
document节点
元素节点:
属性节点:
文本节点
查询操作:
获取元素:
1.document.getElementById("x");//获取标签的iD属性值为x的一个标签
2.document.getElementsByTagName("y");//获取标签名为y的一组标签(多个)
3.document.getElementsByName("z");//获取标签的name属性为z的一组标签
4.document.getElementsByClassName("w");//获取标签的class属性为w的一组标签(多个)
//获取值:
obj.value
//设置值:
obj.value=值
//获取标签体的内容
obj.innerHtml;
//设置标签体:
obj.innerHtml="<a href='#'>点我试试</a>";
//获取样式
obj.style.css属性名:如果有- 去掉 驼峰式命名
//设置
obj.style.css属性名=css属性值
扩展-其他的api:
document:
createAttribute(name):创建一个属性节点
createElement():创建一个元素节点
createTextNode(data):创建一个文本节点
element:
appendChild():添加子节点
数组:
语法:
var arr1=new Array();//创建一个空数组
var arr2=new Array(size);//创建一个指定长度的数组
var arr3=new Array(ele1,ele2,ele3...);//创建一个数组 并且初始化数据
注意:
js的数组中没有长度可变
js数组中可以存放不同类型
属性:
length:长度
arr.length
常用方法:
join();//用指定的风格符 拼接字符串
往数组头部添加数据
unshift();
从数组头部删除数据
shift();
往数组尾部添加数据
push()
从数组尾部删除数据
pop()
会改变数组的结构
sort();
reverse();
js的引用类型
1.Array:数组
在js中 原始类型 string boolean number
引用类型中 string boolean number
称之为原始类型的包装类 原始类型.方法();
2.String:
new String(s);//object typeof运算符 object
String(s);//它是原始类型
常用属性:
length:长度
常用方法:
substring(startindex,endindex);[)
slice(startindex,endindex);
endindex:取值可以为负数
-1:倒数第一个
split();切割字符串
replace(正则表达式)
match(正则表达式);
3.Number
new Number();//object
Number();//原始类型
4.Boolean
new Boolean();//object
Boolean();//原始类型
5.RegExp:
/直接量写法/
test()
6.Math:
Math.PI
Math.random();
Math.round();
7.Date
var date=new Date();
常用方法:
getTime();
toLocaleString()
8.全局函数
尝试转换为int整形数值
parseInt();
尝试转换为float浮点数
parseFloat();
强制转换数值类型
Number();
强制转换成字符串
String();
encodeURI():编码
decodeURI():解码
eval()//计算 JavaScript 字符串,并把它作为脚本代码来执行。
js初步用法的更多相关文章
- JS 正则表达式用法
JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- jQuery each和js forEach用法比较
本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- (转)Javascript模块化编程(三):Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 【笔记】关于require.js 的用法
最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化. 网上有不少很好的学习文章这 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
随机推荐
- Cache与主存之间的全相联映射,直接映射和组相联映射的区别
2017-02-22 注:本文并非原创,来自百度文库,只是觉得写得较好,故分享之.若是某人的知识产权,望告知!谢谢 1.高速缓冲存储器的功能.结构与工作原理 高速缓冲存储器是存在于主存与CPU之间的一 ...
- Spring Bean声明周期
Bean的生命周期 理解Spring Bean的生命周期很容易.当一个bean被实例化时,它可能需要执行一些初始化使它转换成可用状态.同样,当bean不再需要,并且从容器中移除时,可能需要做一些清除工 ...
- Linux more命令
more命令类似与cat命令,却比cat命令强大,它以全屏幕的方式按页显示文本文件的内容,支持vi中的关键字定位操作. 1.快捷键 space, z 向下翻页b,ctrl+b 向上翻页 E ...
- 将 ssh (security shell) 移植到 vxworks
openssh 依赖 openssl,这两个东西主要针对posix系统,移植到 vxworks 等实时系统有相当的难度. 可以考虑移植如下的库(ssh server): dropbear: https ...
- UVA10341:Solve It(二分+math.h库)
题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/E 题目要求:p*e-x+ q*sin(x) + r*co ...
- POJ1459:Power Network(dinic)
题目链接:http://poj.org/problem?id=1459 题意:有n个结点,np个发电站,nc个消费者,m个电力运输线.接下去是m条边的信息(u,v)cost,cost表示边(u,v)的 ...
- Linux界面交互与目录结构
一.交互通道 Linux系统环境默认有六个命令交互通道和一个图形界面交互通道,默认进入的是图形界面通道. 命令交互模式切换:ctrl+alt+F1-F6 图形界面交互模式:ctrl+alt+F7 ...
- boost 智能指针intrusive_ptr
boost::intrusive_ptr一种“侵入式”的引用计数指针,它实际并不提供引用计数功能,而是要求被存储的对象自己实现引用计数功能,并提供intrusive_ptr_add_ref和intru ...
- Java泛型三:Java泛型详解
原文地址https://www.cnblogs.com/lzq198754/p/5780426.html 1.为什么需要泛型 泛型在Java中有很重要的地位,网上很多文章罗列各种理论,不便于理解,本篇 ...
- 成员函数查找[条款24]---《C++必知必会》
调用一个成员函数,涉及三个步骤:第一步,编译器查找函数的名字:第二部,从可用候选者中选择最佳匹配函数:第三步,检查是否具有访问该函数的权限. #include<iostream> usin ...