本帖最后由 小石姐姐 于 2018-5-4 09:44 编辑
(石家庄校区)前端笔记
什么是html：HTML：Hyper Text Markup Language. 超文本标签语言
html中的标签：
<font>标签
属性：color,size,face
<h1-6>：标题标签
<p>：段落标签
<b>:加粗标签
<i>:斜体标签
<u>:下划线标签
<br>：换行标签
<hr>:水平线
<img>标签
src:图片的路径
width,height,alt
<a>
href:链接的路径
target:连接打开的方法 _self,_blank,_parent
<ul>:无序列表
<ol>:有序列表
<table>:表格标签
<tr>:表格的行
<td>:表格的列
<form>：表单标签
action:表单提交的路径
method:表单的提交方式
get和post
get:地址栏会显示提交的信息，有大小限制
post:地址栏不会显示提交的信息，无大小限制
<input>
type=”text”:文本框
type=”password”:密码框.
type=”radio”:单选按钮.
type=”checkbox”:复选框.
type=”file”:文件上传.
type=”hidden”:隐藏字段.
type=”submit”：提交按钮.
type=”reset”:重置按钮.
type=”button”:普通按钮.
type=”image”:图片按钮.
<select>:下拉列表.
<textarea>:文本区
<frameset>:框架标签，与body冲突，
<frame>:切割为几部分
<div></div>：默认一个div独占一行
什么是css：
层叠样式表，可以美化HTML网页
语法格式：
选择器｛属性：属性值；属性：属性值...｝
css的引入方式：
行内样式：直接在HTML的标签上使用style属性
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS
外部样式：单独定一个一个.css的文件，用<link href = "" rele = "stylesheet" stype = "text/css"
css的选择器：
元素选择器：
div{
}
ID选择器：
#ID{
}
类选择器：
.divClass{
}
属性选择器：
input[type="text"]{
input中类型为text的元素
}
后代选择器：
div span{
查找div中所有的span元素
}
子元素选择器：
div>span{
查找这个div中第一层级的span元素
}
css的盒子模型
内边距：padding
padding-top:上内边距
padding-right:右内边距
padding-left:左内边距
padding-bottom:下内边距
边框：border
外边距：margin
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
css的浮动：
float:
left：向左浮动
right：向右浮动
none:默认值，不浮动，显示其在文本中出现的位置
inherit：从父元素继承float属性的值
clear:清除浮动效果
left:左侧不允许有浮动的元素
right:右侧不允许有浮动的元素
both:两侧不允许有浮动的元素
none:运行浮动元素出现在两侧
inherit:从父元素继承clear属性的值
css定位：
position
relative:相对定位
absolute:绝对定位
伪类：
a:link{} :未访问的链接
a:visited{}:已访问的链接
a:hover{}:鼠标移动到链接上
a:active{}:选定的链接
javaScript
输出方法：
1.document.getElementBy("id").innerHTML="";//属性
2.document.write();//方法
常用框架
JQuery,ExtJS,DWR,Prototype...
js文档事件
*使用js时首先确定事件，实现方法
onfocus :获得焦点
onblur:失去焦点
onsubmit:提交
onload :页面加载
onclick:鼠标单击
onchange:下拉列表改变事件
ondblclick:双击事件
onkeydown:键盘摁下
onkeyup:键盘抬起
获取元素：
document.getElementById('');//id选择器
document.getElementByName();//name选择器
JQuery
$("#id") id选择器
$(".class") class选择器
element.parent() 获取元素父元素
事件
click()单击
change();下拉列表改变
dblclick()双击
blur();失去焦点
focus();获得焦点
mousemove();鼠标移动
mouseout();鼠标离开
keyout();键盘抬起
keydown();键盘摁下
$(document).ready(function(){})入口函数
$(function(){})入口函数
jquery事件切换
toggle();单击事件的切换//jquery1.8支持
$("table th").toggle()//行高量显示
hover();鼠标悬停的切换 //可以用css伪类替换。
事件处理
trigger();//触发浏览器默认事件 ，当鼠标失去焦点时，默认还会把焦点放到input中
triggerHandler();//不会触发浏览器默认事件
on("click dblclick",function(){})//事件绑定 当两个事件做同一件事时
bind()事件绑定 当两个事件做同一件事时
委托
delegate();
$("#div").delegate("子元素","click",function(){})//由页面创建的子元素委托给div 创建click事件
页面加载完之后，原始绑定方式不能帮到子元素上，所有用到委托。
下拉列表和checkBox的属性
*下拉列表和checkBox的属性
:checked 选中
:selected 选中
DOM元素属性
DOM:Document object Model 文档对象模型
Element html中的标签
attribute 属性对象
*一般用到隔行换色
rows:行
rows.length:获取到表格的行数
tab1.tBodies[0].rows.length//获取表格中的行数
document.getElementById();获取id
document.getElementByName();获取name
document.getElementsByTagName();根据标签名获取
docuement.createElement() 创建元素
element.appendChild(); 在最后添加节点
element.insertBefore();在某个元素之前插入
document.createTestNode() 创建文本
|
|
收藏
淘帖
踩
