jquery 基础

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

    PS:$可以接受2个参数,第二个参数是目标jquery对象,例如:$("p",$(document.getElementById("my_id")));

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

   单选

   $("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的元素,注意逗号的隔断是((p.foo),(#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[title=abc]")找出属性title为abc的c1元素,【属性过滤器】

    $('[name=items]:checkbox')name属性为items,且type为checkbox的元素。

    $('#id_form input:[name=username]')form表单下,name为username的input元素

    找子 元素

    $(".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,click等。

$(document).ready(function(){ //等DOM都准备好之后,才执行
    $("#click_send_img").click(function(){//按钮的事件
        $("#div_send_img").toggle();
        $("#div_send_msg").toggle();
    });
    $("#XXX").focus(function(){//获得焦点
    });
    $("#XXX").blur(function(){//失去焦点
    });
    //也可以
    $("#XXX").bind("click",function(){
        //XXXXX
    });

    //停止事件冒泡,阻止默认行为

    $("#XXX").click(function(event){
        event.stopPropagation();//停止事件冒泡
        event.preventDefalut();//阻止默认行为,如链接、表单提交。链接返回false也能阻止跳转。
    });

});

    也可以简写成
    $(function(){
      //xxxx do job.
    });

   

8. DOM对象和jquery对象严格区分

 

jquery转dom:

var $cr = $("#cr");//jquery对象

var cr = $cr[0];//dom对象

或者//var cr = $cr.get(0);//dom对象 

 
dom转jquery
var cr = document.getElementById("cr");//dom对象
var $cr = $(cr);//jquery对象。 
 
 

9. jquery的常用插件

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

(1)validation插件

      可以验证email,url,phonte,idCard等。

(2)表单插件Form:jquery.form.js

      不需要复杂得去拼接ajax中的data字段,尤其对提交文件效果非常好

(3)模态对话框,simplemodal

      避免丑陋的alert对话框。

(4)cookie插件。jquery.cookie.js

        $.cookie('token', response.data, { expires:365*100,path: '/'  });//域名下所有路径

        $.cookie('token', response.data, { expires:365*100,path: 'taobao.com'  });//该域名下所有路径

        $.cookie('token', response.data, { expires:365*100,path: '.taobao.com'  });//该二级域名下所有路径

        var c = $.cookie('token');//获得cookie

 (5)query插件。jquery.query-2.1.7.js。

      操作url,$.query.get("type");

原文地址:https://www.cnblogs.com/dongfangchun/p/8441034.html