1,什么是JQuery ?
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
2,他有哪些特性呢?
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
3,那我怎么下载使用到我的项目呢?
方式一:
下载 jQuery
有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
这两个版本都可以从 jQuery.com 下载。
方式二:
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>
4,那下载下来我怎么使用呢?
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
5,那$括号里面都有啥?
专业名词是选择器,
5.1有哪些选择器,什么意思,怎么用,为什么用?
选择器允许您对元素组或单个元素进行操作。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
6,老说事件,那什么是事件呢?
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
请看下面例子,满足你的好奇心:
<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>
<html></html> : 网页当然要放在html中,这个没有问题.
<head></head> : 通常会把 jQuery 代码放到 <head>部分的事件处理方法中, 这个是前提,如果这个搞不懂,我也没招,你也可以理解为约定.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
这个就很简单,前面提到的下载使用JQuery,记得仔细阅读,两种方式.
但是这个好像和我之前讲的 不一样,对了,这个我得考虑这个情况,如果我得页面很多,都需要引入jquery.js,我该咋办?
那我就单独创建一个js文件,然后将下载下来的jquery,存放至此,然后在页面引入jquery.js,真是perfect。
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
$(document).ready(function(){ --- jQuery functions go here ---- });
上面这是啥意思?
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
那下面这个是啥意思?
$("button").click(function() {..some code... } )这很明显,元素选择器点击事件触发会调用一个方法.
这个p和hide是啥意思?
$("p").hide();
p 是段落标签,正确的写法 <p></p>
我觉得hidde也可以,但是人家使用的是hide,暂且按照这个来,其实我试过hidde,它不起作用,这是他们定义的标准.
我还有个小疑问,$是什么鬼?
Jquery的简称,那能不能用别的名词代替,答案是肯定的,
JQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号
好了,废话一大堆,来理一下思路,只要记住这四步,你就可以很好的使用他了
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突,则重命名 jQuery 库
接下来请关注 JQuery教程详解二
更多文章,请关注: http://blog.csdn.net/qq_37022150?viewmode=list