黑马程序员技术交流社区
标题:
回顾最近掌握的前端知识技巧--大巧不工
[打印本页]
作者:
连静杰
时间:
2019-1-14 23:50
标题:
回顾最近掌握的前端知识技巧--大巧不工
HTML定义了网页的内容
CSS描述了网页的布局
JavaScript网页的行为
jQuery是一个JavaScript库。极大地简化了JavaScript编程。
html:负责页面的结构(语义)网页制作语言(不是编程语言)。就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
1.<h1~h6>主要给文字赋予标题的含义 容器级标签
2.<p>段落标签文本级标签
3.超链接a <ahref="链接资源的地址"target=_blank"></a> "target=_blank"在新窗口打开
4.<imgsrc="图片路径"title=“”alt=”“>
5.表单:收集用户输入的信息
*文本框:inputtype="text"
*密码框:inputtype="password"
laber标签
<laberfor="txt">文字</laber>
<inputtype="text"/> //让label标签的文字和当前表单产生关联
radio单选 checkbox多选
图片按钮:<inputtype="image"src="">
6.<caption>定义网页标题
7.<div>块级标签容量级标签
8.<span>行内标签
9.有序列表:
<ol>
<li></li>
<li></li>
</ol>
无序列表:
<ul>
<li></li>
<li></li>
</ul>
10.表格<table><tr> <td>;
css:负责页面的美化(样式)
1.width:宽度;height:高度;
2.padding:外边距;margin:外边距;border:边框;
3.solid实现 dashed虚线 dotted圆点虚线 double双实线 ridge具有3D立体效果的边框
4.padding属性的写法:
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
5.做网页时,需清楚默认样式*{padding:0;margin:0;}
6.border三要素:细线、颜色、线型(形状)透明度:transparent;
7.!imporant给最高权重;
8.text-align:center;文本居中;
9.display:inline;块元素转为行内元素 display:block;行内元素转为块元素;
10.css中三种方式可以让元素脱离标准文档流:浮动、绝对定位、固定定位;
11.clear:both;overflow:hidden;清除浮动
12.list-style-type:none;清除列表的小圆点;
13.background属性:
background-img:url()设置背景图片;
background-color背景颜色;
background-size:放大/缩小倍数,用%表示;
background-position:centertop;图片居中
background-repeat:no-repeat;图片不平铺;repeat-x;表示水平方向重复;repeat-y;表示垂直方向重复;
background-attachment背景是否被固定;
14.<linkhref="这里是css文件引用路径"type="text/css"rel="stylesheet"/>
15.<style>这里是css样式编辑区域</style>
16.css链接:
a:link普通的、未被访问的链接;
a:visited用户已访问的链接;
a:hover鼠标指针位于链接的上方;
a:active链接被点击的时刻
a的样式涵盖了:a:link,a:visited的样式;
17.line-height行高;
18.font属性:能够让字号、字体、行高一起设置;
font-size:字体大小设置;
font-family:字体;
font-weight:bold;字体加粗;
19.文本装饰:
text-decoration:overline;上划线;
text-decoration:underline;下划线;
text-decoration:line-through;删除线;
text-decoration:none;去掉下划线;
19.rgba(0,0,0,0.8);a表示透明度;
20.position:relative;相对定位用于元素微调;
position:absolute;绝对定位;更灵活
position:fixed;固定定位;
position:static;静态定位;
21.border-radius:10px;圆角 opacity:0.5;透明度;
22.margin:auto;标准流中;
23.z-index;表示谁压着谁,数值大的压着数值小的;
24.text-indent:文字缩进;
25.box-shadow:10px10px5pxblack;边框外阴影;
box-shadow:insit 10px10px5pxblack;边框内阴影;
26.text-shadow:文字阴影;
27.overflow:hidden;text-overflow:ellipsis;white-space:nowrap;多余文字的省略;
28.浏览器的兼容:
-webkie- 谷歌兼容 -moz-火狐兼容 -ms- IE兼容 -o- 欧朋兼容;
29.css32D转换transform;
transform:scale(1.2)ratote(360deg);scale放大倍数 ratote旋转度数;
transition:all0.2sease;达到渐入渐出的效果;
30.resize:none;文本域固定;
31.outline:none;边框不变;
32.元素的显示或隐藏:
display:none;隐藏元素所占空间的释放;
display:block;显示;
visibility:hidden;让多余的内容隐藏;
visibility:visible;显示;
33.vertical-align:middle;垂直居中
34.行内式>id选择器>类>*>继承>默认选项;
js:增加交互或特效
javascript:基于对象和事件驱动并具有相对安全性的客户端脚本语言;
用途:制作页面交互效果,如轮播图的切换、tab栏切换、地图、表单。脚本语言:嵌入在html中,由浏览器解析执行
js代码引入位置:
<scripttype="text/javascript">
//js代码写在这对标签里
alert(“......”);完整写法window.alert(“消息”);
</script>
2.alert("消息");在浏览器中,弹出一个窗口;
3.语法规则:
a.js对换行、空格不敏感;
b.每句末尾,必加;;
c.都在英文状态下输入;
4.注释:
a.html的注释<!--...-->;
b.css的注释/*...*/;
c.js的注释单行注释//;
多行注释 /*...*/;
5.直接量(常量)
6.变量(未知数)js中用来储存不同数据(以字母开头或者以下划线,以$符开始的变量);
7.typeof判断数据类型,结果是number表示是数值(整数或小数);string是字符串;
8.外链式写法:<scripttype="text/javascript"src="引入文件”></script>
9.confirm("...");弹窗显示 一般与if...else配合显示;
prompt(“请你输入一个数”)用户输入的信息都是字符串;
document.write("...”)往网页中输入信息,而且参数可以放置;
10.变量值的传递:a=b;含义:将b的值赋予给左边的变量a,但b不变;
11.程序流程结构:
a.顺序结构:程序从上往下,一句句执行;
b.条件结构:ifif-else等;
c.循环结构:while、for、do-while;
12.Math.floor(number) 向下取整;
Math.ceil 向上取整;
Math.round四舍五入;
13.==不全等于; ===全等于; 布尔值truefalse;!=不等于;!==不全等于;&&并且;
||或;!取反;
14.a++与++a都是表达式,表达式是有值的,a++表达式的值用a原来的值,++a表达式的值用a加1后的值;
15.数组定义vararr=newArray();//通过new来创建;
vararr2=[];
16.javascript的特点:
a.一种解释性执行的脚本语言(也是一种解释性语言);
b.一种基于对象的脚本语言;
c.一种简单弱类型脚本语言;
d.一种相对安全脚本语言;
e.一种跨平台性脚本语言;
17.函数含义:对一段js代码进行封装,便于反复使用,提高代码的复用性;
18.变量的作用域:全局变量和局部变量
全局变量:a.在最外层声明的变量;
b.在函数体内部,但是没有声明var的变量也是全局变量;
局部变量:在函数内部,通过var声明的变量(局部变量的有效范围在本身所在的{}内);
隐式全局变量:在函数内部来用var申明的变量,并在函数处也没有申明的系统默认为全局变量;
19.事件三要素:a.事件源:一般是个名词,表示事件的来源;(开关发起者被触发者)
b.具体的事件(行为或动作)单击双击鼠标悬停;(打开)
c.事件处理程序:当事件发生,做什么?(灯亮)
20.onmouseover当鼠标移入; onmouseout当鼠标移出;
onmousedown当鼠标按下时; onmouseup当鼠标按下时;
onfocus获得焦点; onblur失去焦点;
onclick点击 onchange值改变;
21.js入口函数:
window.onload=function(){//窗口加载完执行里面的代码};
22.js数据类型:字符串、数值型、布尔类型、null、object、undefind;
23.获取表单的值:text.value;
24.函数参数:a.函数名.length得到形参个数;
b.arguments.length得到实参个数;
变量提升:在函数内部通过var声明的变量,无论这个变量在什么位置定义,都先把声明放在前面,赋值放在定义的位置;
25.找元素:a.通过id的值;
b.通过标签名;
26.定义函数:考虑参数设置arr,接受传来的数组;
27.排他思想:先干掉其他所有,最后剩下自己一个在处理;
28.变量和属性:a.变量:独立,自由自在,在有效范围内大家都可以用;
b.属于某个对象的;对象属性或对象方法();一个对象可以设置或添加属性;
29.数组的常用方法:
a.添加元元素:arr.push();push()方法在数组的末尾添加一个或多个元素,返回的是数组的长度; unshift()从数组的前面放入元素;
b.删除元素:pop()移除最后一个元素;shift()移除第一个元素;
数组的连接concat()该方法用于连接两个或多个数组,不会改变原来的数组,返回的是连接的数组的一个副本;
c.把数组转为字符串:join()作用是将数组各个元素是通过指定的分隔符,进行连接成为一个字符串;
d.把字符串转为数组:split()用于把一个字符串分隔成字符串数组;
30.节点(标签元素节点):
元素节点:每一个HTML标签;
文字节点:标签中的文字;
属性节点:标签的属性;
访问节点
getElementById()id访问节点;
getElementByTagName()标签访问节点;
getElementsByClassName()类名兼容问题;主流浏览器识别,ie6,ie7,ie8不识别;要想任何浏览器都识别这个方法,需要自己封装封装自己的类;
parentNode 父节点
兄弟节点:下一个兄弟 nextSliblingie6,ie7,ie8识别;nextElementSibling其他浏览器识别;
兼容处理:one.nextElementSibling||one.nextSil上一个与下一个兄弟同理;previouSibling previousElementSibling;
子节点(不常用,几乎很少用)
firstChild第一个孩子; ie7,ie8识别 firstElementChild正常浏览器识别(空格也算孩子)lastChild最后一个孩子;lastElementChild;
孩子节点(重点)
childNodes选出全部的孩子 利用nodeType==1获取元素节点;
children选择所有的孩子,仅仅选择的是元素节点(庶出,推荐使用);
demo节点操作:新建节点、删除节点、克隆节点;
新建节点creatElement 插入节点appendChid insertBefore子节点添加孩子 getAttribute(属性)获取属性;
31.vartime=newDate();
getFullYear()年;getMouth()月;getDay()星期;getDate()日;getHours()时;getMiutes()分;getSeconds()秒;
32.setInterval 定时器;clearInterval清除定时器;setTimeout定时器执行一次关闭;
33.this指的是事件源或者函数调用者;
34. even对象;
35.screenX screenY 光标相对于屏幕的x/y的值;
pageX pageY 光标相对于当前页面(网页)的x/y值;
clientX clientY 光标相对于可视区的x/y的值;
36.window.scrollTo(x,y)让窗口滚动到某个位置;
37.joson一种轻量级的数据交换格式,js的一种表现法;
38.事件冒泡:当一个元素的事件被触发,同样的事件会在这个元素的所有祖先元素上触发,这种过程叫事件冒泡;
jquery是js的一个库,把我们开发过程中常见的功能进行了封装,放在一个文件里,这个文件就是库文件;
1.jquery的入口函数:
a.$(document).ready(function(){//代码});
b.$(function(){});
c.JQuery(function(){});
2.eq();找元素;odd()序号为基数,对列行数为偶数;even()序号为偶数,对列行数为基数;
$("").find("");找具体的某一个元素;
3.addClass添加样式;removeClass移除元素;hasClass在样式上来回切换;
4.show()显示 作用:让元素展示出来;hide()隐藏 作用:让元素隐藏起来;
5.slideUp()向上滑动;slideDown()向下滑动;slideToggle()向上,向下切换;
6.自定义动画:所有能够执行动画的属性必须只有一个数字类型的值;
停止动画:stop();
7.fadeIn()淡入;fadeOut()淡出;fadeToggle()淡入淡出切换;
8.append()添加元素;clone()复制元素;html()创建元素;remove()清除元素;
9.attr()获取属性;removeAttr移除属性;
checked、selected、disabled要使用prop()方法;
10.值和内容:
val()获取内容方法 作用:设置或返回表单字段的值;例如:input,select,textarea的值;
text()方法 设置或获取匹配元素的文本内容;
11.scrollTop()作用:获取或设置元素垂直滚动的位置,有参数是设置,无参数时获取;
12.each方法:一般针对不同的元素设置不同的操作;
13.简单事件:——bind方法——delegate——on;
14.unbind()对通过bind方式绑定的事件进行解绑,解绑指定元素的某个事件;
15.undelegatete()对通过delegate方式进行解绑——产生事件冒泡(进行解绑是对父级元素进行解绑);
16.trigger让某个元素的事件触发;triggerHandler触发事件响应方法;
17.target属性 表示真正触发事件的元素;
18.keydown键盘按下;
19.siblings()
另外需要注意HTML、CSS、JavaScript的注释符号!
获得匹配集合中每个元素的同胞,通过选择器筛选是可选的(其他的兄弟,不包括自己);
最后推荐的几本前端工程师需要看的书籍《JavaScript语言精粹》、《精通CSS:高级Web标准解决方案》、《你不知道的JavaScript(上卷)》、《你不知道的JavaScript(中卷)》、《CSS权威指南》、《图解CSS3核心技术与案例实战》、《JavaScript设计模式》、《JavaScript高级程序设计》、《编写可维护的JavaScript》、《图解TCP_IP》、《JavaScript.DOM编程艺术》等。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2