jQuery知识点全集_小言_互联网的博客

jQuery知识点全集

2021-05-19 11:23 197人阅读评论(0)

jQuery文章目录

jQuery简介

jQuery 是一个JavaScript库，简化了JS的编程方式
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery库可以处理html元素的选取，html元素的操作，css操作，html事件函数，JS特效和动画，html Dom 树的遍历和修改，Ajax等等

    可以通过下面的标记把 jQuery 添加到网页中：<script> 标签应该位于页面的 <head> 部分。
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    </head>

jQuery 基础语法

jQuery 基础语法是：$(selector).action()，美元符号定义 jQuery，选择符（selector）“查询”和“查找” HTML 元素，jQuery 的 action() 执行对元素的操作
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
$(this).hide()：隐藏当前的 HTML 元素。
$("#test").hide() 隐藏id = test 的元素
$(“p”).hide() 隐藏当前页面的所有P元素
$(".test").hide() 隐藏所有 class = “test” 的元素
$(".test").show() 显示所有 class = “test” 的元素
$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    $("button").click(function(){
      $("p").hide(1000);
    });

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

    1. $(selector).toggle(speed,callback);
    2. 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
    3. 可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
        $("button").click(function(){
          $("p").toggle();
        });

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

jQuery 选择器简介

使用选择器可以对元素组或者单个元素进行操作
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 使用 CSS 选择器来选取 HTML 元素。
    1. $("p") 选取 <p> 元素。
    2. $("p.intro") 选取所有 class="intro" 的 <p> 元素。
    3. $("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    1. $("[href]") 选取所有带有 href 属性的元素。
    2. $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    3. $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    4. $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
    1.$("p").css("background-color","red");
    2. $("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
    3. $("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 常见的事件函数（方法）

$(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)：触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)：触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)：触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)：触发或将函数绑定到被选元素的鼠标悬停事件

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

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
    </body>
    
    </html>
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
    $("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素：
    $("p").hide();
注意;如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

jQuery 的动画效果知识点

通过jQuery Fading 方法，可以实现元素的淡入淡出效果。
jQuery fadeIn() 用于淡入已隐藏的元素。：

    1. 语法：$(selector).fadeIn(speed,callback);
    2. 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    3. 可选的 callback 参数是 fading 完成后所执行的函数名称。
    
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });

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

    1.语法：$(selector).fadeOut(speed,callback)
    2.可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    3.可选的 callback 参数是 fading 完成后所执行的函数名称。
    
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });

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

    1. jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    2. 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
    3. 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
    4. $(selector).fadeToggle(speed,callback);
    5. 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    6.可选的 callback 参数是 fading 完成后所执行的函数名称。

    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

    1. $(selector).fadeTo(speed,opacity,callback);
    2. 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    3. fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
    4. 可选的 callback 参数是该函数完成后所执行的函数名称
    
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });

jQuery 滑动方法可使元素上下滑动。

jQuery slideDown() 方法用于向下滑动元素。

    1. 语法：$(selector).slideDown(speed,callback);
    2. 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    3. 可选的 callback 参数是滑动完成后所执行的函数名称。
   
    $("#flip").click(function(){
      $("#panel").slideDown();
    });

jQuery slideUp() 方法用于向上滑动元素。

    1. 语法：$(selector).slideUp(speed,callback);
    2. 可选的 speed 参数规定效果的时长，可取值为 slow ,fast,或 毫秒
    3. 可选的callback 参数是滑动完成后所执行的函数名称
    
    $("#flip").click(function(){
      $("#panel").slideUp();
    });

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

    
    1. 如果元素向下滑动，则 slideToggle() 可向上滑动它们。
    
    2. 如果元素向上滑动，则 slideToggle() 可向下滑动它们。
    
    语法：$(selector).slideToggle(speed,callback);
    
    3.可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    
    4. 可选的 callback 参数是滑动完成后所执行的函数名称。
    $("#flip").click(function(){
      $("#panel").slideToggle();
    });

jQuery 动画效果

jQuery animate() 方法允许您创建自定义的动画。
语法： $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

    $("button").click(function(){
      $("div").animate({left:'250px'});
    }); 
    1. 默认地，所有 HTML 元素都有一个静态位置，且无法移动。
    2. 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
    
    
    注意：在生成动画的过程中可同时使用多个属性
    
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      });
    });

几乎可以用animate() 方法来操作所有的CSS属性，当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery 使用相对值，使用预定义的值，使用队列功能的情形

    1. jQuery animate() 使用相对值情况：
        $("button").click(function(){
          $("div").animate({
            left:'250px',
            height:'+=150px',
            width:'+=150px'
          });
        });
    2. jQuery animate() - 使用预定义的值
  
    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });
    
    3. jQuery animate() - 使用队列功能
    4. 默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用
    5. jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
    
    $("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 stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

    1. 语法：`$(selector).stop(stopAll,goToEnd);`
    2. 可选的stopAll 参数规定是否应该清除动画队列，默认的是 false,即进停止活动的动画，允许任何排入队列的动画向后执行。
    3. 可选的 gopToEnd 参数规定是否立即完成当前动画，默认是false 
    4. 默认地，stop() 会清除在被选元素上指定的当前动画。
    
    $("#stop").click(function(){
      $("#panel").stop();
    });

jQuery 的Callback 函数在当前动画100%完成后执行

jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
2 典型的语法：$(selector).hide(speed,callback)，callback 参数是一个在 hide 操作完成后被执行的函数。

    $("p").hide(1000,function(){
        alert("The paragraph is now hidden");
    });
    如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。

jQuery 获得内容和属性

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 - text()、html() ，val()，获取属性的-attr()

    1. text() - 设置或返回所选元素的文本内容
        $("#btn1").click(function(){
          alert("Text: " + $("#test").text());
        });
        $("#btn2").click(function(){
          alert("HTML: " + $("#test").html());
        });
    2. html() - 设置或返回所选元素的内容(包括html标记)
        $("#btn1").click(function(){
          alert("Value: " + $("#test").val());
        });
    3. val() 方法获得输入字段的值：
        $("#btn1").click(function(){
          alert("Value: " + $("#test").val());
        });
    4.  attr() 方法用于获取属性值。
        $("button").click(function(){
          alert($("#w3s").attr("href"));
        });

jQuery 设置内容和属性

使用 text(),html(),val()设置内容

    $("#btn1").click(function(){
      $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
      $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
      $("#test3").val("Dolly Duck");
    });

text()、html() 以及 val()，同样拥有回调函数。
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

    $("#btn1").click(function(){
      $("#test1").text(function(i,origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")";
      });
    });
    
    $("#btn2").click(function(){
      $("#test2").html(function(i,origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")";
      });
    });

attr() 也用于设置或者改变属性值

    $("button").click(function(){
      $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
    });
    注意：这种改变是在浏览器层次的改变

attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

    $("button").click(function(){
      $("#w3s").attr("href", function(i,origValue){
        return origValue + "/jquery";
      });
    });

jQuery 添加新的元素/内容

    1. append() - 在被选元素的结尾插入内容
        $("p").append("Some appended text.");
    2. prepend() - 在被选元素的开头插入内容
        $("p").prepend("Some prepended text.");
    3. after() - 在被选元素之后插入内容
        $("img").after("Some text after");
    4. before() - 在被选元素之前插入内容

ppend() 和 prepend() 方法能够通过参数接收无限数量的新元素。
jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

    function appendText()
    {
    var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
    var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
    var txt3=document.createElement("p");  // 以 DOM 创建新元素
    txt3.innerHTML="Text.";
    $("p").append(txt1,txt2,txt3);         // 追加新元素
    }

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

    function afterText()
    {
    var txt1="<b>I </b>";                    // 以 HTML 创建新元素
    var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
    var txt3=document.createElement("big");  // 通过 DOM 创建新元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
    }

jQuery 删除html元素

remove() -删除被选元素以及其子元素 $("#div1").remove();
empty() - 从被选元素中删除子元素 $("#div1").empty();
Query remove() 方法也可接受一个参数，允许对被删元素进行过滤。 $("p").remove(".italic");

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类

    $("button").click(function(){
      $("h1,h2,p").addClass("blue");
      $("div").addClass("important");
    });

removeClass() -从被选元素删除一个或多个类

1. 从一个元素中删除属性
$("button").click(function(){
  $("#div1").addClass("important blue");
});
2. 从多个元素中删除指定的class属性
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

3. toggleClass() - 从被选元素进行添加/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

4. css() - 设置或返回样式属性

1. 返回CSS属性：语法：css("propertyname");
2.$("p").css("background-color"); 从首次匹配的元素p 中，返回background-color的值
3. 设置CSS属性：语法：css("propertyname","value");
4. $("p").css("background-color","yellow");为所有匹配元素设置 background-color 值：
5. 设置多个 CSS 属性语法 ：css({"propertyname":"value","propertyname":"value",...});
6. $("p").css({"background-color":"yellow","font-size":"200%"});为所有匹配元素设置 background-color 和 font-size：


* * *

## jQuery 尺寸方法处理元素和浏览器窗口的尺寸。

1. width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
2. height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
实例：返回指定的 <div> 元素的宽度和高度：
$("button").click(function(){
      var txt="";
      txt+="Width: " + $("#div1").width() + "</br>";
      txt+="Height: " + $("#div1").height();
      $("#div1").html(txt);
    });
3. innerWidth() 方法返回元素的宽度（包括内边距）。
4. innerHeight() 方法返回元素的高度（包括内边距）。
实例：返回指定的 <div> 元素的 inner-width/height：
    $("button").click(function(){
      var txt="";
      txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
      txt+="Inner height: " + $("#div1").innerHeight();
      $("#div1").html(txt);
    });
5. outerWidth() 方法返回元素的宽度（包括内边距和边框）。
6. outerHeight() 方法返回元素的高度（包括内边距和边框）。
实例：返回指定的 <div> 元素的 outer-width/height：
    $("button").click(function(){
      var txt="";
      txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
      txt+="Outer height: " + $("#div1").outerHeight();
      $("#div1").html(txt);
    });

* * *

## jQuery 遍历操作

1. jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。
2. 以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
3. 通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hhHn44Hh-1621252968338)(:/ca47de1be54b4881991e8ef3d9c3481c)]

1.<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
2.<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
3. 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
4. <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
5. 两个 <li> 元素是同胞（拥有相同的父元素）。
6. 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代
7.<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

4. jQuery 提供了很多中变量DOM的方法，遍历方法中最大的种类是树遍历(tree-traversal)

1. jQuery parent() 方法 :向上遍历DOM树
2. parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
    实例：返回每个span 元素的直接父元素
    $(document).ready(function(){
      $("span").parent();
    });
3. jQuery parents() 方法 ：向上遍历DOM树
4. parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
5. 可以使用可选参数来过滤对祖先元素的搜索。
    实例：返回span元素的所有祖先
    $(document).ready(function(){
      $("span").parents();
    });
    实例：返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
    $(document).ready(function(){
      $("span").parents("ul");
    });
5. jQuery parentsUntil() 方法：向上遍历DOM树
6. parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
    实例：返回介于 <span> 与 <div> 元素之间的所有祖先元素：
    $(document).ready(function(){
      $("span").parentsUntil("div");
    });



## jQuery 遍历后代：即向下遍历DOM树，查找元素的后代
1. jQuery children() 方法，返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

实例：返回每个div元素的所有直接子元素
$(document).ready(function(){
  $("div").children();
});

实例二：使用参数对子元素进行过滤
返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
  $("div").children("p.1");
});

2. jQuery find() 返回被选元素的后代元素，一路向下直到最后一个后代

实例一：返回属于div后代的所有span元素
$(document).ready(function(){
  $("div").find("span");
});

实例二;返回div的所有后代
$(document).ready(function(){
  $("div").find("*");
});


## jQuery同胞遍历：同胞拥有相同的父元素，在DOM树中遍历元素的同胞元素
1. siblings() 方法：返回被选元素的所有同胞元素（prev()方法向前遍历）

· 实例一：返回 h2 的所有同胞元素：
$(document).ready(function(){
$(“h2”).siblings();
});

1. 可以使用可选参数来过滤对同胞元素的搜索

实例二：返回属于h2元素的所有p元素
$(document).ready(function(){
  $("h2").siblings("p");
});

2. next() 方法 :返回被选元素的下一个同胞元素，该方法只返回一个元素

实例一：返回h2的下一个同胞元素：
$(document).ready(function(){
  $("h2").next();
});

3. nextAll()方法：返回被选元素的所有跟随的同胞元素(prevAll()方法向前遍历)

实例一：返回 <h2> 的所有跟随的同胞元素：
$(document).ready(function(){
  $("h2").nextAll();
});

4. nextUntil()方法：返回介于两个给定参数之间的所有跟随的同胞元素（prevUntil（）方法向前遍历）

实例一：返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$(document).ready(function(){
  $("h2").nextUntil("h6");
});

## jQuery 遍历-过滤：
1. 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
2. 其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
3. first()方法返回被选元素的首个元素

实例一：选取首个div元素内部的第一个p元素
$(document).ready(function(){
  $("div p").first();
});

4. last()方法返回被选元素的最后一个元素

实例一：选择最后一个div元素中的最后一个p元素
$(document).ready(function(){
  $("div p").last();
});

5. eq方法返回被选元素中带有指定索引号的元素

实例一：索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
$(document).ready(function(){
  $("p").eq(1);
});

6. filter()方法：允许规定一个标准，不匹配的这个标准会被从几个中删除，匹配的元素会被返回

实例一：返回带有类名 intro 的所有p元素
$(document).ready(function(){
  $("p").filter(".intro");
});

7. not()方法返回不匹配标准的所有元素：not() 方法与 filter() 相反。

实例一：返回不带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").not(".intro");
});

* * *

## jQuery - AJAX简介
1. AJAX是于服务器进行数据交换的方式，在不重载全部页面的情况下，实现了对部分网页的更新。
2. AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
3. 在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFLcl0nA-1621252968341)(:/e180812e5ac3454fb4414d29f9c8dcc4)]

## AJAX 是基于现有的internet标准
1. XMLHttpRequest 对象 (异步的与服务器交换数据)
2. JavaScript/DOM (信息显示/交互)
3. CSS(给数据定义样式)
4. XML(作为转换数据的格式)
5. AJAX应用程序与浏览器和平台无关

## AJAX实例代码：当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

## XMLHttpRequest 对象
1. 所有现代的浏览器都支持XMLHttpRequest 对象(（IE5 和 IE6 使用 ActiveXObject）。)
2. XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1. 创建 XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{   // 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：




## jQuery - AJAX:load() 方法
1. load()方法是从服务器加载数据，并把返回的数据放入被选元素中
2. 语法：`$(selector).load(URL,data,callback);`
3. URL参数规定数据来源的地址，即加载的URL
4. 可选的data参数规定与请求统一发发送的查询字符串键值对集合
5. 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
6. 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
7. 回调函数可以设置不同的参数：
8. responseTxt - 包含调用成功时的结果内容
9. statusTXT - 包含调用的状态
10. xhr - 包含 XMLHttpRequest 对象

## jQuery - AJAX get() 和 post() 方法
1. get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
2. get 请求 是从指定的资源请求数据，GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
3. post 向指定的资源提交要处理的数据，POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
4. $.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：$.get(URL,callback);
ULR参数规定希望请求的资源的地址
callback 参数是请求成功后所执行的函数名

5. $.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：$.post(URL,data,callback);
ULR参数规定希望请求的资源的地址
dat参数规定连同请求发送的数据
callback 参数是请求成功后所执行的函数名。

转载：https://blog.csdn.net/qq_43408367/article/details/116946847

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章