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 字符串,并把它作为脚本代码来执行。

时间: 2024-10-17 05:01:30

js初步用法的相关文章

JS 正则表达式用法

JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证. 替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字. 根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. JS 正则表达式基本语法 在对正则表达式的功能和作用有了初步的了解之后,我

Js相关用法个人总结

Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr.length;i++) { obj[i] = pushArr[i]; } obj.length = pushArr.length; console.log(obj); //{0:11,1:22,2:33,3:44,4:55,5:66,length:6} 在js中为对象添加属性和方法 var obj = {

require.js的用法

关于拖延症的话题我在Hacker News上不断的看到有人提出来(你也读了,不是吗?),感觉有必要将我是如何跟拖延症做斗争的方法分享给大家.然而,我这里说的主要是针对程序员/美工,但其实任何人都可以使用.首先最重要的-. 它不是那些老套陈旧的动机心理学扯谈. 我并不是说那些传统的应对拖延症的方法理论不对,只是对我无效.当正经历极度消沉的时候,我通常听到的理论的最后一句话是"You just DO IT!".我有很多的事情要去做.但我不会去阅读你那400页的治疗拖延症手册,也不会执行你那

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padd

iScroll.js的用法

一.iScroll.js的用法 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动.很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头.页尾或者是一个内容可滚动的中间区域. 然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力

【笔记】关于require.js 的用法

最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式--前端模块化. 网上有不少很好的学习文章这里推荐阮一峰老师的:http://www.ruanyifeng.com/blog/2012/11/require_js.html 下面是本人归纳的一些要点: 1.使用require.js 必须从官网下载 require.js 文件 http://www.requirejs.cn/ 打开官网便可以下载

js webstorm用法

js  webstorm用法 一.什么是webstorm? WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能. ----------工欲善其事,必先利其器 二.下载和安装? 1.官网下载地址:http://www.jetbrains.com/webstorm

js模块化编程(三):Require.js的用法

转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的用法 介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战.我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多

Javascript模块化编程:require.js的用法

Javascript模块化编程:require.js的用法 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script