zoukankan      html  css  js  c++  java
  • jQuery选择器、事件、节点、动画效果

    一、选择器
      基本选择器:
        标签选择器:  $("h1").css()
        类选择器:  $(".c").css()
        id选择器:  $("#id").css()
        并集选择器:  $("h1,.c,#id").css()
        交集选择器:  $("li.c").css()
     
      层次选择器:
        后代选择器:  $("div li").css() " "
        子选择器:  $("dt>span").css() ">"
        相邻选择器:  $("#one>dt+dd").css() "+"
        同辈选择器:  $("#two>dt~dd").css() "~"

      属性选择器:"[]"
        包含给定属性选择器:  $("a[target]").css()
        包含给定特定属性值选择器:  $("[href='http://www.baidu.com']").css()
        不包含给定特定属性值选择器:  $("[href!='http://www.baidu.com']").css()
        以给定特定属性值开头选择器:  $("[href^='www']").css()
        以给定特定属性值结尾选择器:  $("[href$='.jd']").css()
        包含特定属性值选择器:  $("[href*='http']").css()
        复合属性选择器:  $("a[href][title][target]").css()

      过滤选择器:":"
        选取偶数元素:  $("li:even").css()
        选取奇数元素:  $("li:odd").css()
        选取索引等于(i)的元素:  $("li:eq(1)").css()
        选取索引大于(i)的元素:  $("li:gt(1)").css()
        选取索引小于(i)的元素:  $("li:lt(1)").css()
        选择器反向选择元素:  $("li:not(.tee)").css()
        选取所有标题元素:  $("div>:header").css()
        选取获得焦点的元素:  $(":focus").css()


    二、显示与隐藏
        $("h1").toggle(function(){
            $("#inner:hidden").show();//显示
        },function(){
            $("#inner:visible").hide();//隐藏
        })

     
    三、鼠标事件
        $("#nav li").mouseover(function(){
            $(this).addClass("over");
        })

        $("#nav li").mouseout(function(){
            $(this).removeClass("over");
        })


    四、键盘事件
        keydown():  按下键盘时,触发或将函数绑定到指定元素的keydown事件
        keyup():    释放键盘时,触发或将函数绑定到指定元素的keyup事件
        keypress(): 产生可打印的字符时,触发或将函数绑定到指定元素的keypress事件


    五、表单事件
        focus():  获得焦点,触发或将函数绑定到指定元素的focus事件
        blur():   失去焦点,触发或将函数绑定到指定元素的blur事件


    六、绑定事件
        bind():  可以同时为多个事件绑定方法
            $("input[name=enevt_1]").bind({mouseover:function(){
                $("ul").css("display","none");
            },mouseout:function(){
                $("ul").css("display","block");
            }});


    七、淡入淡出效果
        fadeIn():可以通过改变元素的透明度实现淡入效果

            $("input[name=fadein_btn]").click(function(){
                $("img").fadeIn("slow"); //以较慢的速度淡入
            });

        fadeOut():可以通过改变元素的透明度实现淡出效果

            $("input[name=fadeout_btn]").click(function(){
                $("img").fadeOut(1000); //以1000毫秒的速度淡出
            });


    八、改变元素的高度
        slideDown():  可以使元素逐步延伸展示
        slideUp():    可以使元素逐步缩短直至隐藏
            $("h2").click(function(){
                $(".txt").slideUp("slow");
                $(".txt").slideDown("slow");
            })


    九、插入子节点
        append(content)     $(A).append(B):表示将B追加到A中  例如:$("ul").append($newNode1);
        appendTo(content)   $(A).append(B):表示将A追加到B中  例如:$newNode1.appendTo("ul");
        prepend(content)    $(A).prepend(B):表示将B前置到A中 例如:$("ul").prepend($newNode1);
        prependTo(content)  $(A).prepend(B):表示将A前置到B中 例如:$newNode1.prependTo("ul");


    十、插入同辈节点
        after(content)        $(A).after(B):       表示将B插入到A之后  例如:$("ul").after($newNode1);
        insertAfter(content)  $(B).insertAfter(A): 表示将A插入到B之后  例如:$newNode1.insertAfter("ul");
        before(content)       $(A).before(B):      表示将B插入到A之前  例如:$("ul").before($newNode1);
        insertBefore(content) $(B).insertBefore(A):表示将A插入到B之前  例如:$newNode1.insertbefore("ul");


    十一、替换节点
        replaceWith():替换某个节点
            $("ul li:eq(1)").replaceWith($newNode1);
        replaceAll(): 替换所有符合条件的节点
            $("ul li:eq(1)").replaceAll($newNode1);


    十二、复制节点
        clone():用于复制某个节点    $("ul li:eq(1)").clone(true).appendTo("ul");


    十三、删除节点
        remove():删除整个节点
        detach():删除整个节点,保留元素的绑定事件、附加的数据
        empty(): 清空节点内容


    十四、获取与设置节点属性
        attr():用来获取与设置元素属性
            $newNode4.attr("alt");  //设置单个属性
            $("img").attr({"50",height:"100"});  //设置多个属性
        removeAttr():用来删除元素的属性
            $newNode2.removeAttr("title");


    十五、遍历子元素
        children():可以用来获取元素的所有子元素
            $("body").children();
        parent(): 获取元素的父级元素
        parents():获取元素的祖先元素
        next([expr]):用于获取紧邻匹配元素之后的元素
            $("li:eq(1)").next().css("background-color","#F06");
        prev([expr]):用于获取紧邻匹配元素之前的元素
            $("li:eq(1)").prev().css("background-color","#F06");
        siblings([expr]):用于获取位于匹配元素前面和后面的所有同辈元素
            $("li:eq(1)").siblings().css("background-color","#F06");
        



















  • 相关阅读:
    sqlserver数据导入问题:报错“对COM组件的调用返回了错误HRESULT E_FAIL”
    删除文件夹提示”该项目不在请确认该项目位置“
    delphi三层DCOM架构
    sqlserver 将店铺表转换成可以用in查询的字符串
    Delphi如何获取一个字符串再另一个字符串中最后一次出现的位置
    c# 通过地址下载流然后保存文件到本地
    使用SQL语句清空数据库所有表的数据
    SqlServer 查询的时候过滤条件有参数导致速度很慢的问题-参数嗅探
    delphi和C# 保存exe文件到数据库
    DELPHI 多线程(TThread类的实现)
  • 原文地址:https://www.cnblogs.com/yilinzi/p/6429840.html
Copyright © 2011-2022 走看看