jQuery系列01---jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别

最新推荐文章于 2024-10-07 17:45:00 发布

daijope

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量574

点赞数

分类专栏： jQuery 文章标签： jquery stylesheet function html 框架

本文链接：https://blog.csdn.net/daijope/article/details/7014146

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.jQuery优秀的Javascrīpt框架。官方网站jquery.com，可以下载压缩的或者开发版的jQuery。

2.下面是一些入门程序，通过程序学jQuery。

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
				//ready 方法的作用是当页面中的dom加载完毕后执行参数中的函数
				$(document).ready(function() {
					alert("hello world");	
				});
		</script>
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
				//ready 方法的作用是当页面中的dom加载完毕后执行参数中的函数
				$(document).ready(function() {
					alert("hello world");	
				});
		</script>
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

 <!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
		$(document).ready(function(){
			alert("hello");	
			
		});
		$(document).ready(function(){
			alert("world");	
		});		
		</script>
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

 <!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
			window.onload = function() {
				var myLinks = document.getElementsByTagName("a");
				for (var i = 0; i < myLinks.length; i++) {
					myLinks[i].onclick = function() {
						alert("hello world");	
					}
				}
			}
				
		</script>
  </head>
  
  <body>
    <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>
  </body>
</html>

04 - 1

 <!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
			$(document).ready(function(){
				$("a").click(function(){
					alert("hello world");	
				});	
			});	
		</script>
  </head>
  
  <body>
    <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>
  </body>
</html>

 <!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<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());
				var cm = $("#clickMe");//获得的是JQuery对象
				
				//jQuery对象转换为DOM对象(第一种方式)			
				var t = cm[0];//t是DOM对象	
				alert(t.innerHTML);
				//jQuery对象转换为DOM对象(第二种方式)
				var s = cm.get(0);
				alert(s.innerHTML);
			});
		</script>
  </head>
  
  <body>
    <p id="clickMe">点击我</p>
  </body>
</html>

简单的几个例子。