转载JQuery.txt资源-CSDN文库

需积分: 17 49 浏览量 2009-08-08 13:10:27 上传评论收藏 3KB TXT 举报

根据提供的文件信息，我们可以从中提炼出与jQuery相关的两个具体示例。这两个示例涉及了基本的jQuery用法，包括事件绑定、元素操作等。接下来，我们将详细解释这些知识点。 ### 知识点一：倒计时按钮实现 #### 代码解读：在第一个示例中，代码实现了这样一个功能：页面加载完成后，按钮上会显示一个倒计时（默认为10秒），并且按钮处于禁用状态。每过一秒，按钮上的数字减一，直到倒计时结束，按钮恢复可点击状态，并显示“确定”。 ```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="js/jquery-1.3.2.js"></script> <script type="text/javascript"> var timeOut; var count = 10; $(function(){ $("#btnSubmit").attr("disabled", "disabled"); $("#btnSubmit").val("确定(" + count.toString() + ")"); timeOut = setTimeout(ButtonCount, 1000); }); function ButtonCount(){ if (count == 0){ $("#btnSubmit").attr("disabled", ""); $("#btnSubmit").val("确定"); clearTimeout(timeOut); } else { count--; $("#btnSubmit").attr("disabled", "disabled"); $("#btnSubmit").val("确定(" + count.toString() + ")"); setTimeout(ButtonCount, 1000); } } </script> </head> <body> <input type="button" value="确定" id="btnSubmit"/> </body> </html> ``` #### 解析： 1. **DOM 准备**：首先通过`$(function(){...})`确保DOM完全加载完成后再执行后续的JavaScript代码。 2. **初始化设置**：设置按钮的初始状态为禁用，并将按钮值设置为“确定(10)”。 3. **定时器**：使用`setTimeout`函数启动定时器，每秒执行`ButtonCount`函数。 4. **倒计时逻辑**：在`ButtonCount`函数中，判断计数器`count`是否为0，如果是则清除定时器并启用按钮；如果不是，则更新按钮显示并递减计数器。 5. **DOM 操作**：通过`$("#btnSubmit").attr("disabled", "disabled")`来禁用按钮，`$("#btnSubmit").val("确定(" + count.toString() + ")")`来改变按钮的文字。 ### 知识点二：双击编辑文本块 #### 代码解读：第二个示例展示了如何让页面中的某些文本区域可以被双击后编辑，用户可以在文本框中修改文本内容，当文本框失去焦点时保存更改。 ```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> <style type="text/css"> .caneditBg { background-color: Gray; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".canedit").each(function(){ $(this).bind("dblclick", function(){ var html = $(this).html(); var textarea = "<textarea name='temTextarea' id='temTextarea' onblur='saveText(this)'>" + html + "</textarea>"; $(this).empty().html(textarea); }); $(this).mouseenter(function(){$(this).addClass("caneditBg")}).mouseleave(function(){$(this).removeClass("caneditBg")}); }); }); function saveText(o){ var text = $(o).val(); $(o).parent().empty().html(text); } </script> </head> <body> <div class="canedit"> 双击编辑 </div> <div></div> </body> </html> ``` #### 解析： 1. **CSS 样式**：定义了一个`.caneditBg`样式，用于在鼠标悬停时改变文本区域的背景色。 2. **事件绑定**：使用`$(this).bind("dblclick", function(){...})`来绑定双击事件，当双击时将该区域转换为可编辑的文本框。 3. **鼠标悬停效果**：使用`$(this).mouseenter(function(){...})`和`$(this).mouseleave(function(){...})`为文本区域添加鼠标悬停时的效果。 4. **文本保存**：定义`saveText`函数，在文本框失去焦点时，获取其内容并替换原始文本。以上两个示例均利用了jQuery强大的DOM操作能力以及简洁的事件处理机制。通过这些简单的示例，读者可以更好地理解jQuery的基本用法及其应用场景。

资源推荐

资源详情

资源评论

JQuery小练习（2009-08-03）收藏
空闲时候写的一些jquery小代码，虽然就几分钟完成的小代码，但每天保持练习，不至于头脑会生锈；
1、按钮倒数10秒之后才能点击。这个效果一般在一些论坛注册时候用到比较多，废话少说，直接上代码：

<!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="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var timeOut;
var count = 10;
$(function() {
$("#btnSubmit").attr("disabled", "disabled");
$("#btnSubmit").val("确(" + count.toString() + ")定");
timeOut = setTimeout(ButtonCount, 1000);
});

ButtonCount = function() {
if (count == 0) {
$("#btnSubmit").attr("disabled", "");
$("#btnSubmit").val("确定");
clearTimeout(timeOut);
}
else {
count--;
$("#btnSubmit").attr("disabled", "disabled");
$("#btnSubmit").val("确(" + count.toString() + ")定");
setTimeout(ButtonCount, 1000);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈