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
  • ");//插入最后位置
            prepend();//前置插入,在前面插入子节点元素
            $("ul").prepend("
  • 这是一个追加的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、级联菜单:
    方法一:


      
      

     方法二:
     

    你可能感兴趣的:(选择器,事件,DOM操作,正则表达式)