1.htm(超文本标记语言，类型毛坯房）
<1>头组成(html(头标签) body（尾部标签）)和标签组成（<标签 标签属性=“属性值”>）
<2>标签 （p,br,b,i,font(size ,color,family字体类型),ol(src,type)<itme>,ul(src,type)<item>,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; <style></style》
<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》</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的表达形式
<script>
function 函数名（）｛
｝
//匿名函数
windows.onLoad()=function(){
}
</script>
<6>setinteval和setTimeOut的差别
setInterval（‘函数名’，响应时长）;周期性延时操作
setTimeOut();延时操作
<6.1>js的数组
js只有一级数组，没有二级数组
var attr = new Array();
attr[下标的索引]=｛｝
<7>案例事例
(1) 广告框的延时弹框
思路：1..创建该页面，广告放置页面上
如<img src="" display：block>
2，创建显示logo的showad（）和隐藏Logo的 HideAd（） 如 window.onload()=setInterval(code,3000)｛｝
3.页面加载时显现，间隔几秒后消失
如：showAd（img.style.display=block）， hideAd（img.style.display="none）
（2）二级联动
思路：1.创建select<option>选择控件
2.获取select.option的数据集
3.遍历每个选线的集合，通过appenChild添加到里面的元素中去 aparen\tChild
//注意设置选项的option.length=0；
（3）表格的各行换色
思路：1创建表格<table></table>
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();
});
});
