学习jquery基础的一点笔记

csuliunian

浏览: 69058 次
性别:
来自: 长沙

最近访客更多访客>>

leeyb

lyne15730

qiuguoqiang2002

yancl443

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

jquery html javascript css 3wschool

最近用到了jquery 就自己学习了一下，这里是入门的时候自己做的一些笔记（参考3wschool）。还有一些自己写的简单的练习代码

一、三种不同的加载jquery文件的方法
1.本地文件（要提前将js文件下载下来）加载<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
一般有两份 jQuery 拷贝可供下载，一是缩小版（由 Google Closure Compiler），另一个是未压缩版（供 debugging 或 reading）

可以到http://download.csdn.net/source/3561704下载
2.加载Google 的 CDN<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
3.加载Microsoft 的 CDN<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
二、jquery的使用（推荐格式）
1.把所有 jQuery 代码置于事件处理函数中
2.把所有事件处理函数置于文档就绪事件处理器中
3.若文件很大把 jQuery 代码置于单独的 .js 文件中

如下一段代码（将这段代码保存一个html后缀名的文件就可以看到他的效果了）：
<html>
   <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){ --文档就绪事件处理器，防止文档在完全加载（就绪）之前运行 jQuery 代码。这个是以后都要用到的
              $("p").click(function(){ --事件处理函数，根据自己的需要去调用相应的函数
                  $(this).hide(); --具体要执行的动作
       });
          });
      </script>
   </head>
   <body>
      <p>If you click on me, I will disappear.</p>
   </body>
</html>

三、jquery使用的语法
基础语法是：$(selector).action()
    1.美元符号定义 jQuery
    2.选择符（selector）“查询”和“查找” HTML 元素
    3.jQuery action() 执行对元素的操作
例如:$(this).hide() - 隐藏当前元素

四、jquery的选择器:$()
1.元素选择器
2.属性选择器
3.css选择器

五、jquery的事件
1.jQuery 事件处理函数是 jQuery 中的核心函数。事件处理函数是当 HTML中发生事件时自动被调用的函数
2.事件添加的不同，如上面的例子对<p>元素的单击事件的调用
3.记着要特别注意将事件处理放在文档就绪事件处理器中

然后自己写了一些练习的代码，都是最基础的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Selector</title>
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<link href="select.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
			$(document).ready(function(){
				<!--选择属性class为one的所有的p元素-->
				$("p.one").click(function(){
					<!--选择当前元素-->
					$(this).hide(3000);
				});
				
				<!-- 选择所有的p元素,也包括class=one的只是按顺序先执行了上面那个方法,若将这个方法放到上面那个方法前则会先执行这个方法-->
				$("p").click(function(){  
					$(this).hide("slow");
				});
				
				<!--选择id=two的第一个元素（注意下面有两个id=two的元素）-->
				$("p#two").click(function(){
					$(this).slideToggle("slow");
				});
				
				<!--选择input类型为button的元素,后面的:first指的是第一个button按钮-->
				<!--first（第一个）  last（最后一个）  even（所有偶数） odd（所有奇数）-->
				$(":button:first").click(function() {
					<!--选择全部的元素-->
					$("*").hide();
				});
				
			});
		</script>
	</head>
	<body>
		<p> 第一个p。点击我，我就消失了</p>
		<p class="one">第二个p。 点击我，我也消失</p>
		<p id="two"> 第三个p。点击我，我会消失然后再重现</p>
		<span id="two">点击我，看看我会不会消失然后重现---不会</span>
		<br>
		<input type=button value="点击我，全部的都会消失"></input>
	</body>
</html>

用到的css文件

body {
	background-color:#778866;
	width:1000px;
	height:800px;
}

p {
	font-family:"Arial Black";
	font-size:12px;
}

p.one {
	font-family:"Book Antiqua";
	font-size:20px;
}

#two {
	font-family:"Arial Rounded MT Bold";
	font-size:30px;
}

分享到：