zoukankan      html  css  js  c++  java
  • jQuery 学习笔记

    本文存下来作为备忘。
    1,更改css样式四种情况:
    A,$(“p”).(“background-color”,”red”);
    B,var nome = {
    background:’red’,
       margin:’10px 0 0’
    };
    $(“p”).css(nome);
    C,$(“p”).css(red);(此情况仅为具体的颜色)
    D,$(“p”).css({“background”:”red”,”color”:”white”})
    2,css若写在head部分:
      <script type=”text/javascript”>
    $(function{

    })
    </script>
    3,jquery替代$符号
    Var jq = jQuery.noConflict();
    jq(focument).ready(function(){

    })
    4,fadeTo淡出:
    $(“p“).fadeTo(“slow”,0.6);
    5,animate:
     $(“p”).animate({height:”70%”,weight:100,marginLeft:”0.6in”},”slow”)
    6,输出属性:
    ${“button”}.click(function(){
    $(“p”).text($(this).css(“background-color”));
    })
    7,页面加载完毕即运行:
    $(function(){
    Function div(){
    $(“p”).animate({100},”slow”);
    $(“p”).animate({300},”slow”);
    };
    Div();
    })
    8所有带*属性的选择
    $(“[id]”).css(“red”);选区所有有id属性的
    $(“[id=main]”).css(“red”);选取id为main的
    9,选取文件夹为file属性
    10 注意空格
       $(“div#demo”)选取id为demo的div
       $(“div#demo”)选区div下id为demo的
    11 bind 绑定格式
    $(“p”).bind(“click”,function(){
    });
    $(“p”).bind(
    {clcik:function(){…}},
    {clcik:function(){…}},
    )
    12,设置并触发
    $(“input”).focus(function(){
    $(“input”).css(“background-color”,”#fff”);
    $(“btn”).click(function(){
    $(“input”).focus();
    })
    })
    13,change事件仅适用于text textarea select中
    14,$(“button”).click(function(){
    $(“p”).slideToggle();
    });
    $(“p”).dbclick(function(){
    $(“button”).click();
    })
    15,delegate
    $(“div”).delegate(“button”,”click”,function(){
    $(“p”).slideToggle();
    });
    16,图片未加载-error
    $(“img”).error(function(){
    $(“img”).replaceWith(“<p>图片未加载</p>”)
    })
    17,阻止链接打开——preventDefault
    $(“a”).click(function(event){
    Event.preventDefault();
    Alert(“Defaultprevent:” + event.isDefaultPrevented ());
    })
    效果是 a无法打开,并且弹出消息框 Default prevent:true;
    18,输出鼠标指针位置
    $(document).mouseover(function(e){
    $(“span”).text(“X:”+e.pageX+”,Y:”+e.pageY);
    })
    19,event.target.nodeName为获得当前触发元素
    20,输出为自1970年1月1日至今的毫秒数
    $(“btn”).click(function(e){
    $(“p”).text(e.timeStamp);
    })
    21,event.type表示事件类型
    $(“p”).bind(‘clickdbclick mouseover’,function(event){
    $(“div”).text(“事件:”+event.type);
    })  当鼠标经过时 会出现结果事件:mouseover
    22,键盘值
    $(“input”).keydown(function(event){
    $(“div”).text(“Key:”+event.which)
    })
    23,区分mouseover与mouseenter事件对应于
    无论鼠标指针是经过被选元素还是其子元素都会触发mouseover事件 mouseout同
    只有鼠标指针经过被选元素时才会触发mouseenter    mouseleave同;
    Varx = 0;
    $(“p”).mouseover(function(){
    $(“div”).text(x+=1);
    });结果为不断累加
    $(“p”).click(function(){
    $(this).(fontSize:”+=6px”);字体不断增大6px;
    }}
    24,ready()函数不与body onload=“”一起使用;
    25,resize 调整窗口大触发;
    26,阻止表单提交
       $(“button”).submit(function(e){
    e.preventDaulted();
    })
    27,$(button).toggle(
    Function(){$(“p”).css(“red”)},
    Function(){$(“p”).css(“red”)},
     
    Function(){$(“p”).css(“red”)}
    );
    27,$(“p”).toggle(true),元素一直显示;若为false则为隐藏
    28,trigger(“select”)触发select事件
       它能匹配所有元素 而triggerHandler只会影响第一个匹配元素;
    29,循环两次结束:
    $(function(){
    Varx = 0;
    $(“p”).click(function(e){
    $(“p”).animate({fontSize:”+=6px”});
    x++;
    If(x>2){
    $(this).unbind(e);
    }
    });
    })
    30,取消绑定特定函数
    Function   alertMe(){
    Alert(“123”)
    };
    $(function(){
    $(“p”).click(alertMe);
    $(“button”).click(function(){
    $(“p”).unblind(“click”,alertMe);
    });
    });
    31,addClass 返回函数
    $(“p”).addClass(function(n){
    Return‘par’ + n;
    });
    添加两个类
    $(“p”).addClass(“class1class2”)
    32,宽度减去50
    $(“img”).attr(“width”,function(n,v){
    Returnv – 50;
    })
    V为属性值()width的,n为index;
    33,clone
    $(“p”).append($(“p”).clone());
    $(“p”).append($(“p”).clone(true));表示事件处理器也被同样复制;
    34,$(“p”).deatch();删除p元素;(并不是彻底删除)
        
    Varx;
    $(“btn1”).click(function(){
    X=$(“p”).deatch();
    });删除p
    $(“btn2”).click(function(){
    $(body).append(x);
    });添加p;
     
    Empty()是指移除内容;
    35,hasClass()指被选元素是否包括*元素
    $(“button”).click(function(){
    Alert($(“p”).hasClass(“into”));
    });输出结果为true或者false;
    36,html()返回结果为()内容;
    37,document.createElement(“div”)表示新创建div
    38,toggleClass()对类  进行切换
    39,css增加div宽度
    $(“div”).css(“width”,function(index,value){returnparseFloat(value)*1.2;})
    40,stop()只适用于动画,而clearQueue适用于任何排队函数。
    41,$(“#stop”).click(function(){
    $(“#box”).stop(true);
    });动画依然能完成;
    $(“#stop”).click(function(){
    $(“#box”).stop(true,true);
    });动画不能完成;
    42,toggle(),进行显示和消失的切换,toggle(true),只能显示,不能消失;
    43,$(“p”).height(50),或者height(“20%”);
    44,$(“p”).size();元素个数=”.length”;
    45,每次增加10px宽度;
    $(“p”).height(function(n,c){
    Returnc+10;
    });
    46,offset表示文档相对位置;
    X=$(“p”).offset();position也可以这样用;
    x.left表示距离左边的距离;
    $(“p”).offset({top:100,left:0});重新设置距离
     
    $(“p”).offset(function(n,c){
    newPos=newObject();
    newPos.left= c.left+100;
    returnnewPos;
    });
     
    NewPos= new Object();
    newPos.left=100;
    $(function(){
    $(“button”).click(function(){
    $(“p”).offset(newPos);
    });
    });
     
    $(“p”).offset($(“img”).offset())
    47,$(“P”).scrollLeft(100),把滚动条的位置设置为100px;
    48,closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
    Addself包括当前元素;
    end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
    filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
    49var item1 =$('li.item-1')[0];{_?
    50,$(“p”).has(“li”).length? “Yes”:”No”  判断P元素是否含有li元素,有则返回Yes;
    51,.is(“p”)判断是否含有P;
    52,$(“ul”).click(function(event){
     
    Var$target=$(event.target);
    If($target.is(“li”)){
    $(“target”).css(“background”,”red”);
    }
    });点击一个列表,若含有li则当前点击列表变为红色;
     
    53,$(“li”).click(function(){
    Var$li=$(this),
       isWithTwo=$li.is(function(){
    return$(“strong”,this).length===2;
    });
    If(isWithTwo){
    $li.css(“background”,”green”)
    }else{
    $li.css(“background”,”red”)
    };
    })若当前li元素内有两个“strong”元素时,点击则为绿色;
     
    54,map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象
       $(“p”).append(
    $(“:checkbox”).map(function(){
    Returnthis.id;
    });
    );输出选框的id;
     
    55,$(“ul”).nextUntil(“li”)    ul下的所有元素知道li;
    56,offsetParent()获得被定位的最近祖先元素。
    57,$(“p”).parentsUntil(“span”,”.yes”)选择p的类名为”.yes”父级元素知道“span”
    58.$(“p”).slice(0,2)选取的为第2个;
    59, $(selector).data(name,value)向name添加数据;
    60;function runIt(){
    $(“div”).show(1000);
    $(“div”).hide(1000);
    };
    runIt();循环播放;
    61,dequeue()方法为匹配元素执行序列中的下一个函数。
         ShowIt()表示一直显示,setTimeOut(showIt,100)表示没100毫秒更新次;
    62,get()方法获得由选择器指定的 DOM 元素。
    $(“button”).click(function(){
    X = $(“p”).get(0);
    $(“div”).text(x.nodeName+”:”+x.interHtml)
    });          表示P              p的内容;
    63,$(“span”,this)等于$(this).find(“span”)

  • 相关阅读:
    100个高质量Java开发者博客
    javascript的trigger事件
    js正则函数match、exec、test、search、replace、split使用集合
    Openssl verify命令
    Openssl x509命令
    Openssl req命令
    Openssl asn1parse命令
    Openssl ec命令
    Openssl ecparam命令
    Openssl rsa命令
  • 原文地址:https://www.cnblogs.com/leixiaohua1020/p/3901950.html
Copyright © 2011-2022 走看看