Jquery常用的方法汇总

   //wrapAll() :

        wrapAll():把标签都包裹到一起,就算要被包裹标签没在一起,中间有别的标签,也会吧那个要被包裹标签,都移到一起,在一起包裹
       //包裹之前
            123
           

aaa

aaa

    //wrapInner() :

            wrapInner(): 将匹配标签中的内容,添加一个指定标签(相当于是给原标签添加一个子标签,并且保存的是父标签的文本内容)
        123 :
            a.wrapInner("b");//结果就是 : 123   用b标签 把a里面的内容括起来
       

//效果切换 toggleClass() : 

        是指的效果之间的切换,第一次没有切换的时候有一个效果,切换的时候,是指所有的class综合组成的那个效果
        就是当前效果和指定的效果来回切换
        
        

你最喜欢的水果是?

//判断元素是否包含某样式 hasClass() :

        $("p").hasClass("MyClass");//判断p标签里面是否有个class的属性为MyClass
        $("p").is("MyClass");//和上面一样

//html()和text() : 

你最喜欢的水果是?

//得到 失去 焦点 focus() blur() :

        focus() : 得到焦点
        blur() : 失去焦点
        $("标签名(#ID名)(.class名)").focus(获取焦点需要执行的方法和语句function(){ 语句 操作})
        $("标签名(#ID名)(.class名)").blur(失去焦点需要执行的方法和语句function(){ 语句 操作})

//获取/更改 value()值 defaultValue : 

       
        $("input").val();//这是获取value的值
        $("input").val("账号是****");//这是更改value的值
        结果就是 :

    //defaultValue :
        代表value的默认值,就是编写代码的时候,设置value的值是什么,那defaultValue就是什么
        一般用于判断
        if (txt_value == ""){//意思是,如果value为空,就把开始的默认值再赋值给value
            用于设置输入框,如果输入框没有输出东西,就还把默认的value值输入进去,(没得到焦点的时候,输入框里显示默认值,得到焦点后,设置去掉默认值,如果客户没有输入东西,还会给value把默认值赋值回去,用于提醒客户,没有输入东西)
        $("input").val($("input").defaultValue)
        }

//查看子元素的个数children() (只是子元素,子元素的子元素,不算,直接子元素才是子元素) :

        $("标签").children();
        标签的jQuery对象.children();
       
           
               
           
           
       
        $("a").children();//就是2  因为a的子元素只有b和d

        $("b").children();//就是1 因为b的子元素只有c一个

        $("d").children();//就是0 因为d没有子元素

//同辈元素,next(),prev(),siblings() :

        next();//同辈的下一个元素
        prev();//同辈的上一个元素
        siblings();//所有的同辈元素
    123
   

你最喜欢的水果是?

     
• 苹果

     
• 橘子

     
• 菠萝

   

   // 例子 : next()

   var p= $("p").next();
   p.html();//p元素的同辈下一个元素的内容(就相当于innerHTML),结果就是 :
           

这里就是html()的东西

        var p = $("p").prev();
        p.html();//就是p的同辈元素的上一位 就是b 元素吧 b元素的html(), 就是123把 所以就是123

        123

    ----------------------
    //  siblings()

        var p = $("p").siblings();//所有元素,现在是数组把
        p.html();//这个,只是123,因为是数组,如果输出,输出第一个,所以就是b标签的内容就是123  要遍历才能看到所有内容
        for(var i =0;p.length;i++){
            alert(p[i].innerHTML);//这就是所有的内容,为什么用innerHTML?
            //因为p是jQuery对象吧,当jQuery对象,后面跟下标的时候,就是DOM对象了,所以只能用innerHTML.这个和jQuery对象的html()方法,功能是一样的,
            //alert();是个普通的弹框
            //结果就是 :
                    123
                    你最喜欢的水果是?
                    苹果
                    橘子
                    菠萝
                    456
        }

//事件委托机制 : 

        事件委托机制 : 我们要找到某个元素,改变其属性,但是这个元素我们不知道能不能找到,所以我们就用一个临时变量,把事件委托给他,然后去寻找元素,找到以后就把事件转交

    // $(自定义变量.target).closest("要找的元素").css("找到之后的某一个属性","更改属性值")
   
        //这里从点击对象开始往上查询(如果点击的是a,就会先找a,在找span,再找p,再找body,一直除非找到正确的那个标签,就停止网上找了)
            $(document).bind("click",function(e){
                $(e.target).closest("body").css("color","red");
                })
            //$(document).bind("click",function("p"){
             //   $("p").css("color","red");
             //   })

            //document:代表整个文档,我要匹配文档中某一个不确定对象,用了这样一种形式
            //e:是指我们要找的某个元素,他的是个不特定的值,$(e.target)是那个不特定的对象
            //来自于我们不特定的匹配,匹配到谁就是谁
       
           

               
  
                苹果
                橘子
                菠萝
               
           

                   
• 苹果

                   
• 橘子

                   
• 菠萝

           

//获取对象的左边距和上边距 offset() :

        用法 :
            jQuery对象.offset();
            jQuery对象.offset().left/top;
        var $p = $("p").offset();//获得p的左边距和上边距,是个数组
        $p.left;//得到的值,就是左边距
        $p.top;//得到的值,就是上边距

//设置坐标并显示,show() :

        对象.css().show("slow(慢)"/"normal(正常)"/"fast(快)");
    三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)
        $("#id").mouseover(function(e){
                //e相当于原生js中的event
                //创建一个div元素,e触发的事件对象(mouseover),this代表触发的时候,事件源对象(指html标签)
                var tooltip = "

以上就是Jquery常用的方法汇总的详细内容，更多请关注0133技术站其它相关文章！