JQuery学习

时间 2019-11-14

标签 jquery 学习栏目 JQuery 繁體版

原文原文链接

jQuery 是一个 JavaScript 函数库。javascript

jQuery 库包含如下特性：css

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

1.向您的页面添加 jQuery 库html

jQuery 库位于一个 JavaScript 文件中，其中包含了全部的 jQuery 函数。java

能够经过下面的标记把 jQuery 添加到网页中：jquery

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

请注意，<script> 标签应该位于页面的 <head> 部分。ajax

2.下载 jQueryapi

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

这两个版本均可从 jQuery.com 下载。函数

3.库的替代

Google 和 Microsoft 对 jQuery 的支持都很好。动画

若是您不肯意在本身的计算机上存放 jQuery 库，那么能够从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

4. 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 选择器语法的组合。

document ready function

$(document).ready(function(){

--- jQuery functions go here ----

});

5. jQuery 选择器

jQuery 元素选择器和属性选择器容许您经过标签名、属性名或内容对 HTML 元素进行选择。
选择器容许您对 HTML 元素组或单个元素进行操做。
在 HTML DOM 术语中：选择器容许您对 DOM 元素组或单个 DOM 节点进行操做。

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

$("p") 选取 <p> 元素。
$("p.intro") 选取全部 class="intro" 的 <p> 元素。
$("p#demo") 选取全部 id="demo" 的 <p> 元素。

5.2 jQuery 属性选择器

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

$("[href]") 选取全部带有 href 属性的元素。
$("[href='#']") 选取全部带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取全部带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素。

5.3 jQuery CSS 选择器

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

下面的例子把全部 p 元素的背景颜色更改成红色：

实例

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

亲自试一试

6. jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）常常会被使用。

一般会把 jQuery 代码放到 <head>部分的事件处理方法中：

实例

<html>
<head>
<script type="text/javascript" src="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>Click me</button>
</body>

</html>

亲自试一试

在上面的例子中，当按钮的点击事件被触发时会调用一个函数：

$("button").click(function() {..some code... } )

该方法隐藏全部 <p> 元素：

$("p").hide();

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的得到焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

1. 学习jQuery UI
2. jquery学习
3. jQuery 学习（一）
4. jquery学习。。
5. 学习 jQuery UI
6. jQuery学习
7. 【jQuery】——学习
8. jquery的学习
9. JQuery学习
10. jQuery学习day01
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议

$(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" 的元素