您需要具备的基础知识

在您开始学习 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. Freemarker 的基础使用 （二）

    freemarker 的基础使用二 ftl 文件 <html> <head> <meta http-equiv="Content-Type" cont ...

  2. 【转】ArcGIS Server 站点架构-Web Adaptor

    GIS 服务器内置了Web服务器,如果我想用我自己企业内部的服务器,该怎么做? 多个GIS服务器集群又如何做? …… 有问题,说明我们在思考,这也是我们希望看到的,因为只有不断的思考,不断的问自己为什 ...

  3. Spark集群-Standalone 模式

    Spark 集群相关 table td{ width: 15% } 来源于官方, 可以理解为是官方译文, 外加一点自己的理解. 版本是2.4.4 本篇文章涉及到: 集群概述 master, worke ...

  4. ThreadLocal终极篇

    前言 在面试环节中,考察"ThreadLocal"也是面试官的家常便饭,所以对它理解透彻,是非常有必要的. 有些面试官会开门见山的提问: “知道ThreadLocal吗?” “讲讲 ...

  5. 《C# 爬虫 破境之道》：第一境 爬虫原理 — 第一节：整体思路

    在构建本章节内容的时候,笔者也在想一个问题,究竟什么样的采集器框架,才能算得上是一个“全能”的呢?就我自己以往项目经历而言,可以归纳以下几个大的分类: 根据通讯协议:HTTP的.HTTPS的.TCP的 ...

  6. 网络通信-基本概念：网络、IP地址、端口、socket

    目录 网络通信 1 网络 1.1 网络定义 1.2 使用网络的目的 1.3 总结 2 IP地址 2.1 ip地址的作用 2.2 ip地址的分类 3 端口 3.1 什么是端口 3.2 端口号 3.3 端 ...

  7. java面试| 精选基础题(3)

    每天进步一点点,距离大腿又近一步! 阅读本文大概需要6分钟 系列文章 java面试| 精选基础题(1) java面试|精选基础题(2) 1.float f=3.4;是否正确? 答:不正确,编译无法通过 ...

  8. idea命令行、撤销commit

    原文地址:https://blog.csdn.net/chzphoenix/article/details/38090349 近期在使用git,最开始在idea界面操作,后来要求用命令行.刚开始还不是 ...

  9. NOI4.6 最小新整数——切山游戏

    描述 给定一个十进制正整数n(0 < n < 1000000000),每个数位上数字均不为0.n的位数为m. 现在从m位中删除k位(0<k < m),求生成的新整数最小为多少? ...

  10. 靶机-BTRSys 2.1 Walkthrough

    BTRSys 2.1 https://www.vulnhub.com/entry/btrsys-v21,196/ 参考:https://www.jianshu.com/p/9813095ce04d 提 ...