`

JQuery 第一天

阅读更多
demo01.jsp 基本步骤
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>JQuery DEMO 01</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!--引入 jquery.js 文件-->
	<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
	<script type="text/javascript">
			$(document).ready(function(){ //等待Dom元素加载完毕
					alert("Hello world!");
				});
			
			$(document).ready(function(){ //等待Dom元素加载完毕
					alert("Hello JQuery!");
				});
			//省略的写法
			$(function(){alert("Hello $!");});
	</script>
  </head>
  <body>
   	<a href="index.jsp">Back to Index Page</a>
  </body>
</html>


demo02.jsp  JQuery获取元素对象 以及方法级联
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>JQuery DEMO 02</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		#menu{width:200px;}
		.sub_menu{background-color:#273883;cursor:hand;}
		.high_light{color:white;background:black;}
		div{padding:0px;margin:10px 0;}
		div a{display:none;float:left;width:200px;background-color:white;color:blue;}
	</style>
	<!--引入 jquery.js 文件-->
	<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".sub_menu").click(function(){
				//alert("Hello world!");
				$(this).addClass("high_light") //为当前元素添加 high_light 类选择器
				.children("a").show().end()    //将对象子节点的 a 元素显示出来 end-重新定位到上次操作的元素
				.siblings().removeClass("high_light")  //将相邻的兄弟节点 去掉 high_light 选择器
				.children("a").hide();  //将兄弟节点下的 a 元素隐藏掉
			}
			);
		})
	</script>
  </head>
  <body>
  		 	<a href="index.jsp">Back to Index Page</a>
 			<div id="menu">
					<div class="sub_menu">
						<span>BLOG PAGE</span>
						<a href="demo02.jsp">blog article</a>						
						<a href="demo02.jsp">blog photo</a>						
						<a href="demo02.jsp">blog bbs</a>						
						<a href="demo02.jsp">blog manager</a>						
					</div>
					<div class="sub_menu">
						<span>BLOG PAGE</span>
						<a href="demo02.jsp">blog article</a>						
						<a href="demo02.jsp">blog photo</a>						
						<a href="demo02.jsp">blog bbs</a>						
						<a href="demo02.jsp">blog manager</a>						
					</div>
					<div class="sub_menu">
						<span>BLOG PAGE</span>
						<a href="demo02.jsp">blog article</a>						
						<a href="demo02.jsp">blog photo</a>						
						<a href="demo02.jsp">blog bbs</a>						
						<a href="demo02.jsp">blog manager</a>						
					</div>
 			</div>
  </body>
</html>




demo03.jsp Dom对象和Jquery对象的转化
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>JQuery DEMO 03</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	</style>
  </head>
  <body >
  		 	<a href="index.jsp">Back to Index Page</a>
			<h1 id="bd"><font color="red">Page Demo 03</font></h1>
  </body>
  	<!--引入 jquery.js 文件-->
	<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
	<script type="text/javascript">
			//dom 的操作
			var str_html1=document.getElementById("bd").innerHTML;
			alert("Dom method:"+str_html1);
			//JQuery 操作的方式
			var str_html2=$("#bd").html();
			alert("JQuery method:"+str_html2);
			
			//dom 对象可以转化为JQuery对象
			var objBD = document.getElementById("bd");
			alert("objdb:"+objBD.innerHTML);
			//转换为JQuery对象
			var $bd = $(objBD);
			alert("objdb"+$bd.text());
	</script>
</html>


demo04.jsp Dom对象和 Jquery对象事件操作对比
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>"><title>JQuery DEMO 04</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
        <style type="text/css">
        </style>
        <!--引入 jquery.js 文件-->
        <script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
        </script>
        <script type="text/javascript">
        	$(document).ready(function(){  //等待 dom 元素加载完毕
				var $cr = $("#cr"); //JQuery对象
				var cr = $cr[0]; //Dom对象,或者 $cr.get(0);
				//点击时
				$cr.click(function (){
//					if(cr.checked){                            //Dom操作方式
//						alert("感谢你的支持!");
//					}
					if($cr.is(":checked")){
						alert("感谢你的支持!");         //JQuery操作方式
					}else{
						alert("一定要支持!");
					}
				});
			});
        </script>
    </head>
    <body>
        <a href="index.jsp">Back to Index Page</a>
		<form action="#" method="post">
			是否同意协议:<input type="checkbox"	id="cr"><label>我已经阅读了上面的协议</label>		
		</form>
    </body>
</html>



demo05.jsp JQuery对象访问元素更改CSS样式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>"><title>JQuery DEMO</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
        <style type="text/css">
            #sp {
                font-size: 40px;
                font-weight: 300;
                color: blue;
            }
        </style>
        <!--引入 jquery.js 文件-->
        <script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $("#sp").click(function(){
                    alert("Hello JQuery!");
					
					//在alert之后 要把这个对象的CSS样式加以改变
                    $("#sp").css("font-size", "20px");
                    $("#sp").css("color", "red");
                });
            });
        </script>
    </head>
    <body>
        <a href="index.jsp">Back to Index Page</a>
        <span id="sp">This is a Span Area!</span>
    </body>
</html>



demo06.jsp JQuery访问CSS样式 类选择器,ID选择器,标签选择题
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>"><title>JQuery DEMO</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Arial;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }
        </style>
			     <!--引入 jquery.js 文件-->
        <script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
        </script>
        <script type="text/javascript">
         		$(function(){
						//所有class为one的元素的背景颜色改变
						$(".one").css("background","#eeeeee");	
						//所有id为one的元素的字体颜色改变
						$("#one").css("color","blue");
						//改变所有标签为 div
						$("div").css("font-size","12px");
						//所有元素
						$("*").css("border","1px inset red");
						//改变所有id为two,标签span的元素
						$("#two,span").css("background-color","yellow");
				});
        </script>
    </head>
    <body>
        <a href="index.jsp">Back to Index Page</a>
        <div class="one" id="one">
            id 为 one,class为one的div
            <div class="mini">
                class 为 mini 的 div
            </div>
        </div>
        <div class="one" id="two" title="test">
            id 为 two,class为one的div,title为test 的div
            <div class="mini" title="other">
                class 为 mini 的 div,title为other的div
            </div>
            <div class="mini" title="test">
                class 为 mini 的 div,title为test的div
            </div>
        </div>
        <div class="one">
            <div class="mini">
                class 为 mini 的 div
            </div>
            <div class="mini">
                class 为 mini 的 div
            </div>
            <div class="mini">
                class 为 mini 的 div
            </div>
            <div class="mini">
            </div>
        </div>
        <div class="one">
            <div class="mini">
                class 为 mini 的 div
            </div>
            <div class="mini">
                class 为 mini 的 div
            </div>
            <div class="mini">
                class 为 mini 的 div
            </div>
            <div class="mini" title="test">
                class为mini,title为 test 的div
            </div>
        </div>
        <div style="display:none" class="none">
            style的display为 none的 div
        </div>
        <div class="hide">
            class为 hide的 div
        </div>
        <div>
            包含 input type为 hidden的 div<input type="hidden" size="8"/>
        </div><span id="mover">正在执行动画的span元素</span>
    </body>
</html>



另外,所学的课件太大了无法上传
有JQuery API帮助文档  chm 格式,便于学习其中的方法,很方便.至于JQuery如何去配置,网上都有的,引入js文件即可
分享到:
评论

相关推荐

    jQuery 第一天资料.zip

    jQuery 第一天资料.zip

    疯狂Jquery第一天(Jquery学习笔记)

    好了开始我的Jquery第一天。 我也是从Hello wrod!开始的。关于jquery 的引用我直接一笔带过。如下: 代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;jquery 链式操作&lt;/title&gt; [removed][removed] [removed...

    传智播客JQuery01

    传智播客的JQuery第一天的第一部分视频

    (三天熟练jquery)第一天

    在“(三天熟练jQuery)第一天”的课程中,我们主要会接触到jQuery的基础知识,这是一个非常流行的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和AJAX交互等任务。jQuery的易用性和广泛的社区支持使其...

    传智播客JQuery01第二部分

    传智播客JQuery第一天第二部分

    学习jquery mvc第一天,hello

    【标题】:“学习jQuery MVC第一天,Hello” 这篇文章的标题表明了作者正开始探索jQuery与MVC(Model-View-Controller)架构的结合使用。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及...

    JQuery自学第一天.docx

    JQuery对象是一个集合,包含一个或多个DOM元素,提供了一系列的方法来操作这些元素。 5. **静态方法与实例方法**: - 静态方法(如`$.each()`)是直接通过类名调用的,不依赖于特定的实例。 - 实例方法(如`$(.....

    一天弹一次jquery.cookie插件.zip

    标题"一天弹一次jquery.cookie插件.zip"指的是一个专门设计的jQuery插件,这个插件的核心功能是控制弹窗(通常是指网页中的提示、广告或通知)只在用户首次访问或者关闭后的一天内显示一次。这种功能在网页用户体验...

    jquery教程 15天学会jquery(完整版)

    **第5天至第10天:jQuery进阶** 1. **插件开发**:学习如何编写和使用jQuery插件,扩展jQuery的功能。 2. **遍历与过滤**:掌握`.each()`, `.siblings()`, `.children()`, `.parent()`, `.closest()`等遍历和过滤...

    jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器

    jQuery是由John Resig创建的一个轻量级、高性能的JavaScript库,它的核心理念是“写得更少,做得更多”。jQuery通过提供一套简洁的API,极大地减少了开发者编写JavaScript代码的复杂度,提高了开发效率。 **使用...

    简单的jquery.cookie插件使弹窗点击关闭后一天弹一次.zip

    在这个场景下,`jquery.cookie` 插件的应用可以帮助我们实现一个更智能的弹窗策略:用户关闭弹窗后,一天内不再显示。接下来,我们将详细讲解如何使用 `jquery.cookie` 插件以及实现这个功能的具体步骤。 首先,`...

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    在深入探讨jQuery第4天的学习知识点之前,先简要介绍一下jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务,极大地提高了开发者的效率。今天我们将主要关注...

    jQuery第5天知识点:隐式迭代、链式编程、jQuery插件.7z

    链式编程是jQuery设计的一大亮点,它允许开发者在一个语句中连续调用多个方法。因为每次方法调用都会返回一个jQuery对象(通常是原始或修改后的对象),所以可以继续调用其他方法。例如: ``` $('p').addClass('...

    15天学会jQuery 初学

    #### 第0天:认识jQuery - **What**:jQuery是一个优秀的JavaScript库,能够让我们仅用少量的代码就能创造出美观的页面效果。它的出现让JavaScript变得更加有趣和易于使用。 - **Why**:为什么应该考虑使用jQuery...

    (三天熟练jquery)第二天.zip

    在“(三天熟练jQuery)第二天”的课程中,我们主要聚焦于深入理解jQuery库的基础知识,以及如何有效地利用它来提升Web开发效率。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和...

    15天学会jQuery 15天学会jQuery

    第一天:jQuery基础 - jQuery引入:学习如何在HTML文档中引入jQuery库,了解CDN和本地引入的区别。 - 选择器:掌握jQuery中的基本选择器(ID选择器、类选择器、元素选择器等)以及组合选择器,用于高效地定位DOM元素...

    jquery15.rar

    在第一天的学习中,我们将了解jQuery的基本概念,包括如何引入jQuery库到HTML文档中,以及使用"$"符号来调用jQuery方法。我们还将学习选择器,这是jQuery中最基本的部分,用于选取HTML元素,如ID选择器、类选择器和...

    尚硅谷jQuery视频教程(25集)

    尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的练习【】13.尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    15天学会jQuery

    第一天:jQuery基础 1. jQuery引入:了解如何在HTML文档中引入jQuery库,包括CDN链接和本地文件引入。 2. jQuery选择器:学习基本的选择器(ID、类、元素),组合选择器,属性选择器等,以及如何利用它们高效地选取...

Global site tag (gtag.js) - Google Analytics