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();

});

});