jQuery_基础

summer_021

浏览: 58002 次
性别:
来自: 上海

最近访客更多访客>>

lengzl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&Ajax

jquery

  //$:代表jquery对象
  // ready方法的作用是当页面中的dom加载完毕后执行参数中的函数,jquery提供的
  //将dom对象document 转换成jquery对象 $(document)
  $(document).ready(function()
  {
	  alert("Hello World");
  });

		<script type="text/javascript" src="jquery-1.4.4.js"></script>
			<script type="text/javascript">
				function test1() {
					alert("hello");
				}
				
				function test2() {
					alert("world");
				}
				
				window.onload = test1;
				window.onload = test2;//onload页面加载完,dom关联关系建立好触发,onclick:点击触发,本质是一样的
				
				//引用指向test1  然后改变指向 test2 .  window.onload:引用只能指向一个.
			</script>

 <script type="text/javascript">
  	//将dom对象转成jquery对象,然后调用ready方法
  	
  		//ready:dom一加载完就执行
		  $(document).ready(function()
		  {
			alert("hello");
		  }
		  );
		
		  $(document).ready(function()
		  {
			alert("world");
		  });
		  
		  //jquery的ready方法和window.onload方法有差别:执行时机不同.  多次引用时效果不一样
  </script>

<script type="text/javascript">
  //onload的执行时机在页面加载完毕,并且dom关联关系建立,因此能取到下面的a标签
  window.onload = function()
  {
	var myLinks = document.getElementsByTagName("a");
	for(var i = 0; i < myLinks.length; i++)
	{
		myLinks[i].onclick = function()
		{
			alert("Hello World"); //给每一个超链接对象附加onclick属性
		}
	}
  }
</script>

<a href="#">test1</a><br>
 <a href="#">test2</a><br>
 <a href="#">test3</a><br>
 <a href="#">test4</a><br>
 <a href="#">test5</a><br>
 <a href="#">test6</a><br>

<script type="text/javascript">

  //ready:dom加载完毕触发
  $(document).ready(function()
  {
	 //将网页中的a元素转成jquery对象.  jquery的对象调用click,原生JS中叫onclick属性,到jQuery后把属性转成了方法
	 //$后面跟对象的名字或者标签的名字
	 //$("a")//获得页面上所有的a元素
	$("a").click(function()
	{
		alert("Hello World");//底层是一个遍历的过程
	});
  });
  </script>

 <a href="#">test1</a><br>
 <a href="#">test2</a><br>
 <a href="#">test3</a><br>
 <a href="#">test4</a><br>
 <a href="#">test5</a><br>
 <a href="#">test6</a><br>

  <script type="text/javascript" src="jquery-1.4.4.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
  {
	var pElement = document.getElementsByTagName("p")[0];

    //将DOM对象转换为jQuery对象
	var pElementjQuery = $(pElement);

    alert("DOM对象结果：" + pElement.innerHTML);//获得标签里内容
    alert("jQuery对象结果：" + pElementjQuery.html());//jquery将dom属性innerHTML转成了html()方法

    var cm = $("#clickMe"); //获得的是jQuery对象:#id名字,数组类型的;如果不加#表示标签

    // jQuery对象转换为DOM对象(第一种方式)
	var t = cm[0]; // t是DOM对象,获得数组的第一个属性,就转成了dom对象
	alert(t.innerHTML);

    // jQuery对象转换为DOM对象(第二种方式)
    var s = cm.get(0);
	alert(s.innerHTML); //s是DOM对象
  });
  </script>
 </head>
 <body>
 <p id="clickMe">点击我</p>
 </body>

分享到：

阿呆,生日快乐 | Ajax_原生

2011-08-05 08:12
浏览 717
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery_基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery_基础

评论

发表评论

相关推荐

jQuery_基础4_Ajax_JSON_XML

jQuery_基础3

jQuery_基础2

Ajax_原生

JS学习笔记_基础篇_2

JS学习笔记_基础篇

最近访客更多访客>>