Javascript简介:(是什么,做什么)
是基于对象和事件驱动的脚本语言,应用于客户端。
基于对象:已经提供了很多对象,不用我们创建,可以直接拿过来使用
事件驱动:事件的本质其实就是用户的操作(你每做一个动作,网页上就会产生相应的页面反应:比如拉动按钮换图片):html做网页静态效果,javascript做动态效果。
客户端:专门指浏览器(通俗易懂的解释就是js是一种用户与网页互动的语言,可以在网页上添加一些交互操作)
Js的组成
Javascript由三部分组成:js基础,文档对象模型(DOM),浏览器对象模型(BOM)
(ECMAScript, document object model, browser object model)
1.ECMAScript:(js的核心)
我们可以理解为是一个标准,定义了js的一些基础(包括基本语法,数据类型,对象,变量,关键字等简单来说就是定义了js应该是什么样子),我们都知道计算器其实是很笨的,它只认识0和1,而这个ECMAScript就是我们写的js代码与计算机之间的桥梁,因为它定义了js代码的标准,而浏览器解析js代码的引擎标准就是根据ECMAScript来说实现,我们可以把它理解为嵌套在浏览器内核中的一个解释器,可以将js代码解析为0和1给让计算机能看懂。同时计算机返回的信息也是0和1,照样也要通过ECMAScript标准来解析成我们可以看的懂的东西给我们来看。这是js的核心,假如没有它,计算机会认为我们写的全是乱码,识别不了,自然也就没有互动效果了。但是它也仅仅只能做一些简单的功能(比如加减乘除,定义变量等,想要更复杂的交互,就需要下面两个东西)
2. 文档对象模型(document object model)
理解:赋予了我们操作文档的能力,可以使用js里面dom提供的对象,使用对象的属性和方法,对标记性文档(html和xml)进行操作,开始需要将文档解析成一棵DOM树
既然需要对标记性文档进行操作,那么就需要把标记性文档里的内容全部封装成对象,总共有四部分,如上图所示,有document文档,element元素(标签),Attribute属性(id等一系列属性)和文本对象(指的是标签之间的内容),这些统称为node(节点),也就是在html中每一个标签在js中都有此标签对应的对象
其中关于属性操作的几个方法:
- getAttribute(“属性名称”):获取属性里面的值
- setAttribute(“属性名称”,”属性值”):设置属性值
- removeAttribute(“属性名称”):删除的是属性值,而不是删除属性名
关于文档对象模型的几个对象的常用方法
Document对象:指向的是整个html文档
getElementById(id值)
getElementsByTagName(标签名称)
getElementsByName(标签中的name属性)
querySelector(选择器):
例如获取id为content的选择器:document.querySelector('#content'),只能获取到第一个匹配的选择器
querySelectorAll(选择器):
获取到此选择器运用打的所有元素数组,可以用下标选择其中的第几个
element对象:指向文档中的所有标签
1. element.appendChild():向元素添加新的子节点,作为最后一个子节点
2. element.firstChild:返回元素的第一个子元素
3. element.lastChild:返回元素的最后一个子元素
4. element.innerHtml:设置或返回标签间的内容
5. element.getAttribute(“属性名称”):获取此属性名称对应的值
6. element.setAttribute(“属性名称”,”属性值”):设置或更改属性值
7. element.removeAttribute(“属性名称”):删除的是属性值,而不是删除属性名
Attribute属性对象:指向标签中的所有属性
1.attr.name:返回属性名称
2.attr.value:返回属性值
(这些操作对象都是层层嵌套的,比如操作元素的是文档,操作属性和文本内容的是元素(element))
3.浏览器对象模型(browser object model)
用途:用于操作浏览器
BOM Window -----窗口对象(重点)顶层对象,所有的Bom对象都在window里面操作的
JS中的事件
Js的事件代表的是由用户动作来触发函数的一种机制,你可以选择点击事件,鼠标移入移出等事件
onclick:点击事件,当用户在某个元素上点击后触发的事件
onmouseover和onmouseout:鼠标移入和鼠标移出触发事件
onmousedown、onmouseup:鼠标按下和鼠标释放事件,任意按键均可触发
点击事件和鼠标按下事件的区别:
- 点击事件只有鼠标左键点击即可触发,鼠标按下事件是鼠标任意键按下都可以触发
- 点击事件鼠标左键按下并抬起才可以触发 鼠标按下事件是只要按下鼠标即可触发
onmousemove 鼠标移动事件,只要鼠标在该元素上移动即可触发
下面的前提是:我们的事件是绑定在父元素上面
onmouseleave 鼠标离开dom元素事件 移动到子元素上不算离开,不会触发onmouseleave事件
onmouseout 鼠标离开dom元素事件 移动到子元素上也算离开,会触发onmouseout事件
onmouseover 鼠标移入dom元素事件 从子元素移动到父元素上也算移上,会触发onmouseover事件
onmouseenter 鼠标移入dom元素事件 从子元素移动到父元素上不算移上,不触发onmouseenter事件
以上的鼠标事件 都有一个内置的参数 表示鼠标对象(event),我们可以通过console.log(event)打印看看,里面记录了关于此事件信息
给元素起id的用途,以及如何通过id获取元素(内含例子)
元素中的id就相当于我们的身份证,是唯一的,不能重复,它除了能让我们配置id选择器之外,更大的用途在于能配合js选中元素进行网页互动操作,下面举个例子:
<input type="checkbox" id="checkbox" onmouseover="div.style.display='block'">
<div id="div" style="display: none">请注意信息保密</div>
上面两句代码实现了当鼠标移入多选框时,会出现下面div中的提醒,为什么会出现这种效果呢?
我们在多选框上添加了一个鼠标移入的事件,而这个事件的代码内容就是div.style.display='block'
剖析上面代码内容:
- div:指的就是下面那个div的id值
- 他们之中连接的点我们可以翻译为‘的’
总阐述:当鼠标移入到多选框时,将id为div的元素的样式中的属性赋值为block
但是上面的写法其实存在一定的问题:兼容性问题,假如在ie浏览器中执行这段代码,则会出现错误提示,div这个id是未定义的,所以想通过id获取元素更具兼容性,需要像下面这样写:
document.getElementById(“元素id”)
get:获取 Element:元素也就是标签 By:通过 Id:元素id值
整合起来的意思就是:通过id获取元素
使用js改变元素的样式
想在js中改变指定元素样式分两步:
- 获取到指定元素
- 修改样式
例子:
function toBlock() {
var div = document.getElementById('div'); //获取元素
div.style.display="block"; //修改样式
}
只要是修改单独的某个属性,我们都采用上面的写法改变样式
唯有一个例外,就是引入整个class选择器中的样式时,因为class是js的关键字,所以引入时不能写class(如div.style.class),那么我们只能用以下写法(引用名为box的class选择器写法)
function toBlock() {
var div = document.getElementById('div'); //获取元素
div.className ="box"; //为id为div的元素添加class为box的类选择器
}
以上两种修改样式的本质都是在元素内部加上了自己添加的内容,
第一种:display:block
第二种: class=box
假如使用了两种方式添加,第一种先添加,第二种后添加,而box中又有display属性,则此属性无效,因为优先级原因,此属性被先添加的覆盖,无法生效,所以建议使用Js修改样式时统一用一种,要么单属性添加,要么类选择器添加,比较不会乱
选择器优先级:
*<标签<class<id<元素内部样式
Js中的函数
函数产生的原因?
就像我们上面举得例子一样,我们所写的事件和事件的代码内容都可以写在元素内,但是这样做会有一个弊端,假如我们要改变一个元素的多个样式,那我们就要在元素内部不断的通过document.getElementById(“元素id”)获取元素,再去改变样式,显得代码相当的不简洁,不美观,这个跟我们写css样式表是一个道理,我们比较少把样式直接写在元素上,而是会采用内外部样式表的方式来采用样式,等需要这个样式的时候直接采用就行了,而函数就是来封装我们的js网页互动代码的,殊途同归,而函数中我们能声明一个变量来存储元素,例如let element=document.getElementById(“元素id”)
这样当我们js代码中用到此元素的时候我们就能用这个变量名去代替后面的document.getElementById(“元素id”),而不用每次想获取元素都写这句,极大地简化了代码,简而言之,函数的产生是为了体现代码的美观和重用性
使用关键字function声明函数
(参数作用:用来接收数据,完成函数功能,建议调用时形参有几个,实参就写几个,不用定义类型)
函数的声明仅仅是一个声明,只是告诉我们有这么个东西,而它想要生效需要我们去调用,这就相当于我们国家的法律,只有触发了法律它才会生效,没犯法的话它就是个摆设
其实还有定义函数的另一种方式,但是不推荐,上面的写法等价于
let 方法名=function(参数列表){
//方法体;
//返回值可有可无(根据实际需要);
}
函数里的形参
什么时候我们需要在函数里设置形参呢?
当我们函数声明时,在执行体中有不确定的参数的时候,我们就可以设置形参,举个最简单的例子,我们想设置一个div的背景色,而这个背景色只有函数调用的时候根据具体的参数才能确定,这时候我们就可以设置一个color参数,具体调用函数时再传入具体red,green,black等颜色,如果不采用形参的话,那就得有多少种颜色就得写多少个函数,跟基础是学的多态是一样的,不简便,跟我现在在公司做的删除用户,传参设置用户id与用户名称功能类似
Js的变量类型以及变量的一些基础知识
Js的变量类型:
基本类型:number string Boolean null(忽略) undefined(未定义)
引用类型:Object function
什么情况下变量类型会是undefined?
- 这个变量从未定义过
- 变量虽然定义了,但是没赋值,这时候也会是undefined类型
如何获取具体值的类型?
使用关键字typeof(连起来的,注意):例如:typeof(“abc”)返回String
假如一个变量为null,则typeof求它的类型则是Object
innerHtml,value,innerText (获取标签后+点+此属性)
Value值得是标签内的值,并且是表单元素(标签)的特有属性,而innerHtml指得是开始标签和结束标签之间的值, 用于设置或返回指定标签之间的 HTML 内容,返回内容时原样输出,而innerText也是返回指定标签之间的内容,但是它会自动取出标签,只展示标签中的文本内容
这三个js函数所对应的jquery函数分别是val(),html(),text()
括号里面不跟参数是获取,跟参数是设置