先举一个例子,认识一下Jquery:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//将dom对象转换成jquery对象 $(document)
//ready的作用就是当页面中的dom加载完毕后执行参数中的函数
$(document).ready(function()
{
//1、$("a")是获得a标签的对象
$("a").click(function(){
alert("有反应");
});
});
</script>
<body>
1、使用$("a")获得a标签的Jquery对象,再使用其click方法,获得点击事件,在该事件中写了一个方法
<hr />
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
由上所述,Jquery无非就是把DOM对象转换成Jquery对象来使用,转换成Jquery对象以后,就可以使用Jquery对象里面自带的一些方法,给我们带来方便
那么,如上面所说,Jquery无非就是把DOM对象转换成Jquery对象来使用,那么Jquery对象和DOM对象之间如何互相转换呢?让我们看如下代码:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//2.1、 DOM对象和Jquery对象的互相转换。因为下面的P标签中有一个唯一的id="clickMe", 所以我们也可以直接用$("#clickMe")来获得该对象
//点击下面的文字将弹出该对象里面的内容
var pElement = document.getElementsByTagName("p")[0]; //获得dom对象
pElement.οnclick=function(){
alert("这是通过DOM对象弹出来的:" + pElement.innerHTML); //DOM 是innerHTML属性
}
var pElementJquery = $(pElement); //将DOM对象转换成jquery对象
pElementJquery.click(function(){
alert("这是通过jquery对象弹出来的:" + pElementJquery.html()); //Jquery是html()方法
});
});
</script>
<body>
<p id="clickMe" style="color:#F00; cursor:hand">点击我,弹出我! </p>
</body>
DOM---->Jquery对象: $("DOM对象") DOM对象的获得方法再次就不废话了
Jquery--->DOM对象: Jquery : var cm = $("#clickMe") ---->DOM: var t = cm[0] 或者是使用jquery里面自带的方法 var t = cm.get(0)
由此可见 ,jquery对象其实获得是一个DOM对象的一个数组