jquery 基础

Posted 2020-10-24 东方春

1. 选择器  --------  没有空格表示且，逗号表示和（或），空格表示后代（层级关系），〉表示孩子

   一般只要会单选就行了，其他的其实没有必要掌握

   单选

   $("p")       选择所有p元素

   $(".ty1")    选择所有class="ty1"的元素

   $("#fq1")  选择id="fq1"的元素

   联合选

   $("p.foo")   选择类型为p且class="foo" 的元素     注意 有空格没空格完全不同，空格表示其后代咯

   $(".qq#div1")  选择class为qq，且id为div1的元素       注意 有空格没空格完全不同

   组合选

   $("p.foo,#bar) 选择class为foo的锻炼（p）  和id为bar的元素

   层级

   $("body .fsl")选择body元素内，所有的class="fsl"的元素(所有的后代,哪怕有嵌套的都适用）

   $("div>.fqq")选择div元素内的直接自元素为class="fqq"的元素(>>表示隔2代的元素，>>>表示隔三代的元素.....依次类推，一般不用哦）

   过滤器

 

    $(".c1:first")选择class="c1"中的所有元素的第一个    同$(".c1").first()   

    $(".c1:last")选择class="c1"中的所有元素的最后一个        同$(".c1").last()   

    $(".c1:parent")选择class="c1"中的所有元素的父元素

    $(".c1").eq(3);  找第3个元素（启示为0）

    找子 元素

    $(".c1").children();所有子元素

    $(".c1").children(".foo")找class=foo 的子元素

    找父元素

    $(".c1").closest("p");找最近的一级 符合条件的父元素。

    $(".c1").parent();

 

2. 添加删除之类的  --------  没有空格表示且，逗号表示和（或），空格表示后代（层级关系），〉表示孩子

   $(".c1").append("a");//在</a>之前添加，添加在原来数据尾部。   orgin a

   $(".c1").prepend("b");//在<a>之后添加，添加在原来数据头部。    b orgin a

   $(".c1").before("be");//在<a>之前添加,添加在元素之前                 be <a class="c1">b orgin b</a>

   $(".c1").after("af");//在</a>之后添加,添加在元素之后                 be <a class="c1">b orgin b</a>af

   $(".c1").wrap("<strong>");//对选中的元素，用<strong>包裹    <strong>  <strong /> <strong></strong>三者皆可，语法宽松

   $....wrap ....wrapAll...wrapInner等     wrap系列的用法,直接百度搜索,感觉用的不多.

   $(".c1").remove();整个删除  里面的内容和标签全部删掉

   $(".c1").detach();整个删除  里面的内容和标签全部删掉,与remove不同的是 detach()还会返回所有被删除的内容，一般用来做复制到其他地方的作用。

     

 

   在body最开始添加一个自定义的<p>

  var para = $("<p>",{

                       "class":"c1",

                       "text":"hello ,I am jack",

                       "css":{"background":"yellow"}

                     }

              );

  $("body").prepend(para);

  

3. 修改属性   -------   attr();

   第一个参数给出所要修改的属性，第二个参数给定属性值，如果没有第二个参数，则返回该属性的值

   $("#id1").attr("class");  获取class属性值

   $("#id1").attr("type");  获取style属性值

 

   $("#id1").attr("class","ff0");  修改class属性为ff0

   $("#id1").attr("value","new value");  修改value属性为new value

 

   $("#id1").css({"color":"red","background":"yellow"});//修改样式

   $("#id1").css({”color“);//获取样式

   $("#id1").text();         $("#id1").text();            //修改或者获取内容

   $("#id1").html();       $("#id1").html("acb");  //修改或者获取内容

   $("#id1").val();          $("#id1").val("qqt");    //修改或者获取value，同$("#id").attr("value","aa");

   $("#id1").data("mydefinevalue");        $("#id1").data("mydefinevalue","mmmnnn");//修改或者获取一个自定义的属性

   $("#id1").addClass("intro");    removeClass("intro");   toggleClass("intro");   //增加或者删除元素的class

   $("#id1").height();          $("#id1").height(120);    //设置或者获取长度高度

    

4. 遍历

  $(".p1").each(function(index,ele){ 

$(this).append($(this).html()); //$(this)就表示当前jquery元素，可以使用$(this).attr("value","v1");

//ele 表示当前js元素，可以使用ele.innerHTML="v1";

});

  

5. 显示 和隐藏

   $("#id1").show();  //显示  不带效果

   $("#id2").hide();   //隐藏   不带效果

   $("#id1").show(2000,function(){});  //显示  带效果，在一定时间内慢慢显示

   $("#id2").hide(2000,function(){});   //隐藏   带效果，在一定时间内慢慢消失

 

 

   $("#id1").fadeIn();  //慢慢显示，色度有0->1

   $("#id2").fadeOut();   //慢慢隐藏，色度有1->0

 

   $("#id1").fadeIn(2000,function(){});  //慢慢显示，色度有0->1

   $("#id2").fadeOut(2000,function(){});   //慢慢隐藏，色度有1->0

 

   $("#id1").fadeTo(2000,0.5,function(){});  //慢慢到0.5的程度

 

 

   $("#id1").slideUp(2000,function(){});  //慢慢隐藏,高度变化

 

   $("#id2").slideDown(2000,function(){});   //慢慢显示，高度变化

 

 

   $("#id2").slideToggle(2000,function(){});   //

 

 

 

6.  animate delay 用的不多   animate 设定到指定的格式

   $("#img1").animate({"width":"10px","height":"100px"},20,"swing",function(){}).delay(1000).animate({"width":"400px","height":"100px"},20,"swing",function(){});

 

 $("p").animate({left:"100px"});//

   

7. 处理事件 ready

       $(document).ready(function(){ //等DOM都准备好之后，才执行

              $("#click_send_img").click(function(){//按钮的事件
                       $("#div_send_img").toggle(); 
                       $("#div_send_msg").toggle(); 
               });

        });