zoukankan      html  css  js  c++  java
  • JQ 知识点集合

                                                                                                    数组与字符串间的转换

    、数组转字符串(将数组元素用某个字符连接成字符串)

    var a, b;

    a = new Array(0,1,2,3,4);

    b = a.join("-");

    二、字符串转数组(将字符串按某个字符切割成若干个字符串,并以数组形式返回)

    var s = "abc,abcd,aaa";

    ss = s.split(",");// 在每个逗号(,)处进行分解。

                                                                                      

                                                                                                     select的操作

    jQuery获取Select选中的Text和Value:

    1. var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text

    2. var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value

    3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

    4. var maxIndex=jQuery("#select_id option:last").attr("index"); //获取Select最大的索引值

    jQuery添加/删除Select的Option项

    1. jQuery("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

    2. jQuery("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

    3. jQuery("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

    4. jQuery("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

    5. jQuery("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

    6. jQuery("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

    内容清空

    jQuery("#select_id").empty();

         

                                                  ////////////////////////////////////////////////////////////设置样式

    单个样式:

    $(this).css("color","red");

    多个样式:

    $(this).css({color:"red",background:"black"});

    获取样式值

    $(this).css("color")

                                                                                                             对数组数据的遍历筛选

     arr = $.grep(da, function (n, i) {///da数组  if(){//判断条件是否成立,成立筛选出这组数据放到arr里面一直遍历出所有符合的 return n})

     $("span").parent();该方法只会向上一级对 DOM 树进行遍历。 
     $("span").parents();该方法对所有上级进行遍历
    $("div").children().css({"color":"red","border":"2px solid red"});该方法对下一级 也就是他儿子进行遍历
     $("div").find("span");返回属于 <div> 后代的所有 <span> 元素:
    $("h2").siblings().css({"color":"red","border":"2px solid red"});siblings() 方法返回被选元素的所有同胞元素。
     $("p").filter(".intro");返回带有类名 "intro" 的所有 <p> 元素:
     $("p").eq(1);索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
     $("div p").first(); 第一个$("div p").last();最后一个

                                                                    $.each()

     $.each([52, 97], function(index, value) {
    alert(index + ‘: ‘ + value);
    });
     

              

    追加元素的方法如append、prepend、before

              被选元素内 

    jQuery append() 方法在被选元素的结尾插入内容。 $("p").append("Some appended text."); 

    jQuery prepend() 方法在被选元素的开头插入内容。$("p").prepend("Some prepended text."); 

             被选元素外 

    jQuery after() 方法在被选元素之后插入内容。 $("img").after("Some text after"); 
    jQuery before() 方法在被选元素之前插入内容。 $("img").before("Some text before"); 
     


                                                                           对元素的淡入淡出效果

      $("#panel").stop();暂停所有效果和动画



    jQuery fadeIn() 用于淡入已隐藏的元素。 $("#div3").fadeIn(3000);

    jQuery fadeOut() 方法用于淡出可见元素。$("#div3").fadeOut(3000);

    jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 $("#div3").fadeToggle(3000);

    jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。 $("#div1").fadeTo("slow",0.15);

                                                                             滑动效果

     $("#panel").slideToggle(); 如果元素向下滑动,则 slideToggle() 可向上滑动它们。如果元素向上滑动,则 slideToggle() 可向下滑动它们。
     $("#panel").slideUp();可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
      示例:$(document).ready(function(){ $(".flip").click(function(){$(".panel").slideToggle("slow");   }); });    
              <style type="text/css">  div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> 
              <body> <p class="flip">请点击这里</p>  <div class="panel"> <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p> </div>   </body>

                                                                                                       
                                                                            动画效果  
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        '150px'
      });
    }); 提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

                                                                      

    Callback 函数

    当动画 100% 完成后,即调用 Callback 函数。$(selector).hide(speed,callback)
    $("p").hide(1000,function(){ alert("The paragraph is now hidden"); });});


    获取并设置 CSS 类

    $("#div1").addClass("important blue");//调用类样式   添加

     $("h1,h2,p").removeClass("blue");  //  移除样式
      $("h1,h2,p").toggleClass("blue");//有救添加没有就删除
    <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style>
    $("p").css({"background-color":"yellow","font-size":"200%"});///直接给样式
    $("#div1").width()//返回元素的宽度





  • 相关阅读:
    【CodeForces】[612C]Replace To Make Regular Bracket Sequence
    【POJ】[1363]Rails
    【POJ】[1363]Rails
    【杭电】[1022]Train Problem I
    【杭电】[1022]Train Problem I
    【杭电】[1873]看病要排队
    【杭电】[1873]看病要排队
    【HPU】[1714]感恩节KK专场——送给新生的礼物
    【HPU】[1714]感恩节KK专场——送给新生的礼物
    [leetcode]392. Is Subsequence 验证子序列
  • 原文地址:https://www.cnblogs.com/manwwx129/p/7079222.html
Copyright © 2011-2022 走看看