关于js的一点笔记

1 .js的输入输出语句

方法	说明	归属
alert（msg）	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框	浏览器

2 .变量

2.1 变量使用

1. 首先声明变量

   var age; // 声明一个名称为age的变量
   

2. 赋值

   直接age=18；就把18赋给了age这个变量

3. 变量初始化

   var age='pink';
   
   

3 .数据类型

3.1 简单数据类型

简单数据类型	说名	默认值
Number	数字型	0
Boolean	布尔值类型，true，flase等价于1和0	false
String	字符串类型，如“张三”，注意字符串都带引号	“”
Undefined	var a；声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null;声明了变量a为空值	null

isNaN() 这方法是用来判断非数字 并返回一个值，如果数字返回的是 false 如果不是返回 true

特别的,isNaN会将空格字符转化为0

console.log(isNaN(12));返回false

3.2字符串型

3.2.1字符串长度

字符串通过length属性，可以得到整个字符串的长度

var str="asdadasd"
str.length;

3.2.2 字符串拼接

• 多个字符串之间可以使用+进行拼接，其拼接的方式为 字符串+任何类型=拼接后的新字符串
• 拼接前会把字符串相加的任何类型转化为字符串，再拼接成一个新的字符串

3.3 boolean型

布尔类型有两个值：ture和false，分别代表1，0

3.4 Undefined 和 Null

声明没被赋值的变量会是undefined

null是代表空值

3.5 获取检测变量的数据类型

typeof可用来获取检测变量的数据类型

typeof后面空格跟着变量

console.log(typeof 变量);

3.6数据类型转换

prompt获取过来的数据默认是字符串类型，此时不能进行加减乘除，需要转换变量的数据类型

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString());
String()强制转换	转成字符串	var num =1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+‘我是字符串’)；
parselnt（string）函数	将string类型转成整数数值型	parselent(‘78’)
parseFloat(string)函数	将string类型转换成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换成数值型	Number(‘12’)
js隐式转换	利用算术运算隐式转换为数值型	‘12’-0
parselnt(string)函数	将string类型转成整数数值型	parselnt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换成数值型	Number(‘12’)
js隐式转换（-/**）	利用算数运算隐式转换成数值型	‘12’-0
Boolean（)函数	其他类型转成布尔值	Boolean(‘ture’);代表空、否定的值都转为flase，其余true

特别注意，在alert中换行用\n，但是在document.write里，换行用< br / >

\n是对对话框文本的换行

4.运算符

javascript中很多运算符表达形式和c语言差不多，这里发现有些区别的地方

1. var a=(1>0)

   返回ture

   这是因为再js中，比较运算符如果正确会返回ture错误返回flase

5.流程控制

这一部分跟C语言也基本一致，没什么好说的

6.函数

在js中函数都是function来定义的

function 函数名（ ）{
}

函数的调用，js有独特的调用方式

在超链接中调用

<a href="javascript:函数名"></a>

    ==在事件中调用==

比如点击就是一个事件

两个重要的内置函数

parseint （）提取字符串中的数字，只限提取整数

parseFloat（）提取字符串中的数字，可以提取小数

7。字符串对象

我们只用掌握length这一个属性，在调用对象的属性时，我们要用到点运算符

1. 转换成大写字符串 字符串名 . toUpperCase() 转换成小写字符串 字符串名 . toLowerCase 这个方法得到的是值的转变，而实际字符串本身是没变的

2. 获取一个字符 字符串名 . charAt(n)

3. 截取字符串 字符串名 . substring（ start ,end ） 截取[start ,end)范围，end可以省略，表示截取到最后

4. 替换字符串 字符串名 . replace (原字符串，替换字符串)

   ​ 字符串名 .replace(正则表达式，替换字符串 ) 正则表达式 / 字符串 /g

    					==两种不一样，后者是替换字符串中所有相同的，而前者是替换字符串中第一个所选字符串==
   

5. 分割字符串 字符串名 . split（“ 分隔符”），把字符串分割成数组，分隔符可以是一个或多个字符或者一个正则表达式，此外，分割符不作为返回的数组元素的一部分

   特别的，如果分隔符为空字符，那么可以分割每一个字符

6. 检索字符串的位置 字符串名.indexOf(指定字符串) 这是找指定字符串首次出现的位置

   ​ 字符串名 . lastIndexOf(指定字符串) 这是找指定字符串最后一次出现的位置

   ​ 如果不含指定字符串，则会返回 -1

8. 数组对象

用法

var 数组名 ={"a" "c" "v" "v" "v"}

9.时间对象

语法

var 日期对象名 =new Date();

创建一个日期对象，必须使用new关键字

• 如果没有参数返回当前时间

10. 数学对象

11. DOM

11.1获取元素的方法

• getElementByld() 通过id选中

• getElenmentsByTagName() 通过标签

• getElementsByClassName() 通过class

• querySelector()和querySelectorAll() 前者是表示所选的第一个元素，后者表示第二个元素，两者的跟着的是选择器，所以该加 。的要加 。，该加# 的要加#

• getElementsByName() 是通过name属性来获取元素，一般用于表单元素，单选按钮和复选框

• document.title 和document.body.

  这些方法，在用的时候，用法都是 document.方法（“ 需要引用的”）

  如果放在head里，那就要加个window.onload=function {.........}

  如果这个方法在如果在body里，就一定要放到存放这个id属性标签的下方，否则会出错

  我们习惯的在DOM对象变量命名时候，以“o”开头，以表明这是一个DOM对象

11.1.1 getElementByld()

通过id选中元素

11.1.2 getElementsByTagName()

如果要指定某个父元素中的子元素时，我们先用id来选中父元素

创造元素

语法

var e1(变量名)=document.createElement("元素名");  //创造元素节点
var txt（变量名）=document.createTextNode("文本内容")  //创建文本节点
e1.appendChild(txt);                  //把文本节点插入元素节点中
e2.appendChild(e1);                 //把组装好的元素插入已存在的元素中

当给创造的元素赋予属性的时候，class不能用，因为class是保留字，所以我们用classname

总结：创造元素需要下面四步

1. 创建元素节点，
2. 创建文本节点
3. 将文本节点添加到元素节点中
4. 将元素节点添加到已有元素中去

除了appendChild还有insertBefore()

前者是将新元素插到父元素最后一个子元素后

后者是将元素插到父元素的一个子元素之前

用法

A.insertBefore (B,ref);     A是父元素，B是新子元素，ref 是指定的子元素

删除元素

语法

A.removeChild(B);A是被删除元素的父元素，B是被删除元素

复制元素

语法

A.cloneNode(bool) A表示被复制的元素，bool是个布尔值，取值
1或true 表示被复制元素本身以及复制该元素下所有的元素
0或false 表示仅仅复制元素本身，不复制该元素下的子元素

替换元素

A.replaceChild(new,old);A表示父元素，B表示新子元素，old表示旧元素

2 .DOM进阶

HTML属性操作（对象属性）

2.1 获取HTML属性值

语法

obj.attr  

(obj是元素名)，是一个DOM对象，指的是用元素操作得到的元素节点

attr是属性名

2.2 设置HTML属性值

obj.attr="值"；

2.3 使用对象方法来进行属性操作

1. 元素名.getAttribute(“属性”) 此方法和 元素名.属性一样可以获得元素某个属性的值，只是前者可以拿到自定义属性，而后者不行
2. 元素名.setAttribute(“属性” ，“值”) 此方法可以设置属性的值，同样，和前面的设置方式一样，但自定义函数不行
3. 元素名 .removeAttribute(“属性”) 移除元素的属性
4. 元素名.hasAttribute(“属性”) 用来判断元素是否含有某个元素，含有返回true，不含返回flase

总结

对象属性方式和对象方法方式都可以用来操作静态或动态DOM，只有对象方法方式才能操作自定义属性

css属性操作

同样分为获取和设置俩种

• 获取CSS属性值

  getComputedStyle(obj).attr

  obj表示DOM对象，也就是通过getElementByld()等方法获取的元素节点

  attr表示css属性名

• 设置CSS属性值

  设置一个CSS属性值，有两种方式可以实现

  • style对象

  • cssText属性

    obj.style.attr = "值"   attr是css属性名，attr要用驼峰命名，因为在这里，attr作为变量出现，变量不能用-
    obj.style.cssText= "值";   这个不用驼峰，就css什么样就什么样
    

DOM遍历

即查找元素

• 查找父元素

  可以用parentNode属性来获取

  obj.parentNode   obj是DOM对象,元素
  

• 查找子元素

  childNodes获取的是所有的子节点,firstChild lastChild 这里是获得所有节点,包括元素节点以及文本节点

  children .firstElementChild \ lastElementChild.获得的是元素节点 想获得任意节点可以用数组形式

  注意:空白也是节点,换行也是节点,是文本节点

• 查找兄弟元素

  • previousSibling查找前一个兄弟节点 nextSbling查找后一个兄弟节点
  • previousElementSibling 前一个兄弟元素节点 nextElementSibling后一个兄弟元素节点

• innerHTML和innerText

  • innerHTML获得的是元素内所有内容
  • innerText获得的是文本里内容

  attr.innerHTML="..
  ........
  "//将.........元素添加到或属性添加到元素中
  

事件

鼠标事件

事件	说明
onclick	单击
onmouseover	移入
onmouseout	移出
onmousedown	鼠标按下
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

键盘事件

1. 键盘按下：onkeydown
2. 键盘松开:onkeyup

表单事件

1. onfocus和onblur
2. onselect
3. onchange

onfocus表示获得焦点时触发的事件，onblur表示失去焦点时触发的事件

获得焦点和失去焦点特点的元素只有两种

1. 表单元素
2. 超链接

onselect当我们选中单行文本框或多行文本框内容时，就会触发

onchange用于具有多个选项的表单元素

编辑事件

• oncopy禁止复制
• onselectstart禁止选取文本
• oncontextmenu禁止鼠标右键

页面事件

• onload
• onbeforeunload

事件监听器

绑定事件

指的是用addEventListener()方法为一个元素添加事件

语法

obj.addEventListener(type ,fn ,false)
obj 是DOM对象   type是一个字符串   这个事件类型是不用加on前缀，单击事件就用click，鼠标移入就用mouseover
fn是一个函数名，或是一个匿名函数
false表示事件冒泡阶段调用

解绑事件

obj.removeEventListener(type,fn,false);

this

可以理解为，哪个DOM对象调用了this所在的函数，那么this指向的就是哪个DOM对象

窗口操作

打开窗口

window.open(url,target)   url 表示新窗口的地址，target 表示新窗口打开方式，和html一样

关闭窗口

window.close()方法是没有参数的

对话框

对话框有三种alert、confirm、prompt 都是window对象的方法是可以省略window前缀

alert无需多言，只是弹出对话框

confirm不仅弹出对话框，还带有确定和取消，确定返回ture，取消返回false

prompt不仅会提示文字，还带有一个文本框，以便用户输入字符串，返回字符串

定时器

setTimeout（code,time）code可以是一段代码，可以是一个函数，也可以是一个函数名，

time是时间，单位为毫秒，表示要过多久才执行code中的代码

clearTimeout()暂停

setlnterval(code，time)可以重复的调用，并用clearlnterval停止

document对象

document.URL属性来获取当前网页的地址

那window.location.href也可以获取当前页面URL，但是他们也有区别，前者只能读取，后者还可以操作