1.htm(超文本标记语言,类型毛坯房)
<1>头组成(html(头标签) body(尾部标签))和标签组成(<标签 标签属性=“属性值”>)
<2>标签 (p,br,b,i,font(size ,color,family字体类型),ol(src,type),ul(src,type)- ,hn(1-6),img(src,alt)a(href)(#,_blank),表格标签(table(colspan合并列)rowspan合并行),表单标签(form《action ,method》),)
<3>特效
(颜色取色(- 英文 16进制 三基色 rgb(0~255,0~255,0~255))
图片链接(a href),音乐播放器(audio),vidieo,frameset(集合的框架))
2.css(层叠样式表)
<0.1>属性
字体属性,文本属性,列表属性(a href), 背景属性(background)
<0.2>优先级
就近原则(link rel,="" shref;
<0.3>选择器
基本(scrpt),类(class),id选择器
组合(span,id等)和关联(span,id)
<0.4>html页面写css代码
<0.5>setInterval和setTimeOut的区别
前者是周期性操作,后者是延时操作
<1>span和div的区别
span不自动换行,无标识性
civ自动换行有标识性
<2>组成
<标签 标签名(style)=“属性:属性值”>
<3>标签属性
width,height,font,background....
<4>特效(页面浮动(float :right),定位position:absolut)盒子模型)
3..js(javascrpt 脚本语言)
<0.1>格式
《scrpt》
<0.2>函数
有参数,有无返回值函数,匿名函数
<0.3>document.getElementById(“”)//获取对象Id
<0.4>图片切换案例
《0.5》innerHtml 插入html值
<0.6>鼠标事件
onMouseMove,onMouseDown,onMouseUp
<0.7>表单数据的检测
<1>java与js的区别
java面向对象的,js基于对象
java是强类型语言(定义数据具有规则性,跨品台使用),js是弱类型语言(没有规则性的变量运算)
如 var i="haha"
<2>java和js的类型
java : byte char int float doble long
js: var number string ,undefine null
<3>js的运算符
+ ,-,*(),/(值可为小数)
<4>js的语句
for,while,if..else..
<5>js的表达形式
<6>setinteval和setTimeOut的差别
setInterval(‘函数名’,响应时长);周期性延时操作
setTimeOut();延时操作
<6.1>js的数组
js只有一级数组,没有二级数组
var attr = new Array();
attr[下标的索引]={}
<7>案例事例
(1) 广告框的延时弹框
思路:1..创建该页面,广告放置页面上
如
2,创建显示logo的showad()和隐藏Logo的 HideAd() 如 window.onload()=setInterval(code,3000){}
3.页面加载时显现,间隔几秒后消失
如:showAd(img.style.display=block), hideAd(img.style.display="none)
(2)二级联动
思路:1.创建select
2.获取select.option的数据集
3.遍历每个选线的集合,通过appenChild添加到里面的元素中去 aparen\tChild
//注意设置选项的option.length=0;
(3)表格的各行换色
思路:1创建表格
2. 获取表格所有行的集合tab.rows()
3对表格行进行判断
.css
4.jq
<1>jq的介绍
jq是一种轻量级的框架,js的建议框架
<2>js和jq的转换
js《——jq 【var $number= $("nuber“) var $number= $number.get[0]
jq《___js var $ =¥(”nuber")
<3>jq的选择器(选取元素达到想要的结果)
1.基本选择器:id选择器 :标签选择器,类选择器,全匹配(*),组合式选择
2.层级选择器:$("body div")(父子容器选择所有容器) $("body>div") (同级别的容器) $("#one+div") (id为one的下一代div) $("#one~div")(id为one的所有div同辈)
3.筛选选择器:first,(“”#btn:firstdiy“”) last,even(偶数),odd基数)
4.属性选择器:div[title],[title='one']
5表单选择器:$("#btn1").click(function(){
$(":password").css("background-color","red");
});
6.案例:广告的显示和隐藏
$(function() {
setTimeout('showAd()', 3000);
});
function showAd() {
//获得广告区域对象
var $adObj = $("#adId");
// $adObj.show();
// $adObj.slideDown();
$adObj.fadeIn();
//创建setTimeout('hideAd()',3000)
setTimeout('hideAd()', 3000);
}
function hideAd() {
//获得广告区域对象,调用hide()方法
var $adObj = $("#adId");
//$adObj.hide();
// $adObj.slideUp();
$adObj.fadeOut();
}
7.案例隔行换色
$(function(){
//偶数行
$("tr:even").css("background-color","#008001");
//奇数行
$("tr:odd").css("background-color","#FED700");
});
8.案例隔行换色
$(function(){
//偶数行(给所有的偶数的tr添加了一个even的类名)
$("tr:even").addClass("even");
//奇数行(给所有的偶数的tr添加了一个odd的类名)
$("tr:odd").addClass("odd");
});
9.添加属性
var $fObj = $("font");
//添加的是标签属性,不是css属性
$fObj.attr("color","red");
10.移除属性
var $img = $("#img");
//移除src属性
$img.removeAttr("src");
11.下表属性
var rows = tabObj.rows;
var trObj = rows[i];
if(i % 2 == 0) {
trObj.style.backgroundColor = "#008001";
} else {
trObj.style.backgroundColor = "#FED700";
}
13遍历数组
var attr = [1,2,3,4,5];
//把js对象转jq对象
var $attr = $(attr);
//如果是一个参数(i),i就是数组的下标; 如果有两个参数(i,n),i就是下标,n就是对应的值
$attr.each(function(i,n){
alert("attr["+i+"]="+n);
});
14.遍历数组
$.each([1,2,3,4,5],function(i,n){
alert("attr["+i+"]="+n);
});
15.遍历二维数组
var attr = new Array(3);
attr[0] = ["深圳", "广州", "东莞", "惠州"];
attr[1] = ["武汉", "黄冈", "鄂州", "黄石"];
attr[2] = ["济南", "青岛", "烟台", "威海", "日照"];
$(attr).each(function(i,n){//builder模式 StringBuilder sb.append().append()
//alert(n);
$(n).each(function(j,m){
alert(m);
})
});
16.jq操作文档
$("#pId").append("你好");
16.移除属性
$(function(){
$("#btn1").click(function(){
$("#fId").remove();
});
});
17.二级联动
$("#province").change(function() {//得到省份的值var pValue = this.value; //是js对象//得到城市下拉框对象var $cityNode = $("#city");//清除之前的数据(把jq对象转换成js对象,再清除)//把jq对象转换成js对象var cityNode = $cityNode[0];//清除之前的数据cityNode.options.length = 1;//得到省份的值,更新城市的数据if(pValue >= 0){// pValue=0var citys = attr[pValue];//["深圳", "广州", "东莞", "惠州"];//把citys对象转换成jq对象调用each方法遍历$(citys).each(function(i,n){// n = 深圳//把城市添加到右边的下拉框(append(""))$cityNode.append(""+n+"");});
17.联动添加
$(function(){
$("#btn1").click(function(){
//在函数里面筛选出被选中的option,添加到右边的select里面
$("#left option:selected").appendTo("#right");
});
$("#btn2").click(function(){
//得到左边下拉框的option对象集合,添加到右边的select里面
$("#left option").appendTo("#right");
});
});
18.find查找标签移除
$(function(){
$("#btn1").click(function(){
$("body").find("font").remove();
});
});