您需要具备的基础知识

在您开始学习 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. css3让元素自适应高度

    知识点: viewport:可视窗口,也就是浏览器.vw Viewport宽度, 1vw 等于viewport宽度的1%vh Viewport高度, 1vh 等于viewport高的的1% calc( ...

  2. GeneXus 16 如何实现自动化测试和发布

    CI/CD(持续集成/持续发布)是一种软件开发策略,以使公司能够尽可能快速.高效地给客户发布新功能.为了能够实现CI/CD,就需要通过PipeLine对整个软件过程进行一系列的节点管理,必须将每个阶段 ...

  3. Java HashSet集合的子类LinkedHashSet集合

    说明 HashSet保证元素的唯一性,可是元素存放进去是没有顺序的. 在HashSet下面有一个子类java.util.LinkedHashSet,它是 链表 + 哈希表(数组+链表 或者 数组+红黑 ...

  4. Java 中的foreach（增强for循环）

    foreach概述 增强for循环:底层使用的是送代器,使用for循环的格式,简化了送代器的书写,foreach是JDK1.5之后出现的新特性 使用增强for循环 遍历集合 /** * 遍历集合 * ...

  5. python打印图形

    i = 0 while i < 5: # print('*****') 效果与下行相同 print('*'*5) i+=1 print('\n\n') i = 1 while i < 6: ...

  6. 带限制的广搜 codeforces

    You are playing some computer game. One of its levels puts you in a maze consisting of n lines, each ...

  7. day6 云道页面 知识点梳理（1）

    关于块级元素.行内元素.行内块元素的梳理 (1)块级元素 特点:   a.可以设置宽高,行高,外边距和内边距   b.块级元素会独占一行    c.宽度默认是容器的100%    d.可以容纳内联元素 ...

  8. Java入门 - 高级教程 - 04.序列化

    原文地址:http://www.work100.net/training/java-serialization.html 更多教程:光束云 - 免费课程 序列化 序号 文内章节 视频 1 概述 2 序 ...

  9. 《爬虫学习》（二）（urllib库使用）

    urllib库是Python中一个最基本的网络请求库.可以模拟浏览器的行为,向指定的服务器发送一个请求,并可以保存服务器返回的数据. 1.urlopen函数: 在Python3的urllib库中,所有 ...

  10. GeoGebra学习-lesson1

    我曾经想过学习数学的时候总觉得不太直观,希望通过直观的图形来直观的学习数学.庆幸的是,在B站看视频时看到了妈咪叔使用了这款数学软件,很好用的样子.就去简单的了解了一下,下面是摘抄自<Geogeb ...