学习JQuery中文文档之get()函数

前端大神群的群主告诉我们：学习一个框架最好的方法是去把官方文档研究一遍。

现在正式开始我的前端之路，从JQuery的中文文档开始。

基础不牢固，看起来有点慢，但是我会一直坚持下去的。把遇到的问题都记录在此，以便随时查阅。

不展示基础概述，只记录所遇问题。

Just Do It！ Never Give Up!

get()函数

看完这个函数的定义，我就兴冲冲的去试验了一下，写了以下代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>get()</title>
 6     <style type="text/css">
 7         div{width:100px; height:100px; margin:20px; background:#e5e5e5;}
 8     </style>
 9     <script src="js/jquery-1.11.3.min.js"></script>
10 </head>
11 <body>
12     <div></div>
13     <div></div>
14     <div></div>
15     <div></div>
16 <script type="text/javascript">
17         $(function(){
18                         $("div").get(2).css("background","#f00");
19         });
20     </script>
21 </body>
22 </html>

运行了一下，本来设想的结果应该是第三个div块的背景颜色变为红色，但是天不遂人愿，所有的div块都没有反应。

我就傻眼了！

再寻求了度娘无果之后，再次认真看文档，才发现问题出在何处。

get()能让你选择一个实际的DOM元素并对他进行操作。

反复研究之后（基础太差伤不起），因为get()返回的是JS对象，不是JQuery对象，所以不能使用Jquery中的css()方法。

所以，我把函数改成这个样子再试一次：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>get()</title>
 6     <style type="text/css">
 7         div{width:100px; height:100px; margin:20px; background:#e5e5e5;}
 8     </style>
 9     <script src="js/jquery-1.11.3.min.js"></script>
10 </head>
11 <body>
12     <div></div>
13     <div></div>
14     <div></div>
15     <div></div>
16 <script type="text/javascript">
17         $(function(){
18             $($("div").get(2)).css("background","#f00");
19             $("div").get(0).style.background="red";
20             //get()获取的是DOM对象，不能使用JQuery的方法
21         });
22     </script>
23 </body>
24 </html>

这次第一个和第三个div就爽爽快快的变成红色了。喜庆啊！

之前之所以会产生问题，就是因为我没有搞清函数返回的对象的类型，使用错了方法。

在此也提醒自己，在学习的时候，一定要注意遇到问题不可怕，不思考才最可怕，而且一定要从基础由下而上的思考。不要盲目百度，浪费时间，还云里雾里。

只要一个开始，坚持到底……

 

posted @ 2015-07-08 17:19  四叶草黎  阅读(263)  评论(0)  编辑  收藏  举报