本文共 61984 字,大约阅读时间需要 206 分钟。
1.1 网页由三个部分组成:html结构、css表现、js行为。
标签上属性特点—— 属性名=“属性值” 例如: 样式属性上样式格式—— style=“ 样式名:样式值;样式名:样式值” 例如: 我们两个人的选择,
html(Hypertext Markup Language)是超文本标记语言;html使用不同的标签来构成网页中不同的组成部分。
一个最基本的HTML页面: <—————————— 这个是html5的文档声明 <—————— 告诉浏览器使用什么字符集去解析网页文件网页标题 网页正文
标签常分为块和内联元素;—————— div块没有语义,主要用来布局,span内联没有语义,主要用来选中文字,然后为文字设置样式 (1)通常用块去布局,所以块元素中可以有内联元素,而内联元素中一般不要有块元素奥!!!! (2)a标签中可以包含任何其他元素; (3)p标签中不可以包含任何块元素;块元素是独占有一块位置;而内联元素是内容有多少就占用多少;块元素默认高度是由内容决定,宽度默认是父元素100%;而内联元素宽度和高度都是由内容决定的块元素和内联元素区别:除了本质结构的区别外,样式也有区别;核心就是块元素的盒子模型和相关边距对相邻元素的影响,(1)块元素内边距影响盒子大小,但不影响内容区,外边距上左影响本身移动,右下外边距影响相邻元素移动。(2)行内元素,内外边距的水平影响和块元素一样,但是垂直方向会覆盖或者溢出占用相邻元素。行内元素简单说就是水平方向好使,垂直方向不太灵。同理行内元素的盒子模型和相邻元素的影响。盒子模型的:内容区、边框、内边距、外边距》》》》》》》》》》》》》》》》》》》 细节注意点《《《《《《《《《《《《《《《《《《《(1)块元素有内容区可以设置,但是行内元素无法设置width、heigth;(2)块元素设置内边距也正常(会影响相邻元素位置),但是行内元素左右边距设置正常(影响左右相邻元素),上下内边距有点异常现场(是会直接覆盖相邻上下元素奥!!!) span标签转为点样式: span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; }
块点状的超链接———— * * * * 类似于这样的超链接。 a{ width: 5px; height: 5px; background-color: black; margin: 2px 2px; float: left; }
html实在是太丑了,怎么办能让页面好看些呢?————css【层叠样式表】
Css可以对网页进行装饰,所谓层叠,是将网页想象成一层一层的结构;层次高的覆盖层次低的;css可以为网页的各个层次设置样式。css的样式表是由一个一个的样式构成,一个样式又是由选择器和声明块构成; css中核心就是 选择器 和 声明块 。
多选择器之间如果没空格的表示交集(一般是用于一个元素满足多个选择器条件),而空格表示层级后代元素(一般表示层级关系的多个元素,而且是选出子元素和子孙元素的所有标签奥!),大于号(>)表示子元素选择器(层级只有一层;只选出子元素的标签哦!)
语法:– 选择器 {样式名:样式值;样式名:样式值 ; } 选择器常见三类:标签名、类、id 使用语法: p {} 、.className { } 、#id { } 声明块中每一个属性对就是一个声明;各个声明之间用分号隔开,声明由键值对构成(中间是冒号:) – p {color:red ; font-size:12px;} 声明之间用分号(;) 声明内属性名和属性值用冒号(:)
何为伪类:当然顾名思义,它不是一个真实的类,它实际上是表示元素的一种特殊状态;何为元素的特殊状态?
当元素的特殊状态设置样式的时候,就用到这些元素的伪类来设置对应的样式了。伪类选择器是对 元素 的一些特殊状态设置样式;伪元素选择器用来设置 元素 的一些特殊位置设置状态;
有序标签 设置样式的话,在css中 ul{ list-style:none } 去掉样式。
- 列表项1
1.列表项1- 列表项2
2.列表项2- 列表项3
3.列表项3
目前盒子的位移方式:1.默认块元素和内联元素文档流原生位置2.对文档流中元素的原生位置通过外边距 margin-top 和margin-left的正负值移动盒子,正值正向移动,负值反向移动3.盒子浮动,可以使元素成为块元素,而通常水平方向移动。4.定位,相对定位相对于自身文档流位置left或者top偏移,由于没有脱离文档流,所以不影响周围元素位置,但会覆盖;而绝对定位脱离文档会影响 周围元素位置, 绝对和相对定位最基础两点:是否脱离文档流(绝对周围元素位置是否会替补位置)、参照物是谁必须确定(相对 浏览器还是相对于自身之前位置)
css在处理网页时,将页面中的每一个元素都认为包含在一个盒子中;将每一个元素想象成一个盒子,这样对于页面的布局就相当于摆放盒子,(1)盒子边框内(边框、内边距、内容)影响大小,盒子外边距影响盒子位置。
padding:10px 20px 30px 40px– 这样会设置元素的上、右、下、左四个方向的内边距;所以四个方向的,默认都是上 、右 、下 、左 ; 如果三个就是:上、左右、下;两个表示:上下,左右 padding:10px 20px;– 分别指定上下、左右四个方向的内边距;同时在css中还提供了padding-top、padding-right、padding- right、padding-bottom分别用来指定四个方向的内边距。内容区和内边距区别:内容区和内边距是独立开的的,设置内边距会影响盒子的大小,但是不会影响内容区大小;内容区大小只受width和heigth影响,这两个不变,虽然设置padding会影响盒子大小,但是内容区大小还是没变的。且注意: 子元素一般默认都是在父元素的内容区奥,父元素的盒子的内边距呀对子元素没有影响奥!!!
– border:1px red solid; 注意:边框设置的话必须三个属性都设置才生效;– 上边的样式分别指定了边框的宽度、颜色和样式。也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框
用法和padding类似,同样也提供了四个方向的 margin-top/right/bottom/left。margin:auto 的 auto 一般是给外边距的左右设置距离,margin-left: auto 表示左边距最大当将左右外边距设置为auto时,浏览器会将左右外 边距设置为相等,所以这行代码margin:0 auto可 以使元素水平居中。那么如何让内容垂直居中呢? line-height:xx px; 一般就是设置行高和高度一样就会垂直居中; 行高特点:每一行中内容在一行中默认是上下垂直的位置,所以如果让内容去就一行的话,那不就是垂直居中了嘛;
前面了解到,内联元素虽然也是一个盒子,但是不支持设置width和height来设置宽和高,一般内联元素宽高是内容自动撑开的,可以通过display来修改元素的性质;
值得注意的是display也有隐藏的样式;但是它和visibility属性主要用于元素是否可见有区别;display:none 和visibility :hidden 区别:
1.display是将该元素完全在页面中隐藏,也不占空间;(人不在了,也不占位置了) 2.visibility是将该元素隐藏,但是该元素占用位置还是保持的,不会被其他元素覆盖奥!
(1)display 选值:– block:设置元素为块元素– inline:设置元素为行内元素– inline-block:设置元素为行内块元素– none:隐藏元素(元素将在页面中完全消失)(2)visibility 选值:– visible:可见的 – hidden:隐藏的 - auto 自动,垂直和水平方向的滚动条自动按需添加。 - scall 垂直和水平方向的滚动条无论内容多少都存在。
父元素的内容区中有子元素,但是子元素的样式溢出了父元素,这时候可以在父元素中设置overflow来控制子元素溢出的情况处理。可选值:– visible:默认值,溢出的时候外边继续显示– scroll:添加滚动条,无论子元素是否超出父元素,都会有滚动条,且垂直和水平方向都有滚动条;– auto:根据需要添加滚动条,更加子元素在父元素的内容区的情况,自动调整水平和垂直方向的滚动条,按需设置。– hidden:隐藏超出盒子的内容解决容器高度塌陷问题——父元素:after{ content: ""; height: 0; clear: both; /*overflow: hidden;*/ display: block; /*visibility: hidden;*/ }
-------------------------- 文档流和浮动队对立 --------------------------- 文档流特点——块元素默认垂直排列,内联元素默认水平排列; 如果脱离文档流这些特点就不会受限; 悬浮脱离文档流特点—— float:none就是默认还是按照文档流约束。 float:left表示本元素脱离文档流,向左侧浮动文档流是元素的自然位置布局; 浮动是使元素脱离自然位置的约束;受父元素的边界和其他浮动元素的约束定位也是对元素自然位置的补充;
对于页面中文档流的约束规则;出现了浮动规则,所谓浮动,是使元素脱离原本文档流的约束(脱离文档流了,那么后面还在文档流中元素会自动补齐的奥!!!),在父元素中浮动起来。
文档流特点:块元素是默认垂直排列,内联元素是默认水平排列浮动特点:脱离文档流,然后元素会向左上或者右上浮动,直到遇到父元素的边框或者其他浮动元素;浮动使用float属性。• 可选值:– none:不浮动– left:向左浮动 – right:向右浮动
脱离文档流浮动的特点:
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》浮动比较难理解的部分:《《《《《《《《《《《《《《《《《《《《《《《《《元素浮动一般不会越过周围浮动而上移奥,一般就在周围浮动位置就停了,而且虽然元素浮动了,可能会覆盖文档流约束中补上来的元素,但是浮动元素覆盖只会覆盖补上来的元素,不可能覆盖原本文档流中元素位置奥!简单说块元素浮动只能覆盖之前水平方向,而原本垂直方向是不可以覆盖的奥!简单但是不全面的理解——————通常块元素自身浮动一般就是左右悬浮移动,如果想要上下相邻的元素浮动在一水平上,则这上下相邻元素必须同时都浮动起来
某个元素代开BFC属性后:(1)父元素的垂直外边距不会和子元素重叠;(2)开启BFC的元素不会被浮动元素所覆盖,开启BFC的元素还是会补齐脱离文档流的浮动元素的位置,但是如果元素补齐后会被覆盖的话,会自动位置不会被覆盖奥!!!(3)开启BFC的元素,可以包含浮动的子元素,即就是其子元素浮动脱离了文档流,但是还会受限其父元素的包围奥!!!
个人理解:文档流是元素的默认元素位置; 浮动是脱离文档流位置,但是本身默认只是左右浮动位置;文档流默认位置可以通过外边距margin来调整原先默认的位置
何为定位:就是将指定的元素放到页面的任意位置;
浮动是对文档流默认元素位置的变化调整,position属性可以控制Web浏览器在何处显示特定的元素。即可以使用position属性把一个元素放置到网页中的任何位置。文档流的约束布局位置:叫做元素的自然位置;position的相对定位relative,特点:未脱离文档流(位置不会被其他元素占用)、不会移动周围元素,但是由于等级提升所以位置重叠的话会覆盖、偏移是参照本身自然位置的偏移position的相对定位absolute特点:脱离文档流(位置会空闲而被相邻元素占用)、偏移参照是基于最近的定位祖先元素,周围没有定位元素默认body、一般元素设置绝对定位的话,同时会设置其父元素的相对定位,这样绝对定位是相对于父元素的偏移
position属性设置如下可能的四个值: ————规定元素的定位类型
核心两点: (1)定位偏移参照物、 (2)是否脱离文档流
.box2{ width: 200px; height: 200px; background-color: green; opacity: 0.2; position: absolute; top: 100px; left: 50px; /*text-align: center;*/ }
html中最常见的表格和表单;表格是用来显示格式化的数据的,表单是用来提交信息的。 ,最初创建表格就是为了以表格的形式显示数据,后来表格可以布局,但是css在布局更好,所以表格作用就一个,表示格式化的数据的。表单是用来提交信息的,用来将用户填写的信息提交到服务器,最常见就是百度搜索框。(基础表单项:文本框、密码框、单选多选、提交、下拉列表)
表格的常用样式:(1)在border标签中设置table和td之间的距离:border-spacing : xx px;用于设置table和td之间的距离的; 或者理解为相邻边框之间的距离属性或者border-collapse : collapse ; 用来设置table和td边框之间的合并; 优先级比上面高(2)colspan=“2”(表示一个单元格跨两列)rowspan (表示一个单元格跨两行) 通常给border设置宽度和边框合并(border-collapse : collapse ;) 最后给td设置边框的粗细、样式、颜色就可以了 table{ width: 300px; border-collapse: collapse; } table td,th{ border: 1px solid black; text-align: center; } table tr:nth-child(even){ background-color: #bfa; }
文本框: < input type="text" name="name"> 密码框: 多选框: 单选框: 提交按钮: 下拉列表:
框架集就是在一个页面中同时引入多个页面;
目前开发流程: 1.结构 2.样式 3.位置(先通过内外边距+浮动设置位置,最后实在不行用定位)样式注意细节:(1)内边距影响整体盒子大小,不影响内容区域(2)外边距影响盒子位置,上左影响自身位置,左下影响相邻盒子位置(3)背景图片和背景颜色一样,是占用整个盒子大小,而不是内容区域奥
起源原因:早期网络非常慢,用于处理网页中前端的验证的,用于检查用户输入的内容是否满足某些规则的;现在网络已经很快了,js已经用于前端所有动态的效果。
JavaScript包含三个部分:ECMAScript(js语法规则)、DOM(文档对象模型)、BOM(浏览器对象模型);
最终js实现对文档(document.write(’< h1 >helloworld!< /h1 >’);——让文档中body区域输出一段内容)和浏览器的操作(alert(‘第一行警告代码’);——控制浏览器弹出一个警告框)。
》》》》》》》》》》》》》》》》》》》》》》 细节 《《《《《《《《《《《《《《《《《《《《《《《《《(1)js中函数和方法注意点: 函数是直接使用, 如 alert()函数; 方法需要有对象进行调用; 如tostring方法; xxx.tostring()实际上方法和函数基本一样,就是使用场景不用
Null空值(声明了,也赋值了,但是赋值为null,undefine表示声明了的,但是从未赋值的自然状态 )、Undefine未定义(undefine衍生自null,所以这两个值做相对判断的时候,会返回true;如undefine==null) 变量为undefine 表示 变量声明且没有赋值; 如var a ; 就表示为undefined; null表示这个变量声明,且赋值了,但是赋值的内容是null;如 var a = null; 下一步就是创建好对象,然后赋值给变量a的;null一般用于变量起始和结尾,起始表示要给这个变量准备赋值为null的,结尾表示给这个变量解除赋值对象,同时释放对象占用的内存。简单说: ================ 核心基础 =========================undefined表示表示创建的变量未赋值的初始状态;而null表示我创建的变量就准备给它赋值为引用类型的,而不是基本类型,但是对象还没创建好,引用还没有,所以先给该变量一个null来赋值。
var obj = new Object(); obj.name = "sunx"; obj.age = 22 ; console.log(!!obj); ————> true console.log(!!obj.name); ————>true console.log(!!obj.age); ————> true console.log(!!obj.gender); ————> false console.log(!!gender); ————> "Uncaught ReferenceError: gender is not defined" 对象的布尔类型转换,对象有引用即赋值了的则返回true, 没有赋值的false,如果没声明的变量则报错。 一句话就是:对象转布尔类型;如果有声明且赋值则转为true,如果有声明但没有赋值则转为false,如果没有声明则就是报错了。
运算符也叫操作符;通过运算符可以对一个值或者多个值进行运算,并获取运算结果; 如加减、typeof就是运算符。
前面的表达式和运算符等内容可以理解为是我们一门语言中的单词和短语,而语句是我们这个语句中一句一句完整的话
语句是程序中基本单元,js程序就是由一条一条语句构成的;语句是按照自上向下的顺序一条一条执行的;在js中可以使用大括号{}来为语句进行分组。 同一组的语句中要么都执行到,要么都执行不到;一个{}中的语句我们也称为一个代码块
三个窗口函数: alert() confirm()函数 prompt(“请输入成绩: ”);—— 可以从键盘输入内容;该函数的返回值就是输入的内容,可以用一个变量来接收。
js和java中小异同:1. 强弱类型; 方法返回类型和方法形参类型在js中都没有,就算声明或者定义变量也通用 var;2. 创建的对象方式不同;构造函数类似java中的类、(1)对象中属性——js中,对象可以后加属性,即先创建好对象,然后直接通过对象.属性 = xxx;这样的方式来给对象中添加属性奥。 如 var 对象 = new object(); 对象.属性名 = xxx;(2)对象中方法——js中对象添加方法,实际上和给匿名函数赋值一样,将匿名函数赋值给对象的一个属性就可以了。 就是属性可以赋值为对象等 如 var 对象 = new object(); 对象.属性名 = function(){ xxxxxxx }; 3. js中构造函数类似java的类,构造函数的字面表现类似java中构造函数方法,构造函数隐含的原型对象使用,类似于java中父类。 4. js中可以设置对象的tostring方法,和java中一样。自定义tostring方法 var p = new Person("sun",22,"nan"); p.tmp = "hello"; //先创建对象后,然后设置该对象指定的属性; p.toString = function(){ //先创建对象后,然后设置该对象指定的方法; return this.name+" " + this.age +" "+ this.gender; } 5. 回调函数:就是说这个函数不需要自己调用,而是浏览器会自动帮你调用;6. js中常用对象: 普通对象,数组对象,函数对象,data对象,math对象。7. js中的闭包( 简单说——闭包类似于java中的私有属性+公有方法的表示方式;作用就是使得函数内部的数据外部可见、可操作或者 是函数执行完后,里面内部数据还可存在。)是一个外部函数里面有内部函数,然后将内部函数return;闭包个数是基于外部函数调用的次数奥。 8. 原型链: 在访问一个对象的属性时,先在自身属性中查找,找到返回,如果没有,再沿着__proto__这条链向上查找是否存在 (类似于java中的父类,子类没有向上继承父类的属性和方法)9. ======= js函数高级部分:原型和原型链、执行上下文、作用域和作用域链、闭包; ========10. 面向对象高级:(原型继承)在js中不是通过函数类型的继承来实现父子关系的奥! java中是通过类型的继承实现的;js中不同类型继承,一般可以用子类型的原型为父类型的一个实例对象;因为继承的本质是:自己实例上没有,就到原型对应的实例里面去找;如果父类A,子类B,子类B.Prototype = new 父类A();这样子类B创建的实例中没有某些属性,会到父类A这个实例里去获取奥;即js中的继承就是子类型A的原型等于父类型B的实例就可以完成A继承B了。11. js中通常会将函数的属性写在函数内,而函数内的方法一般都写在函数对象的原型对象中去。这样这个函数创建的实例就不会每个实例里面单独都保存一份相同的方法了,而是从原型(父类)中统一继承就可以了。12. js中可以函数中再定义函数,而java中就不可以,js中函数的嵌套,就涉及到变量的作用域链(查找变量,有内向外查找变量)
基本数据类型之间没有任何的联系;不能成为一个整体。 而对象是一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
》》》》》》》》》》》》》》》》》》》 创建对象的核心 new 的分析《《《《《《《《《《《《《《《《《Java语言中,new关键字的作用是为一个对象(Object)分配内存, 即new + 类的构造函数,来为该类创建一个分配了内存的对象奥!!!(1)创建对象 上面js创建对象是 new object(); 而java中创建对象是 new xxx(); js是弱类型,所以通过object来统称所有不同类型, 而java是强类型语言,不同类型,必须明确指出;(2)对象中属性初始化js中是弱类型语言,所以属性赋值可以在创建对象后,再单独设置属性; 即js对象可以动态的添加属性(方法);而java是强类型语言,属性必须在定义类型的时候就设置好;js中属性的增删改查:var obj = new object();增: obj.name = “tom”;改: obj.name = “新值”;查: obj.name;删: delete obj.name;检查对象中是否有指定属性: “name” in obj—— true。 (3)对象的属性方式: 对象.属性名、 对象["属性名"]、对象[变量] 如: obj.name / obj["name"] / var n = "name"; obj[n] 对象的属性值: 可以是任何类型的值奥! 字符串、数值、布尔、或者是一个对象奥!!!
方式一: var obj =new object();—— new 和构造函数的方式
1.new object() 这种方式是最传统的创建对象的方式;2.之后演进-------工厂对象来简化创建对象;3.用不同的类型的构造函数来创建具体类型的对象————构造函数就是一个普通函数,创建方式和普通函数没有区别,但是调用方式有区别:普通函数调用就是:函数名(); 而构造函数还需要加上new 关键字: new person();js中构造函数和java中类的关系:js中构造函数功能上类似java中的类,语法结构书面写法上类似于java中的类的构造函数。 尤其其中 this.属性 表示本地属性,而不是指父类属性 js中构造函数的特点: (1)函数内的this就是表示新建的对象、(2)该构造函数默认有返回内容this,就是创建的对象返回》》》》》》》》》》》》》》》》》》》》》》》 构造函数的创建 《《《《《《《《《《《《《《《《《《《《《《《 构造函数中的this是指——————创建的当下的实例对象;function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; this.getName = function(){ return this.name; } } var p = new Person("sun",22,"nan");console.log(p.name);this的三种情况:(1)普通函数中this表示window对象;(2)方法中this是调用该方法的对象;(3)构造函数中this就是通过该构造函数创建的对象的代理; https://blog.csdn.net/u013250416/article/details/40869287 —————— 函数中this的对象指向在一般情况下,this对象时在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。但是,匿名函数的执行环境具有全局性,因此它的this对象通常指向windows.可以修改this表示的对象fun(param1,param2) ~~~ fun.call(obj,param1,param2)可以通过函数对象.call(自定义this的对象);使用call来改变this的值。 如果某个函数是浏览器自动调用的,那么如何修改其中的this呢?就是设置一个匿名函数,将需要修改的函数放在匿名函数中,自己来调用;将匿名函数用来作为给浏览器自动去调用,在匿名函数里面来进行自己的手动的 fun.call(obj) 使用。
方式二: var obj = { };—— 字面量方式 大括号相当于 new object();
方式二字面量创建对象的方式,好处:简单、而且可以在创建对象的同时,直接指定对象中属性;
字面量的方式创建对象的语法:var obj = { 属性名: 属性值, 属性名:属性值, ...};其中属性名可以加引号,也可以不加引号,如果加引号类似于json数据格式;所以json可以在js中可以直接作为一个对象使用。
(1)对象中属性——js中对象可以后加属性,即先创建好对象,然后直接通过对象.属性 = xxx;这样的方式来给对象中添加属性奥。 如 var 对象 = new object(); 对象.属性名 = xxx;
(2)对象中方法——js中对象添加方法,实际上和给匿名函数赋值一样,将匿名函数赋值给对象的一个属性就可以了。 如 var 对象 = new object(); 对象.属性名 = function(){ xxxxxxx };(1)函数也是一个对象,函数作用——可以封装一些功能的代码(语句);
既然函数也是对象,那么该函数就可以赋值给变量;函数拥有普通对象的所有功能,另外还多一个功能就是___还可以封装一些功能语句。 (2)构造函数和普通函数一样;(1)创建函数 1.1 函数的构造函数方式———— var fun = new function(“函数内封装的语句”) 这种创建函数方式,是通过函数的构造函数的方式来创建对象的,一般很少用 1.2 函数声明的方式———— 这种方式特点: 在所有代码执行之前就优先声明好和创建好了 函数。 function 函数名(形参一,形参二,...){ 函数封装的语句; } 1.3 函数表达式的方式———— 这种方式相较于第二:只有在该方式后面才能调用该函数 var 函数名 = function(形参一,形参二,...){ 函数封装的语句; } (2)调用函数 2.1 fun() 2.2 函数名()fun —— 返回后面的是函数对象的整体;console.log(函数名) —— 返回function 函数名(形参一,形参二,...){ 函数封装的语句;}
function sum(a, b){ return a+b; } var result = sum (4,6);
js和java基本语法的区别(1)一个强类型,一个弱类型,强类型必须指定参数类型,弱类型直接不需要参数类型(2)对象创建: 强类型需要定义类型结构,弱类型不需要,而是直接创建对象,对象的属性也是创建对象同时或者之后才定义的var obj = {属性名:属性值, 属性名:属性值};School s = new School();(3)函数创建: js中函数也是一个特殊对象,函数创建需要关键字function,且函数无返回类型,形参也不需要参数类型;返回值也用returnfunction sum(a, b){ return a+b; }public int sum(int a ,int b){ return a+b;}(4)js中函数没有指定返回值类型,可以是任何类型,所以直接用var定义一个变量来接收,var result = sum(1,2) ; java中,必须按照函数指定的类型的变量才可以接收 int result = sum(1,2);
变量声明使用var 声明的方式则会提前声明的,赋值是在后面赋值的; 函数声明 function 函数名(){} 方式,会在所有代码执行之前,该函数的函数对象就会被创建。上面var 变量只是声明,而函数这边是既声明好,函数对象也创建好了
console.log(a);var a = 3; // a = 3 使用var声明的变量a,会在代码最上面就进行了var a;的声明; // 而没有用var 声明的就没有这个过程,提前使用会报错使用 var 定义的变量 —— var n = 1;过程分为两步:1. 在代码最上面先 var n声明该变量;2. 然后在var定义的位置才进行变量的赋值。如果在函数内部,直接使用变量,没有var声明,则这个变量是全局的变量奥!如果在函数内部声明的变量则是函数作用域的变量奥!!!
原型对象使用过程:每一个函数都会有一个属性,指向原型对象; 即使该函数创建的实例对象也会指向这个原型对象奥! 但是访问的方式不同:函数通过属性prototype访问到原型对象;而函数创建的实例通过属性__proto__ 才能访问到;原型中存放公共内容,当访问对象资源时,优先访问对象中资源,没有会到原型对象中找,然后返回;一句话: js中构造函数类似java的类,构造函数的字面写法类似java中构造函数,构造函数隐含的原型对象使用,类似于java中父类。
//数组的遍历方法一:就是for循环方式二:用foreach 方法,但是有局限,IE8以及下不可用,所以谨慎使用foreach来遍历; //foreach 方法中参数是一个函数,该函数就是用来封装数组的功能函数, 注意该方法在IE8以上才可用 //该还是第一个参数是数组中的值,第二个参数是数组中值对应的索引,第三个参数就是数组对象。 arr.forEach(function(value,index,obj){ console.log(typeof value); })
可以简单了解了解,和java中相关类类似,就是对象中方法要熟悉点;
注意String字符串对象本质就是字符数组。如 var str = “hello”—— new array(‘h’,‘e’,‘l’,‘l’,‘0’);正则表达式是用来检测一个字符串是否符合某些规则;
如: var reg = /aaa/i //表示创建一个忽略大小写,规则是3个a的正则对象 reg.test(“bcdaaab”) ;判断字符串"bcdaaab" 是否满足正则对象中设置的规则;满足返回true,否则false;最常用的是test方法。用正则对象检查字符串是否满足某个规则常用字符串和正则表达式支持的方法:search——检索与正则表达式相匹配的值。 和字符串的indexof类似,区别是匹配可以是正则表达式,而indexof不可以。match——找到一个或者多个正则表达式的匹配。 作用是从字符串中提取出匹配规则的内容replace——替换于正则表达式匹配的子串。split—— 基于正则规则来分割字符串。test—— 用于正则对象检查指定字符串是否符合的条件方法 如:var reg = /[A-z]/ ; console.log(reg.test("a")); //返回为truesearch 是搜索出匹配的索引位置 ; match是提取出匹配的内容 ; replace 是将匹配的内容替换 ; split是基于匹配的规则来拆分字符串
首先创建正则表达式对象:
(1)构造函数创建正则对象的方式: var reg = new RegExp("正则表达式",“匹配模式”); 匹配模式: “i” 表示忽略大小写,“g”表示全局匹配模式(2)字面量创建正则对象的方式: var reg = /正则表达式/匹配模式;使用正则对象去检查指定字符串是否符合正则规则:reg.test(str);var reg = /[A-z]/ ; console.log(reg.test("a")); //返回为true//通过正则来去除字符串中的空格; // reg = /\s/g; //表示去除所有的空格,首尾和中间所有的空格 reg = /^\s*|\s*$/g; //表示只去除所有开头的空格和所有结尾的空格 var str = " hello sun "; str = str.replace(reg,""); console.log(str); //返回为true
/^a$/ 表示以a开头且以a结尾,只能是“a”、而不是“aa”、“aaa”之类的奥;注意: 当开头和结尾同时使用的时候,里面的正则约束是绝对规则,很严格的约束,差一点都不行。
dom即文档对象模型;作用是——可以让js通过Dom来对html文档进行操作的,可以随心所欲的操作文档中每个元素对象;
节点是一个宽泛的概念,而元素节点是节点中一部分,只是标签那类
一. 通过document对象获取指定元素节点的方式: 注意————下面是获取标签元素节点的方法奥!!! (1)通过id属性获取一个元素节点对象: getElementById(); 返回单个对象(2)通过标签名获取一组元素节点对象: getElementsByTagName(); 返回一组对象 (3)通过class获取一组指定class的标签对象——getElementsByClassName(“标签class属性值”);但是只有ie8以上可用。所有谨慎点。但是可以是querySelector(“选择器方式(如 .div div)”)—— 该方法可以基于css选择器的方式来定位元素对象,所有class的元素可以通过该方法(4)通过name属性(表单项里面有name属性)获取一组元素节点对象: getElementsByName(); 返回一组对象(5)innerHTML 和 innerText 区别: 这两个属性都是标签内部内容,innerHTML是内部包含html的内容,innerText是内部文本内容。 上面获取到的元素节点————标签对象, 如果想要获取标签中内容,要么就是标签对象的属性或者方法;同时节点包括: 元素节点、文本节点、属性节点、文档节点,这些节点中三个通用属性——nodeName、nodeType、nodeValue二. 获取元素对象下层级的子节点; 下面是————> 元素对象的方法和属性 (方法)getElementByTagName(“标签名”); —— 返回指定标签名的所有对象集合 。如果参数是“ * ”,表示页面中所有元素 。 (属性)childNodes —— 当前元素节点下的所有子节点(所有子节点:实际包含有划分很细颗粒的各类对象奥!如:换行 空格文本节点) (属性)children ———— 当前元素节点下的所有子元素; 区别于上面子节点奥!!! (属性)firstChild —— 当前节点下的第一个子节点 (属性)firstElementChild —— 当前节点的第一个子元素 【IE8不支持这个属性,如果要兼容IE8的话,就 慎用】 (属性)lastChild —— 当前节点下的最后一个子节点 注意节点和元素区别!!! —————————————————— 节点包含有文本、元素、属性、文档这些对象;而元素只是标签那一类奥!!!三. 获取元素对象兄弟节点和父节点 (属性)parentNode —— 当前节点的父节点,父节点一定是元素节点,不可能是文本节点类型的。 (属性)previousSibling —— 表示获取当前节点的前一个兄弟节点对象。 (属性)previousElementSibling —— 前一个兄弟元素节点对象 (属性)nextSibling —— 获取当前节点的后一个兄弟节点对象。四. js中节点获取元素的样式方式:(1)元素对象.style.样式名 = 样式值; 只有这个方式的样式才可读可以写,下面方式二中两个获取样式的方式只能读,不可以写。但是该style修改样式,没修改一个样式浏览器 就需要重新渲染一次页面。这个很耗资源。可以直接修改元素的所属类,在已有样式表的类的情况下,修改元素的类,这样元素就 渲染成新的样式了。如 div01.style.width = "100px"; 这边js修改的样式是内联样式的修改方式奥!!!同样,如果该方式 alert(div01.style.width)读样式,也是内联样式表中的样式。(2)获取元素当前样式: 使用window对象提供的一个方法—— getComputeStyle(元素对象,null【就是伪类】); 返回一个对象,对象中封装了当前元素对应的样式 getComputedStyle(div01,null)["line-height"] 元素对象.currentStyle.样式名 ; 该属性只有IE浏览器支持,其他浏览器不认识currentStyle属性奥!!! 如 div01.currentStyle.width = "100px"; (3)其他样式操作属性: 获取元素的可见高度和宽度————元素对象. clientHeight / width; 只是大小值,没有单位奥,且该属性只可读!(内容区+内边距总和大小) 返回元素的高度和宽度 ———— 元素对象.offsetHeight / width; 内容区+内边距+边框总和大小 ; 返回当前元素的定位父元素 ———— 元素对象.offsetParent; 获取到当前元素最近的开启了定位的祖先元素,就是设置position的属性 返回当前元素相对于其定位父元素的水平偏移量 ———— 元素对象.offsetLeft; 获取到这个值,可以基于此值调整本元素对象的位置; 返回当前元素相对于其定位父元素的垂直偏移量 ———— 元素对象.offsetTop; 获取到这个值,可以基于此值调整本元素对象的位置;scrollHeight表示元素的可滚动总长度,scrolltop是元素垂直滚动条滚动的距离, clientHeight是元素可见的有效长度;一般 当scrollHeight - scrolltop == clientHeight的时候,滚动条滚动距离就到底了。五. dom中剩余方法body —— html —— document 层级递增。document.documentElement属性 —— 对应网页中html根标签对象document.body属性 —— document对象中有一个属性body,就是表示网页中body对象的引用。document.querySelector("选择器(如.div1 div)");—— 可用按照css的选择器的方式来查找指定的元素节点对象奥!!!!!! 缺点: 只会返回满足选择器的第一个元素节点对象奥! document.querySelectorAll("选择器(如.div1 div)"); 这个方法和上面类型,但是会返回满足选择器的所有节点对象;封装到一个集合中。 >>>>>>>>>>>>>>>>>>>> 上面是dom中查询对象, 下面是dom中增删改对象的操作 <<<<<<<<<<<<<<<<<<<<<<<
(1)事件定义——就是文档或者浏览器窗口中发生的一些特定的交互瞬间。而JavaScript和HTML之间的交互是通过事件实现的。
(2)用户和页面之间发生一些交互行为,可以通过在页面的标签上添加某些事件属性来创建事件发生后的结果 (3)标签对应的事件属性,如果绑定了函数,这些函数就和事件产生了关联,这些函数就变成回调函数——会由浏览器基于事件触发来自动调用对应的函数。事件属性(事件属性类型分类):onload: 页面或者图片加载完成后的事件属性onclick: 对象.事件属性—— 对象.onclick = function(){xxx}表示给该对象添加单击事件;即如果该对象上被单击了就触发了绑定的函数方法奥!!!! ondblclick: onfocus: 元素获得焦点onmousedown:该元素上有鼠标按钮被按下 onmouseout:该元素上有鼠标从元素移开onmouseover:该元素上有鼠标移动到元素上onchange: 事件经常与输入字段验证结合使用。onmousemove/onmouseout - 当把鼠标指针移入/移出 div 时键盘事件: 一般都会绑定给一些可以获取焦点的对象或者document对象。onkeydown : 按键被按下 onkeyup : 按键被松开 上面的事件属性,通常会被绑定一个函数;这样该事件一发生就会触发绑定的函数。!!!!!!!! 注意:绑定的函数可以设置return false来取消事件的默认行为 !!!!!!!!每一个事件绑定的函数都是由浏览器自动调用的,同时浏览器会传入一个 事件对象 进入这个函数中,这个事件对象中包含了 鼠标的坐标、键盘哪个键被触发,鼠标滚轮的方向等和当前事件相关的一切信息。 注意:在IE8及其以下,事件对象不是由浏览器传入的,而是作为window对象的属性保存的,所以可以通过window.event属性获取事件对象,然后获取事件对象中封装的一些属性内容。 但是在其他浏览器中,事件对象就是在浏览器调用的绑定函数上,通过传参传入该事件对象奥!!! 这可如何是好呀? - 完美的解决方式—————— event = event || window.event; 其中event是事件函数传参传入的。 - 表示左边event变量是右边有效的对象赋值。 - - body01.name && body01.name(); - 表示 body01.name该属性有赋值,才调用,没赋值就不调用。用于方法是否调用事件对象的属性: clientX—— 获取鼠标指针的水平坐标clientY—— 获取鼠标指针的垂直坐标 type —— 返回当前事件对象表示的事件类型(名称)target —— 返回触发此事件的元素节点对象。event.wheelDelta(event.detail火狐中适用的;反向正负相反) —— 可以获取鼠标滚轮滚动的方向。值只看正负,正向上,负向下;event.keycode —— 返回哪那个按键被按下,返回是该按键字母对应的编码值;event.ctrlKey/altKey/shiftKey —— 如果被按下返回true,否则false;
(3)上面的事件属性,通过会被绑定一个函数;这样该事件属性一发生就会触发绑定的函数。或者理解为元素的某个事件属性上绑定了一个函数,事件属性特点是——当该事件触发时会调用该事件属性绑定的函数或者方法奥 1.先找到元素对象,2.然后设置该对象的某个事件属性上绑定一个函数
var btn = document.getElementById("btn01"); btn.onclick = function(event){ event = event || window.event; alert("我单击了一下按钮"); console.log(event.type) //—— 》 返回该事件的类型是单击事件类型( click ) }(1)事件绑定方式一 : 对象.事件 = 函数的形式绑定响应函数。它只能同时为一个元素的一个事件绑定一个响应函数, 不能绑定多个,如果绑定多个,则以后面会覆盖前面的响应函数的。(2)事件绑定方式二 : 可以为一个元素的相同事件绑定多个响应函数对象. addEventListener(事件类型【字符串表示,不要加on了】,事件的对应响应函数,是否在捕获阶段触发事件【一般false】); 例如: btn.addEventListener(“click”,function(event){ event = event || window.event; alert("我单击了一下按钮"); console.log(event.type) //—— 》 返回该事件的类型是单击事件类型( click ) } ,false)
(4)事件冒泡 —— 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发,其祖先元素的相同事件也会被触发;。如设置div、body、html都有单击事件,那么当点击div时,对应的body和html上的事件也会被触发的。 如果不想要发生事件冒泡。可以通过事件对象来取消冒泡。
通过事件对象来取消冒泡: 取消冒泡是防止事件继续向上触发,所以可以在 下层级的事件函数 中设置取消冒泡,这样就不会上传上去了。如: 事件对象—— event = event || window.event ; event.cancelBubble = true;
(5)事件的委派 —— 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素上,从而通过祖先元素的响应函数来处理。 特点: 事件的委派是利用了冒泡特点,可以减少事件的绑定次数;
(6)事件的绑定文档页面中一般资源加载顺序是自上而下加载,读取一行就运行一行。所以传统js代码放在html后面,或者使用窗口事件onload来存放js代码,onload属性表示页面或者图片加载完成后才会触发的一个事件属性。
因为文档流的加载顺序,所以传统js代码写在上面的话,如果js中有操作下面html元素的话,会报错,因为还没加载到html部分;所以出现了window.onload事件,表示窗口加载完毕后才触发的事件;(1)通过全局文档节点对象document获取指定的元素对象 (2) 获取元素对象下层级的子节点; 下面是————> 元素对象的方法和属性 getElementByTagName(“标签名”); —— 返回指定标签名的所有对象集合 childNodes —— 当前元素节点下的所有子节点(所有子节点:实际包含有划分很细颗粒的各类对象奥!如:换行 空格文本节点) children ———— 当前元素节点下的所有子元素; 区别于上面子节点奥!!! firstChild —— 当前节点下的第一个子节点 firstElementChild —— 当前节点的第一个子元素 【IE8不支持这个属性,如果要兼容IE8的话,就 慎用】 lastChild —— 当前节点下的最后一个子节点 注意节点和元素区别!!! —————————————————— 节点包含有文本、元素、属性、文档这些对象;而元素只是标签那一类奥!!!(3) 获取元素对象兄弟节点和父节点上面第一行,是左边对象所拥有的属性,如文本节点对象.nodeValue ——> 返回的表示该文本节点的内容
拖拽有三个事件:鼠标按钮按下(onmousedown)、鼠标被移动(onmousemove)、鼠标按钮松开(onmouseup);
当一个交互动作有多个事件构成的时候,要理清楚多个事件之间的层级和逻辑顺序,(1)如拖拽,先当前元素的鼠标按下事件、之后鼠标移动事件应该是document对象上的,因为由css可知,层叠式,表现层元素会覆盖的,而最底层元素就是document,这样就不会受上层元素覆盖的影响。(2)而且第二个鼠标移动事件是在第一个鼠标按钮按下事件同时发生情况下才有效,所以第二个事件需要在第一个事件内部。交互行为有多事件构成时,注意事项:(1)事件到底绑定到哪个元素或者对象上合适 (2)事件之间是否有层级或者并集关系,就是是否是独立的事件,还是并列的事件(3)事件中引发的对象的样式和位置的偏移;js中有元素样式的获取方式;
javascrpt组成有三个部分: ECMAScript基本语法、BOM、DOM;
BOM就是使我们通过js来操作浏览器的,即使用对象描述浏览器的各个部分的内容navigator中可以识别浏览器类型: 通常会用属性useragent;然后看这个属性中是否有:Firefox、Chrome正则判断;是火狐或者谷歌; var browinfo = navigator.userAgent; console.log(browinfo); console.log(/firefox/i.test(browinfo)); console.log(/chrom/i.test(browinfo)); console.log( /msie/i.test(browinfo)); 判断IE方式: /msie/i.test(browinfo ) 判断IE11的方式,ie浏览器的window对象中独有的属性:ActiveXObject属性,所以可以判 断window对象中是否有该属性;“ActiveXObject” in window 返回为true, 表示有这个属性。反之没有;
(1)Location 该对象中封装了浏览器地址栏的信息;直接location对象的内容就是当前页面的完整绝对路径奥!!! (2)注意location对象表示当前页面的url地址,所以可以设置一些事件来改变当前页面的url地址内容奥!!!!(3)location对象的属性: host属性(主机名和端口号)、hostname(主机名)、href(返回完整的url)、protocal(当前url的协议);(4)location对象的方法: assign(可以设置当前页面新的url地址)就类似于location直接赋值url一样、 reload()刷新当前页面,但是缓存没刷新,如果参数传入true,表示强制刷新清空缓存;
history对象的属性length;该属性表示当前页面是否是第一个打开,还是是其他页面跳转来的第几个打开的页面;或者理解为一个会话中当前链接访问是第几个链接数。history的方法:back(): 加载history列表中的前一个url; 就类似于浏览器上 左右箭头的回退一样。forward(): 加载history列表中的下一个url;go(): 加载history列表中的某个具体页面;如go(1)表示向前跳一个,类似forward; go(-2)表示向后跳两个,类似back
setInterval()第一个参数是回调函数;该函数每隔一段时间被调用一次;第二个参数是每次间隔的时间,单位是毫秒;1000表示一秒; var h1 = document.getElementById("h1");var time= 1;var timer = setInterval(function(){ //该方法有个返回值——这个值是该定时器的标识符;h1.innerHTML = time++;},500);var timer = setInterval(function(){ span.innerHTML = num++; //这个定时器功能是在span标签内,元素内容不断自增,到20时,停止该函数功能; if(span.innerHTML == 20){ clearInterval(timer); } },1000) //表示周期函数是一秒后调用一次内部函数。clearInterval(timer ) 取消指定的定时器,该方法是定时器的标识符;参数是定时器的标识符;
(1)选择器获取对象的区别————$("#showDiv“) 选择器是#,表示id选择器,相当于id选择器,相当于javascript中的document.getElementById("#showDiv“");对比js确实简洁了很多。(2)调用功能函数———— 类似于js中window.alert()的一些方法,在jquery中提供的一些功能方法调用就是 $.xxx();JavaScript中一般没有类似功能的函数,jquery中提供了许多,调用时直接通过: $ . trim(变量);就完成了将变量前后的空格清除了, $ . trim(变量) 相当于jQuery.trim(变量);即函数或者方式是Jquery对象的一个方法。(3)通用加载页面的区别———— window.onload函数一般表示页面加载完毕后执行的事件,但是如果多个页面中同时运行且都包含这事件,则会发送冲突的jquery中的ready()方法很好解决了,它能够自动将其中的函数在页面加载完毕后自动运行。同时一个页面中使用多个ready方法也不冲突;$(document).ready(function(){$("table.datalist tr:nth-child(odd)").addClass("altrow");}); 对于上述代码jQuery还提供了简写,可以省略其中的"(document).ready"部分,代码如下:$(function(){$("table.datalist tr:nth-child(odd)").addClass("altrow");});
获取指定对象、获取指定对象自身周围的子孙祖先节点、获取指定对象自身的样式、对指定节点的增删改相邻的节点。
对象获取后,如果对象.属性名没有定义就返回undefined,属性可以赋值:基本类型(返回就是值)、对象(返回object和对象内容{xxx})、函数(返回函数体function(){xxx})等
事件的冒泡(子孙事件会逐级触发到祖先对应同样的事件)、事件的捕获(某个事件A设置了捕获后,在相同类型的事件B会被设置捕获的对象A给获取,而触发A的事件)
css中常见三种定位方式—— 判断是否脱离文档流,脱离文档流的话,宽度和高度都是由内容撑开的。
(1)每个元素都是类似一个盒子一样,有自然文档流布局位置;但是分为内联和块元素(块元素默认垂直排列,内联元素默认水平排 列);自然文档布局,子元素未设置宽度时会充满父元素;而脱离文档流后,自身宽度就由内容撑开;
(2)如果想要自定义布局,可以通过浮动float:left;浮动的特点:1.会使元素脱离文档流排列的限制,而且内联元素会变成块元素,元素浮动一般就是左右浮动,知道遇到其他浮动元素或者父元素的边框才停止浮动。2.所以上下垂直元素想要在水平排列;就要都设置浮动,因为单个元素浮动只左右浮动,只有上下垂直元素都浮动时,才会一直浮动到相邻其他浮动元素才停止。3.浮动由于会脱离文档流,所以之前在文档流中占位不会占用了,从而会被其他文档流元素覆盖。 (3)定位position:可以将元素放到页面任意位置; relative:相对定位是相对于本身在文档流所在位置,且偏移不会脱离文档流,同时之前文档流位置 还是占用的,但是优先级比文档流中其他元素位置要高,所以重叠时会覆盖奥; absolute:绝对定位,元素会脱离文档流,且偏移参考是基于最近的开启定位的父元素,如果没有开启定位的父元素,会基于body的位置而偏移的;一般元素设置绝对定位的话,会同时设置其父元素的相对定位,这样本元素绝对定位的偏移是直接相对于相邻的父元素的偏移,更清晰点。对象的生命周期:全局对象必须成为垃圾对象才能释放,一般可以通过var a =null来释放资源 ; 局部变量在函数调用外就释放了。
什么是对象? 对象是可以存储多个数据的封装体(用来保存多个数据的容器),一个对象代表现实中的一个事物;
为啥用对象? 可以统一管理多个数据;
对象下面可以有一般属性【属性名和属性值的形式】和方法属性【属性值是函数的形式 】;方法属性就是属性值是一个函数的特殊属性;
对象属性的调用方式两种:一般是对象.属性名;特殊是对象[‘属性名’]的方式。 对象属性使用:对象[“属性名”] 调用的方式虽然比较复杂,但是在一些特殊的情形只能使用该方式—— 1.属性名中包含特殊字符: - 、空格;2.属性名是一个变量的形式:对象[变量名]没有引号奥!确定的属性名用引号【obj[“age”] = 18】,属性名是变量的不用引号【var tmp = “age”;obj[tmp]=18】;
js中最难的不是对象,而是函数,因为函数是一种可执行特殊对象;既有对象复杂度,同时还可以执行;
什么是函数? 实现特定功能的n条语句的封装体; 特点: 只有函数是可以执行的,其他类型的数据不可执行;
为什么要用函数? 函数主要特点是封装,然后提高代码的复用;便于阅读交流;
如何定义函数?1.函数声明的方式; function fn(){xxx}; 2.表达式的方式: var fn = function(){xxx};
函数调用有个方式很特殊: 函数名.call/apply(任意对象);可以将这个任意对象作为函数内的this的映射体。 即js中可以让一个函数成为指定任意对象的方法进行调用
什么函数是回调函数? 常见回调函数——1.事件属性的回调函数、2.定时器的回调函数;特点: 你定义的、不是你调用的,但是最终会执行了; 以后会遇到—— 3.ajax请求回调函数、4.生命周期回调函数;
上面回调函数常见应用中: 事件回调函数是:前台和用户交互的关键点; 而ajax请求回调函数是:前台和后台交互的关键点;
IIFE(Immediately-Invoked Function Expression 立即调用函数表达式) ;作用是:隐藏内部实现,不污染外部命名空间(全局的变量命名);
可以尝试使用webstorm编译期;注意可以使用模板;如何定制自己习惯的模板——
一块内存包含2个数据:一个是内存存储的数据(一般值数据、地址数据(为啥存地址数据,因为数据有点多,不便直接显示,所以用这块数据的地址来表示))、一个是内存地址数据;内存分类简单分是——栈和堆;栈空间小、速度快;堆空间大(所以用于存储对象【函数和数组这些多数据内容】)、速度慢;
什么是变量?值可以变化的量;由变量名和变量值组成;一个变量对应一块小内存,变量名可以查找到内存,变量值就是内存中保存的值(内容);即内存是存储数据的容器,变量是内存的标识,我们可以通过变量找到对应的内存,进而操作(读写)内存中的数据。
什么是对象?代表现实中的某个事物,是事物在程序中的抽象;通常是多个数据的集合体(封装体)。使用对象便于对多个数据进行统一管理;对象中属性代表对象的状态、对象中的方法代表对象的行为;js中对象中可以动态的添加属性,区别于java中必须先指定好哪些属性才可用
调用对象的属性方式:一种是对象.属性名;一种是对象[‘属性名’]。 对象中方法实际上是特殊的属性,只不过属性值是一个函数,就是function(){xxx}定义的属性值;区别于java中方法没有function这之类的关键字标注;对象的属性分为引用属性和值属性。
什么是函数?具有特定功能的n条语句的封装体,函数是可以执行的,其他类型数据是不可执行的;
如何定义函数和函数调用方式? 函数定义两种方式——函数声明方式(function fn(){xxx})和表达式方式(var fn = function(){xxx})表达式方式会函数提升,提前声明; 函数调用方式—— test()、new test()、obj.test()、test.call/apply(obj);
函数的原型属性: 每个函数对象都有一个prototype属性,默认指向一个object空对象(即称:原型对象)一些内置函数如Date的原型属性指向的原型对象内部可能有许多已经定义好的方法奥!;函数对象中有一个属性prototype属性,这个属性指向函数的原型对象,但是这个原型对象中也有一个属性constructor,这个属性又返回指向了函数对象。注意——这边的constructor是原型对象中的属性奥! 而且constructor指向的是这个原型对象对于的类型的函数对象奥!!!
实例对象的隐式原型对象(对象.__ proto __ )指向构造函数的显示原型对象(函数对象.prototype);同时函数对象的显示原型对象本质就是创建一空的object对象;即说也就是函数对象的原型对象就是一个object类型的实例
原型链: 在访问一个对象的属性时,先在自身属性中查找,找到返回,如果没有,再沿着__proto__这条链向上查找是否存在(类似于java中的父类,子类没有向上继承父类的属性和方法);
function fun(){ console.log(666666); console.log(2222) } console.log(fun.prototype.constructor==(new fun().__proto__.constructor)); 函数的prototype属性是在定义函数时自动添加的,默认是一个空object对象;对象的__proto__属性:是在创建对象时自动添加的,默认值是构造函数的prototype属性值;我们能直接操作函数的prototype属性(显示属性),不能直接操作对象的__proto__属性(隐式属性);fun.prototype.constructor==(new fun().__proto__.constructor) 分析: (1)fun是上面函数的函数对象,(2)而fun.prototype是函数对象的原型属性,这个属性是一个地址属性指向一个对象,即原型对象 (3)fun.prototype.constructor 是原型对象的constructor属性,这个属性也是一个地址属性,指向是函数对象;又绕回来了。(4)函数对象、函数创建的实例(对象)、函数对象指向的原型对象;是三个不同概念奥!!!(5)原型对象中添加属性(方法)作用和意义:函数所创建的所有实例对象自动拥有原型中的属性(方法)
任何函数的显式原型属性指向的原型对象本质是创建一空的object对象——{};由于是object类型,所以这个object对象的隐式原型对象就是Object类型的显式原型对象,那么Object类型的显式原型对象进一步的隐式原型对象呢?注意是null; 即其他类型的函数对象的显式原型属性指向的显式对象是一个object类型创建的——{}空对象;任何其他函数的显式原型对象是一个object类型的{};所以这个显示原型对象本身就是一个object对象,那么这个object对象肯定有隐式原型属性,由于对象的隐式原型指向的是这个对象所属类型(函数对象)的显示原型对象,所以任何函数对象的显示原型对象的隐式原型对象就是Object.prototype;那么这个Object.prototype是否还是一个Object对象呢?===================== 核心 ===============即 显式原型对象的隐式原型对象到底是什么; (1)一般函数对象的显式原型对象的隐式原型对象是Object.prototype(2)而Object函数对象的显式原型对象的隐式原型对象是null奥!!
比如给多个按钮绑定事件函数,不要把全局变量直接在事件函数中设置,因为函数是调用时候才执行,而里面的全局变量早已不是当初认为的 那个值了,所以最好把全局或者灵活多变的变量设置到指定按钮对象上,然后在按钮对应的事件函数中通过This.xx来调用这边变量。
匿名函数:(function(){ var mes ="hello " function f1(){console.log(1111 + mes)} 内部函数引用了外部函数的数据;所以有闭包的存在; function f2(){console.log(2222 + mes)} window.mymodule = { name:f1, age:f2 } })() mymodule.name();mymodule.age();
准备——————首先创建一个在分线程中执行的js文件;接着——————在主线程中的js中发消息并设置回调函数(1)创建一个Worker对象并向他传递将在新线程中执行的脚本的URL: —————— worker是加载在分线程中执行的js代码或者脚本的。 var worker = new Worker("分线程的执行代码");(2)向worker发送数据: worker.postMessage(想要发送给分线程的参数内容);(3)接收worker返回回来的数据——————用一个事件监听函数来完成 worker.onmessage = function(event){ //表示worker对象返回数据的时候回自动调用这个事件函数 console.log(event.data);}
#div01{ width: 150px; height: 150px; background-color: royalblue; position: relative; } #div02{ width: 50px; position: absolute; //表示div02这个子元素相对于div01这个父元素的绝对偏移,下面的left 50px像素位置。 bottom: 5px; //表示div02这个子元素相对于div01这个父元素的绝对偏移,bottom是5px像素位置,在父元素最低部向上偏移5个像素。 margin: 0px auto; /*border: 1px red solid;*/ left: 50px; }
### 数据类型判断
77777 . 那些细枝末节的次要问题很重要吗?那些都是刚谈恋爱初期的感受,从余生来讲,只要主要矛盾不成问题就可以呀,比如是否会负责任,是否会兑现承诺,是否会在乎心疼你,是否有坏的习惯或者毛病,是否只说不做,是否沾花惹草,脾气暴躁等等呀,你还记得我们在一起的所有第一次,第一次因白倩倩有事而请你吃饭,第一次到你家那边去接你然后大家去滑雪,第一次元旦陪我去吃火锅,吃冰糖葫芦,去小米苹果店,教我轮滑,第一次晚上看完电影开车送你的时候找理由说你手冷而帮你捂手,第一次和我说你因为顾忌我特意避开异性同事而变得不开心,第一次我们去逛华联超市,第一次发暧昧的聊天,第一次告诉我你辞职计划并我讨论我们未来规划,第一次拉着手摇摇晃晃去吃饭之后送你去车站,第一次送你回家在公交车上靠着我肩膀休息,第一次我们在人家餐厅边吃饭边看剧呆了好久好久,第一次在面试室里准备面试资料的时候主动亲我,第一次因为见到你和异性朋友聊天而吃醋生气,第一次等候在考场门外迎接你然后去吃饭并在车里玩游戏连输了好几局,第一次去我家机试,点外卖,看电影,第一次到钱江新城看夜景,第一次去美食街胡吃海喝,去爬山有机会背着你...... 我想说的是,我依然会一直陪你爱你在乎你,不欺骗你,尽我所能保护你,可能有时候没有及时那么懂你的心思,但是只要反应过来我一定会听你和满足你。虽然我很在乎你,但我也想你开心,所以我不想给你压力和约束你。兴趣爱好,审美性格,人生规划和梦想进程,隐私和密码(遗憾和在意的)你知道吗,你已经对我关上了所有的窗口,我们的交互方式只有公司、微信,但是在公司你有老胡,在家;你有你自己生活和空间,我不能找你,以前聊天还能暧昧和谈心,现在你聊天都像刺一样要么就是嗯啊,奥,不要,不想,不要和我谈这些。晚上吃饭就单纯吃饭;实际上就是一句话:不喜欢了;我说过了,不喜欢就不喜欢,不要那么拖拉,你遇到你一个喜欢的人能嗯啊,不要和我谈这些,哪怕谈叙利亚战乱你都能开心,还有你自己就巴不得什么都分享,还管他什么没有猜你心思,只要他能关心你一下下你都能开心好久,他没拒绝你的付出就已经很开心了,那还顾及上他对你付出是否让你满意呀,哈哈哈,好吧!我已经在努力争取了
线程池核心思想———— 将任务提交和**任务执行(线程调度和执行)**进行解耦。
1.每个线程在系统中都占用自己独立的内存空间————栈,注意其中内存模型中的堆和方法去是所有线程共享的;2.这个栈实际细分包含:虚拟机栈,本地方法栈和程序计数器,这些是每个线程所有私有的;(2.1)其中虚拟机栈又是一个个栈帧(正好对应每个方法)组成的,(2.2)每个栈帧中细分为:局部变量区、操作数栈、动态链接、方法的返回地址用栈帧来分析递归函数:在函数内部调用自己,在虚拟机栈中一层层的叠加栈帧,按照后入先出的顺序,一层一层级执行完然后释放, 最后到栈底的main方法内;注————java中可能不太形象查看栈的调用现象:可以通过前端的浏览器的调制工具来查看—— call stack;里面就可以看看一个个栈帧的运行状况;
(1)jQuery本身是js的一个库,这个库向外暴露的就是一个核心函数—— $ ;既然是函数,那么就可以执行,这个函数执行后返回值就是一个jQuery对象;核心注意: $ 作为函数使用时,返回的一定是一个jQuery对象奥!这个jQuery对象里面代表或者封装的是Dom元素的节点对象奥!
(2)$ 可以加括号当函数使用,或者自身作为函数对象来使用;加括号当函数使用后,必定返回一个jQuery对象,这个jQuery对象内部包含的是所有匹配的任意多个dom元素的伪数组对象奥!!! 如果自身作为函数对象使用时,可以调用一些工具方法来作为通用方法使用; (3) $ 加括号函数调用后返回的jQuery对象使用时;这个对象中包含了匹配了任意个Dom元素的节点对象;所有对jQuery对象的操作本质就是对这些dom节点对象的操作。为啥使用封装了dom节点对象的jQuery对象来操作文档呢?因为jQuery对象中拥有很多有用的属性和方法,方便程序员操作dom。 (4)jQuery中函数内部涉及到的this,还是jQuery对象内部包含的dom对象奥!! 即 this 是 dom对象 (5)jQuery中,jQuery对象对元素的固有属性处理、样式、位置、尺寸都是不同的奥!!! 一个标签的固有属性和样式(位置、尺寸)是两个不同概念奥!!!!JQuery对象实际上是里面封装了一个或者多个Dom对象的伪数组;区别jQuery对象和Dom对象奥!!jQuery对象的方法有个特点:读写合一(就是不同参数形式,表示不同的函数)
jQuery核心两点:jQuery核心函数($(xxx))和jQuery核心对象($. trim(),jQuery将一些公共公用的方法封装就到这个对象里面)。函数形式有三种,体现在函数参数不同,1.参数还是一个函数,表示dom加载完执行的回调,2.参数是选择器字符串,表示匹配对应的dom节点封装成jQuery对象,有普通选择器、层级选择器(子孙后代或者兄弟)、过滤选择器、表单选择器等等3.参数是HTML标签字符串,表示创建一个该标签的jQuery对象。
jQuery是一个包含有一个或者多个dom对象的封装体;它有隐式遍历的特点奥!!!
给jQuery对象中dom对象添加属性:前言————上面完成了标签对象属性操作—— 标签对象的样式、标签元素的位置、尺寸大小该如何设置和处理呢?
(1)给jQuery对象设置样式—— 访问和设置匹配元素的style样式属性。$(’#id’).css(‘background’); ———— 访问节点的背景属性值!
$(’#id’).css(‘background’,‘red’); ———— 设置节点的背景属性为红色!(2)位置
offset()—— 相对于页面左上角的坐标,不是窗口奥!; 还有一种可以加参数{left:xx,top:xxx}设置元素对象相对窗口的位置; jQuery对象.offset()—— 获取当前对象在窗口的两个相对偏移值:top和left值; var offset = $ (’.div’).offset(); offset.left和offset.right; position()—— 相对于父元素左上角的坐标;(3)尺寸
每一个元素都是一个盒子,设置和查询元素的高和宽; jQuery对象.width()和 height() ;返回对象中dom元素的内容区宽和高的值; jQuery对象.innerwidth()和 innerheight() ;返回对象中dom元素的内容区宽和高加上内边距padding的和值; jQuery对象.outerwidth()和 outerheight() ; 这两个方法可以传布尔值,不传认为是false,在基础上加上border的值,如果为true,表示还要加上margin值;前言————通过选择器可以直接找到匹配的dom对象的封装对象——jQuery对象;但是有时候需要进一步在jQuery对象中筛选dom对象;就需要用到jQuery对象的筛选方法——过滤和查找;
过滤是在jQuery对象中包含的dom对象基础上进一步过滤某些dom对象并封装返回jQuery对象;返回的jQuery对象中dom是前面的jQuery对象的dom中的子集奥!!
查找是在jQuery对象中包含的dom对象下查找他们的子孙或者兄弟或者父母奥!!并再封装成新jQuery对象返回
筛选: 过滤 和 查找过滤是从一个集合中过滤某些不满足的元素;但最终返回的是集合的一个子集; 常用filter()、first()、last();查找是从一个集合中元素下层元素中查找,查找他们的后代元素;常用children()【子元素】、find()【后代元素包含子和孙】、parent()父
前言————上面获取标签对象、可以设置标签中属性、样式、位置、大小;那标签内部结构再增、删、改新标签元素该如何操作呢?
简单说就是向文档页面中增删改一些节点标签元素;如1.向指定的元素前面添加一个标签节点、2.删除指定匹配的元素节点、3.用自定义的标签元素替换指定匹配的元素节点
(1)内部插入:
A.append(B) 简单说就是将新建的B添加到目标A的内部的最后面。 B.appendTo(A);是将新建的B添加到目标A的内部的最后面。 $ul1.append('append()添加的span'); $('append()添加的span').appendTo($ul1);
(2)外部插入:
jQuery对象.empty(); 是将该jQuery对象内部子元素都删除; —————————— 掏空内部所有(自己还在)jQuery对象.remove(); 是将该jQuery对象自身整体删除; —————————— 将自己及内部 都删除
A.replacewith(B) 简单说就是用新创建的B来替换目标A。
(1)事件绑定常用两种方式:
(2) 事件解绑
jQuery对象.off(eventName) ; 如果没有参数,表示解绑该对象上所有事件,如果有参数就解绑指定参数的事件。
(3)事件对象触发时鼠标的坐标
event.target —— 可以获取事件对象;(4)事件相关处理
(5)同样事件小区别
mouseover、mouseout 和 mouseenter、mouseleave 区别冒泡:大元素包含小元素。触发小元素的事件,但是会向上继续触发连带的大元素的事件事件委托:将子元素的事件监听委托给父元素代为处理,(1)监听回调函数是加在父元素上的,当操作一个子元素时,事件会冒泡到父元素上,(2)但是父元素不会直接处理事件,而是根据event.target得到发生事件的真正元素(子元素),本质还是这个真正元素对象去调用回调函数奥!(3)注意,回调函数中this到底是谁 ———————— this就是真实事件的元素对象奥(子元素对象)通过父元素委托指定子元素的事件———— $(父选择器).delegate(子选择器,“事件名(click)”,回调函数) 上面是委托当然可以取消子元素的委托 —————— $(父选择器).undelegate(“子元素指定的委托的事件名”)
$("#div02").slideUp("slow"); 向上减少高度来隐藏div02$("#div02").slideDown("slow"); 通过高度变化(向下增大)来动态地显示所有匹配的元素
$("#div02").fadeOut(1000); $("#div02").fadeIn(1000);
$("#div01").animate({ width:200},1000).animate({ height:200},1000) ; 元素大小的动画变化$("#div01").animate({ left:lef+50,top:heigh+100},1000) ; 元素位置的动画变化这个表示是在每次位置基础上移动;所以一般需要知道上一次位置坐标;实际上人家也提供了一直便捷的语法形式:“$("#div01").animate({ left:"+=50",top:"+=100"},1000)”
基于jquery编写的扩展库;
插件思想—— 声明式操作;就是真正操作的代码封装好了,开发者只需要按照规则进行声明操作就可以实现。有时候会需要自定义操作,也是按照规则来配置就可以了dom元素常见难点样式:display, float 、position 、overflow
JS中Ajax原生的方式:
$(function(){ var str; console.log("请求开始!!!"); //原生ajax的创建过程: //(1)首先创建请求客户端对象 var ajaxtest = new XMLHttpRequest(); //(2)通过上面网络请求对象的open方法进行请求参数的设置 ajaxtest.open("GET","http://localhost:8088/getall",true); //(4)下面开始判断请求是否完成,设置事件监听;通常这一步是绑定请求响应的事件,可以放在发送请求send前 ajaxtest.onreadystatechange = function(){ if(ajaxtest.readyState ==4 && ajaxtest.status==200){ str = ajaxtest.responseText; console.log("获取到的响应内容", str); } } //(3)上面是设置好网络请求的相关参数,还需要发送这一行为才可以 ajaxtest.send(); console.log("测试是否异步!!!"); })
jQuery的ajax请求:
使用jQuery函数对象的工具ajax:方式一》》》复杂的: content-type 在那一端设置,就是告诉对方,自己数据内容的编码类型$.ajax({url: 请求的地址data: 发送到服务端的数据 type: 请求方式success: 请求成功,响应的回调函数;这样这边响应回调函数中返回的数据会根据下面返回数据类型自动解析后,才传递到此回调函数的数据奥!dataType: 期望响应的数据类型_"text"纯文本; “json”返回json数据;}) 案例:$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); }});function rawJqueryAjax(){$.ajax({ url: "http://localhost:8088/getall", type: "GET", success: function(meg){ console.log("$.ajax 请求方式:", meg.length) },// dataType: "text" //这边如果没有指定响应类型,默认好像后端传来的是json对象,可以明确设置,然后回调函数的参数就是指定的类型了 //特别注意: dataType这个表示返回的数据编码类型,它直接决定上面回调函数的返回参数的数据类型奥!!! //如 dataType: "text" 则上面mes就是字符串类型的返回数据; dataType: "json" 表示上面meg是一个json 对象;})}方式二》》》简化版:$.get(url,data,callback,type)其中data传递给后端的参数类型有两种:第一种"name=John111&&location=Boston";这种方式通常是get请求; 好像在使用$.post时候也可以是这种传参格式,但是原生$.ajax的post不可以第二种{ name: "John-JQueryAjax", time: "2pm" } 这种方式get和post请求都可以同样注意,data参数的选择不同,直接决定回调函数的参数类型;如“text”;则回调函数的mes是字符串返回响应;如“json”表示是json对象返回的案例: function JQueryAjax(){ // $.get("http://localhost:8088/getall",{ name: "John-JQueryAjax", time: "2pm" },function(data){ $.get("http://localhost:8088/getall","name=John111&&location=Boston",function(data){ console.log(typeof data); },"text") }
hello world
特点:遵循MVVM模式代码简洁、体积小、运行效率高与其他框架的关联:借鉴angular的模板和数据绑定技术借鉴react的组件化和虚拟Dom技术通常我们一些程序设计语言,其中相关代码都是局限在指定的环境下编写;同样,vue框架可以通过相关的vue指令属性,在html视图层进行一些代码操作;如vue环境中(vm对象)内部可以编写一些方法、属性; 方法中可以进行各种变量和各种逻辑结构操作;而只要在html标签中设定一些vue指令属性,那么就可以在html视图模块中也可见vue环境中操作的一些数据或者内容了。(1)比如vue对象中创建了一个变量 tmp:“abc”; 而在html标签中通过v-model = “tmp” 就可以获取到vue环境中创建的这个tmp变量了; (2) 同理vue环境中创建了一个方法,在html标签中可以通过@click = “xxx”直接获取该方法的响应结果,变成了回调函数;这两个案例当伪代码理解,理解其思想。