zoukankan      html  css  js  c++  java
  • 【2】初窥jQuery核心$

    jq中的“$”符号表示什么呢?建议大家不要小看了它哟~~~
    因为jQuery 的核心功能都是通过这个函数实现的,以后编写的jQuery代码都是构建在这个函数上的,简单的说,就是都以某种方式在使用它。不过它为什么是个函数呢,明明就一个符号而已啊?

    $等同于jQuery
    $(document).ready()等同于jQuery(document).ready()
    

     注意上面的区分大小写

    ======================================================================

    下面我们就说说jq的编写形式吧

    大多数情况下,jquery代码的编写,都支持下面3种形式

    【1】

    $(document).ready(function(){
          ........jquery代码...........
    });
    

    【2】

    $().ready(function(){
          ........jquery代码...........
    });
    

     【3】

    $(function(){
          ........jquery代码...........
    });
    

     在我们日常使用中最常用的是【1】【3】这2种,当然个人比较偏爱第三种,呵呵。

    注意:有时候我们自己编写的jquery代码出现莫名其妙的问题,看似正常的代码,但是就是在运行的时候出错了,那么请先检查一下你的代码有没有放在$(document).ready()方法中运行。

    =================================================================

     说了这么多,现在我们来写一个简单的例子,本来根据写代码的国际惯例,应该的写一个hello world!这样的千篇一律的东西,太坑爹了,但是还是要写下。(说到弹窗,我们一般都是用alert),好了,废话不多说,下面上代码,仔细看哦,这是我们第一个实例代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>实例</title> 
    <!-- 引入jQuery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){                //等待dom元素加载完毕
        alert("Hello World");    //弹出一个框
    }); 
    </script> 
    </head> 
      
    <body> 
    
    </body> 
    </html>
    

    下面我们在写一个点击出现弹窗的效果(既然是点击出现弹窗效果,那么就会用到这2个【click和alert】,不懂就谷歌、百度吧!具体的还是翻下jq手册)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>实例</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){                           //等待dom元素加载完毕
    	$("input").click(function(){   //获取页面中所有input元素,给每一个input元素添加click事件
    	    alert("我被点击了!");       //弹出提示框,并显示我被点击了!
        })
    })
    </script>
    </head>
    
    <body>
    <input type="submit" value="请点击我"/>
    </body>
    </html>
    

     ps.要是看不懂的话,我会在下面的教程中讲到。

  • 相关阅读:
    集合容器概述
    enum枚举类型
    this关键字、this()、super()
    重载与重写
    nginx报404的可能错误
    nginx常用命令
    vbs系统监控
    VBS windows监控
    Oracle SQL优化[转]
    shell /bin/bash^M: bad interpreter错误解决
  • 原文地址:https://www.cnblogs.com/huige728/p/2610064.html
Copyright © 2011-2022 走看看