jQuery 笔记 / Basic

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

jQuery 库包含以下特性:

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

向您的页面添加 jQuery 库

<head>
    <script type="text/javascript" src="jquery.js"></script>
</head>```
举例:点击<p>时,它会自动隐藏

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>```

共有两个版本的 jQuery 可供下载:

  • Production version - 用于实际的网站中,已被精简和压缩。
  • Development version - 用于测试和开发(未压缩,是可读的代码)

这两个版本都可从 jQuery.com 下载。如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>```
Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>```
提示:使用谷歌或微软的 jQuery,有一个很大的优势。许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。

Syntax

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

jQuery中$是什么意思
$就是jQuery的别称
而jQuery就是jQuery库提供的一个函数.
$.ajax(options)这样的使用,等同 jQuery.ajax(options))
$()这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素
比如:
$(document)就是 选取整个文档对象
为了防止命名冲突,我们下面会讲到jQuery的防冲突机制

基础语法:$(selector).action()
说明:

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:
$(this).hide() 隐藏当前的 HTML 元素。
$("#test").hide() 隐藏 id="test" 的元素。
$("p").hide() 隐藏所有<p>元素。
$(".test").hide() 隐藏所有 class="test" 的元素。

注意:您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){
    --- jQuery functions go here ----
});```
说明:这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。(例如:试图隐藏一个不存在的元素,或者获得未完全加载的图像的大小)

##Selectors
(1)jQuery 元素选择器  (使用 CSS 选择器来选取 HTML 元素)
```$("p")``` 选取 ```<p> ```元素。
```$("p.intro")``` 选取所有 class="intro" 的``` <p> ```元素。
```$("p#demo")``` 选取所有 id="demo" 的``` <p> ```元素。

(2)jQuery 属性选择器  (使用 XPath 表达式来选择带有给定属性的元素)
```$("[href]")``` 选取所有带有``` href ```属性的元素。
```$("[href='#']")``` 选取所有带有 ```href``` 值等于 "#" 的元素。
```$("[href!='#']")``` 选取所有带有``` href```值不等于 "#" 的元素。
```$("[href$='.jpg']")``` 选取所有 ```href ```值以 ".jpg" 结尾的元素

(3)jQuery CSS 选择器(可用于改变 HTML 元素的 CSS 属性)
举例:下面的例子把所有 p 元素的背景颜色更改为红色。

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

更多选择器:


selectors

Events

jQuery 是为事件处理特别设计的。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。举例:当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )

单独文件中的函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。如下:

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

**jQuery 名称冲突**
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。比如:

var jq=jQuery.noConflict(); // 帮助您使用自己的名称(比如 jq)来代替 $ 符号
j("div p").hide(); // Do something with jQuery
$("content").style.display = 'none'; // Do something with another library's $()```

jQuery事件例子

jQuery事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,885评论 0 3
  • jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由约翰·雷西格(...
    静候那一米阳光阅读 4,258评论 0 18
  • 警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
    鹿守心畔光阅读 7,818评论 3 104
  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 2,405评论 0 0
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,779评论 18 503