标签:返回 获取元素 padding show function elf class 案例 css
WEB01 HTML
一、网站信息页面显示案例
Html标签
标题标签 <hn> </hn>
注释 <!-- -->
水平线 <hr>
段落标签 <p></p>
字体标签 <font></font>
二、网站图片显示页面
<img/>
Src:
绝对路径
相对路径
1.如果是同级
2.如果是上级:../文件名称
3.如果是下一级:目录名称/文件名称
三、网站友情链接显示页面
有序列表:<ol type=”1” start=”4”><li></li></ol>
属性:
type:5个取值
无序列表:<ul type=”circle”><li></li></ul>
属性:
Type:3个取值
超链接:<a href=”http://www.baidu.com” target=”_self、_blank”>百度</a>
四、网站首页显示页面
表格标签:<table><table/>
属性:
1边框 border
2.背景颜色:bgcolor
3.边框与边框:cellspacing
4.边框与内容:cellpadding
表格的跨行和跨列 colspan rowspan
五、网站后台系统页面
框架集结构标签:<frameset></frameset>
属性:
cols:左右划分
rows:上下切割
<frame><frame/>
WEB02 HTML
表单标签:所有提交到服务器端的表单必须使用<form></from>括起来
Form标签属性:
action:整个表单提交的位置(可以是一个页面,也可以是一个java后台)
method:表单提交的方式
提交按钮:<input type=”submit” value=”注册”/><br/>
普通按钮: <input type=”button” value=”注册”/>
重置按钮:<input type=”reset”/>
Div
是一个html标签,一个快级元素(单独显示一行)。它单独使用没有意义
必须结合css来使用,用于页面的布局
Span是一个html标签,一个内联元素(显示一行),它单独使用没有意义,必须结合css来使用,它主要用于对括起的内容进行样式的修饰
Css:层叠样式表
1作用:使网站的内容和表现相分离
2语法规范:
选择器{
属性名1:属性值
属性名1:属性值
属性名1:属性值
}
3.css选择器(重要定位元素)
1)元素选择器 div{}
2)类选择器(class) .div2{}
3)id选择器(id) #div5{} 设置id时要唯一
(其他选择器)
4)层级选择器 div p{}
5)属性选择器 input[type=‘text’]{}
4.css的引入方式
内部引入
<style type=”text/css”>
</style>
行内引入
<div style=”font-size:40px; color:blue;”> 就近原则
外部引入
新建一个css文件
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
层叠样式表 引入的文件 类型
Css的浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动的边框为止
盒子模型:
手机:content
泡沫:padding
包装盒:border
外包装边距:margin
|
Content |
WEB_03 JavaScript
1 使用JS完成简单的数据校验
2.使用js完成图片轮播效果
3,使用JS完成页面定时弹出广告
4,使用JS完成表单检验
JavaScript 组成
1.ECMAScript
2.DOM:文档对象模型 包含(整个html部分)
3.BOM:浏览器对象模型,包含(整个浏览器相关的内容)
特点:
1 区分大小写
2. 变量是弱类型的
WEB_04 JavaScript
学习目标
1.使用JS获得指定元素
2.使用JS创建元素
3.使用JS对元素的属性进行操作
4.使用JS对文件的标签体进行操作
5.使用JS对指定元素的样式进行操作(获得或者修改)
新标签的学习
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
锁定事件(页面加载事件)
获取元素:获取表格+表格里面的行数
Tbody里面的行数(rows.length)
JS的遍历
获取奇数行和偶数行
设置背景颜色
实现一个表格的高亮显示
1.确定事件(onmouseover 和onmouseout)并分别为其绑定一个函数
2.获取鼠标移上去的那行,设置背景颜色
回顾事件:
Onsubmit()
Onclick()
Ondblclick()
Onload()
Onfocus() 鼠标聚焦、失焦事件
Onblur()
Onmouseover()
Onmouseout()
Onmousemove()
Onkeydown()
Onkeypress()
Onchange:当用户改变内容时使用的这个事件
六、使用JS完成全选和选不选操作
1确定事件(鼠标单击事件onclick),事件绑定到复选框上
2.获取编号前面复选框的状态
获取复选框:var checkAllEle = Document.getelementbyid(“id”);
获取复选框的状态:checkAllEle.checked?
3.获取下面的所有复选框
Document.getelementbyname(“name”);
Document:整个html文件都成为一个document 文档
Element: 所有的标签都是Element元素
Attribute:属性
Text :文本
Node: 文档的任意内容
1.document
创建文本结点:document.createTextNode
创建元素结点:document.createElement()
2.element
Element.appendChild() 向元素添加新的子节点,作为最后一个子节点
Element.firstChild() 返回元素的首个子节点
Element.getAttribute() 获取元素的属性值
Element.innerHtml()
3.Attribute: 属性
Dom练习
在页面中使用列表来显示一些城市
<ul>
<li>北京<li>
<li>上海<li>
<li>广州<li>
</ul>
希望通过点击一个按钮实现动态添加城市
分析:
事件(onclick)
获取ul结点
创建一个城市的文本结点
创建一个li元素结点
将文本结点添加到li元素结点中去
使用element里面的appendChild()来添加子节点
七、使用JS完成省市二级联动
1.确定事件(onchange)
2.使用一个二维数组来存储省份和城市(二维数组的创建)
3.获取用户选择的省份(使用方法传参的方式 this:当前的操作对象)
4.遍历数组(获取该省份 对应的所有城市)
5.创建文本结点和元素结点并进行添加操作
步骤
1.确定事件(onchange)并为其绑定一个函数
2.创建一个二维数组
3.获取用户选择的省份
4.遍历二位数组中的省份
5.将遍历的省份与用户选择的省份比较
6.如果相同。遍历该省份下的所有城市
7.创建城市文本结点
8.创建option 元素结点
9.将城市文本结点添加到option元素结点中去
10.获取第二个下拉列表,并将option元素添加进去
知识点:
1.This.value
2.数组的创建
长度:最大角标+1
3.createTextNode()
4.createElement()
WEB_05 jQuery
1.JS页面加载与JQuery页面加载的区别
1)JS:window.onload() 页面加载较慢 会出现覆盖
2)JQ:页面加载较快 不会出现覆盖
2.jQuery的获取:
$(“#***”)
$("#btn").click(function(){
location.href="02_JS页面加载与jQuery的区别.html";
});
3.Dom对象与JQ对象之间的转换
1)JQ向DOM对象的转换
//JQ对象向DOM对象的转化 (方式一)
$("#span1").get(0).innerHTML="美美哒";
//JQ对象向DOM对象的转换 (方式二
$("#span1")[0].innerHTML="棒棒哒";
2)Dom向JQ对象的转换
var spanEle=document.getElementById("span1");
//DOM对象转化为JQ对象
$(spanEle).html("思密达");
4.JQuery的选择器
1)基本选择器
元素选择器
Id选择器
类选择器
2)层级选择器
子孙选择器 $(“dy div”)
儿子选择器 $(“body>div”)
选择id为two的下一个同级div元素: $(“#two +div”)
选择id为one的其余所有同级div元素:$(“#two ~div”)
3)基本过滤选择器
:first
:last
:even
:odd
4)属性选择器
选择有id属性的div : $(“div[id]”)
选择有id属性且值为two的div $(“div[id=two]”)
5)表单选择器
$(“:input”) 匹配所有的input textarea select button
5. .show()
设置属性:attr(“属性”,“属性值”)
设置某个标签的内容:.html()
设置某个标签的css样式:css(“属性”,“属性值”)
给某个标签添加属性 addclass()
WEB_06 jQuery
2.能够为指定标签添加字标签或兄弟标签
3.学会给标签绑定时间
1.遍历函数:each
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
2.插入:append appendto
3.事件:
改变下拉列表的状态:$(“#provice”).change()
事件切换: A.hover(fn1,fn2) 等效于A.mouseover(fn1).mouseout(fn2);
4.js的vaildate()方法
Validate需要手动的声明,对那个表单进行校验
标签:返回 获取元素 padding show function elf class 案例 css
原文地址:https://www.cnblogs.com/houchen/p/10534359.html