1、jQuery介绍

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

jQuery的一个实例：

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $("button").click(function(){
  7. $("p").hide();
  8. });
  9. });
  10. </script>
  11. </head>
  12.  
  13. <body>
  14. <h2>This is a heading</h2>
  15. <p>This is a paragraph.</p>
  16. <p>This is another paragraph.</p>
  17. <button type="button">Click me</button>
  18. </body>
  19. </html>

文档就绪函数

上面实例中的所有 jQuery 函数位于一个 document ready 函数中：

  1. $(document).ready(function(){
  2.  
  3. --- jQuery functions go here ----
  4.  
  5. });

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

如果在文档没有完全加载之前就运行函数，操作可能失败。

2、jQuery安装

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 jQuery.com 下载。下载下来的jquery-xx.js文件存放在一个合理的地方，然后在头部引用。src值需要是这个相对这个html文件的路径。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它。如果不引用使用jquery，会提示$没定义。

  1. <head>
  2. <script  type="text/javascript" src="jquery-1.12.3.min.js"></script>
  3. <script type="text/javascript">
  4. </head>

3、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

  • 美元符号$定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

4、jQuery 选择器

（1）jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

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

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

（2）jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

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

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

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

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

（3）jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

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

（4）更多的选择器实例

语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

4、jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

  1. $("#hide").click(function(){
  2.   $("p").hide();
  3. });
  4.  
  5. $("#show").click(function(){
  6.   $("p").show();
  7. });

语法：

  1. $(selector).hide(speed,callback);
  2.  
  3. $(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

  1. $("button").click(function(){
  2.   $("p").hide(1000);
  3. });

5、jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

  1. $("button").click(function(){
  2.   $("p").toggle();
  3. });

语法：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

6、jQuery Callback 函数

典型的语法：

  1. $(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。

例子：

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.   $("p").hide(1000,function(){
  8.     alert("The paragraph is now hidden");
  9.     });
  10.   });
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <button type="button">Hide</button>
  16. <p>This is a paragraph with little content.</p>
  17. </body>
  18. </html>

7、jQuery - 获得内容和属性

（1）jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

（2）获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#btn1").click(function(){
  8.     alert("Text: " + $("#test").text());
  9.   });
  10.   $("#btn2").click(function(){
  11.     alert("HTML: " + $("#test").html());
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <p id="test">这是段落中的<b>粗体</b>文本。</p>
  18. <button id="btn1">显示文本</button>
  19. <button id="btn2">显示 HTML</button>
  20. </body>
  21.  
  22. </html>

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     alert("Value: " + $("#test").val());
  9.   });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <p>姓名：<input type="text" id="test" value="米老鼠"></p>
  16. <button>显示值</button>
  17. </body>
  18.  
  19. </html>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     alert($("#w3s").attr("href"));
  9.   });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
  16. <button>显示 href 值</button>
  17. </body>
  18.  
  19. </html>

 8、jQuery - 设置内容和属性

我们将使用前一节中的三个相同的方法来设置内容：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("#btn1").click(function(){
  8.     $("#test1").text("Hello world!");
  9.   });
  10.   $("#btn2").click(function(){
  11.     $("#test2").html("<b>Hello world!</b>");
  12.   });
  13.   $("#btn3").click(function(){
  14.     $("#test3").val("Dolly Duck");
  15.   });
  16. });
  17. </script>
  18. </head>
  19.  
  20. <body>
  21. <p id="test1">这是段落。</p>
  22. <p id="test2">这是另一个段落。</p>
  23. <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
  24. <button id="btn1">设置文本</button>
  25. <button id="btn2">设置 HTML</button>
  26. <button id="btn3">设置值</button>
  27. </body>
  28. </html>

JQuery基本语法（部分）的更多相关文章

  1. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  2. js进阶 10-2 JQuery基础语法是什么

    js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...

  3. 前端之JQuery：JQuery基本语法

    jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...

  4. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  5. jquery基本语法（一）

    https://www.cnblogs.com/haiyan123/p/7657151.html 一.jQuery基础1.为什么要用jquery?    写起来简单,省事,开发效率高,兼容性好2.什么 ...

  6. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

  7. <学习笔记 之 JQuery 基础语法>

    jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...

  8. jQuery基本语法

    jQuery 是 JavaScript 的一个函数库.方便.主流   jQuery的开发步骤: (1) 导入jQuery 库   (2)  在 <script src="../js/j ...

  9. jQuery 选择器语法

    jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId&quo ...

随机推荐

  1. Python学习之--socket

    1.Socket概述   网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常也称作"套接字",用于描述IP地址和端口,是一个 ...

  2. MyEclipse 使用图文详解

    引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...

  3. [译]在Asp.Net Core 中使用外部登陆（google、微博...）

    原文出自Rui Figueiredo的博文<External Login Providers in ASP.NET Core> 摘要:本文主要介绍了使用外部登陆提供程序登陆的流程,以及身份 ...

  4. .NET Core 快速入门教程

    .NET Core 快速学习.入门系列教程.这个入门系列教程主要跟大家聊聊.NET Core的前世今生,以及Windows.Linux(CentOS.Ubuntu)基础开发环境的搭建.第一个.NET ...

  5. 【NOIP2014提高组】寻找道路

    https://www.luogu.org/problem/show?pid=2296 满足条件的路径:路径上的所有点的出边所指向的点都与终点连通.反过来,不满足条件的路径:路径上至少一点的出边所指向 ...

  6. for循环，for in和for of的区别

    最近在写代码,总在被烦恼着到底遍历的时候到底该使用for循环,还是使用for in或者for of  ,今天查了以下 ,写出来. 我们一般用for循环来遍历数组,因它可以按顺序的返回每一个索引的值或者 ...

  7. pl/sql中if的用法

    /*判断用户从键盘输入的数字1.如何使用if语句2.接收一个键盘输入(字符串)*/set serveroutput on--接收一个键盘输入--num:一个地址值:含义:在该地址上保存了输入的值acc ...

  8. 《iOS Human Interface Guidelines》——Multitasking

    多任务处理 多任务处理让人们在屏幕上(以及合适的iPad模式)查看多个app,而且在近期使用的app中高速地切换. 在iOS 9中.人们能够使用多任务处理UI(例如以下所看到的)来选择一个近期使用的a ...

  9. centos编译安装php5.6.20+nginx1.8.1+mysql5.6.17

    LNMP 代表的就是:Linux系统下Nginx+MySQL+PHP这样的站点服务器架构. 本次实践需求: 实践centos6.5编译安装 LNMP生产环境 架构 web生产环境 使用 xcache ...

  10. MyBatis学习总结（一）简单入门案例

    MyBatis学习总结(一)简单入门案例 主要内容:本文主要通过对数据库中的use表进行增删改查总结mybatis的环境搭建和基本入门使用 一.需要的jar包: 1.核心包 2.依赖包 3.jdbc数 ...