jQuery入门

dangfulin

已于 2022-02-18 16:48:39 修改

阅读量750

点赞数 2

分类专栏： web前端文章标签： jquery ajax 前端

于 2020-09-07 21:33:44 首次发布

本文链接：https://blog.csdn.net/dangfulin/article/details/108429816

版权

web前端专栏收录该内容

29 篇文章 4 订阅

订阅专栏

文章目录

一，jQuery是什么?
二，为什么使ffijQuery?
三，怎样简单使用jQuery？
四，事件
五，Ajax在jQuery中的应用

一，jQuery是什么?

jQuery是一个在页面中引用的JavaScript文件。它允许你通过CSS样式选择器来找到一些元素，并且在这些元素上使用jQuery提供的一些方法。
jQuery对象拥有很多方法来操作选中的元素。这些方法对应需要对节点进行的常用操作。

1：使用CSS样式选择器查找元素

可以通过一个名叫jQuery()的函数在页面中查找一个或多个元素。它会创建一个名叫jQuery的对象，其中保存了这些元素的引用° 为了便于书写，通常会使用缩写$()来代JQuery()。如下所示：
在这里插入图片描述
与DOM的相似性：

jQuery选择器实现的功能和传统的D0M杏询类似，不过语法更加简单。
可以把jQuery对象保存在变量中，就像DOM节点一样。
可以使用jQuery提供的方法和属性(就像DOM方法和属性一样)来操作选中的DOM节点。

2：使用jQuery方法来操作元素

在这里插入图片描述

这里使用jQuery函数得到了一个jQuery对象。这个对象包含一些匹配了jQuery选择器的元素。
成员操作符表示在其右侧的方法应该被应用于其左侧的jQuery对象，从而更新其中的元素。
然后可以在这个jQuery对象上使用方法来更新包含在其中的元素在这里,这个方法向class属性添加了一个新的值。
每个方法都包含一些参数来指明应该如何更新这些元素。在这里，这个参数指定了一个需要被添加到class属性的值。

和DOM主要的不同之处：

它是跨浏览器的，不需要使用任何处理兼容性问题的后备代码。
选择元素更加简单，因为使用了CSS样式选择器语法，并只更加精确。
事件处理也更加简单，因为它用了一个兼容于所有浏览器的方法。
方法会应用于所有选中的元素，不需要依次遍历每一个元素。
还有一些方法可以提供用户更想要的一些功能，比如动画。
选择了一些元素之后，就可以在其上应用多个方法。

3：—个基本的jQuery示例

模板：
{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="{% static 'css/c07.css' %}" />
  </head>
  <body>
    <div id="page">
      <h1 id="header">List</h1>
      <h2>Buy groceries</h2>
      <ul>
        <li id="one" class="hot"><em>fresh</em> figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="hot">honey</li>
        <li id="four">balsamic vinegar</li>
      </ul>
    </div>
    <script src="{% static 'js/jquery-1.11.0.js' %}"></script>
    <script src="{% static 'js/basic-example.js' %}"></script>
  </body>
</html>

为了使用jQuery，首先需要在页面中引用jQuery脚本，jQuery的版本号应该保留在文件名中。可以看到jQuery脚本的引用包含在＜/body＞之前。
在jQuery被添加到页面之后，在引用的第二个JavaScript文件中使用jQuery选择器和方法来更新HTML页面的内容。

css略；
jquery-1.11.0.js略；

使用扩展名是min.js的jQuery文件。这意味着这个文件中去掉了不必要的空格和换行
使用jQuery不必去试图理解jQuery是如何工作的，只要知道如何选择元素以及如何使用jQuery的方法和属性，就可以充分利用jQuery的这些优势，而不需要了解内部原理。

basic-example.js：
$(':header').addClass('headline');
$('li:lt(3)').hide().fadeIn(1500);
$('li').on('click', function() {
  $(this).remove();
});

使用缩写$()来取代jQuery()函数。选中一些元素并创建三个jQuery对象来保存元素的引用。
在jQuery对象上使用的这些方法首先会把列表项淡入显示，然后当点击它们时将其移除。
第一行代码选中所有的＜h1 ＞到＜h6＞，然后将"headline"添加到class属性中。
第二行代码选中前三个列表项，先隐藏这些元素，再将这些元素淡入显示到视图中。
最后三行代码在每个＜li＞元素上设置一个事件监听器。当用户点击其中一个列表项时，会触发一个匿名函数，将那个元素从页面中移除。

在这里插入图片描述

二，为什么使ffijQuery?

1：简单的选择器

和使用JavaScript元素选择方法相比， jQuery使用更快更简单的CSS选择器。

2：使用更少的代码完成常见任务

jQuery提供了一些方法来帮助Web开发人员使用更简单的方法来实现这些常见任务，比如：
•循环遍历元素
•在DOM树中添加/移除元素
•处理事件
•在视图中淡入/淡出元素
•处理Ajax请求

3：跨浏览器兼容性

jQuery在选择元素和处理事件时，会针对不同的浏览器自动使用与之兼容的代码，所以不再需要自己编写跨浏览器的后备代码。
jQuery使用“特性检测” 来找到完成任务的最佳方法。

三，怎样简单使用jQuery？

使用选择器查找元素 + 使用jQuery方法操作元素

1，选择元素——jQuery选择器

在使用jQuery时，经常需要使用CSS样式选择器来选择元素它同样还提供了一些额外的选择器。

根据所获取页面中元素的不同，可以将jQuery选择器分为四大类：
在这里插入图片描述

1，基本选择器

它由元素ID、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。
在这里插入图片描述

$(function () { //ID匹配元素
    $("#divOne").css("display", "block");
})
$(function () { //元素名匹配元素
    $("div span").css("display", "block");
})
$(function () { //类匹配元素
    $(".clsFrame .clsOne").css("display", "block");
})
$(function () { //匹配所有元素
    $("*").css("display", "block");
})
$(function () { //合并匹配元素
    $("#divOne,span").css("display", "block");
})

2，层次选择器

层次选择器通过DOM元素间的层次关系获取元素。
在这里插入图片描述

$(function () { //匹配后代元素
    $("#divMid").css("display", "block");
    $("div span").css("display", "block");
})
$(function () { //匹配子元素
    $("#divMid").css("display", "block");
    $("div>span").css("display", "block");
})
$(function () { //匹配后面元素
    $("#divMid + div").css("display", "block");
    $("#divMid").next().css("display", "block");
})
$(function () { //匹配所有后面元素
    $("#divMid ~ div").css("display", "block");
    $("#divMid").nextAll().css("display", "block");
})
$(function () { //匹配所有相邻元素
    $("#divMid").siblings("div").css("display", "block");
})

3，过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头.
简单过滤选择器：
在这里插入图片描述

$(function () { //增加第一个元素的类别
    $("li:first").addClass("GetFocus");
})
$(function () { //增加最后一个元素的类别
    $("li:last").addClass("GetFocus");
})
$(function () { //增加去除所有与给定选择器匹配的元素类别
    $("li:not(.NotClass)").addClass("GetFocus");
})
$(function () { //增加所有索引值为偶数的元素类别,从0开始计数
    $("li:even").addClass("GetFocus");
})
$(function () { //增加所有索引值为奇数的元素类别,从0开始计数
    $("li:odd").addClass("GetFocus");
})
$(function () { //增加一个给定索引值的元素类别,从0开始计数
    $("li:eq(1)").addClass("GetFocus");
})
$(function () { //增加所有大于给定索引值的元素类别,从0开始计数
    $("li:gt(1)").addClass("GetFocus");
})
$(function () { //增加所有小于给定索引值的元素类别,从0开始计数
    $("li:lt(4)").addClass("GetFocus");
})
$(function () { //增加标题类元素类别
    $("div h1").css("width", "238");
    $(":header").addClass("GetFocus");
})
$(function () {
    animateIt(); //增加动画效果元素类别
    $("#spnMove:animated").addClass("GetFocus");
})

function animateIt() { //动画效果   
    $("#spnMove").slideToggle("slow", animateIt);
}

内容过滤选择器：
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
在这里插入图片描述

$(function () { //显示包含给定文本的元素
    $("div:contains('A')").css("display", "block");
})
$(function () { //显示所有不包含子元素或者文本的空元素
    $("div:empty").css("display", "block");
})
$(function () { //显示含有选择器所匹配的元素的元素
    $("div:has(span)").css("display", "block");
})
$(function () { //显示含有子元素或者文本的元素
    $("div:parent").css("display", "block");
})

可见性过滤选择器：
可见性过滤选择器根据元素是否可见的特征获取元素。
在这里插入图片描述

$(function () { //增加所有可见元素类别
    $("span:hidden").show();
    $("div:visible").addClass("GetFocus");
})
$(function () { //增加所有不可见元素类别
    $("span:hidden").show().addClass("GetFocus");
})

属性过滤选择器：
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束。
在这里插入图片描述

$(function () { //显示所有含有id属性的元素
    $("div[id]").show(3000);
})
$(function () { //显示所有属性title的值是"A"的元素
    $("div[title='A']").show(3000);
})
$(function () { //显示所有属性title的值不是"A"的元素
    $("div[title!='A']").show(3000);
})
$(function () { //显示所有属性title的值以"A"开始的元素
    $("div[title^='A']").show(3000);
})
$(function () { //显示所有属性title的值以"C"结束的元素
    $("div[title$='C']").show(3000);
})
$(function () { //显示所有属性title的值中含有"B"的元素
    $("div[title*='B']").show(3000);
})
$(function () { //显示所有属性title的值中含有"B"且属性id的值是"divAB"的元素
    $("div[id='divAB'][title*='B']").show(3000);
})

子元素过滤选择器：
可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
在这里插入图片描述

$(function () { //增加每个父元素下的第2个子元素类别
    $("li:nth-child(2)").addClass("GetFocus");
})
$(function () { //增加每个父元素下的第一个子元素类别
    $("li:first-child").addClass("GetFocus");
})
$(function () { //增加每个父元素下的最后一个子元素类别
    $("li:last-child").addClass("GetFocus");
})
$(function () { //增加每个父元素下只有一个子元素类别
    $("li:only-child").addClass("GetFocus");
})

表单对象属性过滤选择器：
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素。
在这里插入图片描述

            $(function(){ //增加表单中所有属性为可用的元素类别
              $("#divA").show(3000);
              $("#form1 input:enabled").addClass("GetFocus");
            })
            $(function(){ //增加表单中所有属性为不可用的元素类别
              $("#divA").show(3000);
              $("#form1 input:disabled").addClass("GetFocus");
            })
            $(function(){ //增加表单中所有被选中的元素类别
              $("#divB").show(3000);
              $("#form1 input:checked").addClass("GetFocus");
            })
            $(function(){ //显示表单中所有被选中option的元素内容
              $("#divC").show(3000);
              $("#Span2").html("选中项是："+$("select option:selected").text());
            })

4，表单选择器

该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。
在这里插入图片描述

$(function () { //显示Input类型元素的总数量
    $("#form1 div").html("表单共找出 Input 类型元素:" + $("#form1 :input").length);
    $("#form1 div").addClass("div");
})
$(function () { //显示所有文本框对象
    $("#form1 :text").show(3000);
})
$(function () { //显示所有密码框对象
    $("#form1 :password").show(3000);
})
$(function () { //显示所有单选按钮对象
    $("#form1 :radio").show(3000);
    $("#form1 #Span1").show(3000);
})
$(function () {  //显示所有复选框对象
    $("#form1 :checkbox").show(3000);
    $("#form1 #Span2").show(3000);
})
$(function () { //显示所有提交按钮对象
    $("#form1 :submit").show(3000);
})
$(function () { //显示所有图片域对象
    $("#form1 :image").show(3000);
})
$(function () { //显示所有重置按钮对象
    $("#form1 :reset").show(3000);
})
$(function () { //显示所有按钮对象
    $("#form1 :button").show(3000);
})
$(function () { //显示所有文件域对象
    $("#form1 :file").show(3000);
})

一个简单例子：

模板文件：
{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试</title>
    <link rel="stylesheet" href="{% static 'css/test.css' %}">
</head>
<body>
     <div id="divFrame">
         <div class="clsHead">
              <h3>图书分类</h3>
              <span><img src="{% static 'images/a2.gif' %}" alt=""/></span>
         </div>
         <div class="clsContent">
          <ul>
             <li><a href="#">小说</a><i> ( 1110 ) </i></li>
             <li><a href="#">文艺</a><i> ( 230 ) </i></li>
             <li><a href="#">青春</a><i> ( 1430 ) </i></li>
             <li><a href="#">少儿</a><i> ( 1560 ) </i></li>
             <li><a href="#">生活</a><i> ( 870 ) </i></li>
             <li><a href="#">社科</a><i> ( 1460 ) </i></li>
             <li><a href="#">管理</a><i> ( 1450 ) </i></li>
             <li><a href="#">计算机</a><i> ( 1780 ) </i></li>
             <li><a href="#">教育</a><i> ( 930 ) </i></li>
             <li><a href="#">工具书</a><i> ( 3450 ) </i></li>
             <li><a href="#">引进版</a><i> ( 980 ) </i></li>
             <li><a href="#">其它类</a><i> ( 3230 ) </i></li>
          </ul>
         <div class="clsBot"><a href="#">简化</a><img src="{% static 'images/a5.gif' %}" alt=""/></div>
         </div>
     </div>

     <script language="javascript" type="text/javascript" src="{% static 'js/jquery-1.8.2.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/test.js' %}"></script>
</body>
</html>

css：
body {
    font-size: 13px
}

#divFrame {
    border: solid 1px #666;
    width: 301px;
    overflow: hidden
}

#divFrame .clsHead {
    background-color: #eee;
    padding: 8px;
    height: 18px;
    cursor: hand
}

#divFrame .clsHead h3 {
    padding: 0px;
    margin: 0px;
    float: left
}

#divFrame .clsHead span {
    float: right;
    margin-top: 3px
}

#divFrame .clsContent {
    padding: 8px
}

#divFrame .clsContent ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px
}

#divFrame .clsContent ul li {
    float: left;
    width: 95px;
    height: 23px;
    line-height: 23px
}

#divFrame .clsBot {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px
}

.GetFocus {
    background-color: #eee
}

JavaScript：
$(function(){ //页面加载事件
  $(".clsHead").click(function(){ //图片点击事件
    if($(".clsContent").is(":visible")){ //如果内容可见
       $(".clsHead span img").attr("src","/static/images/a1.gif"); //改变图片
       $(".clsContent").css("display","none"); //隐藏内容
    }else{
       $(".clsHead span img").attr("src","/static/images/a2.gif"); //改变图片
       $(".clsContent").css("display","block");//显示内容
    }
  });

  $(".clsBot > a").click(function(){ //热点链接点击事件
    if($(".clsBot > a").text()=="简化"){ //如果内容为'简化'字样
       $("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素
       $(".clsBot > a").text("更多"); //将字符内容更改为"更多"
    }else{
       $("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式
       $(".clsBot > a").text("简化"); //将字符内容更改为"简化"
    }
  });
});

在这里插入图片描述

2，在选中元素上执行操作

DOM:

Document即文档，当我们创建一个页面并加载到Web浏览器时， DOM模型根据该页面的内容创建一个文档文件。
Object即对象，是指具有独立特性的一组数据集合，例如，我们把新建的页面文档称之为文档对象，与对象相关联的特征称之为对象属性，访问对象的函数称之为对象方法。
Model即模型，在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点(node )来实现的。

选中一个或多个元素后，会返回一个jQuery对象。这个对象通常被称为“匹配结果集” 或“jQuery选取结果” 。

如果选择器返回了一个元素，那么jQuery对象只包含这个元素节点的引用：
如果选择器返回了多个元素，jQuery对象则会包含每个元素的引用：

保存对元素的引用:
jQuery对象会保存对元素的引用。把jQuery对象缓存在变量中，变量中就包含了对元素的引用。下面的代码创建了一个jQuery对象，其中保存了D0M树中＜li＞元素的位置:

$(li);

隐式迭代:
在jQuery中，当选择器返回了多个元素时，可以使用一个方法来更新所有元素,不再需要使用循环:

js:
$('li em').addClass('seasonal');
$('li.hot').addClass('favorite');

第一个选择器只应用于一个元素，并为其class属性设置新的值，从而触发一条CSS规则在其左侧添加了一个日历图标。
第二个选择器应用于三个元素，为每个元素的class属性都设置了新的值，从而触发一条CSS规则在其右侧添加了一个心形图标.

链式操作:
如果需要在同一个选取结果上使用多个jQuery方法，可以同时列出这些方法，并用点号隔开。

js:
$('li[id!="one"]').hide().delay(500).fadeIn(1400); // semi-colon indicates end of chaining - can be writen on separate lines

在同一选取结果的元素上执行了三个方法：hide()隐藏元素，delay()创建暂停，fadeln()淡入元素。
多数用来更改jQuery选取结果的方法都可以进行链式操作。不过用来DOM或浏览器中获取信息的方法则不能进行链式操作。
如果链式方法中的一个不工作的话，剩下的那些也不会再运行了。
检测页面是否已经可以使用：
jQuery的.ready。方法用于检测页面是否已经准备好让你的代码进行操作。
和在纯JavaScript中一样，如果浏览器还没有完成DOM树的构建， jQuery将无法从中选取元素。
如果在页面的最后放置一个脚本(紧跟在</body>标签之前)，此时元素就已经被加载到DOM树中了。
如果把jQuery代码包裹在上述方法中，这个脚本在页面中的任何一处位置，甚至在另一个文件中时也会正常地工作。

在这里插入图片描述

1，获取和设置元素属性

可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。
1，获取元素的属性：
语法：attr (name)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取元素的属性</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:12px}
           div{float:left;padding-left:10px}
           img{border:solid 1px #ccc;padding:3px;float:left}
    </style>
    <script type="text/javascript">
        $(function() {
            var strAlt = $("img").attr("src"); //属性值一
            strAlt += "<br/><br/>" + $("img").attr("title"); //属性值二
            $("#divAlt").html(strAlt);
        })
    </script>
</head>
<body>
     <img alt="" title="这是一幅风景画" 
          src="Images/img01.jpg" />
     <div id="divAlt"></div>
</body>
</html>

在这里插入图片描述
2，设置元素的属性：
语法格式：attr((key0:value0, key1:value1})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>设置元素的属性</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:12px}
           .clsSpn{float:left;padding-top:10px;padding-left:10px}
           .clsImg{border:solid 1px #ccc;padding:3px;float:left}
    </style>
    <script type="text/javascript">
        $(function() {
            $("img").attr("src", "Images/img01.jpg");//设置src属性
            $("img").attr("title", "这是一幅风景画");//设置title属性
            $("img").attr({ src: "Images/img02.jpg", title: "这是一幅风景画" });//同时设置二个属性
            $("img").addClass("clsImg");//增加样式
            $("span").html("加载完毕");//显示加载状态
        })
    </script>
</head>
<body>
     <img alt="" src="Images/img03.gif" style="float:left" />
     <span class="clsSpn">正在加载图片...</span>
</body>
</html>

如果使用attr()方法来更新一个不存在的属性，就会创建这个属性并赋予其指定的值。

在这里插入图片描述
3，删除元素的属性：
语法格式：removeAttr(name)

$("img").removeAttr("src”);

4，增加元素CSS类别:
通过addClass()方法增加元素类别的名称，语法：addClass(class0 classl ...)
其中，参数class为类别的名称.
5，切换元素CSS类别:
通过toggleClass()方法切换不同的元素类别，语法：toggleclass(class)
其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。
6，删除元素CSS类别:
与增加类别的addClass()方法相对应， removeClass()方法则用于删除类别，语法格式：removeclass([class0 class1 ...])
其中，参数class为类别名称，该名称是可选项。当选该名称时，删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。

$(function() {
  $('li#three').removeClass('hot');
  $('li.hot').addClass('favorite');
  $('ul').attr('id', 'group');
});

第一条语句找到了第三个列表项（其id属性值为three）,然后从该元素的class属性中移除了hot。这里需要着重注意，因为它会影响后面的语句。
第二条语句选择所有class属性值为hot的＜li＞元素，然后添加新的class名称favorite。因为在步骤1中更新了第三个列表项，所以这条语句只会影响前两个列表项。
第三条语句选择＜ul＞元素，然后为其添加id属性值group（从而触发了一条CSS规则，在vul＞元素上添加了边框和外边距）。

2，获取和设置元素内容和值

1，获取和设置元素内容：
在这里插入图片描述

.html ()方法从jQuery选取结果中获取信息时，会返回第一个匹配元素内部的HTML,包括其所有的后代节点。
.text()当使用该方法从jQuery选取结果中获取文本时，它会返回jQuery选取结果中每个元素的内容，包括所有后代元素中的文本。

$(function() {
  var $listHTML = $('ul').html();
  $('ul').append($listHTML);
});

选取器返回＜5＞元素， .html()方法会返回其内部的所有HTML(4个＜li＞元素)。然后将其添加到选中结果的后面,也就是现有的＜li＞元素之后：

$(function() {
  var $listText = $('ul').text();
  $('ul').append('<p>' + $listText  + '</p>');
});

选取器返回＜ul＞元素， .text()方法返回＜ul＞元素的子元素中的所有文字。然后将其添加到选中结果的后面，也就是现有的＜ul＞元素之后：

$(function() {
  var $listItemHTML = $('li').html();
  $('li').append('<i>' + $listItemHTML + '</i>');
});

选取器返回4个＜li＞元素，不过,html()方法只返回第一个＜li＞元素中的内容。然后将其添加到选中结果的后面,也就是现有的＜li＞元素之后：

$(function() {
  var $listItemText = $('li').text();
  $('li').append('<i>' + $listItemText + '</i>');
});

选取器返回4个＜li＞元素…text。方法返回它们中的所有文字。然后将其添加到选取结果中的每一个＜li＞元素中：
2，获取和设置元素值：
要获取元素的值通过val()方法实现，其语法格式：val(val)
其中，如果不带参数val,是获取某元素的值；反之，则是将参数val的值赋给某元素。
另外，通过val()方法还可以获取select标记中的多个选项值，其语法格式：val () .joint",")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取或设置元素的值</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:12px;text-align:center}
           div{padding:3px;margin:3px;width:120px;float:left}
           .txt{border:#666 1px solid;padding:3px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("select").change(function() { //设置下拉列表框change事件
                var strSel = $("select").val().join(","); //获取下拉列表框所选中全部选项值
                $("#p1").html(strSel); //显示下拉列表框所选中全部选项值
            })
            $("input").change(function() { //设置文本框focus事件
                var strTxt = $("input").val(); //获取文本框的值
                $("#p2").html(strTxt); //显示文本框所输入的值
            })
            $("input").focus(function() { //设置文本框focus事件
                $("input").val(""); //清空文本框的值
            })
        })
    </script>
</head>
<body>
     <div>
         <select multiple="multiple" style="height:96px;width:85px">
                 <option value="1">Item 1</option>
                 <option value="2">Item 2</option>
                 <option value="3">Item 3</option>
                 <option value="4">Item 4</option>
                 <option value="5">Item 5</option>
                 <option value="6">Item 6</option>
         </select>
         <p id="p1"></p>
     </div>
     <div>
         <input type="text" class="txt"/>
         <p id="p2"></p>
     </div>
</body>
</html>

在val ( val)方法中，如果有参数，其参数还可以是数组的形式，即val(array),其作用是设置元素被选中。因此$(n:radio").val([,'radio2", “radio3”])代码的意思为:Value值为radio2和radio3的单选框被选中。

3，获取与设置元素样式

1，直接设置元素样式值：
通过css()方法为某个指定的元素设置样式值，语法格式：css(name, value)
其中name为样式名称， value为样式的值。

$(function() {

  // Get the background color of the first list item.
  var backgroundColor = $('li').css('background-color');

  // Write what the background color was after the list.
  $('ul').append('<p>Color was: ' + backgroundColor + '</p>');

  // Set several properties on all list items.
  $('li').css({
    'background-color': '#c5a996',
    'border': '1px solid #fff',
    'color': '#000',
    'text-shadow': 'none',
    'font-family': 'Georgia',
    'padding-left': '+=75'
  });
});

最好是修改class属性的值(来触发样式表中新的CSS规则)而不是在JavaScript文件中直接修改CSS属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>直接设置元素样式值</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:15px}
           p{padding:5px;width:220px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("p").click(function() {
                $(this).css("font-weight", "bold");//字体加粗
                $(this).css({      //设置多个css属性
                    "font-style": "italic", //斜体
                    "background-color": "#7ee0c9"//增加背景色
                });
            })
        })
    </script>
</head>
<body>
     <p>Write Less Do More</p>
</body>
</html>

在这里插入图片描述
2，增加元素CSS类别：
通过addClass()方法增加元素类别的名称，语法：addClass(class0 class1 ...)
其中，参数class为类别的名称。

4，页面元素操作

1，创建节点元素:
函数$()用于动态创建页面元素，其语法格式：$(html)
其中，参数html表示用于动态创建DOM元素的HTML标记字符串。
插入元素涉及两个步骤：

将新元素创建为jQuery对象。
使用一个方法将内容插入到页面中。

$(function() {
  $('ul').before('<p class="notice">Just updated</p>');
  $('li.hot').prepend('+ ');
  var $newListItem = $('<li><em>gluten-free</em> soy sauce</li>');
  $('li:last').after($newListItem);
});

在这里插入图片描述
2，内部插入节点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态插入节点方法</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("div").append(retHtml); //插入内容
            function retHtml() {
                var str = " <b>Write Less Do More</b> ";
                return str;
            }
        })
    </script>
</head>
<body>
     <div>jQuery</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态插入节点方法</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           img{border:solid 1px #ccc;padding:3px;margin:5px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("img").appendTo($("span")); //插入内容
        })
    </script>
</head>
<body>
     <img title="2008年新书封面" src="Images/img03.jpg" />
     <span><img title="2010年新书封面" src="Images/img04.jpg" /></span>
</body>
</html>

在这里插入图片描述
3，外部插入节点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态插入节点方法</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           img{border:solid 1px #ccc;padding:3px;margin:5px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("span").after(retHtml); //插入内容
            function retHtml() {
                var str = "<span><b>Write Less Do More</b><span>";
                return str;
            }
        })
    </script>
</head>
<body>
     <span>jQuery</span>
</body>
</html>

在这里插入图片描述

4，复制元素节点:
复制匹配的DOM元素并且选中复制成功的元素。如果需要在复制时将该元素的全部行为也进行复制，可通过clone()实现，格式：clone (true)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>复制元素节点</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           img{border:solid 1px #ccc;padding:3px;margin:5px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("img").click(function() {
                $(this).clone(true).appendTo("span");
            })
        })
    </script>
</head>
<body>
    <span><img title="封面" src="Images/img04.jpg" /></span>
</body>
</html>

在这里插入图片描述
5，替换元素节点：
语法分别如下：
replaceWith(content)将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。
replaceAll(selector)将所有选择的元素替换成指定selector的元素,其中参数selector为需要被替换的元素。
一旦完成替换，被替换元素中的全部事件都将消失。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>替换元素节点</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           span{font-weight:bold}
           p{background-color:#eee;padding:5px;width:200px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Span1").replaceWith("<span title='replaceWith'>新测试一</span>");
            $("<span title='replaceAll'>新测试二</span>").replaceAll("#Span2");
        })
    </script>
</head>
<body>
    <p>测试一：<span id="Span1"></span></p>
    <p>测试二：<span id="Span2"></span></p>
</body>
</html>

在这里插入图片描述

6，包裹元素节点:
可以根据需求包裹某个指定的节点。
在这里插入图片描述
7，遍历元素：
jQuery允许通过使用,each()方法，在选取结果的元素上实现循环功能。语法：each (callback)
其中，参数callback是一个function函数，该函数还可以接受一个形参index,此形参为遍历元素的序号(从0开始)。
方法会遍历选取结果中的每一个元素，因此可以使用this关键字来访问当前的元素，$(this)这种写法，它使用this关键字创建一个包含当前元素的jQuery对象。这种方式使得可以在当前元素上使用jQuery方法。如果需要访问该节点的属性(比如该节点的id或class属性)，最好使用传统的JavaScrip沥问方式：
在这里插入图片描述

$(function() {
  $('li').each(function() {
    var ids = this.id;
    $(this).append(' <span class="order">' + ids + '</span>');
  });
});

择器创建了一个jQuery对象，其中包含所有<li>元素。然后使用each()方法在匹配结果中的每一列表项上调用一个匿名函数。
this关键字指向循环中的当前节点。这里使用它来访问当前元素的id属性，并将其保存在变量ids中。
使用$(this)创建一个jQuery对象，其中包含循环中当前的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>遍历元素</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
    </style>
    <script type="text/javascript">
        $(function() {
            $("img").each(function(index) {
                //根据形参index设置元素的title属性
                this.title = "第" + (index+1) + "幅风景图片，alt内容是" + this.alt;
            })
        })
    </script>
</head>
<body>
   <p>
   <img src="Images/img05.jpg" alt="第0幅风景画" />
   <img src="Images/img06.jpg" alt="第1幅风景画" />
   <img src="Images/img07.jpg" alt="第2幅风景画" /></p>
</body>
</html>

在这里插入图片描述
8，删除页面元素：
remove()方法语法：remove([expr])
其中参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表述式获取指定的元素，并进行删除。
empty ()方法语法：empty()
其功能为清空所选择的页面元素或所有的后代元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>删除元素</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           ul{width:200px}
           ul li{ list-style:none;padding:0px;height:23px}
           span{padding-left:20px}
           .btn {border:#666 1px solid;padding:2px;width:60px;
                 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("ul li:first").css("font-weight", "bold");//设置首行
            $("#Button1").click(function() {
                $("ul li").remove("li[title=t]");//删除指定属性的元素
                $("ul li:eq(1)").remove();//删除节点中第2个元素
            })
        })
    </script>
</head>
<body>
     <ul>
         <li>学号</li>
         <li title="t">1001</li>
         <li>1002</li>
         <li>1003</li>
         <li style="text-align:center;padding-top:5px">
                <input id="Button1" type="button" value="删除" class="btn" />
         </li>
     </ul>
</body>
</html>

四，事件

当用户浏览页面时，浏览器会对页面代码进行解释或编译— —这个过程实质上是通过事件来驱动的，即页面在加载时，执行一个Load事件，在这个事件中实现浏览器编译页面代码的过程。

1，事件机制

页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作…

1，事件中的冒泡现象:

事件在触发后分为两个阶段，一个是捕获(Capture),另一个则是冒泡(Bubbling )；但有些遗憾的是，大多数浏览器并不是都支持捕获阶段，jQuery也不支持。因此在事件触发后，往往执行冒泡过程。
冒泡其实质就是事件执行中的顺序。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>事件中的冒泡现象</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           .clsShow{border:#ccc 1px solid;background-color:#eee;margin-top:15px;padding:5px;width:220px;line-height:1.8em;display:none}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            var intI = 0; //记录执行次数
            $("body,div,#btnShow").click(function(event) {//点击事件
                intI++; //次数累加
                $(".clsShow")
                .show()//显示
                .html("您好，欢迎来到jQuery世界!")//设置内容
                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本
                // event.stopPropagation();可以阻止冒泡过程
            })
        })
    </script>
</head>
<body>
    <div>
        <input id="btnShow" type="button" value="点击" class="btn" />
    </div>
    <div class="clsShow"></div>
</body>
</html>

在这里插入图片描述

仅是单击按钮，但却执行了 3次同样的程序。
虽然单击的是按钮，但按钮的外围<div>元素的事件也被触发，同时<div>元素的外围<body>元素的事件也随之被触发。因此尽管执行的是按钮中的单击事件，但实际又触发了其他两个事件。
其整个事件波及的过程就像水泡一样向外冒，故称为冒泡过程。

2，如何阻止冒泡的发生

可以通过stopPropagation()。方法可以阻止冒泡过程的发生。

2，页面载入事件

1，ready()方法的工作原理

在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度。遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

2，ready()方法的几种写法

在这里插入图片描述

3，绑定事件

$(function () {
    $("body,div,#btnShow").click(function (event) {//点击事件
        //其余代码
    })
})

1，使用bind()方法绑定事件

bind()功能是为每个选择元素的事件绑定处理函数，语法：bind(type, [data], fn)
其中参数type为一个或多个类型的字符串，如“click”或“change”，也可以自定义类型；可以被参数 type 调用的类型包括 blur、focus、load、resize>、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、changes select、submit、keydown、keypress、keyup、error。
参数data是作为event.data属性值传递给事件对象的额外数据对象。
参数fn是绑定到每个选择元素的事件中的处理函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>bind方法绑定事件</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#btnBind").bind("click mouseout", function() { //一次绑定多个事件
                $(this).attr("disabled", "disabled"); //点击后按钮不可用
            })
        })
    </script>
</head>
<body>
     <input id="btnBind" type="button" value="Button" class="btn" />
</body>
</html>

2，通过映射方式绑定事件

还可以通过传入一个映射，对所选对象绑定多个事件处理函数.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>映射方式绑定不同的事件</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           .clsTip{border:#ccc 1px solid;background-color:#eee;margin-top:15px;padding:5px;width:185px;display:none}
           .txt{border:#666 1px solid;padding:3px}
    </style>
    <script type="text/javascript">
        $(function() {
            /*$(".txt").bind({ focus: function() {
            $("#divTip")
            .show()//显示
            .html("执行的是focus事件");//设置文本
            },
            change: function() {
            $("#divTip")
            .show()//显示
            .html("执行的是change事件");//设置文本
            }
            })*/
            var message = "执行的是focus事件";
            $(".txt").bind("focus", { msg: message }, function(event) {
                $("#divTip")
                .show()//显示
            .html(event.data.msg); //设置文本
            });
            message = "执行的是change事件";
            $('.txt').bind('change', { msg: message }, function(event) {
                $("#divTip")
                .show()//显示
            .html(event.data.msg); //设置文本
            });
        })
    </script>
</head>
<body>
     <div>姓名：<input type="text" class="txt" /></div>
     <div id="divTip" class="clsTip"></div>
</body>
</html>

可以通过bind的第二个参数将一些附加的信息传递给事件处理函数fn中。

4，切换事件

所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如一个超级链接标记＜a＞,若想实现当鼠标悬停时触发一个事件，鼠标移出时又触发另一个事件。

1，hover()方法

调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换,该方法在实现运用中，也可以通过jQuery中的事件mouseenter与mouseleave进行替换。
在这里插入图片描述
hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数，语法：hover(over, out)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>切换事件hover</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           .clsFrame{border:solid 1px #666;width:220px}
           .clsFrame .clsTitle{background-color:#eee;padding:5px;font-weight:bold}
           .clsFrame .clsContent{padding:5px;display:none}
    </style>
    <script type="text/javascript">
        $(function() {
            $(".clsTitle").hover(function() {
                $(".clsContent").show();
            }, function() {
                $(".clsContent").hide();
            })
        })
    </script>
</head>
<body>
     <div class="clsFrame">
          <div class="clsTitle">jQuery简介</div>
          <div class="clsContent">&nbsp;&nbsp;jQuery是由美国人John Resig于2006年创建的一个开源项目，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。</div>   
     </div>
</body>
</html>

2，toggle()

toggle (fn, fn2, [fn3, fn4, ...])方法的功能是每次单击后依次调用函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>切换事件toggle</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           img{border:solid 1px #ccc;padding:3px}
   </style>
    <script type="text/javascript">
        $(function() {
            $("img").toggle(function() {
                $("img").attr("src", "Images/img05.jpg");
                $("img").attr("title", this.src);
            }, function() {
                $("img").attr("src", "Images/img06.jpg");
                $("img").attr("title", this.src);
            }, function() {
                $("img").attr("src", "Images/img07.jpg");
                $("img").attr("title", this.src);
            })
        })
    </script>
</head>
<body>
     <img />
</body>
</html>

5，移除事件

1，unbind()方法移除元素绑定事件

unbind()的功能是移除元素绑定的事件，语法：unbind([type], [fn])
其中，参数type为移除的事件类型， fn为需要移除的事件处理函数。如果该方法没有参数,移除所有绑定的事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>移除事件unbind</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px} 
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
           div{line-height:1.8em}
    </style>
    <script type="text/javascript">
        $(function() {
            function oClick() { //自定义事件
                $("#divTip").append("<div>按钮二的单击事件</div>");
            }
            $("input:eq(0)").bind("click", function() { //绑定单击事件
                $("#divTip").append("<div>按钮一的单击事件</div>");
            });
            $("input:eq(1)").bind("click", oClick); //绑定自定义事件
            $("input:eq(2)").bind("click", function() { //移除全部单击事件
                $("input").unbind("click",oClick);
            });
        })
    </script>
</head>
<body>
     <div>
         <input id="Button1" type="button" value="按钮一" class="btn" />
         <input id="Button2" type="button" value="按钮二" class="btn"/>
         <input id="Button3" type="button" value="删除事件" class="btn"/>
     </div>
     <div id="divTip" style="padding-top:10px"></div>
</body>
</html>

2，unbind()方法移除自定义事件

通过语法介绍我们知道， unbind()方法不仅可以移除某类型的全部事件，还可移除某个指定的自定义事件。

五，Ajax在jQuery中的应用

1，什么是Ajax?

Ajax 是 Asynchronous JavaScript and XML 的缩写，其核心是通过 XMLHttpRequest 对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。

2，为什么使用Ajax?

在传统Web开发中，与服务器进行通信主要是通过同步请求的方式（即刷新页面）来实现，如果同步请求的次数过于频繁，就会产生大量无用、重复的数据挤占带宽。 Ajax完全摒弃了这种信息交互方式,它通过XMLHttpRequest组件，在不需要刷新页面的情况，与服务器保持异步通信和联系，服务器根据需要进行最小化响应，而不再是完整页面的重复发送。

Ajax使用异步处理模型，这意味着在浏览器等待数据加载期间，用户可以做其他事情，用户体验就是这样提升的。

在页面正在加载时使用Ajax
在页面已经加载完毕后使用Ajax

3，Ajax是如何工作的?

在这里插入图片描述

4，加载异步数据

1，传统的JavaScript方法

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>传统的JavaScript方法实现Ajax功能</title>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        var objXmlHttp = null; //声明一个空的XMLHTTP变量
        function CreateXMLHTTP() {
            //根据浏览器的不同，返回该变量的实体对象
            if (window.ActiveXObject) {
                objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                if (window.XMLHttpRequest) {
                    objXmlHttp = new XMLHttpRequest();
                }
                else {
                    alert("初始化XMLHTTP错误！");
                }
            }
        }
        function GetSendData() {
            document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中...' src='Images/Loading.gif' />"; //初始化内容
            var strSendUrl = "b.html?date="+Date(); //设置发送地址变量并赋初始值
            CreateXMLHTTP(); //实例化XMLHttpRequest对象
            objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest
            objXmlHttp.onreadystatechange = function() { //回调事件函数
                if (objXmlHttp.readyState == 4) { //如果请求完成加载
                    if (objXmlHttp.status == 200) { //如果响应已成功
                        //显示获取的数据
                        document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                    }
                }
            }
            objXmlHttp.send(null); //send发送设置的请求 
        }
    </script>
</head>
<body>
  <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" onclick="GetSendData()"
                     class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

2，jQuery 中的 load()方法

在传统的JavaScript中，使用XMLHttpRequest对象异步加载数据；而在jQuery中，使用load()方法可以轻松实现获取异步数据的功能。语法：load(urlz [data], [callback])
其中，参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>load()方法实现Ajax功能</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮点击事件
                $("#divTip").load("b.html"); //load()方法加载数据
            })
        })
    </script>
</head>
<body>
   <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" 
                     class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

在这里插入图片描述

3，jQuery 中的全局函数 getJSON()

虽然使用load。方法可以很快地加载数据到页面中，但有时需要对获取的数据进行处理，如果将用load。方法获取的内容进行遍历，也可以进行数据的处理，但这样获取的内容必须先插入页面中，然后才能进行，因此，执行的效率不高。
为了解决这个问题，我们采用将要获取的数据另存为一种轻量极的数据交互格式，即JSON文件格式，由于这种格式很方便计算机的读取，因而颇受开发者的青睐。在jQuery中，专门有一个全局函数getJSONQ,用于调用JSON格式的数据，语法：$.getJSON(url, [data], [callback])
参数url表示请求的地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另外一个可选项[callback]参数表示加载成功时执行的回调函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>getJSON函数获取数据</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数处理获取的数据
                $.getJSON("bookInfo.json", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                        strHTML += "书名：" + Info["name"] + "<br>";
                        strHTML += "作者：" + Info["auther"] + "<br>";
                        strHTML += "出版社：" + Info["public"] + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })
    </script>
</head>
<body>
   <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" 
                     class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

4， jQuery 中的全局函数 getScript()
在jQuery中，除通过全局函数getJSON获取JSON格式的文件内容外，还可以通过另外一个全局函数getScript()获取JS文件的内容。函数语法格式：$.getScript (url, [callback])
参数url为等待加载的JS文件地址，可选项[callback]参数表示加载成功时执行的回调函数。
在jQuery中，通过全局函数getScript()加载JS文件后，不仅可以像加载页面片段一样轻松地注入脚本，而且所注入的脚本会自动执行，大大提高了页面的执行效率。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>getScript函数获取数据</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开已获取返回数据的文件
                $.getScript("UserInfo.js");
            })
        })
    </script>
</head>
<body>
   <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" 
                     class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

5，jQuery与Ajax：请求

1，$.get()请求数据

S.get()函数使用HTTP GET方法来向服务器请求数据，并加载返回的结果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>$.get发送请求</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
           .divFrame .divTitle span{float:left;padding:2px}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .txt{border:#666 1px solid;padding:2px;width:118px;float:left;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:80px;float:left;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
    </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              <span>姓名：</span>
              <input id="txtName" type="text" class="txt" />
              <input id="Button1" type="button" 
                     class="btn" value="请求数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

客户端向服务器传递参数时，使用的格式是{key0:value0,key1:value1,…}, “key”为参数名称， “value”为参数的值。如果参数的值是中文格式，必须通过使用encodeURI()进行转码，当然，在客户端接收时，使用decodeURI()进行解码.

2，$.post()请求数据

$.post()也是带参数向服务器发出数据请求。全局函数$.post()与$.get()在本质上没有太大的区别，所不同的是， GET方式不适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的安全风险。而以POST方式向服务器发送数据请求，则不存在这两个方面的不足。
语法：$.post (url, [data], [callback], [type])
其中，参数与$.get()函数参数代表的意义完全相同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>$.post发送请求</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
           .divFrame .divTitle span{float:left;padding:2px}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           select,input{float:left}
           .txt{border:#666 1px solid;padding:2px;width:80px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.post("User_Info.aspx", { 
                    name: encodeURI($("#txtName").val()), 
                    sex: encodeURI($("#selSex").val())
                },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
    </script>
</head>
<body>
   <div class="divFrame">
         <div class="divTitle">
              <span>姓名：</span>
              <input id="txtName" type="text" class="txt" />
              <select id="selSex" style="height:22px;margin-right:3px">
                 <option value="">选性别</option>
                 <option value="男">男</option>
                 <option value="女">女</option>
              </select>
              <input id="Button1" type="button" 
                     class="btn" value="请求" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

3，serialize()序列化表单

jQuery引入serialize()方法，该方法可以简化参数传值的方式，语法：serialize ()
该方法的功能是将所选择的DOM元素转换成能随Ajax传递的字符串，即序列化所选择的DOM元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>serialize()序列化表单</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:345px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
           .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           select,input{float:left}
           .txt{border:#666 1px solid;padding:2px;width:80px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.post("User-Info.aspx",
                $("#frmUserInfo").serialize(), //序列化表单数据
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
    </script>
</head>
<body>
  <form id="frmUserInfo">
   <div class="divFrame">
         <div class="divTitle">
              <span>姓名：</span>
              <input name="txtName" type="text" class="txt" />
              <select name="selSex" style="height:22px;margin-right:3px">
                 <option value="">选性别</option>
                 <option value="男">男</option>
                 <option value="女">女</option>
              </select>
              <input name="chkEmail" type="checkbox" value="1" style="padding-top:5px" /><span style="margin-right:10px">显示邮箱</span>
              <input id="Button1" type="button" 
                     class="btn" value="请求" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
  </form>
</body>
</html>

虽然serialize()方法可以很完美地模拟浏览器提交表单的操作，同时自动解决了中文编码的问题，但它自身有很多不足，如表单中有多项被选中时，方法只能传递一项的值，因此，在选择传递参数时，须慎重考虑。

3，$.ajax()方法

除了可以使用全局性函数load。、get()、post。实现页面的异步调用和与服务器交互数据外,在jQuery中，还有一个功能更为强悍的最底层的方法$.ajax(),该方法不仅可以方便地实现上述三个全局函数完成的功能，还更多地关注实现过程中的细节。
这有一个简单但完整的例子：django：一个简单的Ajax无刷计算器。

1，$.ajax()中的参数及使用方法

在jQuery中， $.ajax()是最底层的方法，也是功能最强的方法，前几节中的$.get()、$.post()、$.getScript()、$.getJSON()都是在此方法的基础之上建立的。语法：$.aj ax([options])
其中，可选项参数[options]为$.ajax()方法中的请求设置，其格式key/value,既包含发送请求的参数，也含有服务器响应后回调的数据。
在这里插入图片描述

2，$.ajax()在数据交互中的应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>$.ajax()方法发送请求</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:225px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
           .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
           .divFrame .divContent{padding:8px;text-align:center}
           .divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}
           .divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-color:#ffe0a3}
           .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:50px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $.ajax({ //请求登录页
                url: "login.html", //登录静态页
                dataType: "html",
                success: function(HTML) { //返回页面内容
                    $("#frmUserLogin").html(HTML); //将页面内容置入表单
                    $("#btnLogin").click(function() { //“登录”按钮单击事件
                        //获取用户名称
                        var strTxtName = encodeURI($("#txtName").val());
                        //获取输入密码
                        var strTxtPass = encodeURI($("#txtPass").val());
                        //开始发送数据
                        $.ajax({ //请求登录处理页
                            url: "login.aspx", //登录处理页
                            dataType: "html",
                            //传送请求数据
                            data: { txtName: strTxtName, txtPass: strTxtPass },
                            success: function(strValue) { //登录成功后返回的数据
                                //根据返回值进行状态显示
                                if (strValue == "True") {
                                    $(".clsShow").html("操作提示，登录成功！");
                                }
                                else {
                                    $("#divError").show().html("用户名或密码错误！");
                                }
                            }
                        })
                    })
                }
            })
        })
    </script>
</head>
<body>
  <form id="frmUserLogin"></form>
</body>
</html>


login.html:
<div class="divFrame">
     <div class="divTitle">
          <span>用户登录</span>
     </div>
     <div class="divContent">
          <div class="clsShow">
               <div id="divError" class="clsError"></div>
               <div>名称：<input id="txtName" type="text" class="txt" /></div>
               <div>密码：<input id="txtPass" type="password" class="txt" /></div>
               <div>
                   <input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp
                   <input id="btnReset"  type="reset" value="取消" class="btn" />
               </div>
           </div>
      </div>
</div>

3，$.ajaxSetup()设置全局 Ajax

在使用$.ajax()方法时，有时需要调用多个$.ajax()方法，如果每个方法都设置其中的请求细节，将是一件十分麻烦的事。为了简化这种工作，在jQuery中，可以使用$.ajaxSetup()方法设置全局性的Ajax默认选项，一次设置，全局有效，这样大大简化了、$.ajax()方法中细节的编写，语法：$.ajaxSetup([options])
其中，可选项参数[options]是一个对象，通过该对象可以设置$.ajax()方法中的参数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>$.ajaxSetup()方法全局设置Ajax</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:225px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;height:30px}
           .divFrame .divTitle span{float:left;padding:2px;padding-top:5px}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:65px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $.ajaxSetup({ //设置全局性的Ajax选项
                type: "GET",
                url: "UserInfo.xml",
                dataType: "xml"
            })
            $("#Button1").click(function() { //"姓名”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "姓名", "name"); //显示"姓名"部分
                    }
                })
            })
            $("#Button2").click(function() { //"性别”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "性别", "sex"); //显示"性别"部分
                    }
                })
            })

            $("#Button3").click(function() { //"邮箱”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "邮箱", "email"); //显示"邮箱"部分
                    }
                })
            })
            /*
            *根据名称与值，获取请求响应数据中的某部分
            *@Param d为请求响应后的数据
            *@Param n为数据中文说明字符
            *@Param d为数据在响应数据中的元素名称
            */
            function ShowData(d, n, v) {
                $("#divTip").empty(); //先清空标记中的内容
                var strHTML = ""; //初始化保存内容变量
                $(d).find("User").each(function() { //遍历获取的数据
                    var $strUser = $(this);
                    strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
                })
                $("#divTip").html(strHTML); //显示处理后的数据
            }
        })
    </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              <span><input id="Button1" type="button" value="姓名" class="btn" /></span>
              <span><input id="Button2" type="button" value="性别" class="btn" /></span>
              <span><input id="Button3" type="button" value="邮箱" class="btn" /></span>
         </div>
         <div class="divContent">
              <div id="divTip" class="clsShow"></div>
         </div>
    </div>
</body>
</html>

dangfulin

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门

一，jQuery是什么?jQuery是一个在页面中引用的JavaScript文件。它允许你通过CSS样式选择器来找到一些元素，并且在这些元素上使用jQuery提供的一些方法。jQuery对象拥有很多方法来操作选中的元素。这些方法对应需要对节点进行的常用操作。1：使用CSS样式选择器查找元素可以通过一个名叫jQuery()的函数在页面中查找一个或多个元素。它会创建一个名叫jQuery的对象，其中保存了这些元素的引用° 为了便于书写，通常会使用缩写$()来代JQuery()。如下所示：与D
复制链接

扫一扫