zoukankan      html  css  js  c++  java
  • 学习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就爽爽快快的变成红色了。喜庆啊!

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

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

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

    放下过去,才能迎接未来! 未来的每一天我都要过的精彩!
  • 相关阅读:
    Exercise 3: Numbers And Math
    Exercise 1: A Good First Program
    Lambda表达式详解
    @CacheEvict中的allEntries与beforeInvocation
    swagger接口文档查看地址
    开发常用软件下载
    mybatis中的<trim prefix="" suffix="" suffixOverrides="" prefixOverrides=""></trim>说明
    Git初使用
    vue.js的引用地址
    Git push代码到远程仓库
  • 原文地址:https://www.cnblogs.com/lilylearning1992/p/4630806.html
Copyright © 2011-2022 走看看