【一起来烧脑】读懂JQuery知识体系

叁歲伎倆 2021-09-29 14:50 407阅读 0赞

## 背景 ##

在现在就业的过程中，会运用JQuery是你的加分项，那么什么是JQuery，嗯，jquery是JavaScript的函数库，是一种轻量级的JavaScript库，写得少，做的多，导致jQuery有很多技术人员在使用它做项目。

jQuery库包含：

HTML元素的获取，HTML元素操作，css的操作，HTML事件函数，JavaScript特效和动画，HTML dom的遍历和修改，ajax，utilities。

jQuery 安装：

下载jQuery库，[下载地址][Link 1]

production version  
用于实际的网站中

development version  
用于测试和开发

jQuery库是一个JavaScript文件

JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

从CDN中载入jQuery

// 百度
    <head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    
    // 谷歌
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    
    // 微软
    <head>
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    </head>

## jQuery目录 ##

![jQuery目录.png][jQuery_.png]

## jQuery语法 ##

基础语法：

1.  美元符号定义 jQuery
2.  选择符() “查询"和"查找” HTML 元素
3.  jQuery 的方法执行对元素的操作

## jQuery代码 ##

$(document).ready(function(){
    //这里是jQuery代码
    });
     
    $(function(){
     // 这里是jQuery代码
    });
    
    $( function() {} );

DOM加载完成后才可以对DOM进行操作，如果文档没有完全加载之前运行函数，会导致操作失败。

## jQuery 选择器 ##

元素选择器，`#id`选择器，`.class`选择器

$("p:first")	
    选取第一个 <p> 元素
    
    $("ul li:first")	
    选取第一个 <ul> 元素的第一个 <li> 元素
    
    $("ul li:first-child")	
    选取每个 <ul> 元素的第一个 <li> 元素
    
    $("[href]")	
    选取带有 href 属性的元素
    
    $("a[target='_blank']")	
    选取所有 target 属性值等于 "_blank" 的 <a> 元素

## jQuery 事件 ##

jQuery事件处理方法是jQuery中的核心函数。

jQuery名称冲突`$符号`

jQuery使用名为noConflict()方法来解决该问题

$(selector).dblclick(function)	
    触发或将函数绑定到被选元素的双击事件
    
    $(selector).mouseover(function)	
    触发或将函数绑定到被选元素的鼠标悬停事件

## jQuery 隐藏/显示 ##

hide()和show()方法来隐藏和显示HTML元素

$("#hide").click(function(){
      $("p").hide();
    });
     
    $("#show").click(function(){
      $("p").show();
    });
    
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    
    $("button").click(function(){
      $("p").hide(1000);
    });

toggle()方法来切换hide()和show()方法  
显示被隐藏的元素，隐藏已显示的元素

$("button").click(function(){
      $("p").toggle();
    });
    
    $(selector).toggle(speed,callback);

## jQuery 淡入淡出 ##

fadeIn()  
jQuery fadeIn()用于淡入已隐藏的元素

fadeOut()  
jQuery fadeOut() 方法用于淡出可见元素

fadeToggle()  
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

fadeTo()  
jQuery fadeTo() 方法允许渐变为给定的不透明度

$(selector).fadeIn(speed,callback);
    
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });
    
    $(selector).fadeOut(speed,callback)
    
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });
    
    $(selector).fadeToggle(speed,callback);
    
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });
    
    $(selector).fadeTo(speed,opacity,callback);
    
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });

## jQuery 滑动 ##

slideDown()  
用于向下滑动元素

slideUp()  
用于向上滑动元素

slideToggle()  
可以在 slideDown() 与 slideUp() 方法之间进行切换

$(selector).slideDown(speed,callback);
    
    $("#flip").click(function(){
      $("#panel").slideDown();
    });
    
    $(selector).slideUp(speed,callback);
    
    $("#flip").click(function(){
      $("#panel").slideUp();
    });
    
    $(selector).slideToggle(speed,callback);
    
    $("#flip").click(function(){
      $("#panel").slideToggle();
    });

## jQuery 动画 ##

animate()方法用于创建自定义动画  
![image.png][]

$(selector).animate({params},speed,callback);
    
    $("button").click(function(){
      $("div").animate({left:'250px'});
    });
    
    $("button").click(function(){
      $("div").animate({
        left:'250px',    
        opacity:'0.5',    
        height:'150px',    
        width:'150px'
      });
    });
    
    $("button").click(function(){
      $("div").animate({
        left:'250px', 
        height:'+=150px',   
        width:'+=150px'
      });
     });
    
    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });
    
    $("button").click(function(){
      var div=$("div");  
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow"); 
      div.animate({width:'100px',opacity:'0.8'},"slow");
    });

## jQuery 停止动画 ##

Stop()方法适用于所有jQuery效果函数

$(selector).stop(stopAll,goToEnd);
    
    $("#stop").click(function(){
      $("#panel").stop();
    });

## jQuery Callback函数 ##

$("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });

## jQuery 链 ##

许在一条语句中运行多个jQuery方法

$("#p1").css("color","pink").slideUp(2000).slideDown(2000);

## jQuery 获取和jQuery 设置 ##

text()–设置或返回所选元素的文本内容

html()–设置或返回元素的内容（包括HTML标记）

val()–设置或返回表单字段的值

## jQuery 添加元素 ##

append()–在被选元素的结尾插入内容

prepend()–在被选元素的开头插入内容

after()–在被选元素之后插入内容

before()–在被选元素之前插入内容

## jQuery 删除元素 ##

remove()  
删除被选元素（及其子元素）  
也可以接受一个参数，允许对被删除元素进行过滤

![image.png][image.png 1]

empty()  
从被选元素中删除子元素

![image.png][image.png 2]

## jQuery CSS ##

addClass()–向被选元素添加一个或多个类  
removeClass()–从被选元素删除一个或多个类

toggleClass()–对被选元素进行添加、删除类的切换操作  
css()–设置或返回样式属性

## jQuery 尺寸 ##

width()–设置或返回元素的宽度（不包括内边距、边框或外边距）  
height()–设置或返回元素的高度（不包括内边距、边框或外边框）

innerWidth()–返回元素的宽度（包括内边距）  
innerHeight()–返回元素的高度（包括内边距）

outerWidth()–返回元素的宽度（包括内边距和边框）  
outHeight()–返回元素的高度（包括内边距和边框）

## jQuery 遍历 ##

![//img.mukewang.com/wiki/5b20ede10169b4a203530240.jpg][img.mukewang.com_wiki_5b20ede10169b4a203530240.jpg]

## jQuery 祖先 ##

parent()  
返回被选元素的直接父元素  
只会向上一级对DOM数进行遍历

parents()  
返回被选元素的所有祖先元素  
所有祖先

parentsUntil()  
返回介于两个给定元素之间的所有祖先元素

## jQuery 后代 ##

children()  
返回被选元素的所有直接子元素

find()  
返回被选元素的后代元素

## jQuery 同胞 ##

siblings()  
返回被选元素的所有同胞元素

$("h2").siblings();

next()  
返回被选元素的下一个同胞元素

nextAll()  
返回被选元素的所有跟随的同胞元素

nextUntil()  
返回介于两个给定参数之间的所有跟随的同胞元素

prev() prevAll() prevUntil()  
返回前面的同胞元素

## jQuery 过滤 ##

first()  
返回被选元素的首个元素

last()  
回被选元素的最后一个元素

eq()  
返回被选元素中带有指定索引号的元素  
索引号从0开始，因此首个元素的索引号是0而不是1

Filter()方法 Not()方法  
不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回  
Not()方法返回不匹配标准的所有元素

## jQuery AJAX ##

AJAX是与服务器交换数据的技术  
在不重载全部页面的情况下，实现了对部分网页的更新

AJAX = 异步 JavaScript 和 XML

Load()方法

$(selector).load(URL,data,callback);
    
    $("#div1").load("demo_test.txt");
    
    $("button").click(function(){
      $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
          alert("外部内容加载成功！");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
      });
    });
    
    $.get(URL,callback);
    
    $("button").click(function(){
      $.get("demo_test.asp",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
      });
    });
    
    $.post(URL,data,callback);
    
    $("button").click(function(){
      $.post("demo_test_post.asp",
      {
        name:"",
        url:"http://www..com"
      },
      function(data,status){
        alert("数据: " + data + "\状态: " + status);
      });
    });

## jQuery noConflict()方法 ##

$.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行");
      });
    });
    
    var jq = $.noConflict();
    jq(document).ready(function(){
      jq("button").click(function(){
        jq("p").text("jQuery 仍在运行"); 
      });
    });
    
    $.noConflict();
    jQuery(document).ready(function($){
      $("button").click(function(){
        $("p").text("jQuery 仍在运行");
      });
    });

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[Link 1]: http://jquery.com/download/
[jQuery_.png]: /images/20210724/d6fa53f9ca5d4dbf8b99720716959fc3.png
[image.png]: /images/20210724/6c7fa73aa044466fb4f37d4b37bfbaa1.png
[image.png 1]: /images/20210724/4746bc50ea7f45089d92ac2a98d5e79c.png
[image.png 2]: /images/20210724/f3b27546fa594a8392d870aa448ee988.png
[img.mukewang.com_wiki_5b20ede10169b4a203530240.jpg]: /images/20210724/9d7f0a9933304a3e8f47bcb8da0ffffa.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/977f198ffdfa4944a9835d45e72c13d8.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/0922d51aaaf14538bae88845113b885f.png