jQuery快速上手-优快云博客

一.前言

“Javascript” 相信刚入门的网页设计爱好者都听过，它是一种客户端的网页脚本语言。通过 Javascript 你增加一些网页特效，让你的网页看起来更加Coool。而 jQuery 则是一个 Javascript库，也就是说它的作者John Resig 将很多诸如操作文档对象（DOM），动画效果，事件处理等等的Javascript代码打包成一个库。于此同时jQuery的语法设计使得编写Javascript变得简单，让我们来看两个例子：

<html>
<body>
<p id="demo">This is a paragraph</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My Frist Javascript.";
</script>

</body>
</html>

上面这段代码中，我们使用了JavaScript中的操作文本对象 getElementById 的方法来选择了一个名为 domo 的ID，然后将内容改成 "My Frist Javascript."

我再来看看在jQuery中这段是怎么写的

<html>
<body>
<p id="demo">This is a paragraph</p>

<script type="text/javascript">
$('#demo').text("My Frist Javascript.");
</script>

</body>
</html>

聪明的你肯定找到了不同的地方，而这个不同点正是为什么全球有28%的网站正在使用 jQuery。

二.选择器

在jQuery中， $符号就是代表着jQuery，它的功能就是让你选择页面中的一个元素（东西）。在上面的例子中 $('#demo') 就是利用$功能去寻找页面中的demo ID，然后将它的文本改成"My Frist Javascript"。当然你也可以使用 jQuery('#demo') 来完成相同的事情，但是谁会愿意多打这么多字呢？

假设说现在页面上有三幅图片：

<img src=”img1.jpg />

<img src=”img2.jpg />

<img src=”img3.jpg />

那么我们使用 $('img') 将会选择到页面上的哪个图片对象呢？答案是页面上的所有<img>元素全部被选中。这是因为jQuery总是返回所选对象的集合。那么问题又来了，如果说我自是想要页面上的第二副图片那么怎么办呢？很简单：

$('img').eq(1)

在$('img')之后我们加入了一个 .eq(1) 来选择第二副图片。eq是 equal 等于的意思，也就是说在返回的img集合中我选择了第2个img。等等，我要的是第2张图片为什么 eq() 里面是1？因为它们跟数组一样是从0开始计算的，所以0代表第一张，1代表第二张这样。

那么如果我想要用户点击完第2张图片后，这张图片消失掉。这个要怎么做呢？很简单：

$('img').eq(1).click(function(){
$(this).hide();
})

在这$('img').eq(1)的后面加上一个点击事件 .click() 这个事件内包含了一个函数，函数的内容就是用户点击的这个隐藏起来。$(this) 代表了$('img').eq(1) 而 .hide() 则是用来隐藏这副图片。

那么如果我是想随便的点击一张图片，然后其他两张图片消失掉我要怎么做呢？也很简单：

$('img').click(function(){
$('img').not($(this)).hide();
})

相信你读也能读懂这句话的意思：当<img>被点击的时候，不是这张<img>的就隐藏起来。这里用的是 .not() 它的作用就是将返回的集合里面去除掉指定的对象。上面例子中去除的对象是$(this) 也就是用户所点击的那张图片。

未完待续。。

转载于:https://www.cnblogs.com/codegeek/archive/2011/08/13/2137296.html

jQuery 入门