首页 > Web开发 > 详细

jquery学习之1-选择器

时间:2014-03-21 21:56:37      阅读:523      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   <script language="javascript">
10    $(document).ready(function()
11   {
12       alert("欢迎来到baseselector页面");
13       
14       //***********************改变id为button1的背景颜色********
15      $("#bt1").click(
16      function()
17      {    
18       $("#div1").css("background","green");     
19      }
20      );
21       
22       $(".bt2").click(
23      function()
24      {
25       $(".div2").css("background","pink");     
26      }
27      );
28       $("#bt3").click(function()
29       {
30           $("div").css("background","grey");
31       });
32       
33   });
34   
35   //****************************************************** 
36   </script>
37   </head> 
38   <body>
39     <input type="button"  id="bt1" value="改变div1背景颜色为绿色" ></input>
40     <input type="button" class="bt2" value="改变div2背景色为粉色" ></input>
41     <input type="button"  id="bt3" value="改变所有div背景颜色为黑色" ></input>
42     
43     <div id="div1" style="background:grey;border:1px solid;width:20%;height:30%;float:left">div1</div> 
44      <div class="div2"  style="background:white;border:1px solid;width:20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
45      <br>
46   </body>
47 </html>
bubuko.com,布布扣

jquery选择器的使用下例子,其他可以参考chm学习,需要注意的地方,每个选择器的click事件功能代码需要放在ready的function中

jquery学习之1-选择器,布布扣,bubuko.com

jquery学习之1-选择器

原文:http://www.cnblogs.com/luckyflower/p/3616743.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!