jQuery

分类：jQuery作者：编程之家用户

<h1 id="一jquery">一、jQuery
<h3 id="定义">1、定义

  • jQuery 是JS的类库
  • jQuery是为了让JS的开发更简单
  • jQuery的目的： 写得少，干得多

  • 兼容性问题 （jquery2.以上的不兼容IE8、 兼容IE8以及以下，jquery1-.）
  • 便捷的选择器
  • 方便的事件体系
  • 方便的dom元素
  • 方便的动画体系
  • 易用的ajax

  • 开源、免费

  • 用法

      $(document).ready(function(){
  })
  //简写
  $(function(){
  })
  • 与onload的区别
    • onload 事件 等到页面的一切加载完毕，才能触发
    • ready事件等页面中所有的dom加载完毕，就能触发

  • 通过$() 获取的对象，是jquery dom
  • jquery dom 本质上是由 原生dom 组成的集合，通过取下标就可以获取原生dom

  • $()方法可以把 原生dom 变为 jquery dom $(document)

      //把jquery dom 变成原生dom
  $dom[0].style.border="2px solid orange";

    //原生dom转换为jquery dom
    

    $(dom).css("background-color","yellow");

    //jquery给一组元素绑定事件不需要遍历
    $("ul li").click(function(){
        $(this).css("background-color","yellow");
    })

    
选择器

    
过滤选择器

    
    小丽丽
        
  • 
        
  • 小丽丽
            
      
                
    • 小翠翠
      • 
                
    • 小翠翠
      • 
                
    • 
                
    • 小翠翠
      • 
                
    • 小翠翠
      • 
            
    
        
    • 
        
  • 小丽丽
    • 
        
  • 小丽丽
    • 
        
  • 小丽丽
    • 
    


<ul id="secondList"&gt;
    <li>嘿嘿嘿</li>
    <li>嘿嘿嘿</li>
    <li>嘿嘿嘿</li>
    <li>嘿嘿嘿</li>
    <li>嘿嘿嘿</li>
</ul></code></pre>


    

    • 

  • .className
    • 

  • tagName
    • 

  • *
    • 

  • selecter,selecter
    • 





    

  • selecter seclter
    • 

  • selecter>selecter
    • 

  • selecter+selecter
    • 

  • selecter~selecter
    • 





    

  • 

    :first
    

      $("#firstList li:first").css("border","3px solid red");
    

    • 

  • 

    :last
    

       $("#firstList li:last").css("border","3px solid red");
    

    • 

  • 

    :eq(index)等于
    

      $("#firstList li:eq(3)").css("border","3px solid red")
    

    • 

  • 

    :lt(index)小于
    

      $("#firstList li:lt(5)").css("border","3px solid red");
    

    • 

  • :gt(index)大于
    • 

  • :odd 奇数
    • 

  • 

    :even 偶数
    

      $("#secondList li:even").css("background-color","orange")
    

    • 

  • 

    :not(selecter) 排除（除了它以外的符合范围的）
    

      $("#firstList li li:not(.item)").css("background-color","#999")
    

    • 

  • 

    :lang()
    

      $("#firstList>li:lang(zh)").css("border","5px solid green");
    

    • 

  • 

    :header 所有的标题标签(hn)
    

      $(":header").css("color","red");
    

    • 

  • 

    :root
    

      $(":root").css("border","1px solid red");
    

    • 

  • 

    ：focus
    

      $("input").focus(function(){
              $("input:focus").css("border","3px solid red");
          })
    

    • 

  • :target
添加锚点出效果
$(document).ready(function(){
$("ul:target").css("border","10px solid green");
})
    • 







    
    
        
  • 丽丽
    • 
        
  • 丽丽
    • 
        
  • 丽丽
            
      
                
    • 翠翠
      • 
                
    • 翠翠
      • 
                
    • 
                
    • 
                
    • 
                
    • 翠翠
      • 
            
    
        
    • 
        
  • 丽丽
    • 
        
  • 
        
  • 丽丽
    • 



    

  • 

    :contains(text)
    

      $("li:contains('翠翠')").css("border","1px solid red");
    

    • 

  • empty
    • 

  • 

    parent
    

      $("li:parent").css("border","5px solid red");
    

    • 

  • 

    has(selecter)
    

      $("li:has(.item)").css("border","5px solid red");
    

    • 







    

  • :hidden
    • 

  • 

    :visible
    

      $("li:visible").css("border","1px solid red");
    

    • 





    

  • [attrName]
    • 

  • [attrName=value]
    • 

  • [attrName!=value]
    • 

  • [attrName^=value]
    • 

  • [attrName$=value]
    • 

  • [attrName*=value]
    • 





    

  • :first-child
    • 

  • :last-child
    • 

  • :nth-child()
    • 

  • :nth-last-child()
    • 

  • :only-child
    • 

  • :first-of-type
    • 

  • :last-of-type
    • 

  • :nth-of-type()
    • 

  • :nth-last-of-type()
    • 

  • :only-of-type
    • 







    

  • 

    :input 所有的表单控件(input\select\textarea)
    

      $(":input").css("border","1px solid red");
    

    • 

  • :text
    • 

  • :radio
    • 

  • :checkbox
    • 

  • :password
    • 

  • :image
    • 

  • :submit
    • 

  • :reset
    • 

  • :button

    • 

  • :file
    • 





    

  • :diabled
    • 

  • 

    :enable
    

      $(":enabled").css("border","1px solid red");
    

    • 

  • :checked
    • 

  • :selected
    • 









       
    
        
  • 丽丽
    • 
        
  • 丽丽
    • 
        
  • 丽丽
            
      
                
    • 霞霞
      • 
                
    • 霞霞
      • 
                
    • 
                
    • 
                
    • 
                
    • 霞霞
      • 

              </ul>
    </li>
    <li>丽丽</li>
    <li>丽丽</li>
    <li></li>
    <li>丽丽</li>
</ul></code></pre>
      

        

      • .eq(index)
        • 

      • 

        .first()
        

          $("li").first().css("border","5px solid red");
        

        • 

      • .last()
        • 

      • not(selcter)
        • 

      • 

        filter(selecter)只是selecter
        

          $("li").filter(".item").css("border","5px solid red");
        

        

        • 

      • 

        has(selecter)selecter的父元素
        

        $("li").has(".item").css("border","5px solid red");
        

        • 

      • 

        slice(start,end)start<=数
        

          $("li").slice(2,6).css("border","5px solid red");
        

        • 

      • is(selecter) true/false
        • 

      • hasClass(className) /true/false
        • 

      • 

        map(fn)
将一组元素转换成其他数组（不论是否是元素数组）
        

          var arr=$("li").map(function(index,item){
      return item.innerHTML;
  })
        

        • 

      

      

        

      • 

        find(selcter) 后代元素
        

          $("#myList").find("li").css("border","1px solid red");
        

        • 

      • 

        children(selcter) 子元素
        

          $("#myList").children("li").css("border","1px solid red");
        

        • 

      • parent() 父元素
        • 

      • parents(selcter) 所有的祖先元素
        • 

      • 

        parentsUntil(selecter) 所有祖先素直到
        

          $(".item").parentsUntil("html").css("border","5px solid red");
        

        • 

      • 

        closest(selecter) 从自身和祖先元素中 找到第一个满足条件
        

          $(".item").closest("li").css("border","5px solid red");
        

        • 

      • 

        next() 下一个
        

          $(".item").next().css("border","5px solid red");
        

        • 

      • nextAll()
        • 

      • nextUntil()
        • 

      • prev()
        • 

      • prevAll()
        • 

      • prevUntil()
        • 

      • 

        siblings() 所有的兄弟元素
        

          $(".item").siblings("p").css("border","5px solid red");
        

        • 

      

      

        

      • add(selcter) 把选中的元素加入到当前集合
        • 

      • addBack() 把最近的堆栈中元素加入当前集合
        • 

      • end() 返回最近一次破坏性操作之前的元素
        • 

      • 

        contents() 所有子节点的集合（不是jquery dom）
        

          
        

        • 

      

      

      

      

        

      • 

        prop(attr [,val]) 只能操作内置属性
        

              //获取某个属性的值
      console.log($("img").prop('src'));
      console.log($("img").prop('width'));

          //修改某个的属性的值
  $("img").prop("title","哈哈哈");
  $("img").prop("alt","哈哈哈");</code></pre>
        

        • 

      • 

        attr(attr [,va]) 操作自定义属性
        

              //获取自定义属性的值
      console.log($("img").attr("loadpic"));
      console.log($("img").attr("src"));
        

        • 

      • 

        remvoeAttr(attr) 移除属性
        

          $("img").removeAttr("dddd");
        

        • 

      

      

        

      • addClass() 添加一个类
        • 

      • removeClass() 移除一个类
        • 

      • toggleClass() 切换
        • 

      • 

        hasClass() 判断一个类
        

              $("img").click(function(){
          /*if($(this).hasClass("current")){
              $(this).removeClass("current");
          }else{
              $(this).addClass("current");
          }*/
          $(this).toggleClass("current");
      })
        

        • 

      

      

        

      • 

        html([val])
        

              //获取div内的html内容
      console.log($(".content").html());   
        

        • 

      • 

        text([val])
        

          $(".content").text("
        锄禾日当午
        ");
        

        • 

      • val([val])
        • 

      

      

      

      

        

      • 

        css()
        

          $("#btn").click(function(){
      //$(".my-list li").css("border","1px solid red").css("padding","20px");

          $(".my-list li").css({"border":"2px solid green","padding":"20px","margin-bottom":"10px"
        

        })
        

        • 

      

      

        

      • offset()

        • 

      • 

        postion()
        

          $("#btn1").click(function(){
      console.log($(".my-list li").eq(1).offset());
      console.log($(".my-list li").eq(1).position())
  })
        

        • 

      • 

        scrollLeft([val])
        

          //获取scrollLeft
  $("#btn3").click(function(){
      console.log($(".box").scrollLeft());
  })

        //设置scrollLeft
        
$("btn4").click(function(){
        
$(".box").scrollLeft($(".box").scrollleft()+100)
        
})
        

        • 

      • scrollTop([val])
        • 

      

      

        

      • width() / height()
        • 

      • innerWidth() / innerHeight()
        • 

      • 

        outerWidth() / outerHeight()
        

          console.log($(".box").width(),$(".box").height());
  console.log($(".box").innerWidth(),$(".box").innerHeight());
  console.log($(".box").outerWidth(),$(".box").outerHeight());

        //设置尺寸
        
$("#btn5").click(function(){
        
//$(".box").width(500);
        
$(".box").outerWidth(500);
        
})
        

        • 

      

      

      

      

        

      • 

        append()后插
        

          $(function(){
      //添加
      $("#btn01").click(function(){
          //创建一个元素
          /*var newImg=$("").prop("src","../images/002.jpg");
          $(".box").append(newImg);*/

              $(".box").append("<img src='../images/002.jpg'>");
  })
        

        })
        

        • 

      • 

        appendTo()
        

          $("#btn02").click(function(){
      $("").appendTo(".box");
  })
        

        • 

      • 

        prepend()前面插
        

          $("#btn03").click(function(){
      $(".box").prepend("");
  })
        

        • 

      • prependTo()
        • 

      

      

        

      • 

        after() 前插
        

          //外部插入
  $("#btn04").click(function(){
      $(".box").after("");
  })
        

        • 

      • 

        insertAfter()
        

          $("#btn05").click(function(){
      $("").insertAfter(".box");
  })
        

        • 

      • before()后插
        • 

      • insertBefore()
        • 

      

      

        

      • 

        wrap()每一个img包裹一个li
        

          //包裹
      $("#btn07").click(function(){
          $(".box img").wrap("
      • ");
  })
        • 

        • 

      • wrapAll()给所有的img包裹一个li
        • 

      • 

        wrapInner()
给所有的img包裹一个li
        

          $("#btn09").click(function(){
      $(".box").wrapInner("
      • ");
  })
        • 

        • 

      • 

        unwrap()往上删除包裹img的标签
        

          $("#btn10").click(function(){
      $(".box img").unwrap();
  })
        

        • 

      

      

        

      • replaceWith()
        • 

      • replaceAll()
        • 

      • 

        效果没有区别只是写法不同而已
//替换
$("#btn11").click(function(){
$(".box img.current").replaceWith("

         $("#btn12").click(function(){
     $("").replaceAll(".box img.current");

        })
        

        //给每个img绑定事件
        
$(".box img").click(function(){
        
$(this).toggleClass("current");
        
})
        

        • 

      

      

        

      • empty() 清空全部
        • 

      • remove() 删除(自己)
        • 

      • 

        detach() 删除
        

          //删除
   $("#btn13").click(function(){
      $(".box").empty();
   })

        $("#btn14").click(function(){
        
$("img.current").remove();
        
})
        

        • 

      

      

        

      • clone()
        • 

      

      

      

      

      

        

      • 事件(fn)
        • 

      • 

        bind("事件",fn) 指定对象 同时绑定多个事件
        

          $(".box").dblclick(function(){
      console.log("啊，我被双击了");
  })

        //标准绑定方式
        
$(".box").bind("click",function(){
        
console.log("啊，我被单击了");
        
})
        

        • 

      • on("事件",fn)
        • 

      • 

        one("事件",fn)只能用一次
        

          $(".box").on("mouseover",function(){
      $(this).css("background","red");
  })

        $(".box").one("mouseout","");
        
})
        

        • 

      

      

        

      • unbind()
        • 

      • 

        off()
        

          $("#btn").click(function(){
      //$(".box").unbind("click").unbind("mouseout");
      //$(".box").unbind("click");
      $(".box").off();
  })
        

        • 

      

      

        

      • 

        on(事件,选择器,fn)
        

          $(function(){
      $(".my-list").on("mouseover","li",function(){
              $(this).css("background","orange");
          }).on("mouseout","");
          })
  })
        

        • 

      • 

        delegate(选择器， 事件， fn)
        

          $(".my-list").delegate("li","click",function(){
          $(this).css("border-color","red");
  })
        

        • 

      • undelegate(选择器)
        • 

      

      

        

      • trigger()

        • 

      • 

        triggerHandler()
        

          //$(".my-list li").trigger("mouseover");
  //$(".my-list li").triggerHandler("dblclick");
  $(".my-list li").trigger("dblclick");
        

        • 

      

      

        

      • hover
        • 

      • mouseenter
        • 

      • mouseleave
        • 

      • focusin
        • 

      • 

        focusout
        

          
        

        • 

      

      

      

      

        

      • show()
        • 

      • hide()
        • 

      • 

        toggle()
        

          $(document).ready(function(){
      $("#btn1").click(function(){
          //$("#box").hide();
          //$("#box").hide("fast");
          //$("#box").hide("normal");
          //$("#box").hide("slow");
      //  $("#box").hide(3000);
          //$("#box").hide(3000,"linear");
          //$("#box").hide(3000,"linear",function(){});
          $("#box").hide(3000,function(){
              alert("啊，我隐藏了")
          })
      })
  })
        

        • 

      

      

        

      • slideUp() 隐藏
        • 

      • slideDown() 显示
        • 

      • slideToggle()
        • 

      

      

        

      • fadeOut() 隐藏
        • 

      • fadeIn() 显示
        • 

      • fadeToggle()
        • 

      • 

        fadeTo()
        

          $("#btn10").click(function(){
      $("#box").fadeTo(3000,0.5);
  })
        

        • 

      

      

        

      • 

        animate(params,speed,easing,fn)
        

          $("#btn03").click(function(){
      $(".box").animate({
          "width":"toggle","font-size":"toggle"
      },3000)
  })
        

        • 

      

      

        

      • stop()
        • 

      • finish()
        • 

      • 

        delay() 延迟
        

              $("#btn1").click(function(){
          $("#box").slideUp(3000).delay(3000).show(3000);
      })

          $("#btn2").click(function(){
      $("#box").stop();
  })

  $("#btn3").click(function(){
      $("#box").finish();
  })</code></pre>
        

        • 

      

      

      

        

      • $.support
        • 

      

      

        

      • 

        $.each()
        

              $.each(list,function(index,item){
      console.log(index+":"+item);
        

        • 

      • $.extend()
        • 

      

      

      

      

        

      • each()
        • 

      • size()
        • 

      • length
        • 

      

      区别
      

        

      • empty()
        • 

      • 该方法不仅删除它的子节点，同时也删除该节点的文本域（根据DOM规范，节点的文本域也被认为是子节点）。
        • 

      • remove( [selector] )
        • 

      • 和empty方法类似，remove方法也是从DOM里删除元素。当你想要删除节点本身和节点里的所有东西的时候，可以使用remove方法。除了节点本身以外，节点绑定的事件 和该节点相关的JQuery数据，也会被同时清除。当需要清除节点本身，但是不需要清除绑定的事件和数据的时候，可以使用detach方法。
        • 

      • detach( [selector] )
        • 

      • detach方法和remove方法很相似，但是它会保留所有JQuery相关的数据和绑定的事件。当你删除之后，想要在后来的某个时候重新加入时，这个方法将会很有用。
        • 

      版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

jq配合后端解决跨域
1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问，不安全，部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值，array是被查找的数组。 有如下实例： &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看，他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提
JS 将form表单数据快速转化为object对象（json对象）
JS 将form表单数据快速转化为object对象（json对象） jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏： 前端 文章标签： javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的区别：$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址：https://www.cnblogs.com/sqh17/p/7746418.html 解决：动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实
获取和渲染下拉列表选项
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
JQuery 动态添加 select option选项
网上对于select option 动态添加修改如下， $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend()
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意：$.extend是为jQuery类添加添加类方法,用$.调用（类似$.ajax），$.fn.extend则是为jQuery对象添加方法（实例方法）,用DOM元素
jQ动态回显ajax请求的值
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定，但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上，这时我们可以用字符串拼接，元素添加的方法去实现 js部分如下： 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 事件委托，
JQuery-$.when().done().fail()的使用
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1
jQuery tableExport导出 excel
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word，就试试导出excel。看见网上写的很乱，我这就把我写的整理下来，有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法（购物车数量加减）
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数（匿名函数、自执行函数）
前端——函数（匿名函数、自执行函数） FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明：function box(){} 函数表达式：var box = function(){}; 匿名函数：function(){} （属于函数表达式） 1声明了一个函数： var
js: 获取标签元素data-*属性值的方法
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签： javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解：匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制
JavaScript函数详解：匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义： 调用： 方式1：方法名(); 可以多次调用 方式2：在事件中调用，直接写函数名，不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况： 1.匿名函数自执行：声明后不需要
如何等待ajax完成再执行相应操作
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求，对于大多数业务来说，这是十分方便的，但对于一些特殊的业务，ajax的异步性会起到相反的作用。 例如在ajax请求成功后，后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin)
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间：2009年09月03日 02:10:54 作者： 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot