`
webcode
  • 浏览: 5954383 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Jquery学习笔记（1）

 
阅读更多

先举一个例子，认识一下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.onclick=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对象的一个数组

分享到：
| JS中数组的应用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics