logo logo
RogevnBlog
banner
NEWS LETTER

js编程指南

Scroll down

JavaScript笔记

js简介

JavaScript是什么

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言（脚本就是一段程序用来完成某项特殊功能）

js的特点

  1. 向HTML页面中添加交互行为

  2. 脚本语言、语法和java类似

  3. 解释性语言边解释边执行

  4. 一般用来编写客户端脚本

  5. 独立于平台

为什么要学习js

  1. 美化网页

  2. 缓解服务器端压力

基本结构

1
2
3
<script type="text/javascript">

</script>

引入js的方法

  1. 使用<script>标签（可以加在HTML文件的任意地方）

  2. 外部js文件

    1
    <script src="index.js"></script>

  3. 直接在HTML标签中

    1
    <span onclick="javascript:alert('Hello world')"></span>

核心语法

变量

  1. 先声明变量再赋值

​ 例如：var width；

​ var用于声明变量的关键字

​ width=5；

​ width是变量名

  1. 同时声明和赋值变量

​ var catname-“ ”；

​ var x，y，z=10；

  1. 不声明直接赋值（不推荐）

​ width=5；

命名规则

  1. 有数字字母下划线和$组成，不能有空格

  2. 首字母不能是数字

  3. 不能用js关键字与保留字

  4. 区分大小写

  5. 最大长度为255

数据类型

typeof（）：用于检测变量的返回值（特殊的运算符）

注：undefined和null和NaN的区别：尽管两个值相等但它们的含义不同，undefined未对该变量赋值 null表示赋了一个空值 NaN是一种number数据类型

String对象

字符串对象.length 返回字符串的长度

.CharAt(2) 返回字符串指定位置的字符

.substring(3,5) 返回截取的字符串

.slice(3,5) 返回截取的字符串

（第一位指从哪开始截取，第二位指截到哪一位）

.substr(2,3) 返回截取的字符串

（第一位指从第几位开始截取，第二位指从那一位基础上向后截取几个字符）

.indexof(str,3) 查找某个字符在字符串中首次出现的位置

.split(“ “) 将字符串分割成为数组，将空格作为分隔符

数组

数组：存储一组数据的基可以是任意数据类型

创建的三种方式

//定义并赋值

var 数组名=new Array(“1”,”2”,”3”)；

//先定义后赋值,长度由最大的决定

var 数组名=new Array(2);

a[0]=”1”;

a[1]=”2”;

//不定义直接赋值

var 数组名=[“1”,”2”,”3”];

数组的方法：

push属性：向数组末尾添加元素并且返回新的数组长度

join() 使数组元素以()里的符号进行连接

sort 对数组排序

function paixv（a,b）{

return a-b;

}

document.write(attr.sort(paixv))

pop() 删除数组末尾的元素（返回的是删除的元素）

unshift() 在数组前面添加元素（返回的是数组元素总数）

shift() 在数组前面删除元素（返回被删除的元素）

splice（2,2）从数组指定位置向后删除元素

splice有三个参数：第一个参数是删除的起始位置

第二个参数是删除的数量

第三个参数是在原位置添加的元素（可以是多个用逗号隔开）

运算符

类型 运算符
算术运算符 +、-、*、/、%、++、–
赋值运算符 =,+=，-=，*=，/=，%=
比较运算符 >、<、>=、<=、==、=、!=、!==
逻辑运算符 &&，||，！

优先级：！>算术运算符>比较运算符>赋值运算符>&&>||

选择结构

if判断语句

var i=0;

    if(i<=10){

        true返回值

    }else{

        false返回值

}

三元运算符：2+3 ？ true：false；

switch判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
switch(i=1){

        case i=0:

            alert("0")

            break;

        case i=1:

            alert("1")

            break;

        case i=2:

            alert("2")

            break;

        default:

            alert("num")
    }

循环结构

for循环

1
2
3
4
5
var i=0;

for (i = 0; i < 10; i++) {
    document.write(i);
}

while循环

1
2
3
4
5
var i=0;
while(i<10){
   document.write(i)
   i++
}

do while循环

1
2
3
4
var i=0;
do{
   document.write(i)
}while(i>1) //至少执行一次

函数

系统函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
parseInt(“字符串”) 将字符串转换为整形数字，只取整数值
parseFloat(“字符串”)将字符串转化为小数

//如果是字符串就返回NaN
isNaN（） 用来检测是否为数字，返回boolean类型（是返回flase）

eval() 将参数的字符串转化成js代码运行

alert(“提示文字”) 普通弹窗
点击确定返回false

confirm（“提示文字”） 确定弹窗
点击确定返回true，点击取消返回false

prompt（“提示文字”） 文本框弹窗
点击确定将文本框文字返回

自定义函数

1
2
3
4
5
function 函数名（参数1，参数2，…）{

//执行方法

}

内置对象

Date对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  var date=new Date() //创建日期对象

    date.getFullYear()  //获取当前年份

    date.getMonth()+1   //获取当前月份

    date.getDay()      //获取当前星期数字0\~6

    date.getDate()     //获取当前天

    date.getHours()     //获取当前小时

    date.getMinutes()   //获取当前分钟数

    date.getSeconds()   //获取当前秒数

    date.getTime()      //返回从1970年至今的秒数

Math对象

1
2
3
4
5
6
7
8
9
Math.PI         //获取圆周率

Math.ceil()     //对数字进项上舍入

Math.floor()    //对数字进项下舍入

Math.round()    //对数字进行四舍五入

Math.random()   //返回0\~1之间的随机数

String对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var str="asdfghjkl";

str.length           //返回字符串的长度

str.charAt(2)        //返回指定位置的字符

str.substring(3,5)   //返回截取的字符（从第三到第五位）

str.substr(2,3)     //返回截取的字符串（第一位指从第几位开始截取，第二位指从那一位基础上向后截取几个字符）

str.slice(3,5)      //返回截取的字符串（第一位指从哪开始截取，第二位指截到哪一位）

indexof(str,f)      //查找某个字符在字符串中首次出现的位置

str.split(" ")      //将字符串分割成为数组，将空格作为分隔符

Array对象

    var arr=new Array()

    arr.push        //向数组末尾添加元素并且返回新的数组长度

    arr.join()      //使数组元素以()里的符号进行连接

    // sort     对数组排序

    //  function paixv（a,b）{

    //      return a-b;

    // }

    // document.write(attr.sort(paixv))

    arr.pop()       //删除数组末尾的元素（返回的是删除的元素）

    arr.unshift()   //在数组前面添加元素（返回的是数组元素总数）

    arr.shift()     //在数组前面删除元素（返回被删除的元素）

    arr.splice(2,2) //从数组指定位置向后删除元素

    // splice有三个参数：第一个参数是删除的起始位置

    //                  第二个参数是删除的数量

    //                  第三个参数是在原位置添加的元素（可以是多个用逗号隔开）

Global对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var str="adsfghj"

var num=4415465;

escape(str)         //对字符串编码

eval("alert(str)")   //把字符串解析为JavaScript代码并执行

isNaN(str)    //判断一个值是否是数字，是返回false不是返回true

parseInt()　　　 //解析一个字符串并返回一个整数

parseFloat()　　//解析一个字符串并返回一个浮点数

number() 　　　 //把对象的值转换为数字

string()        //把对象的值转换为字符串

BOM

事件

  • onload 一个页面或一幅图像加载完成

  • onclick 鼠标点击某个对象

  • onmouseover 鼠标移到某个元素上

  • onmouseout 鼠标下移

  • onkeydown 键盘按键按下

  • onchange 域的内容被改变

window对象

setInterval(“函数名”，1000) 节拍器

setTimeout(“函数名”，1000) 定时器

open(“弹出窗口的URL”,”窗口名称”,”窗口特性”)

width，height 窗口文档显示区的高度和宽度

left，top 窗口的x，y轴

toolbar=yes/no 是否显示浏览器的工具栏默认为yes

scrollbars=res/no 是否显示滚动条

close()

history对象

.length 返回历史列表中的网址数

.go(-1) 加载某个指定的页面

.back() 返回上一个页面的URL

.forword() 返回下一个页面的URL

location对象

host 设置货返回主机名和当前URL的端口号

hostname 设置或返回当前URL的主机名

href =url（‘ ’） 设置或返回当前完整的URL

.reload() 重新加载当前文档

.replace() 用心的文档替换当前文档

appCodeName 返回浏览器的代码名

appName 返回浏览器的名称

appVersion 返回浏览器的平台和版本信息

platform 返回运行浏览器的操作系统平台

DOM

什么是DOM

操作HTMl文档提供的属性和方法

节点（Node）

  • HTML中每个标签或元素都是一个节点

  • 整个文档是一个文档节点

  • 每个HTML标签是一个元素节点

  • 包含在HTML元素中的文本是文本节点

  • 每个HTML属性是一个属性节点

注释属于注释节点

因此一个HTML文件可以看作是所有元素组成的一个节点树，各元素之间有级别的划分

document

document是window对象的子对象，通过使用document对象可以对文档中的对象内容等进行访问

document常用属性：

referrer返回载入文档的URL

URL返回当前文档的URL

    //获取class名为aaa的元素

    document.getElementById(“#aaa”)

    // 获取name标签为ming的元素

    document.getElementsByName(“ming”)

    // 获取标签为p的所有元素

    document.getElementsByTagName(“p”)[0]

   

    // 获取class名为aaa的所有元素

document.getElementsByClassName(“.aaa”)[0]

innerHTML 获取设置标签及内容

innerText 获取设置内容

节点获取

    var sp=document.getElementById(“mylist”)

    var p=document.getElementById(“demo”)

    sp.parentNode       //返回节点的父节点

    sp.childNodes[0]    //返回子节点的集合

    sp.firstChild       //返回节点的第一个子节点

    sp.lastChild        //返回节点的最后一个子节点

    sp.nextSibling      //返回下一个节点

   sp.previousSibling  //返回上一个节点

以上方法每个标签秋垵后都会有一个text空格的标签原因是html的缩进

 

sp. children      //获取所有的子元素

    sp.firstElementChild  //返回节点的第一个元素子节点（包含内容）

    sp.lastElementChild   //返回节点的最后一个元素子节点

    sp.nextElementSibling //返回下一个元素节点

    sp.previousElementSibling   //返回上一个元素节点

节点信息

nodeName：节点名称（文本nodeName名永远是#text，文档名永远是#document）

nodeValue：节点值（不适用于文档节点和元素节点）

nodeType：节点类型

节点类型 nodeType值
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

设置获取属性

getAttribute(“属性名”) 用来获取属性的值

setAttribute(“属性名”,“属性值”)用来设置属性的值

节点操作

创建节点

document.createElement(“a”);

插入节点

        A.appendChild(B)        //把B节点追加至A节点末尾

        A.insertBefore(B,C)     //把B节点插入到C节点之前

   

        A.cloneNode(boolean)    //复制某个指定的节点元素

    true：复制该节点以及内部所有节点 false：只复制该节点及其属性

删除和替换节点

ul.removeChild（） 删除节点

ul.replaceChild(new node,old node) 替换节点

获取元素样式

style属性，只能获得内联样式表中css样式

l2.style.backgroundColor

document.defaultview.getComputedstyle（节点，null）

document.defaultView.getComputedStyle(l2,null).backgroundColor

获取定位的元素

offsetParent返回一个指向最近，包含该元素的父定位元素

offsetTop div元素上方偏移量

offsetLeft div元素左侧偏移量

clientwidth是一个只读属性返回元素的内部宽度以像素为单位，包括内边界但不包括垂直滚动条、边框和外边距

offentwidth和offentHeight=边框+padding+滚动条+内容

clientwidth和clientHeight=padding+内容

获取滚动条数据

滑动滚动条，获取元素滚动条到元素左边或顶部的距离

    var div=document.getElementsByTagName(“div”)[0]

    div.onscroll=function(){

        p.innerText=div.scrollTop.toFixed()

        p.innerText=div.scrollLeft.toFixed

    }

RegExp对象（正则表达式）

var reg=new RegExp（）或 var reg=/^…$/

1.[]:表示一个字符,该字符可以是[]中指定的内容

[abc]:这个字符可以是a或b或c

[a-z] :表示任意一个小写字母

[a-zA-Z] :表示任意一个字母

[a-zA-Z0-9_] :表示任意一个数字字母下划线

[^abc] :该字符只要不是a或b或c

2.预定义字符:

. :表示任意一个字符,没有范围限制

\d :表示任意一个数字,等同于[0-9]

\D :表示不是数字

\w :表示任意一个单词字符,等同于[a-zA-Z0-9_]–单词指字母/数字/_

\W :不是单词字符

\s :表示任意一个空白字符

\S :不是空白字符

3.量词:

?:表示前面的内容出现0-1次

+:表示前面的内容最少出现1次

*:表示前面的内容出现任意次(0-多次)—匹配内容与+一致，只是可以一次都不写

{n}:表示前面的内容出现n次

{n,m}:表示前面的内容出现最少n次最多m次

{n,}:表示前面的内容出现n次以上(含n次)

4.()用于分组,是将括号内的内容看做是一个整体

(abc){3} 表示abc整体出现3次.

(abc|def){3} 表示abc或def整体出现3次.

RegExp方法

exec（） 检索字符串中指定的值。返回找到的值，并确定其位置。

test （） 检索字符串中指定的值。返回 true 或 false。

支持正则表达式的String对象方法

search 检索与正则表达式相匹配的值。

match 找到一个或多个正则表达式的匹配。

replace 替换与正则表达式匹配的子串。

split 把字符串分割为字符串数组。

Other Articles
cover
系统
Linux指令
  • 23/09/18
  • 18:15
  • 2.5k
  • 10
cover
Java
Java SE笔记
  • 23/09/18
  • 18:15
  • 17.1k
  • 67
© 2023- 2023 长生风月
The blog has been lovely to run day