jQuery基础-原创手记-慕课网

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>

基础 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

图片.png

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中不能加$() 这些表达式，可以加../这些相对路径。

注意：

图片.png

如果引入到哪儿，那么因该是引入到的地方的相对路径。

示例：

function change_page_size(this){        var v = $(this).val();   // 这个$(this)是拥有此方法的html元素
        $.cookie()
    }

作者：廖马儿
链接：https://www.jianshu.com/p/df48836f0eb2