jQuery非常之经典实战教程(可拷贝源码).docx资源-CSDN文库

版权申诉

100 浏览量 2023-02-27 19:37:12 上传评论收藏 557KB DOCX 举报

《jQuery 非常之经典实战教程》 jQuery 是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本教程主要面向那些希望提升JavaScript技能，尤其是对Ajax前端开发有兴趣的开发者，同时也适合网页设计师和熟悉其他后端语言如Java、.Net、PHP、Python、Ruby的人群。 **jQuery 的引入与基本语法** jQuery 的核心在于它的库文件`jquery.js`，将其链接到HTML文档中即可开始使用。例如： ```html <script type="text/javascript" src="jquery.js"></script> ``` jQuery 的基本语法是通过`$`符号选择元素，然后执行相应的动作。如： ```javascript $(selector).action() ``` 这里的`selector`用于选择HTML元素，`action()`则是执行的操作。例如，`$(this).hide()`用于隐藏当前选中的HTML元素，而`$("#test").hide()`则会隐藏所有id为"test"的元素。 **jQuery 的特点** 1. **简洁高效**：jQuery倡导“写尽可能少的代码，做尽可能多的事情”（Write less, Do more），使得代码更简洁。 2. **广泛兼容**：jQuery 支持多种主流浏览器，包括IE6及以上版本，Firefox2及以上，Safari2及以上，以及Opera9及以上。 3. **强大的选择器**：基于CSS选择器，jQuery能精确选择DOM对象，几乎所有操作都是先选择元素再进行操作。 4. **文档就绪函数**：`$(document).ready()`确保在页面完全加载后执行jQuery代码，避免因文档未加载完毕导致的操作失败。 **实战示例** 以下是一个简单的示例，演示如何在用户点击按钮时隐藏所有段落（`<p>`）： ```html <html> <head> <script type="text/javascript" src="/jquery/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 type="button">Click me</button> </body> </html> ``` 在这个例子中，当用户点击“Click me”按钮时，所有段落会被隐藏。 **jQuery 选择器** jQuery提供了丰富多样的选择器，允许开发者根据标签名、类名、ID、属性等精准选取元素。例如，元素选择器允许选取特定类型的元素，如`$("p")`选取所有段落，而属性选择器如`$("[href]")`则选取所有含有href属性的元素。 **jQuery 动画和事件处理** jQuery的另一个强项是动画效果的实现，例如`fadeIn()`, `fadeOut()`, `slideToggle()`等。同时，事件处理如`click()`, `mouseover()`, `mouseout()`等，使得交互更加直观和动态。总的来说，jQuery降低了JavaScript编程的门槛，提高了开发效率，是现代网页开发中不可或缺的工具。通过深入学习和实践，开发者可以更轻松地创建功能丰富的交互式网页应用。

资源推荐

资源详情

资源评论

【6】jQuery 库位于一个 JavaScript 文件中，其中

包含了所有的 jQuery 函数，可以通过下面的标记

把 jQuery 添加到网页中：

【1】适合 JQuery 课程学习的人员：①准备做 Ajax

前台开发；②熟悉 Java、.Net、PHP、Python、Ruby

等；③熟悉 JavaScript，了解 Ajax，想要提高；

④网页设计师，熟悉 CSS；⑤想熟练掌握 JQuery

的使用方式。

【2】JQuery 的特点：

①写尽可能少的代码，做尽可能多的事情（Write

less,Do more）；

【1】jQuery 语法是为 HTML 元素的选取编制的，

可以对元素执行某些操作。

②用很简洁的代码完成很丰富的工作，会改变我们

写 JavaScript 代码的一些方式；

③支持各种主流浏览器，包括 IE6 以上，FireFox2

以上，Safari2 以上和 Opera9 以上的版本；

④以强大的 CSS 选择器为基础，几乎所有的操作都

先使用选择器查找 DOM 对象，然后对其进行各种操

作；

基础语法是：$(selector).action()

·美元符号定义 jQuery

·选择符 selector“查询”和“查找”HTML 元素

·jQuery 的 action()执行对元素的操作

【2】【$(this).hide()：隐藏当前 Html 元素】

$(document).ready(function () {

$("button").click(function () {

【3】【$("#test").hide()：隐藏所有 id="test"

的元素】

src="jquery.js"></script>

$(document).ready(function () {

$("p").click(function () {

<html>

<head>

- 1 -

jQuery 实战教程

src="/jquery/jquery.js"></script>

$(document).ready(function () {

$("button").click(function () {

$("#test").hide();

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p id="test">This is another paragraph.</p>

<button type="button">Click me</button>

</body>

【6】文档就绪函数：我们让所有的 jQuery 函数位

于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

</html>

【4】【$("p").hide()：隐藏所有段落】

<html>

这是为了防止文档在完全加载（就绪）之前运行

jQuery 代码。如果在文档没有完全加载之前就运行

函数，操作可能失败。

<head>

src="/jquery/jquery.js"></script>

$(document).ready(function () {

$("button").click(function () {

$("p").hide();

第 3 讲 jQuery 选择器

【1】 JQuery 选择器：可以用来准确地选取您希

望应用效果的元素。jQuery 元素选择器和属性

选择器允许您通过标签名、属性名或内容对 HTML

元素进行选择。选择器允许您对 HTML 元素组或单

个元素进行操作。在HTML DOM 术语中，选择器

允许您对 DOM 元素组或单个 DOM 节点进行操作。

【2】jQuery 元素选择器：jQuery 使用CSS 选择器

来选取HTML 元素。

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

①$("p") 选取<p>元素；

②$("p.intro") 选取所有class="intro"的<p>元素；

③

$("p#demo") 选取id="demo" 的第一个<p>元素。

【3】jQuery 属性选择器：jQuery 使用XPath 表达

式来选择带有给定属性的元素。

</html>

【5】【$(".test").hide()或$("p.test").hide()：

隐藏所有 class="test" 的段落】

① $("[href]") 选取所有带有 href 属性的元素；

② $("[href='#']") 选取所有带有 href 值等于"#"的

元素；

<html>

<head>

③ $("[href!='#']") 选取所有带有 href 值不等于"#"

的元素；

src="/jquery/jquery.js"></script>

$(document).ready(function () {

$("button").click(function () {

④ $("[href$='.jpg']") 选取所有 href 值以".jpg"结

尾的元素。

【4】jQuery CSS 选择器：jQuery CSS 选择器可用

于改变HTML 元素的CSS 属性。

- 2 -

jQuery 实战教程

<html>

});

<head>

});

src="jquery.js"></script>

$(document).ready(function () {

$("button").click(function () {

</script>

在上面的例子中，当按钮的点击事件被触发时会调

用一个函数：

$("button").click(function() {..some

code... }

该方法隐藏所有 <p> 元素：

$("p").hide();

【3】单独文件中的函数：如果在网站包含许多

页面，并且你希望你的 jQuery 函数易于维护，那

么我们可以把 jQuery 函数放到独立的 .js 文件

中。然后我们可以通过 src 属性来引用文件：

<head>

$("p").css("background-color", "red");

});

</script>

</head>

<body>

</script>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

src="my_jquery_functions.js">

</script>

</head>

</html>

【4】 jQuery 名称冲突：

【5】【更多选择器实例】

①jQuery 使用 $ 符号作为 jQuery 的简介方式；

②某些其他 JavaScript 库中的函数（比如

Prototype）同样使用 $ 符号；

语法

描述

③jQuery 使用名为 noConflict() 的方法来解决

该问题；

所有 class="intro"的<p>元素

所有 class="intro"的元素

id="intro"的第一个元素

每个<ul>的第一个<li>元素

所有带有以 ".jpg"结尾的属性值

的 href 属性

④ var jq=jQuery.noConflict() ，帮助您使用自

己的名称（比如 jq）来代替 $ 符号。

【5】

src="/jquery/jquery.js"></script>

var jq = jQuery.noConflict();

jq(document).ready(function () {

jq("button").click(function () {

jq("p").hide();

$("[href$=".jpg"]")

$("div#intro.head")

id="intro"的<div>元素中的所有

class="head"的元素

第 4 讲 jQuery 事件

});

【1】jQuery 事件函数：jQuery 事件处理方法是

jQuery 中的核心函数。事件处理程序指的是当

HTML 中发生某些事件时所调用的方法。术语由事

件“触发”（或“激发”）经常会被使用。通常会

把 jQuery 代码放到<head>部分的事件处理方法中。

});

</script>

【6】由于 jQuery 是为处理 HTML 事件而特别设

计的，那么当您遵循以下原则时，您的代码会更恰

当且更易维护：

【2】

src="jquery.js"></script>

①把所有

jQuery

代码置于事件处理函数中；

②把所有事件处理函数置于文档就绪事件处理器

中；

$(document).ready(function () {

$("button").click(function () {

$("p").hide();

③把 jQuery 代码置于单独的.js 文件中；

④如果存在名称冲突，则重命名 jQuery 库。

【7】【jQuery 事件】

- 3 -

jQuery 实战教程

剩余25页未读，继续阅读

评论收藏

内容反馈

版权申诉

xxpr_ybgg

粉丝: 6586
资源: 3万+

jQuery非常之经典实战教程(可拷贝源码).docx

可用于实战好指标---精准买卖通达信指标公式源码.docx

通达信指标公式源码 超级棒的极限通道 主图源码.docx

超级无敌之一箭穿心通达信指标公式源码.docx

基于人工免疫克隆选择算法的调度优化MATLAB源码.docx

超级短线80%以上成功机率通达信指标公式源码.docx

超级指标系列,见底出击通达信指标公式源码.docx

药品进销存系统C#.net 课程设计 说明书 源码.docx

通达信指标公式源码 买卖K图(买卖牛图)指标源码.docx

很好用的跟庄建仓副图指标通达信指标公式源码.docx

极品探底公式(源码,无未来 副图)通达信指标公式源码.docx

超级K线攻击度 实际实在 短线超好用通达信指标公式源码.docx

Python数据可视化实战 第7章 新零售智能销售数据可视化实战 教案.docx.docx

贪吃蛇python源码.docx

30 个 Python 教程和技巧.docx

【Python教程】Python基础语法.docx

经典指标分享 发现黑马 (成功率95)通达信指标源码公式.docx

相关实用应用程序（Windows可用）

2023年各高校录取分数线

李飞飞自传 我看见的世界 The World I see

ChatGPT使用总结：150个ChatGPT提示词模板（完整版）

chromedriver-win64.zip

全国计算机二级WPSoffice精选350道选择题题库（含答案）.pdf

哈尔滨工业大学-ChatGPT调研报告-2023.3.6-94页.pdf

智联招聘：2024年大学生就业力调研报告.pdf

4个亲测好用的ChatGPT4渠道

2020年5月下午计算机水平考试高级系统规划与管理师真题.pdf

FACTORYworks 平台的介绍，可以作为入门学习的资料ppt

学术海报模板+论文科研+研究生

最新资源

通达信指标公式源码超级棒的极限通道主图源码.docx

药品进销存系统C#.net 课程设计说明书源码.docx

通达信指标公式源码买卖K图(买卖牛图)指标源码.docx

极品探底公式(源码,无未来副图)通达信指标公式源码.docx

超级K线攻击度实际实在短线超好用通达信指标公式源码.docx

Python数据可视化实战第7章新零售智能销售数据可视化实战教案.docx.docx

经典指标分享发现黑马 (成功率95)通达信指标源码公式.docx

李飞飞自传我看见的世界 The World I see