JavaScript知识点概览

知识点

JavaScript中,每一条语句以分号结尾。

打印

document.write( );


<html>
<head>
	<title>title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var a = 10;
		document.write(a);    //页面输出“10”
	script>
head>
<body>

body>
html>

数据类型

  1. 基本数据类型:数字、字符串、布尔值、未定义值、空值。(单引号括起来的字符串只能含有双引号,同理,双引号只能含有单引号。
  2. 引用数据类型:数组、对象。



	
	
	




运算符

  1. 与运算:&& 。有假则假。
  2. 或运算:|| 。有真则真。
  3. 非运算:! 。直接取反。
  4. 条件运算符:三目运算符。条件?表达式1(true):表达式2(false);

类型转换

  • 隐式转换:自动进行的转换。

  • 显示类型转换

字符串转为数字:1.Number() 2.parseInt()和parseFloat();前者只是提取整数部分,后者不仅提取整数部分,还提取小数部分。
数字转字符串:1.与空字符串相加 2.toString();

转义字符

  1. ':英文单引号,":英文双引号
  2. document.write()中换行用“
  3. alter()中换行用“\n”

流程控制

  1. 条件判断:if…else if…else…
  2. 选择结构:switch
  3. 循环结构:while/do…while…/for…

2020/8/27 星期四 10:49:11


函数

//初体验



	函数
	s


  //绑定并调用函数赋值;






函数调用方法

  1. 直接调用

最常见的调用方式,一般用于“没有返回值的函数”。


  1. 在表达式中调用

一般用于“有返回值的函数”。


  1. 在超链接中调用

在a元素的href属性中使用“javascript:函数名”的形式来调用。



请点击

  1. 在事件中调用

给对应的标签绑定事件,触发进行调用





内置函数

parseInt( ) //提取字符串中的数字,只限提取整数。
parseFloat( ) //提取字符串中的数字,可以提取小数。
isFinite( ) //判断某一个数是否是一个有限数值。
isNaN( ) //判断一个数是否是NaN值。(即非数字的值
escape( ) //对字符串进行编码
unescape( ) //对字符串进行解码
eval( ) //把一个字符串当做一个表达式去执行


2020/8/30 星期日 11:34:32


JavaScript内置对象

字符串对象(以下str为变量名)

  1. 获取字符串长度:str.length
  2. 带小写转换:

转小写:str.toLowerCase()
转大写:str.toUpperCase()

  1. 获取字符串中第几个字符:str.chartAt(n);n为0~n数组下标 [空格也是字符串]
  2. 截取字符串:str.substring(start,end);[start,end)
  3. 替换字符串:str.replace(“原字符串”,“替换字符串”)或者(“正则表达式”,“替换字符串")
  4. 分割字符串:str.split(“分割符”)或者str.split(“分割符”,截取前N个元素)
  5. 检索字符串位置:

str.indexOf(“指定字符串”);有就返回“指定字符串”开始的下标,没有就返回-1
str.lastIndexOf(“指定字符串”);返回字符串最后出现的下标

数组对象(以下str为数组名)

  1. 数组的创建:

var 数组名 = new Array(元素1,元素2,。。。,元素n); //完整形式
简写:var 数组名 = [元素1,元素2,。。。,元素n]

  1. 数组的获取:document.write(str[0-n]);
  2. 数组的长度:str.length
  3. 截取数组某部份:str.slice(strat,end);[start,end)
  4. 为数组添加元素://可同时添加多个元素,以逗号隔开

从数组开头添加元素:str.unshift()
从数组末尾添加元素:str.push()

  1. 删除数组元素:

删除数组第一个元素:str.shift()
删除数组最后一个元素:str.pop()

  1. 数组大小比较:str.sort()

  1. 数组颠倒排序:str.reverse()
  2. 将数组元素连接成字符串:str.join(“连接符”)

时间对象

var 对象名 = new Date();

获取星期几:时间对象.getDay() //返回的是数字,比如星期4
weekday[时间对象.getDay()] //返回的是中文,比如星期四

  1. 用于获取时间的getXxx()方法

getFullYear():获取年份,四位数
getMonth():获取月份[0-11]
getDate():获取日数[1-31]
getHours():获取小时数[0-23]
getMinutes():获取分钟数[0-59]
getSeconds():获取秒数[0-59]

  1. 设置时间则将前缀改为setXxx()

时间对象.setFullYear(year,month,day)
时间对象.setMonth(month,day)
时间对象.setDate(day)
时间对象.setHours(hour,min,sec,millisec)
时间对象.setMinutes(min,sec,millisec)
时间对象.setSeconds(sec,millisec)

数学对象(无须new,直接调用属性跟方法,如:Math.PI)

  1. Math对象的属性

PI:圆周率 π
LN2:2的自然对数 ln(2)
LN10:10的自然对数 ln(10)
LOG2E:以2为底的e的对数
LOG10E:以10为底的e的对数
SORT2:2的平方根
SORT1_2:2的平方根的倒数
度数*Math.PI/180 :用来表示角度
//比如document.write(“sin30:”+Math.sin(30*Math.PI/180))), 输出sin30:0.49999999999999994

  1. Math对象的方法

max(a,b,c…,n):返回一组数的最大值
min(a,b,c…,n):返回一组数的最小值
sin(x):正弦
cos(x):余弦
tan(x):正切
asin(x):反正弦
acos(x):反余弦
atan(x):反正切
atan2(x):反正切
floor(x):向下取整
ceil(x):向上取整
random(x):生成随机数

  • random(x); 只能生成0到1之间的数,不包括1。
  • 如果要生成0到10,需要这样写Math.random()*10
  • 8~18:Math.random()*10+8
  • -8~2:Math.random()*10-8
  • 10~0:Math.random()*10-10 //都可以通过带入最小值0,最大值1来取得范围

2020/9/2 星期三 0:51:53


JavaScript核心技术 DOM基础

  • 首先解释一下DOM,即文档对象模型(Document Object Model),是W3C定义的一种标准,我们平时所用的hover,鼠标移到改变颜色等特效都是DOM提供的方法来实现的。可以说,DOM是对元素进行操作的。
  • DOM采用“树形结构",页面中的每一个元素都以”树节点"来表示。
  • 比如一个网页的DOM树形结构。html元素为树根,即根元素。html下一层又分为head和body,head当中又分为title和meta;body下又可以分P标签,a标签等等。这样一层一层的,就形成了DOM树形结构。

总结:每个元素就是一个节点,一个节点就是一个对象。所以对元素的操作,可以理解为使用这个对象的属性和方法。

最常见的DOM节点有三种:元素节点、属性节点、文本节点

比如:

//div标签就是元素节点,id=“menu”就是属性节点,“你好!"就是文本节点。
值得注意的是,节点 != 元素,而是节点包括元素。

nodeType属性
  • nodeType值可以区分节点类型。比如元素节点的nodeType值为1,属性节点为2,文本节点为3。

获取元素

  • getElementById( ); //通过id来选中元素。
    **注意:**在浏览器页面必须加载完,才能用getElementById(),因为没加载完,可能就找不到对应id名,就会报错。我们可以使用window.onload = function(){ };来告诉浏览器:“先加载完页面,再解析window.onload内部的代码"。
  • getElementsByTagName( ),注意别少写了个“s”。
    顾名思义,取标签名进行获取。一个网页中相同标签名有很多,所以他获取的是多个相同的标签元素,也就是获取的一个类数组。那么我们怎么取得想要的那个标签?

这里可以根据数组下标来选择。比如 < div id=“list” >下有多个li标签。需要选中第二个li标签。
var oul = document.getElementById("list"); //为什么不直接写第二句获取li,因为只写第二句就获取的是整个页面的li,写这一句是精确定位。
var oli = document.getElementByTagName("li");
oli[1] //这就表示取得

下的第二个li元素,其中oli.length可以获取类数组长度,可灵活使用。

补充:只有1.getElementsByTagName( )可以操作动态创建的DOM元素,getElementById( )不能。2.getElementById( )前面只能接document

  • getElementsByClassName( );通过class来选中。该方法也多了一个“s",说明也是获取了一个类数组集合。
  • querySelector(" CSS选择器 " );来选中满足条件的第一个元素。 //比如 document.querySelector("#main/.main");
  • querySelectorAll(" CSS选择器 " );来选中满足条件的所有元素。也可结合数组下标进行选择。
  • getElementsByName( );该方法也有“s",说明也是获取类数组集合。通过表单元素的name,来获取。一般只用于单选按钮和复选框。
  • document.title,由于一个页面只有一个title,所以可以直接用此方法修改。 //如 document.title="hello "
  • document.body,由于一个页面只有一个body,所以可以直接用此方法修改。

创建元素

理解:最开始在HTML中不存在某些元素,我们可以使用JavaScript创建元素,这种创建方式,我们可以称为“动态DOM操作”。

  • 创建元素节点:createElement( )
  • 创建文本节点:createTxtNode( )
    创建好了节点,那么我们怎么把它们放到HTML中去呢?
  • A.appendChild(B):将节点B放入节点A中。
//创建简单元素(不带属性)
var e = document.createElement( "元素名" );
var txt = document.createTxtNode( "文本内容" );
e.appendChild(txt);
//创建复杂元素(带属性)
//比如
var oInput = document.createElement( "input" );
oInput.id="submit";    //给元素属性赋值,即设置属性
oInput.type="button";
oInput.value="提交";
document.body.appendChild(oInput);   //将oInput加入到body

动态创建图片

var oImg = document.creatElement("img");
oImg.className = "pic";    //注意这里是className而不是class
oImg.src = "images/xx.png";  
oImg.style.border = "1px solid silver";   //注意这里的样式添加格式
document.body.appendChild(oImg);

插入元素

  • A.appendChild(B):将元素B插入到A的末尾,比如插入ul的最后一个li
  • A.insertBefore(B,ref):将元素B插入到A中的子元素ref 之前 ,比如插入ul的第一个li。
    (获取ul下的第一个子元素,我们可以用ul.firstElementChild方法,最后一个是lastElementChild

删除元素

  • A.removeChild(B):删除A中的B元素

复制元素

  • obj.cloneNode(bool)
    obj表示被复制的元素,bool值为真(1/true),则复制元素及元素下的所有子元素。为假(0/false)则只复制元素本身。

替换元素

  • A.replaceChild(new,old)
    将A元素中的旧元素old,替换成新元素new

JavaScript核心技术 DOM进阶

获取HTML属性操作

  • 获取HTML属性值: obj.attr
    obj为DOM对象,attr为属性名。比如 oBtn.id 表示获取按钮的id属性(oBtn表示按钮创建的对象)
  • 设置HTML属性值:obj.abbr = "值"

HTML属性操作(对象方法)

  • obj.getAttribute(“attr”)
    获取元素的某个属性的值,等价于 obj.attr,区别在于**obj.getAttribute(“attr”)**可以获取自定义属性(比如data属性),而obj.attr不能。
  • obj.setAttribute(“attr”,“值”)
    同样的,等同于 obj.abbr = “值” ,区别也在于自定义属性。
  • obj.removeAttribute(“attr”)
    删除属性
  • obj.hasAttribute(“attr”)
    判断元素中是否包含某个属性值,返回的是true/false

CSS属性操作

  • 获取CSS属性值:getComputedStyle(obj).attr
    attr表示CSS属性名,注意,这里的属性名比如font-size要写成fontSize,需要去掉“ - ”(因为“-”在JS代表减号),再写成驼峰命名法。
    比如getComputedStyle(oBox).backgroundColor
  • 设置CSS属性值:
    1. obj.style.attr = "值"
    这个是通过style对象来设置css属性,这里是等价于设置行内样式
    比如:oDiv.style.fontSize = "17px";
    2. obj.style.cssText = "值"
    这个可以不按照驼峰命名法,直接用平常的CSS写法。
    如:oDiv.style.cssText = "width:100px;height: 100px;background-color:red;"
  • getComputedStyle(obj).attrobj.style.cssText 其实都可以获取css属性,区别在于后者只能获取行内式,而不能获取内联式和外联式。前者都可以。

DOM遍历(即查找元素)(两个元素之间的“换行空格”也是一个节点)

查找父元素

  • obj.parentNode
    顾名思义,查找当前元素的父元素

查找子元素

  • childNodes、firstChild、lastChild
    childNodes获取所有子节点,包括元素节点和文本节点。firstChild第一个子节点。lastChild最后一个子节点。
  • children、firstElementChild、lastElementChild
    children只获取子元素节点、firstElementChild第一个子元素节点、lastElementChild最后一个子元素节点。
    如果想要获取指定子元素,可以用children[ i ]来实现。

查找兄弟元素

  • previousSibling、nextSibling、previousElementSibling、nextElementSibling
    previousSibling查找前一个节点、nextSibling查找后一个节点。
    previousElementSibling查找前一个元素节点、nextElementSibling查找后一个元素节点。

innerHTML 和 innerText

  • innerHTML
    可以很方便的获取和设置一个元素的“内部元素”(其中获取的是元素节点内部所有的代码内容,包括子元素节点、子属性节点、子文本节点)
var oP = document.createElement("p");  //一个属性一个属性地设置
oP.className = "test";
oP.style.border = "1px soild silver";  
document.body.appendChild(oP);

document.body.innerHTML = '

'; //用innerHTML更方便

  • innerText
    获取和设置一个元素的“内部文本”,注意,仅仅是文本内容。
    以前的firefox浏览器不支持innerText。都是用textcontent,因为他兼容所有浏览器。以前的textcontent等价于innerText,而现在这两种方式,所有的浏览器都支持。

事件基础

JavaScript下常见的事件有五种:

  • 鼠标事件
  • 键盘事件
  • 表单时间
  • 编辑事件
  • 页面事件

事件调用方式

  • 在script中调用
  • 在元素中调用

鼠标事件

  • onclick:鼠标单击。不局限于按钮,都可以设置。oBtn.onclick = function( ){alter("hello"); };
  • onmouseover:鼠标移入。oP.onmouseover = function( ){ this.style.color = "black" ;};
  • onmouseout:鼠标移出。oP.onmouseout = function( ){ this.style.color = "red" ;}; //一般两者搭配使用
  • onmousedown:鼠标按下。oBtn.onmousedown = function( ){ this.style.color = "blue" ;};
  • onmouseup:鼠标松开。oBtn.onmouseup = function( ){ this.style.color = "pink" ;}; //一般两者搭配使用

键盘事件

  • onkeydown:键盘按下
  • onkeyup:键盘松开

表单事件

  • onfocus和onblur
  1. onfocus表示获取焦点时触发的事件。onblur表示失去焦点时触发的事件。搭配使用。
  2. 判断元素是否有焦点,打开浏览器按Tab键,能选中的就是有焦点特性的元素。
  3. (这个就比如输入框中的提示文本,有焦点的时候,提示文本就会消失,没有焦点时,提示文本就会出现。而这种效果在H5中,可以用placeholder属性实现)
  4. 另外,比如百度首页,一打开,文本搜索框就自动获取到了焦点。这个是通过 “ focus( )" 实现的。
  • onselect
  1. 选中“单行文本”或“多行文本”中的内容时,就会触发onselect事件。
  2. 同样的,有时候我们点击搜素框中的文字,会自动选中,这种是通过“ select() ”实现的。一般用this.select()选中当前对象。
  • onchange
    单选框、复选框、下拉菜单中选择一项时触发。

编辑事件

  • oncopy:防止页面被复制
document.body.oncopy = function ()
{
  return false;
}   //就算鼠标右键可以复制,但是粘贴不出来。
  • onselectstart:防止页面内容被选取
document.body.onselectstart = function ()
{
  return false;
}  
  • oncontextmenu:禁止鼠标右键
document.body.oncontextmenu = function ()
{
  return false;
}  

页面事件

  • onload:表示文档加载完后再执行一个事件
window.onload = function ()
{
   ......
}  
  • onbeforeunload:离开页面之前触发的一个事件
window.onbeforeunload = function ()
{
   returnValue = "欢迎下次光临!";
}  

事件进阶

  • 事件处理器:就是前面用到的onclick这一类。
    有时候我们需要给同一个元素添加多个相同的事件,但是用JavaScript只能执行最后一个onclick。所以就不能实现。但是事件监听器可以。

事件监听器

  • 绑定事件:obj.addEventListener(type,fn,false) (为元素添加多个事件就用事件监听器。
  1. type 表一个字符串,指的是事件类型。比如单击事件用“click”,鼠标移入事件用“mouseover”,这里不需要加 “ on ”。
  2. fn 为函数名,或者匿名函数。
  3. false 表示事件在冒泡阶段调用。
  • 解绑事件:obj.removeEventListener(type,fn,false) (其中fn必须是一个具体的函数名,不能匿名)

event对象

event对象的属性

  • type:事件类型
  • keyCode:键码值,返回的是一个数值,即按键对应的键码值。
  • shiftKey:是否按下shfit键,返回布尔值
  • ctrlKey:是否按下Ctrl键,返回布尔值
  • altKey:是否按下Alt键,返回布尔值

调用这些属性的时候,可以直接用“e.type”,e可写成其他变量名,这是一个隐藏参数,即event对象,写成ev,a都可以。

this

指向当前对象。哪个DOM对象(元素节点)调用了this所在函数,那么this就指向哪个DOM对象。

window对象

一个浏览器窗口就是一个window对象。当我们打开一个窗口,浏览器就自动为页面创建一个window对象。

window对象的子对象

  • document:文档对象,用于操作页面元素
    一个窗口是一个window对象,窗口里面的HTML文档就是一个document对象,即document对象是window对象的子对象。
  • location:地址对象,用于操作url元素
  • navigator:浏览器对象,用于获取浏览器版本信息
  • history:历史对象,用于操作浏览器历史
  • screen:屏幕对象,用于操作屏幕宽度

window对象的常用方法

  • alter():提示对话框
    通常window.alter()可以简写成alter(),下同。alter()中的实现文本换行,用的是“\n”

  • confirm():判断对话框
    confirm()提高文字提示,并有“确认"和”取消"两个按钮,分别对应返回true或false。

  • prompt():输入对话框
    不仅提示文字,还能返回一个输入框中的字符串。

  • open():打开窗口
    window.open(url,target)。url表示新窗口的地址,target表示打开方式,跟a标签中用法一样。

  • close():关闭窗口

定时器

  • setTimeout():开启“一次性”定时器
    setTimeout(code,time); code可以是一段代码或者函数或者函数名(一般不需要带括号,带括号就要在外面加双引号),time为时间,单位ms
window.onload = function()
{
    setTimeout('alter("你好");',3000);
}
  • clearTimeout():关闭“一次性”定时器
  • setInterval():开启“重复性”定时器
    同setTimeout()语法一样,只是setInterval()是反复执行。
  • clearInterval():关闭“重复性”定时器

location对象

其属性有

  • href 获取当前页面地址,也可以是设置地址
var url = window.loaction.href;
document.write("当前页面地址为:"+url);

  • search 当前页面地址“ ? ”后面的内容
  • hash 当前页面地址“ # ”后面的内容

navigator对象

获取浏览器的类型

  • window.navigator.userAgent

document对象

通过window对象,我们可以操作窗口,比如打开窗口、关闭窗口。这些称为“BOM”,即浏览器对象模型。
通过前面所学,可以知道,BOM包括DOM。

document对象常用的属性

  • document.title,获取文档的title
  • document.body,获取文档的body
  • document.forms,获取所有forms元素
  • document.images,获取所有img元素
  • document.links,获取所有a元素
  • document.cookies,文档的cookie
  • document.URL,获取当前文档的URL,但不能设置地址
  • document.referrer,返回使浏览者达到当前文档的URL

document对象常用的方法

  • 此处省去document.getXxxByXxx( )这一系列方法介绍,因为前面已经介绍。
  • document.write():输出内容
  • document.writeln():输出内容并换行

2020/9/5 星期六 14:27:25

Edit By zeker , learning notes

你可能感兴趣的:(前端,-,后端须知,javascript,js)