1.简介
jQuery 库
可以通过一行简单的标记被添加到网页中。
1)什么是 jQuery ?
jQuery
是一个JavaScript
函数库。
jQuery
是一个轻量级的"写的少,做的多"的JavaScript
库。
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
除此之外,Jquery还提供了大量的插件。
2)为什么使用 jQuery ?
jQuery
团体知道JS
在不同浏览器中存在着大量的兼容性问题,目前jQuery
兼容于所有主流浏览器, 包括Internet Explorer 6
!
2.jQuery 安装
1)从 jquery.com 下载 jQuery 库
2)从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
如果您不希望下载并存放 jQuery
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软
百度CDN:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
又拍云 CDN:
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
新浪 CDN:
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
使用百度、又拍云、新浪、谷歌或微软的 jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery
。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery
,这样可以减少加载时间
3.jQuery语法
基础语法: $(selector).action()
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p .test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery
使用的语法是 XPath
与 CSS 选择器语法
的组合。
jQuery 是一个 JavaScript 库。
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script> 标签应该位于页面的 <head> 部分。
基础 jQuery 实例
下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p>
元素。
<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 type="button">Click me</button>
</body>
</html>
$()
$
是jQuery类
的一个别称,$()
构造了一个jQuery对象。所以$()
可以叫做jQuery的构造函数。
- $()可以是$(expresion),即css选择器、Xpath或html元素.
$("a").click(function(){...})
alert($("div>p").html());
$()中的是一个查询表达式.也就是用“div>p”这样一个查询表达式构建了一个jQuery对象,然后的“html()”意思是显示其html内容。
$("<div><p>Hello</p></div>").appendTo("body");
$()中的是一个字符串,用这样一段字串构建了jQuery对象,然后向<body/>中添加这一字串。
- $()可以是$(element),即一个特定的DOM元素.如常用的DOM对象有document、location、form等.
$(document).find("div>p").html());
$()中的document是一个DOM元素,即在全文寻找带<p>的<div>元素,并显示<p>中的内容。
注意:DOM
HTML DOM 定义了访问和操作 HTML 文档的标准。
什么是 DOM?
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
DOM 是 Document Object Model(文档对象模型)的缩写。
- 用jQuery对象的几个方法(如方法find()、each()等)
$("#orderedlist).find("li")
就像 $("#orderedlist li"). each()
一样迭代了所有的li
表达式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”
ztree是 jQuery 的.
注意:
js中不能加$() 这些表达式,可以加../
这些相对路径。
注意:
如果引入到哪儿,那么因该是引入到的地方的相对路径。
示例:
function change_page_size(this){
var v = $(this).val(); // 这个$(this)是拥有此方法的html元素
$.cookie()
}