JQuery——01

最新推荐文章于 2022-08-01 17:33:57 发布
最新推荐文章于 2022-08-01 17:33:57 发布
阅读量192 收藏
点赞数
分类专栏： jquery学习 jquery Java框架学习 文章标签： jquery学习 jquery Java框架学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/programmer_bai/article/details/55044477
版权

刚开始学Java，其实之前也一直有接触，不过都是一些皮毛，准备从开始好好学习Java，记录一下自己走过的坑。

<%@ 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_01</title>
    
	<style>
		#change_me{
			postion:absolute;
			top:100px;
			left:400px;
			font:24px arial;
		}
		
		#move_up #move_down #color #disappear{
			padding:5px;
		}
		
	</style>
	<script src="js/jquery-3.1.1.min.js"></script>
  </head>
  
  <body>
        <button id="move_up">Move Up</button>
    	<button id="move_down">Move Down</button>
    	<button id="color">Change Color</button>
    	<button id="disappear">Disappear/Re-appear</button>
    
    	<div id="change_me">Make Me Do Stuff</div>
    	<script>
    		$(document).ready(function(){    			
    			$("#move_up").click(function(){
    				$("change_me").animate({top:30},200);
    			});
    			$("#move_down").click(function(){
    				$("change_me").animate({top:500},2000);
    			});
    			$("#color").click(function(){
    				$("change__me").css("color","red");
    			});
    			$("#disappear").click(function(){
    				$("change_me").toggle("slow");
    			});
    		});
    	</script>
  </body>
</html>
这是我第一个有关JQuery的代码，就在这么简单的代码中犯下了很多错。附上我的文件夹


上述代码有四处错误：

1、将css的position属性写成postion，忘记了一个字母i;

2、jquery的文件的引入路径写错了，少写了一个common文件夹；

3、jquery的选择器中在忘记写#号了，所以导致不能进行选择；

4、在改变颜色选择器ID种中多写了一个下划线，        $("change__me").css("color","red"); 导致不能识别。

其实还有一个错误，但是不是代码上的问题，是我在不熟的时候将项目部署在myeclipse自带的tomcat上了，但是运行的tomcat是后装的tomcat7，所以导致一直不能找到自己的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_01</title>
    
	<style>
		#change_me{
			position:absolute;
			top:100px;
			left:400px;
			font:24px arial;
		}
		
		#move_up #move_down #color #disappear{
			padding:5px;
		}
		
	</style>
	<script src="common/js/jquery-3.1.1.min.js"></script>
  </head>
  
  <body>
        <button id="move_up">Move Up</button>
    	<button id="move_down">Move Down</button>
    	<button id="color">Change Color</button>
    	<button id="disappear">Disappear/Re-appear</button>
    
    	<div id="change_me">Make Me Do Stuff</div>
    	<script>
    		$(document).ready(function(){    			
    			$("#move_up").click(function(){
    				$("#change_me").animate({top:30},200);
    			});
    			$("#move_down").click(function(){
    				$("#change_me").animate({top:500},2000);
    			});
    			$("#color").click(function(){
    				$("#change_me").css("color","red");
    			});
    			$("#disappear").click(function(){
    				$("#change_me").toggle("slow");
    			});
    		});
    	</script>
  </body>
</html>



programmer_bai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery——bootstrap概述
qq_63654439的博客
03-07 1205
ui框架 1、美化页面效果 2、简化布局 3、使用现成的组件和插件 下载bootstrap bootstrap地址：https://www.bootcss.com/ 1、在官网下载bootstrap文件 2、在html文件中引入bootstrap bootstrap样式 1、按钮 <a class="btn btn-default" href="#" role="button">Link</a> <input class="btn btn-
jQuery——swiper概述
qq_63654439的博客
03-07 1728
swiper概述 Swiper是纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端 地址：https://swiper.com.cn/ 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
jQuery——常用方法
qq_63654439的博客
03-06 2700
$的作用 1、$其实就是一个函数名，是jQuery的所缩写 2、$可以作为选择器，获取DOM对象对应的jQuery对象 3、$可以将一个DOM对象，转换成一个jQuery对象 4、事件中的this，指向DOM对象，所以需要使用$（this）做转换 5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已 jQuery常用方法 1、index()；获取元素索引 2、text()；获取和设置文本节点 3、css()；获取和设置样式
jQuery——选择器
qq_62981121的博客
03-17 759
选择器 jQuery中的选择器就是一个标记，为了快速获取指定的标签 jQuery中常见选择器： ID选择器 class选择器 element选择器 子代选择器 后代选择器 相邻兄弟选择器 分组选择器... ———————————————— 版权声明：本文为CSDN博主「嘴强程序员」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_...
jQuery——深浅拷贝
世界和我们都不该止步于此
04-18 2935
一.jQuery拷贝对象 把某一个对象拷贝给另外一个对象使用，此时可以使用$.extend()方法 $.extend([deep,]target,object1[,objectN]) //deep：如果deep值为true，那么定义为深拷贝；为false相反（默认false） //target:要拷贝的目标对象 //object1：待拷贝到第一个对象的对象 如果要拷贝的目标对象为空，那么可以直接将数据拷贝到当前这个要拷贝的目标对象 如果要拷贝的目标对象不为空，但是数据名与object有冲突，那么
jQuery——Tab栏切换
NanChen的博客
06-27 5658
简单tab栏切换实现 效果如下： 完整代码：
jQuery——遍历DOM元素的后代元素
Andone_hsx的博客
12-12 4079
任务描述 本关任务：用 jQuery 向下遍历 DOM 节点。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.children()，2. find()。 向下遍历DOM节点 基本的html结构如下（CSS已省略）： &lt;div&gt;div (当前元素) &lt;p&gt;p (儿子元素) &lt;span&gt;span(孙子元素)&lt;/span&gt; ...
jQuery——遍历DOM元素的兄弟元素
Andone_hsx的博客
12-12 2238
任务描述 本关任务：用 jQuery 遍历 DOM 元素的兄弟元素。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.siblings()，2. next() ， nextAll() 3. prev() ，prevAll()。 基本的html结构如下（CSS已省略）：   &lt;div class="container"&gt; &lt;p&gt;p元素&lt;/p&...
jQuery——常用API
@一只躺平的猪@的博客
08-01 877
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
【jQuery——概述】
m0_68437975的博客
03-21 882
1.入门。 一.jQuery的重要思想； 1.写的越少做的越多越好，jQuery是一个兼容多浏览器的JavaScript库，核心理念是write、less、do more（写得更少，做得更多）。 2.链式写法 二.jQuery操作 1.引入jQuery，要使用jQuery JavaScript库，只需要将jQuery对应的“jQuery—X.X.JS”脚本文件引入到页面即可。 <script type=“text/javascript” src=“js/jQuery—1.11.2.js”&
初探jquery——表单应用范例
10-31
初探jquery——表单应用范例
jQuery——学习笔记.md
08-01
jq语法
jQuery——固定导航栏
05-20
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务，使得创建交互式网页变得更加便捷。本篇将详细介绍如何使用jQuery实现一个固定导航栏的功能。 首先，我们要理解“固定定位”...
jquery——API
05-26
**jQuery API 知识详解** jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery 的API设计友好且高效，使得开发者能够以更少的代码实现更多的功能。 ## 1. jQuery ...
基于Springboot和Vue的数码论坛系统设计与实现-源码 数码论坛系统设计与实现代码（高分毕设）
最新发布
07-24
数码论坛系统设计与实现-源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
java程序设计—JAVA局域网飞鸽传书软件设计与实现(源代码+论文)43.rar
07-24
java程序设计，可供正在学习的同学研究参考。
年终总结汇报PPT模板(20)三套材料.pptx
07-24
年终总结汇报PPT模板(20)三套材料.pptx
ListView侧边A-Z快速定位导航.zip
07-24
ListView侧边A-Z快速定位导航
java程序设计—JAVA文件传输(论文+源代码)59.rar
07-24
java程序设计，可供正在学习的同学研究参考。
js table 生成序号_jQuery——动态给表格添加序号
05-26
可以使用 jQuery 来给表格添加序号。可以通过以下步骤来实现： 1. 在表格中添加一个新的列，用于显示序号。 2. 使用 jQuery 遍历表格中的每一行，为每一行添加序号。 下面是一个示例代码： ```html 姓名 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值