JS

JS的基本语法：

Ø ECMASCRIPT语法：

    1. 区分大小写

    2. 弱变量类型语言（与Java不同）：

              变量没有具体类型

Var i=3；

              Var s=”abc”;

   3. 每行结尾分号可有可无

Ø 数据类型：

   1. 原始类型5个

Undefined:未定义类型

Boolean

Number

String

Null

   2. 引用类型：

      对象类型，默认值是null

Ø Js的运算符与Java基本一致

        除= = =全等于：是类型和值都一致的情况下才为true

Ø Js与Java的语句一致

校验与轮播：

Ø JS的通常开发的步骤：

        Js通常都由一个事件触发

       触发一个函数，定义一个函数

       获得操作对象的控制权

       修改要操作的对象的属性和值

例：定义函数:

* function 函数名称(){

// 函数体

}

* window.onload = function(){

}

常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...

Ø 注册页面的校验：

     JS的引入方式：

            1. 直接编写：<script></script>

            2. 编写到。JS文件中，之后引入html文件中

         v JS校验正则表达式有两个方法：

                           Match（）：正则表达式

                           Test（）：字符串

Ø 轮播：

            Onload:页面加载

定时器：

         Setinterval():每隔多少毫秒执行某个表达式（循环）

         *setInterval(“change(),5000”);

        Settimeout():隔多少秒执行该表达式（只执行一次）

        *setTimeout(“change(),5000”);

CSS的显示和隐藏属性：

            Dispaly:none :隐藏  block显示

Browser对象：

  Ø Window的对象：

             alert：弹出对话框---一般做调用

             setinterval():每隔多少毫秒执行某个表达式（循环）

             settimeout():隔多少秒执行该表达式（只执行一次）

             clearinterval（）：清除由setinterval()设置的timeout

             cleartimeout()：清除由settimeout()设置的timeout

             config：弹出一个确认对话框

             prompt：可输入的对话框

             open：弹出一个窗口

  Ø Navigator对象：包含的是浏览器的信息

  Ø Sceen对象：用来获得屏幕信息

  Ø History对象：浏览器的历史对象

                Back（）：上一个

                Forward()：下一个

               Go():加载某个具体页面

                History.go(-1);

  Ø Location对象：包含URL中的信息

    Location.href=”可以用作页面的跳转”;

JS的输出：

      *document.getElementById(“”).innerHTML=”html的代码”（属性）

      *document.write(“”)：写出文档输出

Ø JS事件：

        * onfocus:获得焦点.

        * onblur:失去焦点.

        * onsubmit:提交的时候.

Ø JS事件的总结：

        * onload:一张页面或一幅图完成加载（框架或对象事件）

        * onclick:单击事件（鼠标事件）

        * onsubmit:确认按钮被点击提交（表单事件）

        * onfocus:元素获得焦点（表单事件）

        * onblur：元素失去焦点（表单事件）

        * onchange:下拉列表改变事件.

        * ondblclick:双击某个元素的事件.（鼠标事件）

Ø 鼠标的操作事件：

        * onmousemove：鼠标被移动

        * onmouseout：鼠标从某元素移开

        * onmouseover：鼠标移到某元素之上

        * onmousedown：鼠标按钮被按下

        * onmouseup：鼠标按键被松开

Ø 键盘操作事件：

          * onkeydown:某个键盘按键被按下

        * onkeyup:某个键盘的按键被松开

        * onkeypress:某个键盘按键被按下并松开

Ø 使用JS获得表格的行数：

       * 获得到控制的表格元素:

                     * var tab1 = document.getElementById(“tab1”);

       *获得表格的所有行数

                     * var len = tab1.rows.leng th;

Ø 表格中的tbody和thead标签：

                                 Thead：居中加粗

                                 Tbody：一个表格中可以有多个

                        例：* 获得到控制的表格元素:

                              * var tab1 = document.getElementById(“tab1”);

                              *获得tbody中的所有行数

                              * var len = tab1.tbodies[0].rows.length;

DOM简介：

          将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.

Ø DOM的使用：

          知道document，element，attribute中的属性和方法

          Element对象：标签

          Attribute：属性

          Node：节点（包括Element，Attribute，document，text。。。）

          Document：整个html文档加载到内存中

Ø 获得页面元素的三种方式及要点：

           document.getElementById():通过id获得元素（一个）

           document.getElementsByName()：通过name属性获得元素集合

           document.getElementsByTagName()：通过标签名获得元素集合

Ø 创建元素：

            * document.createElement();-- 创建元素

            * document.createTextNode();-- 创建文本

           例：var btn=document.createElement()：创建元素（标签）

                  var btn=document.createTextNode("Hello World")：创建文本

Ø 添加节点：

             * element.appendChild();-- 在最后添加一个节点.

             * element.insertBefore();-- 在某个元素之前插入.

            例：document.getElementById("").appendChild()：在最后添加一个节点

                  document.getElementById("").insertBefore(newItem,existingItem)：在某个元素之前插入

Ø 删除节点：

              Element.removeChild（）：删除元素

              例：var list=document.getElementById("myList");              list.removeChild(list.childNodes[0]);

JS中创建数组：

              new Array();

              New Array(size);

              New Array(element0,element1,...,elementn);

JS的内置对象：

                Date：GetTime(返回1970.1.1至今的毫秒数)/缓存

JS的全局函数：

               * parseInt()：解析一个字符串并返回一个整数

               * parseInt(“11”);

               * parseFloat()：解析一个字符串并返回一个整数

               * parseFloat(“32.09”);

    编码和解码的方法：

    解码：

            decodeURI():解析某个编码的URI

            decodeURIComponent():解析某个编码的URI组件

    编码：

           encodeURI()：把字符串编码为URI（不会）

           encodeURIComponent()：把字符串编码为URI组件（会对特殊字符进行编码）

eval函数：

        * 将一段内容当成是JS的代码执行.

       //var sss = “alert(‘aaaa’)”;

         //eval(sss);

*isNaN()：判断是否为数字  

JQuery

是JS的框架（JS的类库）。对传统的JS进行了封装

Js常用框架：

jQuery，Extjs,DWR,prototype...

$相当于JQuery

JQ的使用：

语法：

Ø 引入Jquery的js文件.

<script src="../../js/jquery-1.11.3.min.js"></script>

Ø JQuery的入口函数:

                        // 传统的JS的方式：页面加载的事件只能执行一次.

                        /*window.onload = function(){

                                alert("aaa");

                        }

                        

                        window.onload = function(){

                                alert("bbb");

                        }*/

                        

                        // JQuery的方式：

//$（）相当于页面加载的事件,可以执行多次.效率比window.onload要高.

                        // window.onload 等页面加载完成后执行该方法.

                        // $(function(){}):等页面的DOM树绘制完成后进行执行.

                        // $相当于JQuery

                        $(function(){

                                alert("aaa");

                        });

                ||

                ||

//也是入口函数

                        /*$(document).ready(function(){

                                alert("aaa");

                        });*/

                        $(function(){

                                alert("bbb");

                        });

JS对象和JQ对象的转换：

                        window.onload = function(){

                                // 传统JS方式：

                                var d1 = document.getElementById("d1");

                                // JS对象的属性和方法:

                                // d1.innerHTML = "JS对象的属性";

                                // d1.html("aaaaaa");

                                // 将JS对象转成JQ的对象.

                                $(d1).html("JS对象转成JQ对象");

                        }

             $(function(){

                                var $d1 = $("#d1");

                                // $d1.html("JQ对象的属性");

                                // 转成JS的对象:

                                // 一种方式

                                // $d1[0].innerHTML = "将JQ的对象转成JS对象";

                                // 二种方式:

                                $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";

                        });

JQ显示和隐藏：

JQ的效果操作:

Ø * show();

    * 使用一:Jq对象.show();

    * 使用二:Jq对象.show(“slow”); // slow,normal,fast

    * 使用三:Jq对象.show(毫秒值); // 1000

    * 使用四:Jq对象.show(毫秒值,function(){});

Ø * hide();

    * 使用一:Jq对象.hide();

    * 使用二:Jq对象.hide(“slow”); // slow,normal,fast

    * 使用三:Jq对象.hide(毫秒值); // 1000

    * 使用四:Jq对象.hide(毫秒值,function(){});

Ø * slideDown();--向下滑动

    * 使用一:Jq对象.slideDown();

    * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast

    * 使用三:Jq对象.slideDown(毫秒值); // 1000

    * 使用四:Jq对象.slideDown(毫秒值,function(){});

Ø * slideUp();--向上滑动

    * 使用一:Jq对象.slideUp();

    * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast

    * 使用三:Jq对象.slideUp(毫秒值); // 1000

    * 使用四:Jq对象.slideUp(毫秒值,function(){});

Ø * fadeIn();--淡入

    * 使用一:Jq对象.fadeIn();

    * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast

    * 使用三:Jq对象.fadeIn(毫秒值); // 1000

    * 使用四:Jq对象.fadeIn(毫秒值,function(){});

Ø * fadeOut();--淡出

    * 使用一:Jq对象.fadeOut();

    * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast

    * 使用三:Jq对象.fadeOut(毫秒值); // 1000

    * 使用四:Jq对象.fadeOut(毫秒值,function(){});

toggle();        --单击切换函数（用于绑定两个或多个处理器函数，用来响应onclick）

JQuery的选择器：

Ø id选择器：

* 用法:$(“#id”)

Ø 类选择器：

* 用法:$(“.类名”)

Ø 元素选择器：

* 用法:$(“元素名称”)

Ø 通配符选择器：

* 用法:$(“*”)

Ø 并列选择器：

* 用法:$(“选择器,选择器,选择器”)

                      

层级选择器：

Ø 后代选择器：使用空格所有后代包含孙子及以下的元素

Ø 子元素选择器：使用>第一层的元素（儿子）

Ø 下一个元素:使用+下一个同辈元素

Ø 兄弟元素:使用~后面所有的同辈元素

                <script>

                        $(function(){

                                // 后代选择器:

                                $("#but1").click(function(){

                                        $("body div").css("background","#bbffaa");

                                });

                                

                                // body下的第一层div元素

                                $("#but2").click(function(){

                                        $("body > div").css("background","#bbffaa");

                                });

                                

                                // 查找下一个同辈的元素

                                $("#but3").click(function(){

                                        $("#three + div").css("background","#bbffaa");

                                });

                                

                                $("#but4").click(function(){

                                        $("#two ~ div").css("background","#bbffaa");

                                });

                                

                        });

                        

                </script>

基本过滤选择器：

Odd:奇数行

Even:偶数行

：get(index)

<script>

$(function(){

$("#but1").click(function(){

  $("#threediv:first").css("background","#bbffaa");

});

$("#but2").click(function(){

$("#threediv:last").css("background","#bbffaa");

});

$("#but3").click(function(){

$("div:odd").css("background","#bbffaa");

});

$("#but4").click(function(){

  $("div:even").css("background","#bbffaa");

});

//获取第n个元素

$("#but5").click(function(){

$("#threediv:eq(1)").css("background","#bbffaa");

});

});

</script>

内容选择器：

<script>

$(function(){

$("#but1").click(function(){

$("div:contains('1')").css("background","#bbffaa");

});

});

        </script>

属性选择器：

Attribute

Attribute=value

例：Div[title = ‘aaa’]

表单选择器：不常用

                <script>

$(function(){

$("#but1").click(function(){

$(":input").css("background","#bbffaa");

});

$("#but2").click(function(){

// $(":text").css("background","#bbffaa");

//属性选择器

                        $("input[type='text']").css("background","#bbffaa");

});

});

</script>

：表单属性选择器不常用

{Checked:

Selected:}较常用

JQuery改变页面样式方法：

Css

addClass

JQuery改变页面属性：

attr() ：设置或返回被选元素的属性值。

removeAttr() ：从每一个匹配的元素中删除一个属性

prop() ：获取在匹配的元素集中的第一个元素的属性值。

removeProp() ：用来删除由.prop()方法设置的属性集

HTML代码/文本/值：

html([val|fn]):取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  

text([val|fn]):取得所有匹配元素的内容。

val([val|fn|arr]):获得匹配元素的当前值。

事件：

Ø 事件切换：

Hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

toggle()：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click 事件。

Ø 事件处理：

on():在选择元素上绑定一个或多个事件的事件处理函数。

bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。

$('#foo').bind(click dblclick, function() {

  ......

});

Ø 委托事件：

Delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，                        并规定当这些事件发生时运行的函数。

undelegate()：删除由 delegate()方法添加的一个或多个事件处理程序。

JS

JS的基本语法：

Ø ECMASCRIPT语法：

    1. 区分大小写

    2. 弱变量类型语言（与Java不同）：

              变量没有具体类型

Var i=3；

              Var s=”abc”;

   3. 每行结尾分号可有可无

Ø 数据类型：

   1. 原始类型5个

Undefined:未定义类型

Boolean

Number

String

Null

   2. 引用类型：

      对象类型，默认值是null

Ø Js的运算符与Java基本一致

        除= = =全等于：是类型和值都一致的情况下才为true

Ø Js与Java的语句一致

校验与轮播：

Ø JS的通常开发的步骤：

        Js通常都由一个事件触发

       触发一个函数，定义一个函数

       获得操作对象的控制权

       修改要操作的对象的属性和值

例：定义函数:

* function 函数名称(){

// 函数体

}

* window.onload = function(){

}

常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...

Ø 注册页面的校验：

     JS的引入方式：

            1. 直接编写：<script></script>

            2. 编写到。JS文件中，之后引入html文件中

         v JS校验正则表达式有两个方法：

                           Match（）：正则表达式

                           Test（）：字符串

Ø 轮播：

            Onload:页面加载

定时器：

         Setinterval():每隔多少毫秒执行某个表达式（循环）

         *setInterval(“change(),5000”);

        Settimeout():隔多少秒执行该表达式（只执行一次）

        *setTimeout(“change(),5000”);

CSS的显示和隐藏属性：

            Dispaly:none :隐藏  block显示

Browser对象：

  Ø Window的对象：

             alert：弹出对话框---一般做调用

             setinterval():每隔多少毫秒执行某个表达式（循环）

             settimeout():隔多少秒执行该表达式（只执行一次）

             clearinterval（）：清除由setinterval()设置的timeout

             cleartimeout()：清除由settimeout()设置的timeout

             config：弹出一个确认对话框

             prompt：可输入的对话框

             open：弹出一个窗口

  Ø Navigator对象：包含的是浏览器的信息

  Ø Sceen对象：用来获得屏幕信息

  Ø History对象：浏览器的历史对象

                Back（）：上一个

                Forward()：下一个

               Go():加载某个具体页面

                History.go(-1);

  Ø Location对象：包含URL中的信息

    Location.href=”可以用作页面的跳转”;

JS的输出：

      *document.getElementById(“”).innerHTML=”html的代码”（属性）

      *document.write(“”)：写出文档输出

Ø JS事件：

        * onfocus:获得焦点.

        * onblur:失去焦点.

        * onsubmit:提交的时候.

Ø JS事件的总结：

        * onload:一张页面或一幅图完成加载（框架或对象事件）

        * onclick:单击事件（鼠标事件）

        * onsubmit:确认按钮被点击提交（表单事件）

        * onfocus:元素获得焦点（表单事件）

        * onblur：元素失去焦点（表单事件）

        * onchange:下拉列表改变事件.

        * ondblclick:双击某个元素的事件.（鼠标事件）

Ø 鼠标的操作事件：

        * onmousemove：鼠标被移动

        * onmouseout：鼠标从某元素移开

        * onmouseover：鼠标移到某元素之上

        * onmousedown：鼠标按钮被按下

        * onmouseup：鼠标按键被松开

Ø 键盘操作事件：

          * onkeydown:某个键盘按键被按下

        * onkeyup:某个键盘的按键被松开

        * onkeypress:某个键盘按键被按下并松开

Ø 使用JS获得表格的行数：

       * 获得到控制的表格元素:

                     * var tab1 = document.getElementById(“tab1”);

       *获得表格的所有行数

                     * var len = tab1.rows.leng th;

Ø 表格中的tbody和thead标签：

                                 Thead：居中加粗

                                 Tbody：一个表格中可以有多个

                        例：* 获得到控制的表格元素:

                              * var tab1 = document.getElementById(“tab1”);

                              *获得tbody中的所有行数

                              * var len = tab1.tbodies[0].rows.length;

DOM简介：

          将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.

Ø DOM的使用：

          知道document，element，attribute中的属性和方法

          Element对象：标签

          Attribute：属性

          Node：节点（包括Element，Attribute，document，text。。。）

          Document：整个html文档加载到内存中

Ø 获得页面元素的三种方式及要点：

           document.getElementById():通过id获得元素（一个）

           document.getElementsByName()：通过name属性获得元素集合

           document.getElementsByTagName()：通过标签名获得元素集合

Ø 创建元素：

            * document.createElement();-- 创建元素

            * document.createTextNode();-- 创建文本

           例：var btn=document.createElement()：创建元素（标签）

                  var btn=document.createTextNode("Hello World")：创建文本

Ø 添加节点：

             * element.appendChild();-- 在最后添加一个节点.

             * element.insertBefore();-- 在某个元素之前插入.

            例：document.getElementById("").appendChild()：在最后添加一个节点

                  document.getElementById("").insertBefore(newItem,existingItem)：在某个元素之前插入

Ø 删除节点：

              Element.removeChild（）：删除元素

              例：var list=document.getElementById("myList");              list.removeChild(list.childNodes[0]);

JS中创建数组：

              new Array();

              New Array(size);

              New Array(element0,element1,...,elementn);

JS的内置对象：

                Date：GetTime(返回1970.1.1至今的毫秒数)/缓存

JS的全局函数：

               * parseInt()：解析一个字符串并返回一个整数

               * parseInt(“11”);

               * parseFloat()：解析一个字符串并返回一个整数

               * parseFloat(“32.09”);

    编码和解码的方法：

    解码：

            decodeURI():解析某个编码的URI

            decodeURIComponent():解析某个编码的URI组件

    编码：

           encodeURI()：把字符串编码为URI（不会）

           encodeURIComponent()：把字符串编码为URI组件（会对特殊字符进行编码）

eval函数：

        * 将一段内容当成是JS的代码执行.

       //var sss = “alert(‘aaaa’)”;

         //eval(sss);

*isNaN()：判断是否为数字  

JQuery

是JS的框架（JS的类库）。对传统的JS进行了封装

Js常用框架：

jQuery，Extjs,DWR,prototype...

$相当于JQuery

JQ的使用：

语法：

Ø 引入Jquery的js文件.

<script src="../../js/jquery-1.11.3.min.js"></script>

Ø JQuery的入口函数:

                        // 传统的JS的方式：页面加载的事件只能执行一次.

                        /*window.onload = function(){

                                alert("aaa");

                        }

                        

                        window.onload = function(){

                                alert("bbb");

                        }*/

                        

                        // JQuery的方式：

//$（）相当于页面加载的事件,可以执行多次.效率比window.onload要高.

                        // window.onload 等页面加载完成后执行该方法.

                        // $(function(){}):等页面的DOM树绘制完成后进行执行.

                        // $相当于JQuery

                        $(function(){

                                alert("aaa");

                        });

                ||

                ||

//也是入口函数

                        /*$(document).ready(function(){

                                alert("aaa");

                        });*/

                        $(function(){

                                alert("bbb");

                        });

JS对象和JQ对象的转换：

                        window.onload = function(){

                                // 传统JS方式：

                                var d1 = document.getElementById("d1");

                                // JS对象的属性和方法:

                                // d1.innerHTML = "JS对象的属性";

                                // d1.html("aaaaaa");

                                // 将JS对象转成JQ的对象.

                                $(d1).html("JS对象转成JQ对象");

                        }

             $(function(){

                                var $d1 = $("#d1");

                                // $d1.html("JQ对象的属性");

                                // 转成JS的对象:

                                // 一种方式

                                // $d1[0].innerHTML = "将JQ的对象转成JS对象";

                                // 二种方式:

                                $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";

                        });

JQ显示和隐藏：

JQ的效果操作:

Ø * show();

    * 使用一:Jq对象.show();

    * 使用二:Jq对象.show(“slow”); // slow,normal,fast

    * 使用三:Jq对象.show(毫秒值); // 1000

    * 使用四:Jq对象.show(毫秒值,function(){});

Ø * hide();

    * 使用一:Jq对象.hide();

    * 使用二:Jq对象.hide(“slow”); // slow,normal,fast

    * 使用三:Jq对象.hide(毫秒值); // 1000

    * 使用四:Jq对象.hide(毫秒值,function(){});

Ø * slideDown();--向下滑动

    * 使用一:Jq对象.slideDown();

    * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast

    * 使用三:Jq对象.slideDown(毫秒值); // 1000

    * 使用四:Jq对象.slideDown(毫秒值,function(){});

Ø * slideUp();--向上滑动

    * 使用一:Jq对象.slideUp();

    * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast

    * 使用三:Jq对象.slideUp(毫秒值); // 1000

    * 使用四:Jq对象.slideUp(毫秒值,function(){});

Ø * fadeIn();--淡入

    * 使用一:Jq对象.fadeIn();

    * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast

    * 使用三:Jq对象.fadeIn(毫秒值); // 1000

    * 使用四:Jq对象.fadeIn(毫秒值,function(){});

Ø * fadeOut();--淡出

    * 使用一:Jq对象.fadeOut();

    * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast

    * 使用三:Jq对象.fadeOut(毫秒值); // 1000

    * 使用四:Jq对象.fadeOut(毫秒值,function(){});

toggle();        --单击切换函数（用于绑定两个或多个处理器函数，用来响应onclick）

JQuery的选择器：

Ø id选择器：

* 用法:$(“#id”)

Ø 类选择器：

* 用法:$(“.类名”)

Ø 元素选择器：

* 用法:$(“元素名称”)

Ø 通配符选择器：

* 用法:$(“*”)

Ø 并列选择器：

* 用法:$(“选择器,选择器,选择器”)

                      

层级选择器：

Ø 后代选择器：使用空格所有后代包含孙子及以下的元素

Ø 子元素选择器：使用>第一层的元素（儿子）

Ø 下一个元素:使用+下一个同辈元素

Ø 兄弟元素:使用~后面所有的同辈元素

                <script>

                        $(function(){

                                // 后代选择器:

                                $("#but1").click(function(){

                                        $("body div").css("background","#bbffaa");

                                });

                                

                                // body下的第一层div元素

                                $("#but2").click(function(){

                                        $("body > div").css("background","#bbffaa");

                                });

                                

                                // 查找下一个同辈的元素

                                $("#but3").click(function(){

                                        $("#three + div").css("background","#bbffaa");

                                });

                                

                                $("#but4").click(function(){

                                        $("#two ~ div").css("background","#bbffaa");

                                });

                                

                        });

                        

                </script>

基本过滤选择器：

Odd:奇数行

Even:偶数行

：get(index)

<script>

$(function(){

$("#but1").click(function(){

  $("#threediv:first").css("background","#bbffaa");

});

$("#but2").click(function(){

$("#threediv:last").css("background","#bbffaa");

});

$("#but3").click(function(){

$("div:odd").css("background","#bbffaa");

});

$("#but4").click(function(){

  $("div:even").css("background","#bbffaa");

});

//获取第n个元素

$("#but5").click(function(){

$("#threediv:eq(1)").css("background","#bbffaa");

});

});

</script>

内容选择器：

<script>

$(function(){

$("#but1").click(function(){

$("div:contains('1')").css("background","#bbffaa");

});

});

        </script>

属性选择器：

Attribute

Attribute=value

例：Div[title = ‘aaa’]

表单选择器：不常用

                <script>

$(function(){

$("#but1").click(function(){

$(":input").css("background","#bbffaa");

});

$("#but2").click(function(){

// $(":text").css("background","#bbffaa");

//属性选择器

                        $("input[type='text']").css("background","#bbffaa");

});

});

</script>

：表单属性选择器不常用

{Checked:

Selected:}较常用

JQuery改变页面样式方法：

Css

addClass

JQuery改变页面属性：

attr() ：设置或返回被选元素的属性值。

removeAttr() ：从每一个匹配的元素中删除一个属性

prop() ：获取在匹配的元素集中的第一个元素的属性值。

removeProp() ：用来删除由.prop()方法设置的属性集

HTML代码/文本/值：

html([val|fn]):取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  

text([val|fn]):取得所有匹配元素的内容。

val([val|fn|arr]):获得匹配元素的当前值。

事件：

Ø 事件切换：

Hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

toggle()：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click 事件。

Ø 事件处理：

on():在选择元素上绑定一个或多个事件的事件处理函数。

bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。

$('#foo').bind(click dblclick, function() {

  ......

});

Ø 委托事件：

Delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，                        并规定当这些事件发生时运行的函数。

undelegate()：删除由 delegate()方法添加的一个或多个事件处理程序。