jQuery

document对象的方法：
    document.getElementById("id的属性值");
    document.getElementsByTagName("input");//获取指定的元素节点
    document.getElementsByName("name属性值");
window.open("网页地址","网页的名字","特征");

1、选择器
    基本选择器
        ID、类选择器、标签选择器、交集选择器
        $("#menu")
        $(".menu")
        $("img")
        $("input.menu")
    层次选择器
        $("#menu div");//获取所有div后代
        $("#menu>div");//获取的所有的div子节点
    属性选择器
        $("input[name=username]") $("img[alt=aa]")//这个是必须记下
        $("input[name^=form]")//name属性值以form开头
        $("input[name$=form]")//name属性值以form结尾
        $("input[name*=form]")//name属性值可以包含有form
    基本过滤选择器
        $("tr:odd")//奇行
        $("tr:even")//偶行
        $(":eq(0)")//获取第一个
        $(":lt(0)")//小于   little
        $("tr:gt(2)")//大于第三行的所有行。 global
    可见性过滤选择器
        $("li.gt(2):visible").hide();
        $("li.gt(2):hidden").show();
        toggle();--切换元素的可见性。
        $("li:gt(2)").toggle();//从第三个li开始，进行切换可见性。

2、事件
    1、鼠标悬停事件 mouseover()  mouseout
    2、键盘事件：keydown();//判断用户是否按了Enter回车键 keyCode == '13'
    $(document).keydown(function(e){
        if (e.keyCode == '13') {
        }
    });

    3、表单事件：

                 focus() 获得焦点
                 blur()失去焦点

    复合事件：
        hover()
        togger()//模拟鼠标连续点击事件
        bind();
        //鼠标悬停，移走
        $(".li").hover(
            function(){
                //悬停
            },function(){
                //移走
        });
        //模拟鼠标连续点击事件
        $(".btn").toggle(
            function(){

            },function(){

            }
        );
        //同时toggle可切换元素可见性

        /*css({
            "":"",
            "":""
        })
        */

        //表单验证里，文本框获取焦点，失去焦点
        $("input[id]").bind({
            focus:function(){
           
            },blur:function(){}
        });

        //绑定单个事件
        $("input[id]).bind("click",function(){});
        $("tr[id]").each(function(index,element){
            //element   DOM对象  ，index下标，从0开始
            var $dom = $(element); //获取具体的input,JQuery对象
            $dom.children("td[class=aa]").html();
            $dom.parent().parent().parent()
        });
        $("tr[id=menu1]").find("td").each(function(index,element){
            //element   DOM对象  ，index下标，从0开始
        });

JQuery中的DOM操作
    1、样式操作：
        css("属性名","属性值");//添加一个样式
        css({
            "属性名":"属性值",
            "":""
        });
        addClass(类样式的名字);//添加类样式
        removeClass();//删除类样式

    2、内容及value属性值操作
        html();//获取从开始标签到结束标签之间HTML代码(包括文本内容)
        text();//获取从开始标签到结束标签之间文本内容
        val();  //获取value属性的属性值，获取input里的value属性值

    3、节点操作：
        append();//在后面追加子节点元素
        $("ul").append("<li>这是一个追加的li</li>");//插入最后位置
        prepend();//前置插入，在前面插入子节点元素
        $("ul").prepend("<li>这是一个追加的li</li>");//插入第一位置
        after();//在后面添加一个同辈元素

    4、节点属性操作：
        attr()//设置或获取属性值
        $("input[type=checkbox]").attr("checked","checked");//复选框选中

    5、节点遍历：
         $("tr[id]").each(function(index,element){
            //element   DOM对象  ，index下标，从0开始
            var $dom = $(element); //获取具体的input,JQuery对象
            $dom.children("td[class=aa]").html();
            $dom.parent().parent().parent()
        });
          next();//获取紧邻下一个同辈元素
          children();//获取所有的子元素
          parent();//获取父元素
          prev();//获取紧邻前一个同辈元素

3、正则表达式(难点，只要记住几个常用的)
    /^ $/
    \d等价于[0-9]
    \w等价于[a-zA-Z0-9_]
    {n,}匹配前一项至少n次或多次
    {n,m}匹配前一项至少n次，不超过m次
    {n}匹配前一项n次
    *等价于{0,}匹配0次或多次
    +等价于{1,}匹配一次或多次
    ?等价于{0,1}匹配0次或1次

 

4、用例：
中国的邮政编码都是6位：var regCode=/^\d{6}$/;
手机号码都是11位，并且第1位都是1：var regMobile=/^1\d{10}$/;
邮箱验证：var regMail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;

5，省市级联菜单
1、下拉列表框对象
1）select对象常用事件、方法和属性
事件：    onchange    当改变选项时调用的事件
方法：    add()    向下拉列表中添加一个选项
属性：    options[]    返回包含下拉列表中的所有选项的一个数组
        selectedIndex    设置或返回下拉列表中被选项目的索引号
        length    返回下拉列表中的选项的数目

2）Option对象常用属性
text：设置或返回某个选项的纯文本值
value：设置或返回被送往服务器的值

2、数组对象
属性：    length    设置或返回数组中元素的数目
方法：    join( )    把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
        sort( )    对数组的元素进行排序（按照ASCII码的升序排列）

3、级联菜单：
方法一：
<script type="text/javascript">
    var city=new Array();
        city['湖南省']=['长沙市','湘潭市','株洲市','岳阳市'];
        city['河南省']=['郑州市','洛阳','新乡','信阳','驻马店'];
        city['湖北省']=['武汉市','宜昌'];
        function addCity(){
            var pro=document.getElementById("province").value;
            document.getElementById("city").options.length=1;//在添加城市信息之前，先清空城市下拉列表，只剩下选项"请选择城市"
            for(var i in city[pro]){
                var op=new Option(city[pro][i],city[pro][i]);
                document.getElementById("city").add(op);
            }
        }
  </script>

   <select id="province" onchange="addCity()">
    <option>--请选择省份--</option>
    <option value="湖南省">湖南省</option>
    <option value="河南省">河南省</option>
    <option value="湖北省">湖北省</option>
   </select>
   <select id="city">
    <option>--请选择城市--</option>
   </select>

 方法二：
  <script type="text/javascript">
    var city=new Array();
        city[0]=new Array("长沙市","湘潭市","娄底市","浏阳市");
        city[1]=new Array("郑州","洛阳","商丘","新乡","信阳","驻马店");
        city[2]=new Array("武汉","宜昌","襄樊");

function addCity(){
    var index=document.getElementById("province").selectedIndex-1;
    document.getElementById("city").options.length=1;
    if(index!=-1){
        for(var i=0;i<city[index].length;i++){
            var op=new Option(city[index][i],city[index][i]);
            document.getElementById("city").add(op);
    }
    }
}
  </script>