JQuery 第一天

最新推荐文章于 2022-04-20 21:53:40 发布
最新推荐文章于 2022-04-20 21:53:40 发布
阅读量111 收藏
点赞数
分类专栏： Ajax JQuery Ext js... 文章标签： jQuery CSS Java JSP Blog ViewUI
Ajax 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
JQuery
8 篇文章 0 订阅
订阅专栏
Ext js...
8 篇文章 0 订阅
订阅专栏
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文件即可
kakunaka
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
疯狂Jquery第一天(Jquery学习笔记)
10-28
疯狂Jquery第一天的学习笔记主要涵盖了Jquery的入门知识，包括了Jquery的引用方式、链式操作的介绍和实际应用。下面是根据提供的内容，详细解释的一些知识点。 ### Jquery的引用 Jquery作为一个JavaScript库，其...
JQuery自学第一天.docx
04-15
JQuery对象是一个集合，包含一个或多个DOM元素，提供了一系列的方法来操作这些元素。 5. **静态方法与实例方法**： - 静态方法（如`$.each()`）是直接通过类名调用的，不依赖于特定的实例。 - 实例方法（如`$(.....
jQuery第一天
weixin_42366583的博客
06-02 229
jquery的概述什么是JQueryjQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。核心理念：write less，do morejQuery的引入学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用script标签导入&lt;script src="../js/jquery-1.11.0.js" type...
利用Javascript获取当月第一天和当前日期(来自刚入行三个月菜鸟的第一篇Blog)
dutertk的博客
11-03 1695
利用Javascript获取当月第一天和当前日期(来自刚入行三个月菜鸟的第一篇Blog) <script type="text/javascript"> var myDate = new date(); var year = myDate.getFullYear(); var month = myDate.getMonth()+1 //获取当前月份(0-11,0代表1月，所以要加1);
Java获取本月第一天是本周第几天
厂长的博客
06-23 4283
Calendar.DAY_OF_WEEK 今天是本周第几天 将几天设为本月第一天 cld.set(Calendar.DATE, 1);
学习jquery的第一天
qq_66579387的博客
03-14 1051
1.原生js
jQuery原理第一天
码小余の博客
06-23 2421
jQuery原理 jQuery的基本结构 jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现？ ​ 为了避免多个框架的冲突 jQuery如何让外界访问内部定义的局部变量 ​ window.xxx = xxx jQuery为什么要给在自己传递一个window参数？ ​ 为了方便后期压缩代码 ​ 为了提升查找的效率 jQuery为什么要给自己接收一个undefined参数? ​ 为了方便后期压缩代码 ​ IE9以下
学习jQuery的第一天
chnnds的博客
01-05 892
目录 前言 1、jQuery简介 1.1、JavaScript库 1.2、jQuery的概念 1.3、jQuery的优点 1.4、jQuery的入口函数 2、jQuery选择器 2.1、jQuery基本选择器 2.2、jQuery层次选择器 2.3、jQuery筛选选择器 3、jQuery中的排他思想 总结 前言 小编我又回来了，今天又是元气满满的一天，今天又是好好学习的一天。小编我今天又来和大家做分享了。今天是小编接触jQuery的第一天。了解到...
jquery第一天总结
yangnuowei88的专栏
03-21 494
【有奖提问】CSDN论坛第1期专家问答开始        来极客头条，推荐你的博客        下载频道3月领任务~赚下载分！ jQuery总结第一天 分类： JAVAWEB 开发 JS加强 2013-03-21 18:59 62人阅读 评论(0) 收藏 举报 1. JavaScript 库作用及对比 为了简化 JavaScript
学习jQuery第一天总结（一）、each（function）循环函数、jQuery与DOM相互转换、判断是jq还是dom，data函数
m0_57446284的博客
09-26 961
一、JQuery核心基础 jquery的核心是函数，简写$(); 示例： 使用jQuery查找所有元素，并且显示出来 <div> <p id="p_1">迟日江山丽</p> <p>春风花草香</p> <p>泥融飞燕子</p> <p>沙暖睡鸳鸯</p> </div> <script>
jQuery第一天 hide()函数
Sunny笨笨
12-13 724
第一次准备先彻底疏通一遍Jquery才决定就先从hide()函数开始,hide()函数主要的功能就是隐藏属性和各种标签以及form表单的标签.从最近做的项目上看,多数用于需要传值中转.通过与JSTL表达式的匹配使用将标签显示出来或者隐藏 ,便于节省页面的美观和代码的节省.         由于是第一次走一遍疏通大多也是借鉴了W3C上面的例子结合Jquery权威指南的理解.通常$符号就是相当于
jquery第04天.zip
12-21
无论你是想要成为一名专业的前端工程师，还是只是想了解一些基本概念和技能，在这里你都可以获得有用的知识。 在这个系列的视频中，我们将从最基础的HTML、CSS和JavaScript开始，并逐步介绍各种前端开发的核心概念...
jquery第03天.zip
12-21
无论你是想要成为一名专业的前端工程师，还是只是想了解一些基本概念和技能，在这里你都可以获得有用的知识。 在这个系列的视频中，我们将从最基础的HTML、CSS和JavaScript开始，并逐步介绍各种前端开发的核心概念...
jQuery第3天笔记
qq_36699881的博客
04-20 737
jQuery第3天 目标 jQuery操作类名方法 jQuery操作标签属性方法 jQuery操作标签内容方法 jQuery动态创建元素 jQuery动态追加元素 jQuery动态删除元素 案例： 案例1：下拉菜单 案例2：手风琴轮播图 案例3：淡入淡出轮播图 一、复习和扩展 jQuery中文网站：http://jquery.cuishifeng.cn/index.html 1、jQuery操作类名 1.1 添加类名 语法：jQuery对象.addClass(‘类名’); 代码： <d
数据结构核心知识.pdf
08-21
本资料围绕数据结构的理解、数据的逻辑结构、数据的存储结构、运算、线性表等方面来阐述数据结构核心知识。
HandBrake.deb多媒体格式转换软件
最新发布
08-21
HandBrake.deb多媒体格式转换软件，可在多个平台上运行，该软件支持将视频文件从一种格式转换为另一种常见的格式，如MP4或MKV；用户可以调整视频编解码器、帧速率、比特率等参数；HandBrake还具有一些预设选项，使用户能够快速选择适合他们设备的设置，例如iPhone、Android手机或游戏机。
211维修保养服务管理系统.zip
08-21
211维修保养服务管理系统.zip
vivado2021.1安装教程.docx
08-21
Vivado 2021.1 的安装教程主要包括以下几个步骤。请注意，以下步骤基于 Windows 系统进行说明，对于其他操作系统（如 Linux），安装过程可能有所不同。 一、下载 Vivado 2021.1 访问官网：首先，你需要访问 Xilinx 的官方网站（Xilinx China），并导航到下载页面。 注册账号：在下载前，你需要在 Xilinx 官网上注册一个账号。注册时可能需要填写一些基本信息，如公司名称、地址等。对于个人用户，这些信息可以随意填写。 下载软件：使用注册的账号登录后，你可以找到 Vivado 2021.1 的下载链接。建议下载 Web Installer 版本，因为它可以自动下载并安装必要的组件，同时减少初始下载量。 二、安装 Vivado 2021.1 关闭防火墙和杀毒软件：在安装前，建议暂时关闭电脑的防火墙和杀毒软件，以避免安装过程中可能出现的干扰。 运行安装程序：双击下载的 Web Installer 或直接运行的安装程序（如 Xilinx_Unified_2021.1_xxxx_Win64.exe），开始安装过程。 输入账号密码：安装程序会要求你输入
jQuery七天入门实战教程
开始学习jQuery的第一步是获取jQuery库。可以从官方网站或者其他可信源下载最新版本。指南中推荐了一个包含实例的包"jQueryStarterkit"，下载并解压后，可以直接在项目中使用，实践是学习的关键。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值