JavaWeb（JQuery基础、JQuery基础案例）

已于 2022-04-06 14:48:01 修改
阅读量116 收藏
点赞数
文章标签： java
于 2022-04-05 23:31:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MysEaiZYH/article/details/123972500
版权

今日内容

一、JQuery基础

1.JQuery概念

1. 概念： 一个JavaScript框架。简化JS开发
	* jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨	是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优	化HTML文档操作、事件处理、动画设计和Ajax交互。

	* JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

//封装方法，根据id来获取元素对象
/*
function get(id){
    var obj = document.getElementById(id);
    return obj;
}*/
function $(id){
   
    var obj = document.getElementById(id);
    return obj;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="js/itcast.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>



<script>
    //1. 根据id获取元素对象
    //var div1 = document.getElementById("div1");
    //var div2 = document.getElementById("div2");
    //var div1 = get("div1");
    //var div2 = get("div2");
    var div1 = $("div1");
    var div2 = $("div2");
    //2.获取标签体内容
    alert(div1.innerHTML);
    alert(div2.innerHTML);




</script>

</body>
</html>

2.JQuery快速入门

2. 快速入门
	1. 步骤：
		1. 下载JQuery
			* 目前jQuery有三个大版本：
				1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
					 功能不再新增。因此一般项目来说，使用1.x版本就可以了，
					 最终版本：1.12.4 (2016年5月20日)
				2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
					 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
					 最终版本：2.2.4 (2016年5月20日)
				3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
					 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
					 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
			* jquery-xxx.js 与 jquery-xxx.min.js区别：
				1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
				2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

		2. 导入JQuery的js文件：导入min.js文件
		3. 使用
			var div1 = $("#div1");
			alert(div1.html());

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>



<script>
   //使用JQuery获取元素对象
    var div1 = $("#div1");
   alert(div1.html());
    var div2 = $("#div2");

   alert(div2.html());

</script>

</body>
</html>

3.JQuery对象和JS对象区别与转换

3. JQuery对象和JS对象区别与转换
	1. JQuery对象在操作时，更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>



<script>
  //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当做数组来使用
    //对divs中所有的div 让其标签体内容变为"aaa"
  for (var i = 0; i < divs.length; i++) {
     
      //divs[i].innerHTML = "aaa";
      $(divs[i]).html("ccc");
  }

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");

  alert($divs.length);//也可以当做数组使用

  //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb"; // 错误

  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";


    /*
        1. JQuery对象在操作时，更加方便。
        2. JQuery对象和js对象方法不通用的.
        3. 两者相互转换
            * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
            * js -- > jq : $(js对象)
     */

</script>

</body>
</html>

4.JQuery事件绑定&入口函数&样式控制

4. 选择器：筛选具有相似特征的元素(标签)

	1. 基本操作学习：
		1. 事件绑定
			//1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });
		2. 入口函数
			 $(function () {
	           
   			 });
			 window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
		3. 样式控制：css方法
			 // $("#div1").css("background-color","red");
      		$("#div1").css("backgroundColor","pink");

事件绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        // 给b1按钮添加单击事件
        window.onload = function(){
     
            //1.获取b1按钮
            $("#b1").click(function(){
     
                alert("abc");
            });

        }
    </script>

</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">

</body>
</html>

入口函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
       $(function () {
     
            //1.获取b1按钮
           $("#b1").click(function(){
     
               alert("abc");
           });
       });
       /* function fun1(){
            alert("abc");
        }

        function fun2(){
            alert("bcd");
        }
        window.onload = fun1;
        //window.onload = fun2;
*/

      /* $(function(){
           alert(123);
       });

       $(function(){
           alert(234);
       });
*/       
        /*
             window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
          */       
    </script>

</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">

</body>
</html>

样式控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

      $(function(){
     
          // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink");
      });


    </script>

</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="点我" id="b1">

</body>
</html>

5.JQuery选择器_基本选择器

	2. 分类
		1. 基本选择器
			1. 标签选择器（元素选择器）
				* 语法： $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器：
				* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
     
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
     
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
     
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
						
	 </style>
	<script type="text/javascript">
		// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		$(function () {
     
			$("#b1").click(function () {
     
				$("#one").css("backgroundColor", "red");
			})
		})
		// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		$(function () {
     
			$("#b2").click(function () {
     
				$("div").css("backgroundColor", "red")
			})
		})
		// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		$(function () {
     
			$("#b3").click(function () {
     
				$(".mini").css("backgroundColor", "red");
			})
		})
		// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		$(function () {
     
			$("#b4").click(function () {
     
				$("span, #two").css("backgroundColor", "red");
			})
		})

	</script>
   
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	   <div id="one">
	    	 id为one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		 </div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>
		
		<input type="text" value="zhang" id="username" name="username">
		
	</body>
</html>

效果：

在这里插入图片描述
在这里插入图片描述

6.JQuery选择器_层级选择器

		2. 层级选择器
			1. 后代选择器
				* 语法： $("A B ") 选择A元素内部的所有B元素		
			2. 子选择器
				* 语法： $("A > B") 选择A元素内部的所有B子元素

后代选择器：

在这里插入图片描述

子选择器：

在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
     
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
     
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
     
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
    <script type
最低0.47元/天 解锁文章
509Fu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery项目案例
05-12
Jquery案例，里面有图片的自动切换，留言板，编辑框，都是用Jquery技术开发的，代码清晰，
JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
Joker的博客
10-18 205
JQuery基础 下面案例用到的资源包： 1.内容 1. JQuery 基础： 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 6. 案例 2.JQuery概念 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaS...
Web前端JQuery入门实战案例
weixin_33722405的博客
02-24 545
前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset = "UTF-8"> <title>dashu</title> <style> div { height:...
值得 Web 开发人员学习的20个 jQuery 实例教程
weixin_34279579的博客
01-07 118
　　这篇文章挑选了20个优秀的 jQuery 实例教程，这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平。其中，既有网站中常用功能的的解决方案，也有极具吸引力的亮点功能的实现方法，相信通过对这些教程的学习能够带给您很大的收获。 您可能感兴趣的相关文章 精心推荐几款极好的 JavaScript 文件上传插件 精心推荐几款白富美型 jQuery 图片轮播插件 精心推荐几款...
jquery项目案例_web前端项目实战旅行社网【12】
weixin_28956763的博客
12-06 274
本章主要开始如果通过第一个 PC 端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．整体设计首先，我们要了解一下测试工具。这里提供两种测试工具，一种是 Chrome 自带的移动端测试工具，另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准，他模拟了主流的手机，并且引擎是 webkit。首先，我们介绍一下分辨率，通过 Chrome 移动...
基于javaweb+jquery+mysql的仿猫眼订票系统
03-08
【标题】"基于javaweb+jquery+mysql的仿猫眼订票系统"是一个实际的项目开发案例，它结合了多种技术来实现一个类似于猫眼电影的在线订票功能。这个系统利用JavaWeb作为后端开发平台，jQuery作为前端交互库，而MySQL则...
04-javaWeb-jQuery.7z
07-02
jQuery jquery中效果 案例1-弹出广告 选择器总结 案例2-隔行换色 属性和css操作总结 对属性的操作 对css操作 案例3-全选或者全不选 jQuery数据遍历、val设置、标签设置、元素创建  案例4-省市联动 选择...
javaWeb最基础项目-购物车系统
07-30
【JavaWeb最基础项目-购物车系统】是一个适合初学者入门的编程实践案例，它涵盖了JavaWeb开发中的基本概念和技术，对于刚接触这个行业的人来说，这是一个很好的起点。在这个项目中，我们将探讨以下几个关键知识点： ...
34个经典javaweb项目实例
最新发布
03-14
JavaWeb是Java技术在Web应用中的实践，涵盖了服务器端编程、网页动态...通过这34个经典JavaWeb项目实例，开发者可以系统地学习和实践JavaWeb开发的各个环节，提升实际开发能力，为构建复杂的企业级应用打下坚实基础。
javascript/jquery全过程详解
06-14
讲师介绍：资深大数据、java讲师，十...在此基础上继续延伸讲解了jquery语言,实现"wirte less,do more",更高效简洁的完成开发要求,满足企业中的工作需要! 可访问csdn学习更多课程: https://edu.csdn.net/lecturer/1626
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
06-29
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
jquery项目
05-05
比较实用的jquery项目，打开即能运行
JQuery项目
10-16
jQuery项目实例开发，案例齐全，全面 对你肯定有很大帮助！
jquery经典实例60例-动画实例
06-01
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例
Web------jquery的小案例
qq_44241861的博客
02-18 261
文章目录一、jQuery介绍二、jQuery基本语法三、 应用案例 一、jQuery介绍 1、简介 jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 之前的js代码和HTML是写在一起的，现在可以把js代码独立出来，创建一个js目录，里面用来放单独的js代码，然后在H...
Web之JQuery用法和小例子
中國颜值半壁江山的博客
10-19 261
1、jQuery中文文档：https://jquery.cuishifeng.cn/
Web 前端学习 之jQuery 案例(表单表格增删)
Weary_PJ的博客
08-04 491
Web 前端学习 之jQuery 案例(表单表格增删) 实现目标 首先来看一下要实现的目标效果 看似是一个很基本的操作,但是要考虑的细节还是比较多的,本次案例仅仅使用jq来完成,在项目中还需要结合后端,但是本质类似 页面源代码 html <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Untitled Document</tit
JQuery8：实战案例
尹成的技术博客
11-14 654
#简介 公钥基础设施(Public Key Infrastructure)是为了能够更有效地运用公钥而制定的一系列规范和规格的总称，一般根据其英语缩写而简称PKI。PKI只是一个总称，而并非指某一个单独的规范和规则。例如，RSA公司制定的公钥密码规范就是PKI的一种。 #PKI组成要素 用户：使用PKI的人 认证机构：颁发证书的人 仓库：保存证书的数据库 说明：PKI中用户和认证机构不仅局限于“人...
java前端开发jquery_web前端开发JQuery常用实例代码片段(50个)
weixin_29006187的博客
03-02 468
本文给大家展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中！我希望你在这一文章中能找到有帮助的东西。1. 如何创建嵌套的过滤...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值