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

版权申诉

124 浏览量 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

粉丝: 6789
资源: 3万+

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

jQuery详细教程

Git 使用教程详解.docx

简历简洁经典四页04.docx

软件测试面试经典问题及详细解答.docx

PyTorch 安装教程：支持GPU加速功能 .docx

DAC811760完全资料含STM32驱动源码.docx

Web3开发教程：技术路线与开发实践.docx

校园表白墙php源码.docx

经典密钥管理系统解决方案.docx

经典IT运维服务管理内容.docx.pdf

Postgresql源码解读.docx

Jest实战：集成测试编写.docx

Jest实战：单元测试编写.docx

基于单片机的蓝牙家电开关控制系统(论文+源码)-kaic.docx

实战Docke虚拟化技术.docx

C++拷贝1. 函数详解.docx

Java图书管理系统-附源码.docx

公司实战中SQL编程规范.docx

彩色量能潮通达信指标公式源码.docx

反向多层(BP)神经网络java源码.docx

抄大底副图通达信指标公式源码.docx

五道经典计算机类考研真题的详细解析.docx

Webpack：Webpack实战：构建React项目.docx

C51单片机和电脑串口通信电路图与源码.docx

web安全综合实战三Gemini Inc.docx

最新去水印小程序搭建教程(附源码).docx

新媒体运营实战技能期末考试试卷.docx

基于python的人脸识别系统过程详细介绍+源码.docx

二维光子晶体禁带的遗传优化算法MATLAB源码.docx

最新资源