HTML页面标签,CSS基本属性,JavaScript基本,Jquery基本
1.HTML
1) 文本标签：
? 内容标题 h1-h6 align=left/right/center
? 段落标签p 水平分割线 hr 换行br
2) 列表标签:
? 无序列表 ul li
? 有序列表 ol li
? 定义列表 dl dt dd
? 列表嵌套 有序无序任意无限嵌套
3) 分区元素:
? 分区元素自身没有显示效果用于把页面中的多个元素进行统一管理，类似于一个容器,一个页面一般分为三大区：
-头部—体部—脚部
? h5标准中新增了几个和div功能一样的分区元素
?
?
?
4) 元素的分类
? 块级元素： 独占一行
? 包括：h1-h6,p, div , hr
? 行内元素： 共占一行
? 包括：span，斜体i和em，加粗b和strong，删除线s和del，下划线u
5) 特殊字符 实体引用
? 空格折叠现象 通过 替换空格
? 小于号和大于号 < >
? 换行
6) 图片标签
? img alt:图片不能正常显示显示的文本,src：路径,title:鼠标悬停时显示的文本
7) 图像地图
? 如果使用shape=rect，coords的值所代表的意思是左上角点的x和y，还有右下角点的坐标x和y。如果shape=circle coords值表示圆心坐标(x和y)，和半径.
? href属性：值为一个路径，相对路径和绝对路径，区域被点击时会直接访问此路径的内容，路径可以指向页面，也可以指向图片资源，也可以指向其它类型的文件会下载此文件。
8) 超链接xxx 锚点的使用
9) 表格
? cellspacing：每个单元格之间的间距和单元格距表格边框的距离
? cellpadding: 内容与单元格边框的距离
? width/height:表格的宽高
? border： 边框的宽度
? caption标签，写在table标签内部，起到表格标题的作用
? 分组标签： thead tbody tfoot 没有任何显示效果，提高代码可读性
10) 表单
? 添加元素 $("#big").append(myh1);
插入元素
? 弟弟元素 before(新元素 做为上一个兄弟节点添加进去
? 哥哥元素 after(新元素) 做为下一个兄弟节点添加进去
? 删除元素 $("#id").remove();
? css样式相关
? 获取样式值 var color = $("#id").css(“color”);
设置样式
? $("#id").css(“样式名称”,“值”);
? $("#id").css({“width”:“100px”,“height”:“200px”});
文本相关
? 获取元素的文本内容 $("#id").text();
? 给元素文本赋值 $("#id").text(“内容”);
html相关
? 获取元素的html内容 $("#id").html();
? 给元素html赋值 $("#id").html("
hehe
");属性相关
? 获取元素的属性值 $("#id").attr(“class”);
? 给元素添加或修改属性值 $("#id").attr(“class”,“值”);
? 获取元素的子元素 .children()
4) 获取事件源 var obj = event.target || event.srcElement;
$(obj).之后的事物
5) 事件相关
? 常见事件
? 页面加载完成事件 $(function(){})
? 点击事件 click
? 获取失去焦点 focus 得到焦点blur
? 鼠标事件 mouseover mouseout mousedown mouseup mousemove
? 键盘事件 keydown keyup
? 屏幕尺寸改变 resize
? 表单提交
? 获取事件源的方式和JavaScript一样
? 事件模拟 一定时间后,执行 $(“input”).trigger(“click”);
? setInterval(function(){
? $(“input”).trigger(“click”)
? },5000)
? hover事件合并
? $(“span”).hover(function(){ 鼠标移入和移出事件
? $(“span”).css(“color”,“red”);
? },function(){
? $(“span”).css(“color”,“blue”);
? });
6) 和动画相关
? $(“input”).click(function(){
? if(this.value == “隐藏”){
? $(“img”).hide(3000,function(){
? alert(‘123456789’)
? })
? }else if(this.value == “显示”){
? $(“img”).show(3000)
? }else if(this.value == “上滑”){
? $(“img”).slideUp(3000)
? }else if(this.value == “下滑”){
? $(“img”).slideDown(3000)
? }else if(this.value == “淡出”){
? $(“img”).fadeOut(3000)
? }else if(this.value == “淡入”){
? $(“img”).fadeIn(3000)
? }else{ //自定义 必须设置定位(如:相对定位position: relative)
? $(“img”).animate({“left”:“500px”},1000) 左移动
? .animate({“top”:“500px”},1000) 下移动
? .animate({“left”:“0px”},1000) 右移动
? .animate({“top”:“0px”},1000) 上移动
? .animate({“width”:“200px”,“height”:“200px”},1000)
? .fadeOut(2000,function(){
? $(this).remove()
? })
? }
? })