您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

  • HTML
  • CSS
  • JavaScript

jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

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

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

  • 从 jquery.com 下载 jQuery 库
  • 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 语法操作

1.通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

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

实例:

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

  • $("p").hide() - 隐藏所有 <p> 元素

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

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

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

// 开始写 jQuery 代码...

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

jQuery 选择器

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

选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

语法 描述  
$("*") 选取所有元素  
$(this) 选取当前 HTML 元素  
$("p.intro") 选取 class 为 intro 的 <p> 元素  
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素  
$("tr:odd") 选取奇数位置的 <tr> 元素

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

<head>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

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

//my_jquery_function.js为外部js文件 用其存放相关的jquery代码

</head>

jQuery 事件

jQuery 是为事件处理特别设计的。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

常见 DOM 事件：

鼠标事件 键盘事件 表单事件 文档/窗口事件
click 单击 keypress 按键 submit load
dblclick 双击 keydown 按键下落过程 change resize
mouseenter鼠标进入 keyup     按键弹起 focus得到焦点 scroll
mouseleave鼠标离开   blur  失去焦点 unload

注：keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。

然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

当提交表单时，会发生 submit 事件。

该事件只适用于 <form> 元素。

触发被选元素的 submit 事件：$(selector).submit()

添加函数到 submit 事件：$(selector).submit(function)

 

jQuery 基础 （笔记源于runoob）的更多相关文章

  1. jQuery基础笔记（1）

    day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery?  MySQL Python              ...

  2. jquery基础 笔记一

    一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...

  3. jQuery基础笔记 each和data（7）

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...

  4. jQuery基础笔记 事件（6）

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 *****         1. 目前为止学过的绑定 ...

  5. jQuery基础笔记（4）

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...

  6. jQuery基础笔记（3）

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签 样式操作 样式类 addClass();// 添 ...

  7. jQuery基础笔记（2）

    day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...

  8. jquery基础 笔记三

    一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...

  9. jquery基础 笔记二

    动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...

随机推荐

  1. 【转】C#中base关键字的几种用法:base()

    转:https://blog.csdn.net/cplvfx/article/details/82982862 base其实最大的使用地方在面相对象开发的多态性上,base可以完成创建派生类实例时调用 ...

  2. Netty 的基本简单实例【服务端-客户端通信】

    Netty是建立在NIO基础之上,Netty在NIO之上又提供了更高层次的抽象. 在Netty里面,Accept连接可以使用单独的线程池去处理,读写操作又是另外的线程池来处理. Accept连接和读写 ...

  3. 剑指Offer-60~68题

    60. \(n\) 个骰子的点数 题目描述: 扔 \(n\) 个骰子,向上面的数字之和为 \(S\).给定 \(n\),请列出所有可能的 \(S\) 值及其相应的概率. 示例: 输入:n = 1 输出 ...

  4. 欧拉-拉格朗日方程 The Euler-Lagrange Equation

    在 paper: Bounded Biharmonic Weights for Real-Time Deformation 中第一次接触到 Euler-Lagrange 方程,简单记录一下. 泛函的定 ...

  5. 8086汇编语言学习(二) 8086汇编开发环境搭建和Debug模式介绍

    1. 8086汇编开发环境搭建 在上篇博客中简单的介绍了8086汇编语言.工欲善其事,必先利其器,在8086汇编语言正式开始学习之前,先介绍一下如何搭建8086汇编的开发环境. 汇编语言设计之初是用于 ...

  6. mysql索引创建和使用细节(二)

    上篇粗略记录当mysql字段类型是string,传入int类型参数后失效当问题. 现在测试下mysql字段是int类型,传参string类型会发生什么. 题外话,最近膝盖手术后还在家养伤中,只怪自己以 ...

  7. Gitlab应用——系统管理

    ​ 查看linux系统信息 ​ 查看日志 ​ ​ 创建账号 ​ 选择regular,这是一个普通账号,点击“create user”账号创建完成 ​ 点击“User”,然后点击“New user”.使 ...

  8. GStreamer基础教程13 - 调试Pipeline

    摘要 在很多情况下,我们需要对GStreamer创建的Pipeline进行调试,来了解其运行机制以解决所遇到的问题.为此,GStreamer提供了相应的调试机制,方便我们快速定位问题. 查看调试日志 ...

  9. Qt Installer Framework翻译(7-1)

    配置文件 配置文件可自定义安装程序的用户界面和行为.该文件通常称为config.xml,位于config文件夹中. 最小配置文件由一个<Installer>根元素组成,<Name&g ...

  10. allegro使用经验总结（一）

    在用allegro开发flappy bird.游戏虽然小,但是用到了allegro的方方面面,可以说是"麻雀虽小五脏俱全". 1.physfs 这是一个跨平台的读写文件的库,可以直 ...