学习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就爽爽快快的变成红色了。喜庆啊!

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

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

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

时间: 2024-11-04 23:24:29

学习JQuery中文文档之get()函数的相关文章

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

今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式.这都可以用'$.map()'来方便的建立. 参数: 给每个元素执行的函数 为了让学习者更容易理解这个函数,于是就有了下面这个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

(十三)unity4.6学习Ugui中文文档-------参考-UGUI Interaction Components(下)

 大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitymanual.com/forum.php?mod=guide&view=my 4.5 Slider 滑块控件允许用户通过拖动鼠标从一个预先确定的范围选择一个数字值.熟悉的例子包括在游戏中困难设置和在图像编辑器中亮度设置. Properties Property: Property: Interac

(二十五)unity4.6学习Ugui中文文档-------UGUI-Extensions

?? 出处:http://blog.csdn.net/u010019717 这个库是什么? 在此存储库中是扩展脚本来增强您的Unity UI experience的集合.这些脚本从许多来源收集和合并,随着时间的推移改善Unity UI experience.(脚本绝大多数来自脚本线程上unity UI 论坛在这里)你可以下载/项目访问脚本,或您可以下载此预编译的 Unity Asset资产. Unity UI Extensions Unity Asset Controls and extensi

(二十九)unity4.6学习Ugui中文文档-------运行时创建Scroll-lists

?? 孙广东 2015.5.10 首先要滚动和list形式存储内容.  使用Scroll Rect组件.就可以滚动了,但是有时候我们不希望,item超过区域还显示:就要使用Mask组件,说明一下,Mask组件组好配合Image一起使用. 下面的图:显示了的情况[头像是子对象Image].1.父对象只有Mask组件:2.有Mask和Image组件[图片为none]:3.有Mask和Image组件[图片有Alpha透明区域]     在list容器中的item 我们怎么管理呢?VerticalLay

(二十二)unity4.6学习Ugui中文文档-------交互-Eventsystem &amp;amp; Binding

大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitymanual.com/forum.php?mod=guide&view=my 完整的教程下载地址:http://www.unitymanual.com/thread-26665-1-1.html 5.4 Eventsystem& Binding 这两个东西其有用处不同也没有什么可比較的,可是也要区

unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform .

这一节走进更多的深度,有关unity的用户界面功能. 1.Rect Transform Rect Transform是2D与 3D 图形的Transform组件对应.它用来指定用户界面系统中的大小.位置和旋转的控件 Properties Property: Function: Pos (X, Y and Z) 相对锚点anchors的矩形枢轴pivot点的位置. Width/Height 矩形的宽高 Left, Top, Right, Bottom 矩形的边缘相对于其锚点的位置.这可以被认为是内

(二)unity4.6学习Ugui中文文档-------概要-UGUI Canvas

大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitymanual.com/forum.php?mod=guide&view=my UI系统允许您快速.直观地创建用户界面(Ui).这是Unity的新 UI 系统的主要功能介绍. 一.UI Overview概要 在这篇概述中,我们就去通过 UI系统的基础知识.我们将开始介绍Canvas(画布)并将所有 U

(三十)unity4.6学习Ugui中文文档-------制作一个泛型的MODAL窗口

孙广东 2015.5.11 在此文章中我们将制作一个泛型的MODAL窗口 (Yes, No, Maybeso, Cancel) 在那里我们可以把内容和动作push到窗口中,这个窗口可以在我们的游戏的任何地方使用,按钮被按下时事件工作. 涉及到的代码: using UnityEngine; using System.Collections; public class BringToFront : MonoBehaviour { void OnEnable () { transform.SetAsL

(十七)unity4.6学习Ugui中文文档-------技巧-Creating a World Space UI

3.Creating a World Space UI UI系统很容易地创建UI用户界面,被定位在其他2D或 3D场景中对象之间的世界中. 开始通过创建一个 UI元素(如Image图像),如果在你的场景中还没有,可以通过使用:GameObject > UI > Image.这也将为您创建一个画布. Set the Canvas to World Space 选择你的画布,改变Render Mode渲染模式为World Space世界空间. 现在你的画布已经位于世界空间中,所有相机都可以被看到,