学习笔记webday01-day05

HTML:超文本标记语言;
1.字体标签:
        <font></font属性:
                color字体颜色 可以用16位来表示,也可以用英文red green blue等等之类来表示;
                size字体大小  1-7号字
                face字体类型;用的好像不是太多
        <b>加粗        </b>
        <i>斜体</i>;
        <u>下划线</u>;
2.图片标签:
        <img></img> 属性:
                src:路径,可以写相对路径也可以写连接;
                width:宽度;
                height:高度;
                alt:图片打不开的时候要提示的汉字;
3.超级连接标签:
        <a></a>属性:
                        href:链接路径;
                        target:三种打开方式,现在主要学两种:
                _self:在自身窗口打开;
                _blank:在新窗口打开;
                _parent:听说在学习框架的时候会用,现在做了解,知道他;
                        
                        
4.排版标签:
        <p>:段落标签:段落与段落之间会个较大的空行;
        <hr>:分割线标签;
        <h1></h1>
        .....
        <h6></h6> 6种标题标签 从大到小;
        </br>换行;
        <center>居中;


5.列表标签:
        <ol></ol>有序标签;
                属性:type:1 a A i I;
                     start:从哪开始
        <ol></ol>有序标签;
                属性:type:disc 实心点.
                          circle 空心圆
                          square 方块.
6.表格标签:
        <table></table> 属性:
                        board 边框大小;单位px;
                        width:宽度 可以用像素表示也可以用百分比表示;
                        height:高度,可以用像素表示也可以用百分比表示;
                        bgcolor:背景颜色;
                        background:背景图;
                        align:对齐方式,居中,左对齐,右对齐;
        <tr> row是行标签,所以是行标签:
        <td> 是列标签(也可以理解成单元格)
        ***重点:
                1.嵌套单元格;
                2.合并单元格:
                        夸行合并是:rowspan;
                        跨列合并是:colspan;
                                两者后面的数值是合并单元格的个数,并且要降被吞并的单元格的标签去掉;
7.***表单标签***:(很重要):
                <form>表单标签属性:
                                1.action:提交的地址,如果不添加则提交到当前页面;
                                2.method:GET和POST两种提交方式;
                                        GET:提交的数据直接在地址栏显示,而且数据大小有限制,不太安全;
                                        POST:提交的数据看不到,数据大小无限制,比较安全;
                表单元素三个:
                1.<input/>表单输入:
                        <input type="" name = "" value="" checked是默认选中的属性;/>
                        type="text":文本输入框;
                        type="password":密码输入框;
                        type="radio" ;单选要写默认值value;
                        type="checkbox";复选要写默认值;
                        type="reset";重置;
                        type="submit";'提交;
                        tyoe="button";按钮,无任何意义;
                        type="file":上传文件;
                        type="hidden":固定
        
                2.<select>下拉框:
                                        <select  name="">
                                        <option value="提交到后台的值"></option>
                                        </select>
                3.textarea文本域:
                                        <textarea name="" rows="几行" cols="几列"></textarea>
CSS笔记:


CSS:层叠样式表
一. 三种引入的方式及其优先级关系
1.行内样式：直接在标签上写style属性，
2.页面内样式：在head标签内写style标签，在style标签中写样式
3.外部样式：定义外部样式文件，.css文件，然后在html中 引入即可，引入的用link
优先级关系：就近原则


二.选择器


1.元素选择器：直接写标签名  div{  }
2.ID选择器：使用#号    #id名称{ }
3.类选择器：使用 .类名{ }
4.后代选择器：使用空格   div #id1{ }
5.伪类;
三.浮动和清除浮动


浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
        float
                left: 向左浮动
                right:向右浮动
                none:不浮动


清除浮动：
        clear
                left:清除左侧浮动
                right:清除右侧浮动
                both:清除左右两侧的浮动


四.盒子模型和定位


盒子模型：
        外边距：margin
        边框：border
        内边距:padding
        注意：内外边距简写的形式要遵从上右下左的顺序
定位：position,left,top
        position:
                absolute
                fixed


五.显示和隐藏
display:
        block:显示
        none:隐藏
        inline:在一行显示


JS笔记:


一.ECMASCRIPT:语法
记跟java语法不一致的地方：
        弱变量类型的语言：
        体现在变量的声明上:var
        ===：全等：类型和值都相等的时候才为true
二.BOM：浏览器对象模型
window:
        * alert();        --弹出对话框
        * setInterval();--设置定时
        * setTimeout();--设置延时
        * clearInterval();--清除定时
        * clearTimeout();--清除延时
        * confirm();        --弹出一个确认窗口
        * prompt();        --弹出一个可输入的对话框
        * open();        --打开一个新窗口
history:
        如何返回上一个浏览的页面？
        1.history.back()
        2.history.go(-1)
location:
        location.href="":可以用作页面的跳转
三.DOM：文档对象模型
document:
        整个html文档加载到内存中可以用document对象表示
element:
        标签/元素
attribute:
        标签上的属性
text:
        文本
获得页面的元素：
        document.getElemenById():只能获得到一个元素
        document.getElementsByName();获得的是元素的一个集合
创建元素：
        document.createElement():创建元素
        document.createTextNode():创建文本
添加元素：
        element.appendChild():在最后添加一个节点.
移除元素：
        element.removeChild():删除元素
JQ概述

1.jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。极大地简化了 JavaScript 编程。

2.Javascipt跟jQuery的区别：Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发，jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

核心

jQuery的方法只能由jQuery的对象调用

核心的函数：$(),   

        括号里面可以写：

                1.选择器

                2.原生的Js对象

                3.数组

入口函数：

$(document).ready(function(){     })===$(function(){    });后者是前者的简写形式，JQ的引入

引入方式：外部js的引入方式

注意:JQ的入口函数与JS的入口函数的差异:JQ效率高,再DOM树绘制完成的时候就已经开始执行,

JQ和JS的相互转化

JQ----->JS :get(0),还有一个呢?

JS----->JQ :$("#id");

选择器:

1.id选择器

$("#自定义的id名称")

2.类选择器

$(".自定义的类名")

3.元素选择器

$("直接写元素名称")

4.后代选择器

$("form input") 使用空格

5.属性选择器

$("input[属性名称=属性值]")

6.表单对象属性

:checked  单选/复选

:selected  下拉列表

7.过滤选择器:

：odd：匹配所有索引值为奇数的元素，从 0 开始计数

：even：匹配所有索引值为偶数的元素，从 0 开始计数

事件

跟js事件一样，事件的名字不要on，分鼠标事件，键盘事件，光标事件等（每个函数调用方式都有很多种，调用方式主要指的是参数；具体开发的时候可以参考CHM文档）

blur()  失去焦点事件

focus() 获得焦点事件

change() 内容改变事件（常用于下拉列表内容切换）

click() 单击事件

dblclick()  双击事件（注意是dblclick不是dbclick,多个L）

keydown() 当键盘或按钮被按下事件   注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

keypress() 当键盘或按钮被按下事件   keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

mousedown()  当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mousemove()  当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout()   当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

mouseover()   当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件

submit()   当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

委派:

delegate（）：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

绑定:on()/bind();

两种遍历方式

1 .$("selector").each(function(i,n){

  }); selector：jQuery的选择器 i：遍历的索引 n：遍历的值

2 .$.each(objects,function(i,n){      });  objects：待遍历的对象  i：遍历的索引  n：遍历的值

html()/text()/val()
$("#id").html();获取元素里面的html代码
$("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签
​
$("#id").text();获取元素里面的文本
$("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html
​
$("#id").val():获取元素value属性的值
$("#id").val("afda") 用括号里面的内容去设置元素value属性操作元素属性
$("#id").prop("src")  获得属性的值
$("#id").prop("src","da") 修改属性的值
$("#id").prop({"":"","":""}) 一次性修改多个属性效果函数
基本的显示和隐藏：show()/hide()
​
向下/上滑动：slideDown()/slideUp()
​
淡入/淡出:fadeIn()/fadeOut()
​文档操作
append() ：向匹配到的元素中添加内容
appendTo()：将匹配到的元素插入到另一个元素中
insertBefore()：向匹配到的元素之前插入内容
insertAfter()：向匹配到的元素后面插入内容
empty():删除匹配元素下的所有子元素（不包括自己）
remove()：删除匹配到的元素（包括自己和其子元素）
​JQ案例JQ版隔行换色
$(function(){
​
        $("#b tr:even").addClass("even"); //判断是偶数 则设置类为even,这里的even已经在css文件中设置好了;
​
        $("#b tr:odd").addClass("odd") //同理类推;
​
});
​JQ版复选框
$(function(){
                //获取全选;
                var $selectall = $("#selectall");
                $selectall.click(function(){
                    if ($selectall.prop("checked") == true) {
                        $(":checkbox[name = select]").prop("checked",true)
                    }else{
                        $(":checkbox[name = select]").prop("checked",false)
                    }
                    
                })
});JS版省市联动

分析:

1.触发事件:在select上面的onchange=""触发;

2.创建一个二维数组,存两个省份分别对应的数据;        

3.对第一个下拉框设置value,判断value的值是多少;        

4.遍历数组,利用createElement() 创建<option>元素 利用createTextNode()创建城市名字,再通过appendChild添加新节点;        

5.这里面要记得清空下第二个下拉框的内容,这点有点绕;

function selectP(){
                //获取第二个下拉列表;
                var city = document.getElementById("city");
                //创建二位数组;
                var arrs = new Array(2);
                //创建一维数组;
                arrs[0] = new Array("石家庄","唐山","保定","张家口");
                arrs[1] = new Array("郑州","开封","洛阳","安阳");
                //选完以后清除下一个框的内容;
                //得到第二个下拉框的option数组;
                var oparr = city.options;
                //遍历数组,让其option为空
                for (var i = oparr.length-1; i>0;i--) {
                    oparr = null;
                }
                //通过id获取第一个下拉框的value
                var selectvalue = document.getElementById("province").value;
                for (var i = 0; i<arrs.length;i++) {
                    if(selectvalue == i){
                        for (var j = 0;j<arrs.length;j++) {
                        //  alert(arrs[j]);
                            var newse = document.createElement("option");
                            var text =document.createTextNode(arrs[j])
                            newse.appendChild(text);
                            city.appendChild(newse);
                        }
                    }
                }
}
JQ版省市联动

/*分析:                        

* 1.定义一个二维数组,                        

* 2.触发函数为下拉列表的change触发函数 ;                        

* 3.获取第一个下拉框的值                        

* 4.遍历数组,当val==i的时候 再次遍历二维数组;                        

* 5.注意JQ和JS之间的相互转换和each遍历;                        

* */

$(function(){
                //定义二维数组
                arrs=[
                ["石家庄","唐山","保定","张家口"],
                ["郑州","开封","洛阳","安阳"],
                ];
                //下拉列表触发事件
                $("#province").change(function(){
                    //清空列表;这个是最后写上去的,get(0)是JQ转换到JS以便于获取options
                    $("#city").get(0).options.length = 1;
                    var val = this.value;
                    //alert(val)
                    //遍历最外层数组,当val==i时 说明当前省份被选中了,则遍历数组里层;
                    //遍历用each遍历比较简单,记住这是JQ语言,需要将JS转换成JQ,
                    $(arrs).each(function(i,n){
                        if (val == i) {
                            $(n).each(function(j,m){
                                //获取到city的input,直接添加option拼接具体城市即可;
                                $("#city").append("<option>"+m+"</option>")
                            })
                        }
                    })
});
JQ版定时弹出隐藏广告
            var time;//时间定义到外面是作用域的问题
            $(function(){
                time = setInterval("showad()",2000);
               
            });
            //定义显示函数
            function showad(){
                $("#img2").fadeIn(2000);
                //清空定时;
                clearInterval(time);
                time = setInterval("hidead()",2000)
            }
            //定义隐藏函数
            function hidead(){
                $("#img2").fadeOut(2000);
                //清空定时
                clearInterval(time);
            }
JQ实现下拉列表左右选择
$(function(){
                //左边添加到右边;
                $("#add1").click(function(){
                    $("#selectleft option:selected").appendTo("#selectright")
                });
                //右边添加到左边;
                $("#remve1").click(function(){
                    $("#selectright option:selected").appendTo("#selectleft")
                });
                //左边所有添加到右边
                $("#addall").click(function(){
                    $("#selectleft option").appendTo("#selectright")
                });
                //右边所有添加到左边
                $("#remveall").click(function(){
                    $("#selectright option").appendTo("#selectleft")
                });
});

学习笔记webday01-day05

HTML:超文本标记语言;
1.字体标签:
        <font></font属性:
                color字体颜色 可以用16位来表示,也可以用英文red green blue等等之类来表示;
                size字体大小  1-7号字
                face字体类型;用的好像不是太多
        <b>加粗        </b>
        <i>斜体</i>;
        <u>下划线</u>;
2.图片标签:
        <img></img> 属性:
                src:路径,可以写相对路径也可以写连接;
                width:宽度;
                height:高度;
                alt:图片打不开的时候要提示的汉字;
3.超级连接标签:
        <a></a>属性:
                        href:链接路径;
                        target:三种打开方式,现在主要学两种:
                _self:在自身窗口打开;
                _blank:在新窗口打开;
                _parent:听说在学习框架的时候会用,现在做了解,知道他;
                        
                        
4.排版标签:
        <p>:段落标签:段落与段落之间会个较大的空行;
        <hr>:分割线标签;
        <h1></h1>
        .....
        <h6></h6> 6种标题标签 从大到小;
        </br>换行;
        <center>居中;


5.列表标签:
        <ol></ol>有序标签;
                属性:type:1 a A i I;
                     start:从哪开始
        <ol></ol>有序标签;
                属性:type:disc 实心点.
                          circle 空心圆
                          square 方块.
6.表格标签:
        <table></table> 属性:
                        board 边框大小;单位px;
                        width:宽度 可以用像素表示也可以用百分比表示;
                        height:高度,可以用像素表示也可以用百分比表示;
                        bgcolor:背景颜色;
                        background:背景图;
                        align:对齐方式,居中,左对齐,右对齐;
        <tr> row是行标签,所以是行标签:
        <td> 是列标签(也可以理解成单元格)
        ***重点:
                1.嵌套单元格;
                2.合并单元格:
                        夸行合并是:rowspan;
                        跨列合并是:colspan;
                                两者后面的数值是合并单元格的个数,并且要降被吞并的单元格的标签去掉;
7.***表单标签***:(很重要):
                <form>表单标签属性:
                                1.action:提交的地址,如果不添加则提交到当前页面;
                                2.method:GET和POST两种提交方式;
                                        GET:提交的数据直接在地址栏显示,而且数据大小有限制,不太安全;
                                        POST:提交的数据看不到,数据大小无限制,比较安全;
                表单元素三个:
                1.<input/>表单输入:
                        <input type="" name = "" value="" checked是默认选中的属性;/>
                        type="text":文本输入框;
                        type="password":密码输入框;
                        type="radio" ;单选要写默认值value;
                        type="checkbox";复选要写默认值;
                        type="reset";重置;
                        type="submit";'提交;
                        tyoe="button";按钮,无任何意义;
                        type="file":上传文件;
                        type="hidden":固定
        
                2.<select>下拉框:
                                        <select  name="">
                                        <option value="提交到后台的值"></option>
                                        </select>
                3.textarea文本域:
                                        <textarea name="" rows="几行" cols="几列"></textarea>
CSS笔记:


CSS:层叠样式表
一. 三种引入的方式及其优先级关系
1.行内样式：直接在标签上写style属性，
2.页面内样式：在head标签内写style标签，在style标签中写样式
3.外部样式：定义外部样式文件，.css文件，然后在html中 引入即可，引入的用link
优先级关系：就近原则


二.选择器


1.元素选择器：直接写标签名  div{  }
2.ID选择器：使用#号    #id名称{ }
3.类选择器：使用 .类名{ }
4.后代选择器：使用空格   div #id1{ }
5.伪类;
三.浮动和清除浮动


浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
        float
                left: 向左浮动
                right:向右浮动
                none:不浮动


清除浮动：
        clear
                left:清除左侧浮动
                right:清除右侧浮动
                both:清除左右两侧的浮动


四.盒子模型和定位


盒子模型：
        外边距：margin
        边框：border
        内边距:padding
        注意：内外边距简写的形式要遵从上右下左的顺序
定位：position,left,top
        position:
                absolute
                fixed


五.显示和隐藏
display:
        block:显示
        none:隐藏
        inline:在一行显示


JS笔记:


一.ECMASCRIPT:语法
记跟java语法不一致的地方：
        弱变量类型的语言：
        体现在变量的声明上:var
        ===：全等：类型和值都相等的时候才为true
二.BOM：浏览器对象模型
window:
        * alert();        --弹出对话框
        * setInterval();--设置定时
        * setTimeout();--设置延时
        * clearInterval();--清除定时
        * clearTimeout();--清除延时
        * confirm();        --弹出一个确认窗口
        * prompt();        --弹出一个可输入的对话框
        * open();        --打开一个新窗口
history:
        如何返回上一个浏览的页面？
        1.history.back()
        2.history.go(-1)
location:
        location.href="":可以用作页面的跳转
三.DOM：文档对象模型
document:
        整个html文档加载到内存中可以用document对象表示
element:
        标签/元素
attribute:
        标签上的属性
text:
        文本
获得页面的元素：
        document.getElemenById():只能获得到一个元素
        document.getElementsByName();获得的是元素的一个集合
创建元素：
        document.createElement():创建元素
        document.createTextNode():创建文本
添加元素：
        element.appendChild():在最后添加一个节点.
移除元素：
        element.removeChild():删除元素
JQ概述

1.jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。极大地简化了 JavaScript 编程。

2.Javascipt跟jQuery的区别：Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发，jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

核心

jQuery的方法只能由jQuery的对象调用

核心的函数：$(),   

        括号里面可以写：

                1.选择器

                2.原生的Js对象

                3.数组

入口函数：

$(document).ready(function(){     })===$(function(){    });后者是前者的简写形式，JQ的引入

引入方式：外部js的引入方式

注意:JQ的入口函数与JS的入口函数的差异:JQ效率高,再DOM树绘制完成的时候就已经开始执行,

JQ和JS的相互转化

JQ----->JS :get(0),还有一个呢?

JS----->JQ :$("#id");

选择器:

1.id选择器

$("#自定义的id名称")

2.类选择器

$(".自定义的类名")

3.元素选择器

$("直接写元素名称")

4.后代选择器

$("form input") 使用空格

5.属性选择器

$("input[属性名称=属性值]")

6.表单对象属性

:checked  单选/复选

:selected  下拉列表

7.过滤选择器:

：odd：匹配所有索引值为奇数的元素，从 0 开始计数

：even：匹配所有索引值为偶数的元素，从 0 开始计数

事件

跟js事件一样，事件的名字不要on，分鼠标事件，键盘事件，光标事件等（每个函数调用方式都有很多种，调用方式主要指的是参数；具体开发的时候可以参考CHM文档）

blur()  失去焦点事件

focus() 获得焦点事件

change() 内容改变事件（常用于下拉列表内容切换）

click() 单击事件

dblclick()  双击事件（注意是dblclick不是dbclick,多个L）

keydown() 当键盘或按钮被按下事件   注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

keypress() 当键盘或按钮被按下事件   keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

mousedown()  当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mousemove()  当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout()   当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

mouseover()   当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件

submit()   当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

委派:

delegate（）：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

绑定:on()/bind();

两种遍历方式

1 .$("selector").each(function(i,n){

  }); selector：jQuery的选择器 i：遍历的索引 n：遍历的值

2 .$.each(objects,function(i,n){      });  objects：待遍历的对象  i：遍历的索引  n：遍历的值

html()/text()/val()
$("#id").html();获取元素里面的html代码
$("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签
​
$("#id").text();获取元素里面的文本
$("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html
​
$("#id").val():获取元素value属性的值
$("#id").val("afda") 用括号里面的内容去设置元素value属性操作元素属性
$("#id").prop("src")  获得属性的值
$("#id").prop("src","da") 修改属性的值
$("#id").prop({"":"","":""}) 一次性修改多个属性效果函数
基本的显示和隐藏：show()/hide()
​
向下/上滑动：slideDown()/slideUp()
​
淡入/淡出:fadeIn()/fadeOut()
​文档操作
append() ：向匹配到的元素中添加内容
appendTo()：将匹配到的元素插入到另一个元素中
insertBefore()：向匹配到的元素之前插入内容
insertAfter()：向匹配到的元素后面插入内容
empty():删除匹配元素下的所有子元素（不包括自己）
remove()：删除匹配到的元素（包括自己和其子元素）
​JQ案例JQ版隔行换色
$(function(){
​
        $("#b tr:even").addClass("even"); //判断是偶数 则设置类为even,这里的even已经在css文件中设置好了;
​
        $("#b tr:odd").addClass("odd") //同理类推;
​
});
​JQ版复选框
$(function(){
                //获取全选;
                var $selectall = $("#selectall");
                $selectall.click(function(){
                    if ($selectall.prop("checked") == true) {
                        $(":checkbox[name = select]").prop("checked",true)
                    }else{
                        $(":checkbox[name = select]").prop("checked",false)
                    }
                    
                })
});JS版省市联动

分析:

1.触发事件:在select上面的onchange=""触发;

2.创建一个二维数组,存两个省份分别对应的数据;        

3.对第一个下拉框设置value,判断value的值是多少;        

4.遍历数组,利用createElement() 创建<option>元素 利用createTextNode()创建城市名字,再通过appendChild添加新节点;        

5.这里面要记得清空下第二个下拉框的内容,这点有点绕;

function selectP(){
                //获取第二个下拉列表;
                var city = document.getElementById("city");
                //创建二位数组;
                var arrs = new Array(2);
                //创建一维数组;
                arrs[0] = new Array("石家庄","唐山","保定","张家口");
                arrs[1] = new Array("郑州","开封","洛阳","安阳");
                //选完以后清除下一个框的内容;
                //得到第二个下拉框的option数组;
                var oparr = city.options;
                //遍历数组,让其option为空
                for (var i = oparr.length-1; i>0;i--) {
                    oparr = null;
                }
                //通过id获取第一个下拉框的value
                var selectvalue = document.getElementById("province").value;
                for (var i = 0; i<arrs.length;i++) {
                    if(selectvalue == i){
                        for (var j = 0;j<arrs.length;j++) {
                        //  alert(arrs[j]);
                            var newse = document.createElement("option");
                            var text =document.createTextNode(arrs[j])
                            newse.appendChild(text);
                            city.appendChild(newse);
                        }
                    }
                }
}
JQ版省市联动

/*分析:                        

* 1.定义一个二维数组,                        

* 2.触发函数为下拉列表的change触发函数 ;                        

* 3.获取第一个下拉框的值                        

* 4.遍历数组,当val==i的时候 再次遍历二维数组;                        

* 5.注意JQ和JS之间的相互转换和each遍历;                        

* */

$(function(){
                //定义二维数组
                arrs=[
                ["石家庄","唐山","保定","张家口"],
                ["郑州","开封","洛阳","安阳"],
                ];
                //下拉列表触发事件
                $("#province").change(function(){
                    //清空列表;这个是最后写上去的,get(0)是JQ转换到JS以便于获取options
                    $("#city").get(0).options.length = 1;
                    var val = this.value;
                    //alert(val)
                    //遍历最外层数组,当val==i时 说明当前省份被选中了,则遍历数组里层;
                    //遍历用each遍历比较简单,记住这是JQ语言,需要将JS转换成JQ,
                    $(arrs).each(function(i,n){
                        if (val == i) {
                            $(n).each(function(j,m){
                                //获取到city的input,直接添加option拼接具体城市即可;
                                $("#city").append("<option>"+m+"</option>")
                            })
                        }
                    })
});
JQ版定时弹出隐藏广告
            var time;//时间定义到外面是作用域的问题
            $(function(){
                time = setInterval("showad()",2000);
               
            });
            //定义显示函数
            function showad(){
                $("#img2").fadeIn(2000);
                //清空定时;
                clearInterval(time);
                time = setInterval("hidead()",2000)
            }
            //定义隐藏函数
            function hidead(){
                $("#img2").fadeOut(2000);
                //清空定时
                clearInterval(time);
            }
JQ实现下拉列表左右选择
$(function(){
                //左边添加到右边;
                $("#add1").click(function(){
                    $("#selectleft option:selected").appendTo("#selectright")
                });
                //右边添加到左边;
                $("#remve1").click(function(){
                    $("#selectright option:selected").appendTo("#selectleft")
                });
                //左边所有添加到右边
                $("#addall").click(function(){
                    $("#selectleft option").appendTo("#selectright")
                });
                //右边所有添加到左边
                $("#remveall").click(function(){
                    $("#selectright option").appendTo("#selectleft")
                });
});