华清远见——前端学习总结
HTML
常用标签：
：设置字体,字号,颜色；
：换行；
：插入水平线；
：划分段落；
：插入图片；
表单元素：
：收集用户输入信息,并提交给服务器；：创建文本框；
：创建密码框；
：创建单选按钮；
：创建下拉列表框；
：创建列表项；
：创建复选框；
：创建文本区域；
：创建隐藏控件；
：创建提交按钮；
：创建重置按钮；
举例：
jquery-事件
名字 性别 年龄 alice 女 20 tom 男 19 jack 男 21
CSS
选择器:
标签选择器 （元素选择器） 是 指用 HTML 标签名称 作为选择器，按标签名称分类，为页面中某一类标签指定
统一的 CSS 样式。
语法：
标签名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
属性 3: 属性值 3;
...
}
类名选择器（直接使用元素类名）
id选择器（直接使用元素id）
举例：
css的基本选择器
- 九龙坡
- 渝中
- 渝北
- 江北
- 沙坪坝
定位：
相关属性：
marging-top：外上边距
margin-right：外右边距
margin-bottom：外下边距
margin-left：外左边距
margin：同时设置上右下左四个外边距 (顺时针)
padding-top：内上边距
padding-right：内右边距
padding- bottom：内下边距
padding-left：内左边距
padding：同时设置上右下左四个内边距
border-top：设置上边线的粗细,颜色,线型
border-right：设置右边线的粗细,颜色,线型
border-bottom：设置下边线的粗细,颜色,线型
border- left：设置左边线的粗细,颜色,线型
border：同时设置四个边线的粗细,颜色,线型
border-width：只设置4个边线的宽度(粗细)
border-color：只设置4个边框的边框颜色
border-style：只设置4个边框的边框线型
绝对定位：position:absolute;
相对定位：position:relative;
浮动定位：
float:设置浮动定位
clear:清除浮动定位的影响
举例：
浮动练习
CSS常用属性：
font-size：字体大小；
color：字体颜色；
font-weight：设置文字粗体；
font-style：设置字体斜体；
font：设置字体所有属性（必须按顺序设置）；
text-decoration：设置文本下划线格式；
text-align：元素中的内容水平方向对齐方式；
line-height：设置行高；
vertical-align：元素中的内容垂直方向的对齐；
text-indent：段落首行缩进；
text-transform：控制英文字母大小写；
width：设置元素的宽度；
heigth：设置元素的高度；
background-color：设置背景颜色；
background-image：设置背景图片；
background-repeat：设置背景图像重复方式；
background-size：设置背景图像的大小；
background-position：设置背景图片的出现位置；
background：设置所有背景属性；
display：设置元素是否可见；
overflow：设置内容超出父区域时如何处理；
list-style-type：设置列表符号类型；
list-style-image：用图片作为编号；
opacity：设置元素的透明度；
cursor：设置鼠标到达元素上的鼠标形状；
border-radius：设置圆角矩形；
JavaScript
常用方法：
getElementById("标签的id属性")：根据标签的id获取标签对象；
getElementsByTagName("标签名")：根据标签名获取包含全部标签的数组；
getElementsByName("name属性值")：根据标签的name的属性值获取所有标签对象数组；
createElement("标签关键字")：根据标签关键字创建标签对象；
appendChild(node)：把参数对象添加到父标签内；
removeChild(node)：为父标签对象删除一个子标签对象；
getAttributeNode("属性名")：根据属性名获取属性对象；
setAttribute("属性名","属性值")：为标签对象添加一个新的属性或改变它现有属性的值；
innerHTML：用来获取或修改标签对象中的文本内容；
parentNode：返回子标签的父标签对象；
firstChild：用来获取父标签的第一子标签对象；
lastChild：返回父标签的最后一个子标签对象；
childNodes：返回父标签所有子节点对象；
nextSibling：返回当前标签对象的下一个兄弟节点；
previousSibling：返回当前标签对象的上一个兄弟节点；
举例：
js-表单输入内容校验
事件关键字：
onclick：鼠标单击时触发。
onload：页面全部内容被加载后立即触发，该事件源是body。
onmouseover：鼠标进入区域时触发。
onmouseout：鼠标退出区域时触发。
onmousemove：鼠标在某区域移动时触发。
onchange：内容改变时触发。
onsubmit：表单提交数据时触发。
onblur：控件失去焦点时触发。
onfocus：控件获取焦点时触发。
Jquery
选择器：
id选择器：$("#id属性值")
类选择器：$(".class属性的值")
标签选择器：$("标签名")
举例：
jquery选择器
jquery选择器
1.id,class,标签-基本选择器
2.层次选择器
3.过滤选择器
4.表单选择器
5.其他选择器
- 1
- 1
- 1
- 2
- 2
- 2
h4标签
h4标签
h4标签
常用事件方法名：
click() ：当鼠标单击时触发
blur() ：当标签失去焦点时触发
change()： 当标签内容发生改变时触发
dblclick()： 当鼠标双击击时触发
focus()： 当标签获得焦点时触发
keydown() ：当键盘被按下时触发
keyup()： 当键盘被释放时触发
keypress() ：按下并释放时触发
mousedown()：鼠标按下
mouseup()： 鼠标释放时触发
mousemove()： 鼠标移动
mouseout()： 鼠标退出区域
mouseover()： 鼠标进入区域
resize()： 当窗口改变大小时触发
submit()： 表单提交
操作html标签的属性：attr(“属性值”,”修改值”)；removeAttr(“属性值”)；val()；
操作标签内容：html()；text()；
操作标签的css属性：css()；addClass()；removeClass()；
获取标签对象的相关方法：
$("p").eq(n):获取第n+1个标签为p的元素
$("p").parent():获取p的父亲
$("p").next():获取p的下一个兄弟
$("p").prev():获取p的上一个兄弟