黑马程序员技术交流社区
标题:
石家庄校区-前端阶段学习笔记
[打印本页]
作者:
木木鱼
时间:
2018-12-17 15:14
标题:
石家庄校区-前端阶段学习笔记
本帖最后由 木木鱼 于 2018-12-17 15:55 编辑
HTML
value 页面显示的内容
文件标签
html head title body
文本标签
注释 <h1>to<h6> <p> <br> <b> <i> <font>
<center> -->: color size face
<hr> 属性: color width size align-->center left right
属性 color width (像素或相对于父元素的比例)
列表标签
有序 ol> li
无序 ul> li
链接
a标签
属性
href 定义url
target 定义打开方式-->1. _self: 默认值 在当前页面打开
2. _blank: 空白页面打开
div 块级标签
span 行内标签
表格标签
table
width border bgcolor align
tr
bgcolor align
td
colspan rowspan
th
<caption> 标题
<thead> 表格头
<tbody> 体
<tfood> 脚
表单标签form
属性: action 提交地址
method 提交方式-->get post {地址栏显示; 字数限制; 安全性 }
表单项数据想提交,必须指定其name属性
input
type属性: text(placeholder 灰体,输入内容后清除) password hidden
radio checkbox file
submit button img(src) reset
select, texteara
select--><select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option> {selected 默认选择该项}
</select><br>
texteara --> cols 列 rows 行
CSS
1. 行内
标签内使用style属性指定css 代码
<div style=" color:red; "> aa </div>
2. 内部
在head标签内定义style标签
<style> div{ color:red; } </style>
<div> aa </div>
3. 外链
<link rel="stylesheet" href="css文件的路径.css">
css选择器
id选择器 #ID名{}
标签选择器 标签名{}
类选择器(相同class属性值) .class后属性值
并列选择器 选择器1,选择器2{}
子选择器 选择器1(父) 选择器2(子){}
父选择器 选择器1(父)>选择器2(子){}
属性选择器 元素名[属性名="值"]{} / 元素名[属性名]{}
*{} 选择所有元素
属性
font-size color text-align line-height
background border width height
盒子模型
padding 内边距
margin 外边距
border 边框
浮动 left/right
JavaScript
与html结合三种方式
1. 行内式 双引号
<元素名 属性名="javascript:js代码;">
<a href="javascript:void(0);">test</a>
2.内联式
3.外链式
<script src="js代码路径"> </script>
数据类型
基本:
number String boolean null undefined
引用: 对象
转boolean
string 空字符串false
number 0为false
null 和 undefind 为false
对象 为ture
变量
弱类型语言
[强弱之分 在开辟变量存储空间后,是否定义数据类型]
typeof 运算符
null 运算后返回object
JS中,运算数不是符合要求的运算类型,js引擎会自动转换
string 转 number 按照内容转换, 有非number内容转为NAN
boolean true 为 1, false 为 0
=== 和 ==区别
定义变量 var 可以不加
加 局部变量
不加 全局变量(不推荐)
正则表达式
^ 开始 $ 结束
\w 单个单词字符 eg:[a-zA-Z0-9]
\d 单个数字字符 eg:[0-9]
? 0次或1次 + 1次或多次 * 0次或多次
{m,n} 最少m次 最多n次
var reg = / 正则表达式 /; 或 new RegExp("正则表达式");
test(参数) 参数字符串是否符合该正则表达式
Global
全局对象 不需对象,直接调用
encodeURL() 编码
decodeURL() 解码
encodeURLComponent() 编码(编码多,若编码网址,都会进行编码)
decodeURLComponent() 解码
parseInt() 字符串转换为数字
字符串 逐一 查找数字内容,直到非数字内容
isNaN() 判断是否为NaN
eval() 将js中字符串 作为脚本执行
DOM
文档对象模型
控制html文档的内容
获取页面标签(元素)对象: Element
Element
1. 修改属性值 <a herf= 属性值> 内容 </a>
2. 修改标签体内容
先获取,再用 innerHTML 方法调用
事件
绑定事件
方式1: 在html标签上,指定事件属性(操作),属性值就是js代码
方式2: 通过js获取元素对象,指定事件属性, 设置一个函数
BOM
浏览器对象模型
Window
Navigator
Screen
History
Location
Window对象
alert()
confirm() 点击确定,返回ture 点击取消,返回false
打开/关闭方法
open()
字符串参数可输入打开指定网址
close()
谁调用关闭谁
定时器
setTimeout() 指定毫秒后执行函数
1.js代码或方法对象 2.毫秒值
返回值: 唯一标识, 用于取消该定时器
clearTimeout() 取消由setTimeout()设置的timeout 参数传setTimeout()的标示
setInterval() 周期性执行..
clearInterval()
属性:
获得其他BOM对象:
获得DOM对象: document
Location
方法: reload() 刷新
属性: href 获取返回值(设置或返回url)
History
back() forward() go()
属性: length
DOM
文档对象模型
核心DOM
Document 文档
Element 元素
Attribute 属性
Text 文本
Comment 注释
Node 节点对象
核心DOM模型
方法:
获取Element对象
1.getElementById() id属性值
2.getElementsByTargetName() 元素名称
3.getElementsByClassName() Class属性值
4.getElementsByName() Name属性值
创建其他BOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
Element: 元素对象
通过document来获取或创建
方法: removeAttribute() 删除属性 setAttribute() 设置属性
Node: 节点对象,其他5个的父对象
所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild()
removeChild()
replaceChild()
属性:
parentNode 返回节点的父节点
HTML DOM
事件
常见事件:
1. onclick 单击 ondblclick 双击
2. onfocus 获得焦点 onblur 失去焦点
3. onload 加载事件 页面或图像完成加载
4. 鼠标事件: onmousedown 按下
onmouseup 松开
onmousemove 移动
onmouseover 鼠标移到某元素上
onmouserout 从某元素移开
方法内传入参数可接收值( 左中右--> 0,1,2 )
5.键盘事件
onkeydown 键盘按下
onkeyup 键盘松开
onkeypress 键盘按下并松开
方法内传入参数,调用参数的 keyCode() 方法可接收值( 回车 --> 13 )
6. 选择和改变
onchange 域内容被改变
onselect 文本被选上
7. 表单事件
onsubmit
可阻止表单提交 由函数内返回值决定
onreset
<xxx zzz=""> xxx-->标签 zzz-->属性
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2