【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.要是看不懂的话,我会在下面的教程中讲到。

原文地址:https://www.cnblogs.com/huige728/p/2610064.html