1.Html常用标签
- 常用块级标签
h : 标题
p : 段落
div : 容器
ul>li : 无序列表
form : 表单
2. 常用行内标签
a : 超链接
span : 小容器
img : 插入图 (宽高有效)
input : 输入框,text/password/radio/checkbox/file/reset/button (宽高有效)
label : 标签
em : 斜体(语义)
i : 斜体
b : 粗体
strong : 粗体(语义)
常见标签属性
1.一般标签属性
id : id标识
style : 行内样式
href : a超链接地址,link外链css路径
src : 图片路径,script外链js路径
alt : 图片替换文字- 表单控件属性
name : 控件名字
type : 控件类型
value : 控件值
outline : 轮廓
- 表单控件属性
Css常用样式
实体化样式
width : 宽
height : 高
background : 背景图片,背景位置,背景重复,背景颜色
border : 边框宽度,边框样式,边框颜色间距和位置样式
padding : 内边距
margin : 外边距
float : 浮动
position : 定位,relative/absolute/fixed/static
left/right/top/bottom : 方向属性
z-index : z轴层级文字常用属性:
color : 颜色
font-size : 字体大小
font-family : 字体
font-weight : 字体加粗,normal/bold
font-style : 文字是否倾斜,normal/italic
font : 是否加粗 字号/行高 字体
text-decoration : 字体修饰,none/underline
text-indent : 文字首行缩进居中样式: *
行内/行内块/文本 水平垂直居中: (父元素添加)
line-height : 行高等于高 . 垂直居中
text-align : center 内容对齐方式 . 水平居中块级标签水平居中: (自己添加)
margin : 0 auto ; 块级自身水平居中所有标签水平垂直居中: (子绝父相)
position定位 : 所有标签垂直水平居中
其他样式:
list-style : 无序列表项目符号,noneoverflow : 溢出隐藏
特性:检测自己大小,儿子大小,检测代码是否有问题.
可以清除浮动产生的影响
可以解决外边距塌陷问题display : 模式转换,none/block/inline/inline-block
float,绝对定位,固定定位,display:inline-block, 都可以模式转换为行内块.
border-radius : 圆角边框
opacity : 透明度
Js
常用方法
document.getElementById(‘id’); 根据id获取元素对象常用事件
onload : 页面加载完成
onclick : 点击事件
onmouseover : 鼠标悬浮事件
onmouseout : 鼠标离开事件
onfocus : 获取焦点
onBlur : 失去焦点
onkeyup : 键盘擡起
onsubmit : 表单提交事件
(元素对象)常用属性
js元素对象属性,与html元素属性基本一致. 只罗列特殊的.
- id : id
- className : 元素类样式
- innerHTML : 内部文本/内部标签
- style : 行内样式
style.fontSize : 文字大小.
….省略,带-的改为驼峰即可.
数组常用属性/方法
- length : 长度
- xxx[index] : 根据索引获取xxx的某一项
- join(‘-‘) : 以某个字符拼接数组,返回string
- push(),pop() : 末尾添加和删除成员
- reverse() : 反转数组
- indexOf() : 获取成员第一次出现的索引
- splice() : 增加或删除成员
字符串常用方法
- parseInt() : 将数字字符串转换为整数
- parseFloat() : 将数字字符串转换为小数
- split(‘-‘) : 以某个字符分割字符串,返回数组
- indexOf() : 获取字符/字符串出现的索引
- substring() : 截取字符串
JQuery
1.$()函数的用法
- $(匿名函数) : 页面加载完成事件
- $(‘css选择器’) : 获取元素对象
$(‘标签代码’) : 创建元素对象
选择器
$('#myId') //选择id为myId的网页元素 $('.myClass') // 选择class为myClass的元素 $('li') //选择所有的li元素 $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素 $('input[name=first]') // 选择name属性等于first的input元素
- 选择器过滤方法
$('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').eq(5); //选择第6个div元素
- 选择器转移方法 (层级方法)
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素 $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素 $('#box').next(); //选择id是box的元素后面紧挨的同辈元素 $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素 $('#box').parent(); //选择id是box的元素的父元素 $('#box').children(); //选择id是box的元素的所有子元素 $('#box').siblings(); //选择id是box的元素的同级元素 $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
- 常用方法
css() : 获取/设置样式 (行内样式操作) addClass()/removeClass()/toggleClass() : 类样式操作 index() : 获取元素索引值(自家排行老几) prop() : 获取/设置属性 html() : 获取/设置内容 animate() : 动画 delegate() : 委托
- 常用动画
fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素
- 常用事件
给js的事件去掉on即可.
blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入 mouseout() 鼠标离开 mouseenter() 鼠标进入 mouseleave() 鼠标离开 hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 submit() 用户递交表单
节点操作方法
appendTo : A appendTo B , A追加到B . A追加到B的子节点末尾
- prependTo : A prependTo B , A追加到B之前 . A追加到B的子节点首位
- insertAfter : A insertAfter B, A插入到B的同级之后
insertBefore : A insertBefore B, A插入到B的同级之前
异步请求
ajax
$.ajax({ url:'js/data.json', // 请求地址,接口 --- url : http://www.baidu.com? username=xxx&password=xxx type:'get', // 请求类型 dataType:'json', // 与服务器传输的数据类型 , json数据类型 data:{key:value} // 请求参数 }).done(function(dat){ // 完成,请求成功的回调函数 . data: 服务器返回的数据 alert(dat.name); $('.user_login_btn').hide(); $('.user_info em').html( dat.name ).parent().show(); }).fail(function(error){ // 失败, 请求失败的回调函数 console.log(error); alert('服务器超时，请重试！'); })
jsonp
将dataType : 改为jsonp即可