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()//返回元素的宽度





原文地址:https://www.cnblogs.com/manwwx129/p/7079222.html