• jQuery总结第一篇


    前言:   

       从开博到现在,一直想写点东西,可是看了几天书,发现新东西很难深入,但又不想让博客荒芜,遂决定,总结之前所学,以文字记之。一方面看自己学习中遗漏了什么,便于查漏补缺;另一方面则是锻炼一下自己的表达能力,看自己是不是真正的理解透彻了,能不能将自己的知识、自己的经验分享给他人,从而融入一个团队,更好地学习与交流。

    准备工作:

        1.获取jQuery:从大的方面来说,jQuery有两个版本,一个是完整版(Full),一个是压缩版(Min),这两个版本在使用上是没有任何区别的,只不过Min版本是压缩的,体积更小,在网络上使用起来性能更好,而在功能上并未有任何的阉割。(Tip:以前自己傻×了,以为min就是压缩的,人们都说学习应该用完整版,可是现在才知道,原来那些高手们所谓的学习是学习jQuery的源码啊!所以,如果要学jQuery的使用,用Min就够了。如果真的到了学习jQuery的源码的时候,那就要看Full版了)jQuery下载地址:http://code.jquery.com/jquery-1.7.1.min.js

        2.搞一个编辑器:notepad++或Vim(尽量别用notepad或者IDE了,一个太原始,一个太费劲,吃内存太大,学习嘛,总是要不断地修修改改)

    imagevim在更换了js的syntax以后还是用起来还是非常舒服的。

    imagenotepad使用简单方便,无需复杂配置,推荐使用。

    Get Started:

        首先需要把jQuery库导入到需要用到它的html文件中,先感性地举一个例子。

        

     1 <html>
    2 <head>
    3 <title></title>
    4 <style>
    5
    6 </style>
    7 <script src="jquery.js"></script>
    8 <script type="text/javascript">
    9 $(document).ready(function(){
    10 $('p').click(function(){
    11 $('p').text('Hello jQuery!');
    12 });
    13 });
    14 </script>
    15 </head>
    16 <body>
    17 <p> Hello World! </p>
    18 </body>
    19 </html>

         这是一个完整的jQuery操作DOM的例子。首先 将jQuery文件导入<script src="jquery.js"></script>,然后下面是jQuery的代码。 

    $(document).ready(function(){............});

         几乎每一个jQuery脚本的开头都是这一句,其意思为当所有的DOM元素都加载完毕后执行操作。

         看这一句:

    1 $('p').click(function(){
    2 $('p').text('Hello jQuery!');
    3 });

        先看它的结构:首先是选择器选择p元素,然后为其绑定一个click事件,让p元素的内容改变为Hello jQuery。

         每一条命令都分为四部分:jQuery函数(或者它的别名),选择器(选择器的用法与CSS相似),动作,参数。例如:

      

    选择器 动作 参数
    jQuery('p') .css ('color','blue')
    $('p') .css ('color','blue')

      这两种写法完全一样,$就是jQuery的一个别名。jQuery建立一个jQuery对象,它所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权,因而不会与JavaScript的顶级变量冲突,,可以与其他的JavaScript库共存。

          

  • 相关阅读:
    支付宝小程序开发——踩坑实录
    支付宝小程序开发——rich-text富文本组件支持html代码
    SFTP 文件上传下载工具类
    码农修真传
    Spring Data学习中心
    深入理解JDBC设计模式: DriverManager 解析
    Redis(十一):哨兵模式架构设计分析
    Redis(十):pub/sub 发布订阅源码解析
    Redis(九):主从复制的设计与实现解析
    线程池技术之:ThreadPoolExecutor 源码解析
  • 原文地址:https://www.cnblogs.com/fuyunbiyi/p/2330507.html
Copyright © 2020-2023  润新知