浅谈jQuery，老司机带你jQuery入门到精通

Posted 2022-11-18 hupeng1996

1.  何为jQuery？

1.1、jQuery介绍

　　jQuery是继Prototype之后又一个优秀的javascript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。

　　jQuery凭借简介的语法和跨浏览器的兼容性，极大地简化了JavaScript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发AJAX的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。

　　但是，实际上，jQuery就是JavaScript的封装，基于原生，又方便了我们。

1.2、jQuery特点

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery的特点：

• 功能强大，强调的理念是写的少，做得多（write less，do more）
• 封装了大量常用的DOM操作
• 灵活的事件处理机制
• 拥有完善的AJAX功能
• 扩展性强、插件丰富
• 易学易用
• 多浏览器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了对Internet Explorer6,7,8的支持）、兼容性好

1.3、jQuery版本

关于jQuery版本

　　v1.xx.xx　　完善(新手)建议下载

https://lib.baomitu.com/jquery/1.12.4/jquery.js

　　v2.xx.xx　　删除兼容

https://lib.baomitu.com/jquery/2.2.4/jquery.js

　　v3.xx.xx　　重构，些许bug

https://lib.baomitu.com/jquery/3.4.1/jquery.js

　或者自行百度  静态资源库

例如：  https://cdn.baomitu.com/

2.  jQuery使用

　2.1.1获取JQuery对象：

　　怎样获取jQuery 对象？大致来说，是通过最核心的$()方法，将页面上的元素（或者在页面上不存在的 html 片段）包装成 jQuery 对象。
　　$()方法里面支持的语法又包括：

1. 分别是表达式（包括类表达式.，id 表达式#，元素表达式等）
2. 符号（包括后代符号space，next 符号+等)
3. 过滤器（包括:过滤器和[]过滤器）
4. 现在显然还有更多

通过以上组合，通过选择器 $() 可”查询“得到 jQuery 对象（或者jQuery 对象的集合）

　2.1.2常用API

     $(…)：

  一切的核心，可以跟4 种参数。
$();


 返回jQuery 对象或者jQuery 对象的集合
 比如$("#id")、$(".class")
$(expression);


 返回jQuery 对象，或者jQuery 对象的集合
 比如$("<span>hello world</span>")
$(html)


  返回jQuery 对象，或者jQuery 对象的集合
  比如$(document.body)
$(element)


 所有元素
$(*)

　2.1.3原生与jQuery转换

　　原生的DOM元素与jq的DOM元素的方法，不互通，原生代码可以和jq代码同时存在，只是互相之间对象的属性或方法不互通

jq的DOM对象和原生的DOM对象的转换：
　　jq转原生：
　　　　解析数组
　　　　通过get方法
　　原生转jq：
　　　　使用jq的函数包裹原生DOM对象

1.
　　 obox.style.background = "red";　　　　//原生方法
    $(obox).css("background","yellow")　　//jQuery方法

2.
    var obox = $("#box2");

　　　   obox[0].style.background = "blue";
　　　　obox.get(0).style.background = "blue";
　　　　obox.css("background","blue");

      2.2.1选择器

jQuery选择器与原生中的选择器相差不大

    $("#cont").css("background","red");　　　　　　　　//选中id

    $(".box").css("background","red");　　　　　　　　//选中class

    $("span").css("background","red");　　　　　　　　//选中标签

    $(".msg h2").css("background","red")　　　　　　　//选中后代

　　 $(".msg").find("h2").css("background","red")　　//选中后代

    $(".msg>h2").css("background","red") 　　　　　　 //选中儿子级别的h2
    $(".msg").children("h2").css("background","red")//选中儿子级别的h2

    $(".msg+span").css("background","red")　　　　　　　//选中相邻的下一个兄弟span标签
    $(".msg").next("span").css("background","red")　　//选中相邻的下一个兄弟

　　 $(".msg~span").css("background","red")　　　　　　　// 选中所有的下所有span标签
　　 $(".msg").nextAll("span").css("background","red")　//选中下所有span标签
 　　$("input[type=text][name]").css("background","red")//属性选择器 选中input标签中type=text的所在标签

　　通过上面的小例子大家应该也发现了，原生的普通选择器跟jQuery中的选择器一样，只是jQuery中已经封装好了更多的组合选择器，大家可以去发现。

     2.2.2  jQuery内置动画

 方法：

    .hide()                 //隐藏
    .show()                 //显示
    .toggle()               //隐藏/显示
    .slideUp()              //上拉
    .slideDown()            //下拉
    .slideToggle()          //上拉/下拉
    .fadeOut()              //淡出
    .fadeIn()               //淡入
    .fadeToggle()           //谈出/淡入
    .fadeTo(1000,0.5)  　　  //半透明，前一个参数表示时间，后一个为透明度           

     2.2.3  jQuery非内置动画

        $(".box").animate(
            width:0,
            height:0,
            left:100,
            top:0
        ) //测试之前应事先给box一个宽高

     2.2.4 jQuery动画的设置

    选择器：$.fn
    动画：$.fx

    毫秒数，频率
    $.fx.interval = 100;
    $.fx.off = true;

    $("#btn")[0].onclick = function()
        $(".box").animate(
            left:600
        ,2000).animate(
            top:500
        )

    

     2.3.1 jQuery的事件

 1.事件名绑定
    元素.事件名(函数)
    $("#btn").mousedown(function()
        console.log(1)
    )

    2.on绑定
    $("#btn").on("click.a",function()
        console.log(1)
    )
    $("#btn").on("click.b",function()
        console.log(2)
    )
    // off删除on绑定的方法
    $("#btn").off("click.a")
    //事件委托
    $("ul").on("click","li",function()
        console.log(this)
    )


    3.bind绑定
    $("#btn").bind("click.a",function()
        console.log(1)
    )
    $("#btn").bind("click.b",function()
        console.log(2)
    )
    // unbind删除bind绑定的方法
    $("#btn").unbind("click.a")

    4.one绑定
    $("#btn").one("click",function()
        console.log(1)
    )
    
    5.hover绑定：没有事件冒泡
    mouseover
    mouseout
    没有事件冒泡
    mouseenter
    mouseleave
    $("#btn").hover(function()
        console.log("进入")
    ,function()
        console.log("离开")
    )

    6.模拟事件执行
    setInterval(() => 
        // 有事件冒泡
        $("#btn").trigger("click")
        // 没有事件冒泡
        $("#btn").triggerHandler("click")
    , 1000);

　　2.3.2jQuery的DOM属性操作

    $("span").parent()   // 直接父级
    $("span").parents()  // 所有父级
    $("span").parentsUntil(".box")    // 指定范围父级

 原生内容操作：
    // innerHTML
    // innerText
    // value

 jq内容操作：
    $(".box").html()
    $(".box").text()
    $(".box").html("<mark>world</mark>")
    $(".box").text("<mark>world</mark>")
    $("input").val()
    $("input").val("hello")

 属性操作
    addClass
    removeClass
    
    $(".box").css(["width","height","border"]);

     var obj = $(".box").css(["width","height","border"])
     $.each(obj,function(key,val)
        console.log(key,val)
    )


attr()
    $(".box").attr("abc")
    $(".box").attr("abc","qwe")
    $(".box").attr(
        a:10,
        b:20,
        c:30
     )

     $(".box").removeAttr("b")

 创建并插入
    $("div")

    var d = $("<div>");
    // body被div插入了
    $("body").append(d);
    // 把div插入到body
    d.appendTo($("body"));


     $("body").before(d)    //在body标签前放入d
     $("body").after(d)      //在body标签后放入d

  删除
     $(".box").remove();   //将class为box的标签删除，包括其中的全部内容（包括标签）
    $(".box").empty();    //将class为box的标签（标签）删除，留下div为box的那一个标签

改
    $(".box").replaceWith("<p class=‘"+ $(".box").attr("class") +"‘>"+ $(".box").html() +"</p>");             //字符串的拼接

　　

　　通过上面的对jQuery的讲解，大家应该也会发现，jQuery基于原生，jQuery的所有东西，原生都能实现，jquery其实就是别人封装好的函数，有很多功能，可以直接使用，不用考虑原理。