jQuery on简单练习例子，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery on测试</title>
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script>
$(function() {
$('#testDiv').on('click', '#search_button', function() {
var searchVar = $.trim($('#search_input').val());
var readVar = $.trim($('#read_input').val());
console.log(searchVar + "----=" + readVar);
});
$('#operDiv').on('click', '#add_button', function() {
var searchVar = $.trim($('#add_input').val());
$('#dyDiv').append("<p>" + searchVar + "</p>");
});
$("input[name='float_button']").on('click', function() {
var searchVar = $.trim($('#float_input').val());
var text_1 = $.trim($("textarea[name='text_1']").val());
var text_2 = $.trim($('#text_2').val());
console.log(searchVar + "---=" + text_1 + "-----=" + text_2);
});
});
</script>
</head>
<body>
<div id="testDiv">
<input type="text" id="search_input" name="search_content"></input> <br />
<input type="text" id="read_input" name="read_input" value="测试只读"
readonly></input> <br /> <input type="button" id="search_button"
name="search" value="搜索"></input>
</div>
<div id="dyDiv"></div>
<div id="operDiv">
<input type="text" id="add_input" name="add_input"></input> <br /> <input
type="button" id="add_button" name="add_button" value="添加"></input>
</div>
<input type="text" id="float_input" name="float_input"></input>
<textarea name="text_1" rows="10" cols="10"></textarea>
<textarea id="text_2" name="text_2" rows="10" cols="10"></textarea>
<br />
<input type="button" name="float_button" value="测试输出"></input>
</body>
</html>
全文完。
相关推荐
这个“jQuery网页版键盘打字练习代码”就是一个典型的例子，它允许用户通过鼠标或键盘进行操作，提高打字速度。下面将详细介绍这个项目的关键技术和实现步骤。 首先，我们要明白jQuery是一个轻量级的JavaScript库，...
**jQuery教程：简单易学的入门指南** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这款开源工具使得JavaScript编程变得更加高效和简洁，尤其对于初学者而言，它...
本篇文章将围绕“jQuery实用基础小例子”展开，通过一系列实例帮助初学者快速上手。 首先，我们来讲解jQuery的核心概念。jQuery的引入通常是通过`<script>`标签，并在HTML文档的`<head>`部分或`<body>`标签的底部...
以下是一个简单的滑动显示隐藏的例子： ```javascript $("#myDiv").slideUp(500).delay(1000).slideDown(500); ``` 7. **AJAX操作** jQuery提供了`.ajax()`方法用于异步数据交互，简化了XMLHttpRequest的使用。...
**jQuery 入门详解** jQuery 是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。...记得不断练习和探索，以深化对jQuery的理解和应用。
jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。...不断练习和探索，你将能够自如地驾驭jQuery，为你的Web应用带来更流畅、更丰富的用户体验。
2. 实战项目：结合实际项目需求，使用资源包中的文件，练习编写和调试jQuery代码，提高解决问题的能力。 总结，这个jQuery 1.8.2相关资源包为开发者提供了全方位的学习材料，无论是初学者还是有经验的开发者，都能...
对于初学者，可以通过在线文档、教程视频以及实际项目练习来掌握 jQuery EasyUI。提供的`easyUI`文件名可能包含了示例代码和练习材料，可以深入学习和实践。 总之，jQuery EasyUI 是一个强大的前端开发工具，它简化...
2. **DOM操作**: jQuery提供了简单的方法来操作HTML元素，如`$(element).html()`用于设置或获取元素的HTML内容，`$(element).append()`在元素内部追加内容，`$(element).remove()`删除元素。 3. **事件处理**: 通过...
**jQuery基础** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。作为初学者，理解jQuery的核心概念...不断练习，理解和应用这些例子，将使你在jQuery的道路上更加得心应手。
在"锋利的jQuery2"这个压缩包中，你可以找到与书中内容相对应的JavaScript代码，这些代码可以用来练习和调试，以加深对jQuery的理解。 学习jQuery的基础知识点包括： 1. **选择器**: jQuery提供了丰富的选择器，如...
这本书的配套源码提供了丰富的示例和练习，以加深对jQuery特性和功能的理解。 源码中可能包含以下关键知识点： 1. **选择器**：jQuery的核心功能之一是简化DOM元素的选择。源码中会有各种选择器的实例，如ID选择器...
在“JqueryExercises:我在 jQuery 中的练习”中，我们可以看到一系列练习，旨在帮助开发者深入理解和熟练掌握 jQuery 的核心功能。** **DOM 操作：** jQuery 提供了一种简单的方式来选择、操作和遍历 HTML 文档对象...
通过学习和实践这个“jQuery学习案例第一季”中的例子，你将能够熟练掌握以上提到的jQuery基础，并逐步进阶到更高级的应用。每个案例都可能包含具体的应用场景，帮助你更好地理解和应用jQuery的强大功能。记得结合...
这些例子覆盖了从基本选择器应用到复杂Ajax交互的广泛内容，是理解和掌握jQuery功能的宝贵资源。通过动手实践，你可以更好地理解jQuery的工作原理，并将所学应用到实际项目中。 总的来说，jQuery是一个强大且易用的...
本项目“jquery-colors”专注于利用jQuery实现一个简单的鼠标移动动画，通过改变元素的颜色来响应用户的鼠标移动操作。这个功能在网页交互设计中很常见，可以增加用户界面的活力和吸引力。 在jQuery中，动画效果...
以下是一个简单的例子： ```javascript $('#touchElement').on('touchstart', function(event) { console.log('触摸开始'); }); $('#touchElement').on('touchmove', function(event) { console.log('触摸移动')...
这本书配套的源代码提供了丰富的示例和练习，以加深对jQuery概念、函数和方法的理解。通过分析这些源代码，我们可以深入学习jQuery的核心功能以及在实际项目中的应用。 1. **jQuery基础**：jQuery的核心是简化DOM...
4. **事件处理**：jQuery 的事件处理机制如 `.on()`、`.click()` 等，使得绑定事件变得直观易懂。 5. **动画效果**：`.fadeIn()`, `.slideToggle()`, `.animate()` 等方法让创建动态效果变得轻松。 6. **Ajax**：`...
这本书的源代码包含了许多示例和练习，旨在辅助读者理解jQuery的核心概念和高级技巧。以下是对源代码中可能涉及的知识点的详细说明： 1. **jQuery选择器**：jQuery的选择器是其强大功能的基础，它简化了DOM元素的...