黑马程序员技术交流社区

标题: 前端基础知识整理 [打印本页]

作者: EscapedPupil 时间: 2019-6-14 20:20
标题: 前端基础知识整理
前端结构组成
<HTML> <CSS> <JAVASCRIPT> -->静态网页
HTML中含有大量的已经定义好的标签.标签结构:<html> <head> <meta /> <title></title> </head> <body> </body></html>
CSS的引入格式 1:HTML标签中直接定义,例如:style="border:1px solid green"
2:HEAD标签中定义<SYTLE> table{...}... </STYLE>
3:从外部引入: <LINK REL="STYLESHEET" HREF="CSS/SAP.SCC">
CSS常用方法 text-align 水平居中 -- line-height垂直居中  --  border-radius圆角 - border-bottom(top等)设置哪条线的边框

CSS中的选择器: 三大基本选择器: ID选择器(id) 类选择器(class) 标签选择器(tagName)
定义方法分别是根据id(最好唯一) #id{...} --  .class{...} -- table{....}
其他选择器 DIV SPAN{找寻DIV下的所有SPAN标签}    DIV> SPAN{找寻DIV下所有的直接子标签SPAN} DIV[name='div1']{找寻name属性为div1的所有DIV}

JS的引入格式 1:任意位置定义<script> JS代码 </script> 注意:script标签应该放置在body末尾,否则会引起页面加载未完毕,但是js代码执行了,导致js中的某些参数为 undefined,解决方案:放置在body末尾,添加window.onload方法,将部分代码放置在window.onload = function(){部分代码};
2:<script src="JS/js.js"></script>导入外部的js文件
<BOM> bom的对象有window,location,history,screen,navigator,
常用的window open(url)  ,close() , alert(弹出输出框) , confirm(弹出确认框) , prompt(弹出输入框) ;
location, reload():刷新    属性href=url(可以直接设置,地址栏将会直接跳转)
history forward(+number) back(+number) go(number) 前进几个页面,后退几个页面 go(无论正负)个页面

<DOM> document->window.document(window几乎都是可省略的)
Node->Document->Html->{Head,Body}
方法: Element GetElementById(id) ; Elements getElementsByTagName(标签名) ;
Elements getElementsByName(name属性) ; Elements getElementsByClassName(class属性)
向某个子标签添加子节点
例如:Table中添加tr
var table = document.getElementsByTagName('table')[0];
var tr = document.createElement("tr");
var td1 = document.createElemtn('td');
var td2 = document.createElement('td');
var text1 = document.createTextNode("赵日天");
var text2 = document.createTextNode("男");
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);//此处即将<tr><td>赵日天</td><td>男</td></tr>添加到table的节点末尾
某个标签删除某个子标签
例如TABLE中删除TR
var tr = document.getElementById("delTr");
var table = tr.parentNode();
table.removeChild(tr);
根据table的子标签tr中的某个td删除tr
var td = document.getElementById("delTd");
var tr = td.parentNode();
var table = tr.parentNode();
table.removeChild(tr);

设置属性方法
Xxx.setAttribute("属性名","属性值");
Xxx.属性名 = "属性值";
第二种方法尽量不要多用,因为其在对class和onclick等属性赋值的时候会出现无法赋予属性的问题.

事件:
1:单击事件 onclick
2:双击事件 ondblclick
3:鼠标移动到某模块上 onmouseover
4:鼠标在某模块上移动 onmousemove
5:鼠标移出某模块 onmouseout onmouseleave
6:鼠标在某模块上按下 onmousedown
7:鼠标在某模块上按下抬起onmouseup
8:键盘按下 onkeydown
9:某模块值发生了变化 onchange
10:表单提交动作出发 onsubmit
11:表单项重置输入框等 onreset
12:某模块加载完毕 onload
事件绑定方式
1:示例:<input type='button' onlick='fun()'> js: function fun(){执行的代码}
2:示例:<input type='button' id='btn'>  document.getElementById("btn").onclick = function(){.......}
3:示例:<input type='button' id='btn'> function fun(){...}; document.getElementByID('btn').onclick = fun;

Bootstrap前端框架->导入jar包(复制css,js,font文件夹,jquery.js(非常重要!bootstrap中很多js,css依赖于jquery))

新建的html页面中,需要引入css下的两个bootstrap.min.css和bootstrap.theme.min.css ,然后引入jquery,在引入bootstrap.min.js!!!!!!必须先引入jquery

Bootstrap引入之后,实现的栅格方法,任何设备的每一行都是由12个格子组成.分别有xs , sm , md , lg (xsmall,small,middle,large)
层级关系:
<div class='container'(两边留白)>/<div> <div class='container-fluid'></div>(两边占满)
<div class='row'></div>定义一行
<div class='col-md-4'></div>定义该div占了一行的4个格子,当屏幕是sm尺寸的时候,该div直接占满一行
<div class='col-md-4 col-sm-6'></div>定义该div占了md的一行4个格子,当屏幕尺寸是sm的时候,该div占屏幕的6个格子
******bootstrap中的css属性有一个thumbnail ,用于将大图片缩小到匹配的大小.
其余的查看文档!

<XML>相比于HTML, 1具有非常严格的语法.
2标签全部是自定义的
3HTML用于页面展示,XML用于存储数据
XML约束:dtd(不够严格) schema(常用且严格)
XML文件第一行必须写<?xml version='1.0' ?>否则报错
schema约束:
<?xml version='1.0' ?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
         xmlns="www.gouyao.com"
         targetNamespace="www.gouyao.com" elementFormDefault="qualified">
<xs:element name="users">
      <xs:complexType>
         <xs:sequence>
            <xs:element name="user">
                  <xs:complexType>
                     <xs:sequence>
                        <xs:element name="id" type="xs:string"/>
                        <xs:element name="name" type="xs:string"/>
                     </xs:sequence>
                  </xs:complexType>
            </xs:element>
         </xs:sequence>
      </xs:complexType>
</xs:element>
</xs:schema> 此处即为一个最简单的schema约束!

<?xml version='1.0'>
<users xmlns:xsi = 'http://www.w3.org/2001/XMLSchema-instance'
xmlns='www.gouyao.com'
xsi:schemaLocation='www.gouyao.com  user.xsd'
>
<user>
<id>001</id>
<name>ad</name>
</user>
<users>

XML文件的解析方式: DOM:以DOM树的形式一次性将整颗DOM树加载进内存,很耗资源,但是可以执行CRUD(增删查改)操作
SAX:应用于移动端:采取只读单行的模式,类似于Iterator ,只读取一行,只能执行读操作,消耗内存很小.
解析XML的框架:DOM4J

Jsoup(JsoupXpath)(已学)(需要导入Jsoup包)使用JsoupXpath需要导入JsoupXpath包

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2