什么是jQuery及其学习方法2？【WEB前端大作战】

举报
Yuchuan 发表于 2021/04/28 08:20:02 2021/04/28
【摘要】 至此，我们结束了本博客的结尾。希望您能从中找到有用的信息，并继续关注有关Web开发的更多教程。

jQuery效果– toggle（）

jQuery toggle（） 方法用于在hide（）和show（）方法之间切换。它显示隐藏的元素并隐藏可见的元素。请参考以下语法：

$(selector).toggle(speed, callback);

toggle（）效果是hide（）和show（）的组合。运行与执行hide（）效果所执行的代码相同的代码，并打开控制台，然后尝试以下命令，看看会得到什么！

$("img").toggle()

jQuery效果– fadeOut（）

jQuery fadeOut（）方法用于淡出所选元素。请参考以下语法：

$(selector).fadeOut(speed, callback);

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
     
<h1>jQuery Basics</h1>
 
By Edureka
 
    <button>BYEEEEE</button>
 
<div class="puppers">
        <img id="one"src="puppie/goldie.jpg" alt="Goldie">
        <img id="two" src="puppie/husky.jpg" alt="Husky">
        <img id="three" src="puppie/boxer.jpg" alt="Boxer">
     </div>
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%24(document).ready(function()%7B%0A%20%20%20%20%20%20%20%20%24(%22button%22).click(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23one%22).fadeOut('slow')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23two%22).fadeOut(%22fast%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23three%22).fadeOut('slow')%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>

运行以上代码后，打开JavaScript控制台，然后单击“ BYEEE”按钮。这将使一张图片逐渐淡出（）。 

这是最终结果：

jQuery效果-fadeOut（）输出-jQuery教程

jQuery效果– fadeOut（）输出– jQuery教程

jQuery效果– fadeIn（）

jQuery fadeIn（）方法用于淡入所选元素。请参考以下语法：

$(selector).fadeIn(speed, callback);

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
     
<h1>jQuery Basics</h1>

By Edureka
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%24(document).ready(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22button%22).click(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23one%22).fadeIn()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23two%22).fadeIn(%22slow%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23three%22).fadeIn(3000)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<button>Namaste</button>
 
<div class="fade">
     
<div id="one" style="width:2200px;height:60px;display:none;background-color:orange;"></div>
 
<div id="two" style="width:2200px;height:60px;display:none;background-color:white;"></div>

<div id="three" style="width:2200px;height:60px;display:none;background-color:green;"></div>
 
</div>
 
</body>
</html>

运行上述代码后，打开JavaScript控制台，然后单击“ Namaste”按钮。这将淡入淡出三个矩形，它们看起来像印度国旗。

这是最终结果：

jQuery效果-fadeIn（）输出-jQuery教程

jQuery效果– fadeIn（）输出– jQuery教程

jQuery效果– fadeToggle（）

jQuery fadeToggle（）方法用于在fadeIn（）和fadeOut（）方法之间切换。请参考以下语法：

$(selector).fadeToggle(speed, callback);

fadeToggle（）效果是fadeOut（）和fadeIn（）的组合。运行与为fadeIn（）效果执行的代码相同的代码，并打开控制台，然后尝试以下命令，看看会得到什么！ 

$("#one").fadeToggle()
$("#two").fadeToggle()
$("#three").fadeToggle()

jQuery效果– slideDown（）

jQuery slideDown（）方法用于向下滑动选定的元素。请参考以下语法：

$(selector).slideDown(speed, callback);

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
    
<h1>jQuery Basics</h1>

By Edureka
 
<button id="one">Slide</button>
 
<div id="div1" style="width:90px;height:60px;display:none;background-color:orange;"></div>
 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23one%22).on(%22click%22%2Cfunction()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23div1%22).slideDown(%22slow%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>

运行以上代码后，打开JavaScript控制台，然后单击“幻灯片”按钮。这将slideDown（）一个小盒子。

这是最终结果：

jQuery效果-slideDown（）输出-jQuery教程

jQuery效果– slideDown（）输出– jQuery教程

jQuery效果– slideUp（）

jQuery slideUp（）方法用于向上滑动选定的元素。请参考以下语法：

$(selector).slideUp(speed, callback);

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
     
<h1>jQuery Basics</h1>

By Edureka
 
<button id="one">Slide</button>
 
<div id="div1" style="width:90px;height:60px;background-color:orange;"></div>
 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23one%22).on(%22click%22%2Cfunction()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23div1%22).slideUp(%22slow%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>

运行以上代码后，打开JavaScript控制台，然后单击“幻灯片”按钮。这将把slideUp（）框。

这是最终结果：

jQuery效果-slideUp（）输出-jQuery教程

jQuery效果– slideUp（）输出– jQuery教程

jQuery效果– slideToggle（）

jQuery slideToggle（）方法用于在slideDown（）和slideUp（）方法之间切换。请参考以下语法：

$(selector).slideToggle(speed, callback);

slideToggle（）效果是slideDown（）和slideUp（）的组合。运行与对slideUp（）效果执行的代码相同的代码，并打开控制台，然后尝试以下命令，看看会得到什么！

$("#div1").slideToggle("slow")

jQuery UI

有几种jQuery小部件和效果，我将介绍最常用的效果。我将在jQuery UI下介绍以下内容：

  1. jQuery UI- draggable（）
  2. jQuery UI- droppable（）
  3. jQuery UI- datepicker（）

jQuery UI – draggable（）

jQuery UI draggable（）方法用于使任何DOM元素可拖动。元素可拖动后，您可以将其拖动到html页面中的任何位置。请参考以下语法：

$（selector）.draggable（）;

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
     
<h1>jQuery Basics</h1>

By Edureka
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%23drag%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20width%3A%20150px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2060px%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.5em%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20blueviolet%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(function()%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23drag%22).draggable()%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />  
         
<div id="drag">
   
 Drag me around with you
 
</div>
 
</body>
</html>

运行上述代码后，打开JavaScript控制台并尝试通过单击并按住矩形来移动它。发生这种情况是由于draggable（）UI。自己尝试，这很有趣！

这是最终结果：

jQuery UI-draggable（）输出-jQuery教程

jQuery UI – draggable（）输出– jQuery教程

jQuery UI – droppable（）

jQuery UI方便您使用droppable（）方法使任何DOM元素可拖放到指定目标。请参考以下语法：

$（selector）.droppable（）;

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
    
<h1>jQuery Basics</h1>

By Edureka
 
<img id="img1" src="puppie/goldie.jpg" alt="Goldie">
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%23drop%20%7B%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20400px%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20float%3A%20right%3B%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color%3Aaquamarine%3B%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(function()%20%7B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23img1%22).draggable()%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23drop%22).droppable()%3B%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />   

<div id="drop">
  
MyHome
 
</div>
 
</body>
</html>
</html>

运行上面的代码后，打开JavaScript控制台并尝试通过单击并按住该图像将其移动，然后将其放在MyHome图标上。发生这种情况是因为droppable（）UI。自己尝试，这很有趣！

这是最终结果：

jQuery UI-droppable（）输出-jQuery教程

jQuery UI – droppable（）输出– jQuery教程

jQuery UI – datepicker（）

jQuery UI datepicker小部件使用户可以轻松直观地输入日期。请参考以下语法：

$（selector）.datepicker（）;

让我们看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <title> jQuery Tutorial</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20integrity%3D%22sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
        <link href="<a href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css</a>" rel="stylesheet">  
    </head>
     
<body>
     
<h1>jQuery Basics</h1>
 
By Edureka
 
<input id="date" type="text" size="10">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%24('%23date').datepicker()%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />          
</body>
</html>

运行上述代码后，打开JavaScript控制台并输入日期，该日期将显示在日历上，如下所示。

这是最终结果：

jQuery UI-datepicker（）输出-jQuery教程

jQuery UI – datepicker（）输出– jQuery教程

至此，我们结束了本博客的结尾。希望您能从中找到有用的信息，并继续关注有关Web开发的更多教程。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript jQuery 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入