Jquery基础

最新推荐文章于 2023-02-02 14:43:20 发布
最新推荐文章于 2023-02-02 14:43:20 发布
阅读量171 收藏
点赞数
文章标签： javascript jquery css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blake2/article/details/114894910
版权

Jquery基础

  1. jQuery 是一个 JavaScript 库。[.js]
  2. jQuery 极大地简化了 JavaScript 编程。
  3. jQuery 很容易学习。

jQuery 简介-----基础知识

     在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

     HTML、CSS、JavaScript，而jQuery 库可以通过一行简单的标记被添加到网页中。

     1.什么是 jQuery ？

          jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]

          jQuery库包含以下功能：

                          1.HTML 元素选取

                          2.HTML 元素操作

                          3.CSS 操作

                          4.HTML 事件函数

                          5.JavaScript 特效和动画

                          6.HTML DOM 遍历和修改

                          7.AJAX

                         https://jquery.com/ 官网

     2.jQuery 安装

          网页中添加 jQuery

          可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

  1. 从 jquery.com 下载 jQuery 库

           Download the compressed, production jQuery 3.6.0

           Download the uncompressed, development jQuery 3.6.0

           如果开发测试使用development jQuery 3.6.0---jquery-3.6.0.js,有注释可以查看具体的内容。

           如果发布使用production jQuery 3.6.0---jquery-3.6.0.min.js，小，节省内存。

           通过script标记导入到网页中：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				alert("测试导入jquery");
			});
		</script>
	</head>
	<body>
	</body>
</html>

        2.通过网络地址导入jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<script src="jquery-3.5.1.js"></script>-->
		<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$(function(){
				alert("测试导入jquery");
			});
		</script>
	</head>
	<body>
	</body>
</html>

     3.jQuery 语法

          通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

          基础语法： $(selector).action()

             1.美元符号定义 jQuery

             2.选择符（selector）"查询"和"查找" HTML 元素

             3.jQuery 的 action() 执行对元素的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery语法</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			//基础语法： $(selector).action()
			//1.美元符号定义 jQuery
			//2.选择符（selector）"查询"和"查找" HTML 元素
			//3.jQuery 的 action() 执行对元素的操作
			//初始化函数
			$(function(){
				//基础语法： $(selector).action()
				$("p").css("background-color","yellow");
				$("p.test1").css("color","red");
				$("#test2").css("font-size","30px");
			});
		</script>
	</head>
	<body>
		  <p>测试jquery的基础语法1</p>
		  <p class="test1">测试jquery的基础语法2</p>
		  <p>测试jquery的基础语法3</p>
		  <p id="test2">测试jquery的基础语法4</p>
	</body>
</html>

           文档就绪事件---就是页面初始化事件：

             Javascript的页面初始化事件

               1.body中提供οnlοad=“函数”

               2.window.οnlοad=function(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<script src="jquery-3.5.1.js"></script>-->
		<script>
			/*
			function  testJavascriptonload(){
				alert("javascript的页面初始化事件11");
			}
			*/
		   //可以出现多个，但是只执行最后一个，不会挨个执行
		   window.onload=function(){
			   alert("javascript的页面初始化事件22");
		   }
		</script>
	</head>
	<!--<body onload="testJavascriptonload()">-->
	<body>
	</body>
</html>

             Jquery的页面初始化事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面初始化事件</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			//原始做法
			$(document).ready(function(){
				alert("jquery的页面初始化事件--原始做法");
			});
			//简化做法
			$(function(){
				alert("jquery的页面初始化事件--简化做法");
			});
			jQuery(function(){
				alert("jquery的页面初始化事件--简化做法");
			});
		</script>
	</head>
	<body>
	</body>
</html>

     4.jQuery 选择器---jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

         1.元素选择器

             jQuery 元素选择器基于元素名选取元素。

         2.#id 选择器

             jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

             页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

         3.class 选择器

              jQuery 类选择器可以通过指定的 class 查找元素。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery选择器</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//元素选择器
				$("p").css("background-color","yellow");
				//.class选择器
				$("p.test1").css("color","red");
				//id选择器
				$("#test2").css("color","blue");
				$("p:first").css("color","green");
				//$("ul li:first").css("font-size","30px");
				//$("ul li:first-child").css("font-size","30px");
				//$("ul li:last-child").css("font-size","40px");
				//$("[href]").css("font-size","20px");
				//$(":button").css("width","180px");
				$("table").css("width","480px");
				$("tr:even").css("background-color","red");
				$("tr:odd").css("background-color","blue");
			});
		</script>
	</head>
	<body>
		<p>测试jquery的基础语法1</p>
		<p class="test1">测试jquery的基础语法2</p>
		<p>测试jquery的基础语法3</p>
		<p id="test2">测试jquery的基础语法4</p>
		<ul>
			<li>name=zhangsan</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li>name=lisi</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li><a href="#">name=wangwu</a></li>
			<li><a href="#">age=23</a></li>
			<li><a href="#">address=xian</a></li>
		</ul>
		<input type="button" value="测试button1"/>
		<input type="button" value="测试button2"/>
		<table border="1px">
			<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
			<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
			<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
			<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
			<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
			<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
		</table>
	</body>
</html>

     5.jQuery HTML

          1.jQuery获取/设置文本元素的值

              jQuery获取元素的值  text()、html() 以及 val()

              text()---返回所选元素的文本内容

              html()--返回所选元素的内容（包括 HTML 标记）

              val()----返回表单字段的值

          2. jQuery设置元素的值  text(value)、html(value) 以及 val(value)

                text(value)---设置所选元素的文本内容

                html(value)--设置所选元素的内容（包括 HTML 标记）

                val(value)----设置表单字段的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery获取/设置文本元素的值</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//alert($("#div1").text()); //得到文本不包括html标记
					//alert($("#div1").html()); //得到文本包括html标记
					//alert($("#text1").text()); //不能得到文本框的内容
					//alert($("#text1").html()); //不能得到文本框的内容
					//alert($("#text1").val()); //得到文本框的内容
					//alert($("#but1").val());//得到按钮的内容
				});
				
				$("#but2").click(function(){
					//$("#div2").text("<a href='#'>测试text(value)</a>");
					//$("#div2").html("<a href='#'>测试html(value)</a>");
					$("#but2").val("测试val(value)");
				});
				
			});
		</script>
	</head>
	<body>
		<h1>jQuery获取元素的值  text()、html() 以及 val()</h1>
		<h2>text()---返回所选元素的文本内容</h2>
		<h2>html()--返回所选元素的内容（包括 HTML 标记）</h2>
		<h2>val()----返回表单字段的值</h2>
		<h2>text(value)---设置所选元素的文本内容【不解释HTML 标记】</h2>
		<h2>html(value)--设置所选元素的内容（解释 HTML 标记）</h2>
		<h2>val(value)----设置表单字段的值</h2>
		<hr>
		<div id="div1">
			<h1>测试jQuery获取元素的值1</h1>
			<h1>测试jQuery获取元素的值2</h1>
		</div>
		<input id="text1"  type="text" value="测试text" />
		<input id="but1"  type="button" value="测试" />
		<hr>
		<input id="but2"  type="button" value="测试" />
		<div id="div2"></div>	
	</body>
</html>

      6.jQuery - 添加元素

          append() - 在被选中元素中插入内容【由上往下】

          prepend() - 在被选中元素中插入内容【由下往上】

          after() - 在被选元素之后插入内容

          before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery - 添加元素</title>
		<style>
			#div1{
				background-color: red;
				width: 300px;
				height: 300px;
				}
		</style>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//append() - 在被选中元素中插入内容
					$("#div1").append("<h1>append()在被选中元素中插入内容1</h1>");
					$("#div1").append("<h1>append()在被选中元素中插入内容2</h1>");
					$("#div1").append("<h1>append()在被选中元素中插入内容3</h1>");
				});
				
				$("#but2").click(function(){
					//prepend() - 在被选中元素中插入内容【由下往上】
					$("#div1").prepend("<h1>prepend1</h1>");
					$("#div1").prepend("<h1>prepend2</h1>");
					$("#div1").prepend("<h1>prepend3</h1>");
				});
				$("#but3").click(function(){
					//after() - 在被选元素之后插入内容
					$("#div1").after("<h1>after() - 在被选元素之后插入内容</h1>");
				});
				$("#but4").click(function(){
					//before() - 在被选元素之前插入内容
					$("#div1").before("<h1>before() - 在被选元素之前插入内容</h1>");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试append"  />
		<input id="but2" type="button" value="测试prepend"  />
		<input id="but3" type="button" value="测试after"  />
		<input id="but4" type="button" value="测试before"  /><br>
		<div id="div1"></div>
	</body>
</html>

     7.jQuery - 删除元素

         remove() - 删除被选元素（及其子元素）【移除】

         empty() - 从被选元素中删除子元素【清空】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery - 删除元素</title>
		<style>
			#div1{
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").empty(); //从被选元素中删除子元素
				});
				$("#but2").click(function(){
					$("#div1").remove(); //选中谁删除谁，包括子元素
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试empty()" />
		<input id="but2" type="button" value="测试remove()" /><br>
		<div id="div1">
			<img src='imgs/avatar5.png'/>
			<h1>测试删除元素</h1>
		</div>
	</body>
</html>

     8.jquery的CSS 操作

        1.为元素添加已经存在的样式

           addClass() - 向被选元素添加一个或多个样式类

           removeClass() - 从被选元素删除一个或多个类

           toggleClass() - 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>为元素添加已经存在的样式</title>
		<style>
			.divclass{
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").addClass("divclass");
				});
				$("#but2").click(function(){
					$("#div1").removeClass("divclass");
				});
				$("#but3").click(function(){
					$("#div1").toggleClass("divclass");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试addClass()">
		<input id="but2" type="button" value="测试removeClass()">
		<input id="but3" type="button" value="测试toggleClass()">
		<br>
		<div id="div1"></div>
	</body>
</html>

          2.设置/获取元素样式

             css() - 设置或返回样式属性

             css(样式属性名称) 返回被选元素的指定样式属性值。

             css(样式属性名称，属性值) 设置被选元素的具有这个样式。

             css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置/获取元素样式</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//css(样式属性名称，属性值) 设置被选元素的具有这个样式。
					//css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
					$("#div1").css({"background-color":"red","width":"300px","height":"300px"});
				});
				$("#but2").click(function(){
					//css(样式属性名称) 返回被选元素的指定样式属性值。
					alert($("#div1").css("width"));
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="设置样式">
		<input id="but2" type="button" value="获取样式">
		<br>
		<div id="div1"></div>
	</body>
</html>

      9.jQuery 事件 

           jQuery 事件方法语法：在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

           页面中指定一个点击事件：

              $("p").click();   下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

                                      $("p").click(function(){ // 动作触发后执行的代码!! });

         常用的 jQuery 事件方法：

  1. $(document).ready(function) 文档完全加载完后执行函数
  2. click(function) 方法是当按钮点击事件被触发时会调用一个函数
  3. dblclick(function)双击元素时，会发生 dblclick 事件。
  4. mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
  5. mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
  6. hover(function)方法用于模拟光标悬停事件。
  7. focus(function)当元素获得焦点时，发生 focus 事件。
  8. blur(function)当元素失去焦点时，发生 blur 事件。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(document).ready(function(){
				alert("$(document).ready(function) 文档完全加载完后执行函数");
			});
			$(document).ready(function(){
				$("#but1").click(function(){
					alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");
				});
				
				$("#but2").dblclick(function(){
					alert("dblclick(function)双击元素时，会发生 dblclick 事件。");
				});
				
				$("#h2").mouseenter(function(){
					alert("4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。");
				});
				$("#h2").mouseleave(function(){
					alert("5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。");
				});
				$("#a1").hover(function(){
					alert("6.hover(function)用于模拟光标悬停事件。");
				});
				
				$("#text1").focus(function(){
					$(this).val("background-color");
				});
				$("#text1").blur(function(){
				   alert($(this).val());
				});
			});
		</script>	
	</head>
	<body>
		<input id="but1" type="button" value="测试单击事件"><br>
		<input id="but2" type="button" value="测试双击事件"><br>
		<h2 id="h2">测试鼠标进入和移出事件</h2>
		<a id="a1" href="#">测试光标悬停事件</a><br><br><br>
		<input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br>
	</body>
</html>

     10.JavaScript 特效和动画【就是元素的隐藏和显示】.

          jQuery hide() 隐藏元素      jQuery show() 显示元素

          jQuery fadeIn() 用于淡入已隐藏的元素    jQuery fadeOut() 方法用于淡出可见元素

          jQuery slideDown() 方法用于向下滑动元素      jQuery slideUp() 方法用于向上滑动元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript 特效和动画【就是元素的隐藏和显示】</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				//jQuery hide() 隐藏元素
				//jQuery show() 显示元素
				
				//jQuery fadeIn() 用于淡入已隐藏的元素。显示元素
				//jQuery fadeOut() 方法用于淡出可见元素。隐藏元素
				
				//jQuery slideDown() 方法用于向下滑动元素。 显示元素
				//jQuery slideUp() 方法用于向上滑动元素。 隐藏元素
				
				$("#but1").click(function(){
					var test=$("#but1").val();
					var img1=$("#img1")
					if(test=="隐藏"){
						//hide() 隐藏元素
						//img1.hide();
						//hide(毫秒数) 隐藏元素
						//img1.hide(5000);
						//hide(毫秒数，隐藏成功以后的处理函数) 隐藏元素
						//img1.hide(5000,function(){alert("隐藏完毕");});
						
						//fadeOut() 隐藏元素
						//img1.fadeOut();
						//fadeOut(毫秒数) 隐藏元素
						//img1.fadeOut(5000);
						//fadeOut(毫秒数，隐藏成功以后的处理函数) 隐藏元素
						//img1.fadeOut(5000,function(){alert("隐藏完毕");});
						
						//slideUp() 隐藏元素
						//img1.slideUp();
						//slideUp(毫秒数) 隐藏元素
						img1.slideUp(5000);
						//slideUp(毫秒数，隐藏成功以后的处理函数) 隐藏元素
						//img1.slideUp(5000,function(){alert("隐藏完毕");});
						
						
						$("#but1").val("显示");
					}else{
						//show() 显示元素
						//img1.show();
						//show(毫秒) 显示元素
						//img1.show(5000);
						//show(毫秒,显示成功以后的处理函数) 显示元素
						//img1.show(5000,function(){alert("显示完毕");});
						
						//fadeIn() 显示元素
						//img1.fadeIn();
						//fadeIn(毫秒) 显示元素
						//img1.fadeIn(5000);
						//fadeIn(毫秒,显示成功以后的处理函数) 显示元素
						//img1.fadeIn(5000,function(){alert("显示完毕");});
						
						//slideDown() 隐藏元素
						//img1.slideDown();
						//slideDown(毫秒数) 隐藏元素
						//img1.slideDown(5000);
						//slideDown(毫秒数，隐藏成功以后的处理函数) 隐藏元素
						//img1.slideDown(5000,function(){alert("隐藏完毕");});
						$("#but1").val("隐藏");
					}
				});
			});
		</script>
	</head>
	<body>
		<input  id="but1" type="button" value="隐藏"/><br>
		<img id="img1" src="imgs/avatar.png"/>
	</body>
</html>

     11.jQuery 效果- 动画

           jQuery animate() ---方法允许您创建自定义的动画。

           语法：

                  $(selector).animate({params},speed,callback);

                  必需的 params 参数定义形成动画的 CSS 属性.
                  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

                  可选的 callback 参数是动画完成后所执行的函数名称。

           jQuery stop()---停止动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery 效果- 动画</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				/*
				语法：
				$(selector).animate({params},speed,callback);
				必需的 params 参数定义形成动画的 CSS 属性.
				可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
				可选的 callback 参数是动画完成后所执行的函数名称。
				jQuery stop() 方法用于停止动画或效果，在它们完成之前。
				*/
				$("#but1").click(function(){
					$("#div1").animate(
						{left:"500px"},
					    5000,
						function(){
						alert("动画执行结束");
					});
				});
				
				$("#but2").click(function(){
					$("#div1").stop();
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button"  value="开始动画"/>
		<input id="but2" type="button"  value="停止动画"/>
		<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
		</div>
	</body>
</html>

     12.HTML DOM 遍历和修改

          jQuery each() 方法：

          语法：  $(selector).each(function(index,element){   })

               必需为每个匹配元素规定运行的函数。

               index - 被遍历出的每一个元素在数组中的位置

               element - 当前的元素【javascript的DOM对象】（也可使用 "this" 选择器）

               each() 方法为每个匹配元素规定要运行的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML DOM 遍历和修改</title>
		<!-- 导入jquery函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<!--
		<script>
			window.onload=function(){
				var domobj=document.getElementById("p4");
				//[object HTMLParagraphElement]
				alert(domobj);
			}
		</script>
		-->
		<script>
			$(function(){
				var jqobj=$("#p4");
				//[object Object]
				var domobj=jqobj.get();
				//[object HTMLParagraphElement]
				alert(domobj);
			})
		</script>
		
		<!--
		<script>
			$(function(){
			  $("p").each(function(index,element){
				  //alert("index=="+index+",element=="+element);
				  //alert("index=="+index+",element=="+this);
				  //javascript的DOM对象转换成Jquery对象
				  //alert("index=="+index+",element=="+$(element));
				  var size=index*10+10;
				  $(element).css("font-size",size+"px");
			  });
			});
		</script>
		-->
	</head>
	<body>
		<h1>HTML DOM 遍历和修改</h1>
		<h2>jQuery each() 方法</h2>
		<h2>语法</h2>
		$(selector).each(function(index,element){   })</h2>
		<h2>参数。为每个匹配元素规定运行的函数。</h2>
		<h2>index - 被遍历出的每一个元素在数组中的位置</h2>
		<h2>element - 当前的元素【javascript的DOM对象】（也可使用 "this" 选择器）</h2>
		<p>测试用的p元素1</p>
		<p>测试用的p元素2</p>
		<p>测试用的p元素3</p>
		<p id="p4">测试用的p元素4</p>
	</body>
</html>

 

blake2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从头开始学习JAVA 6--引入JQuery
xumingxsh的专栏
03-10 2786
5 JQuery： 在Index.jsp中，使用到JQuery。 1）添加taglib 在页面头部添加如下代码： Taglib类似于自定义控件。 2）添加Jquery       script type="text/javascript" src="c:url value="/resources/jquery-1.7.2.min.js" />">script> sc
java后端快速入门jQuery
最新发布
weixin_50861894的博客
08-11 172
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。获取属性语法attr(''属性'') // 类似原生 getAttribute()设置属性语法attr(''属性'', ''属性值'') // 类似原生 setAttribute()
JQuery(适用于Java学者)
boilll的博客
02-02 412
适用于Java学者
jquery java
08-18
jquery java 源代码 下载后请解压，并存放到相应的位置
第86节：Java中的JQuery基础
程序员哆啦A梦，蓝胖子
02-11 581
第86节：Java中的JQuery 前言复习 定时器： setInterval clearInterval setTimeout clearTimeout 显示： img.style.display = "block" 隐藏： img.style.display = "none" 获取行 table.rows[] DOM: document.createElement documen...
jQuery基础
12-10
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
【javaWeb之前端】前端面试题-----js和jquery的区别是什么？
喜欢哲学的女孩
08-18 2442
最近我有一个朋友问我js和jQuery的区别是什么,于是我打算写一篇文章说下到底有什么区别。 首先你要知道: 　　1.js是网页的脚本语言,记住哈,js是语言！  　　2.jquery是用js语言写出来的一个框架！ 看到区别没？一个是语言,一个是框架,jquery就是基于js写出来的一个框架,其实还是js而已. 　　既然是框架,那么肯定有很多框架,比如jq
Javaweb jQuery介绍
weixin_45829957的博客
08-23 350
1、jQuery 介绍 什么是jQuery ? jQuery，顾名思义，也就是JavaScript 和查询（Query），它就是辅助JavaScript 开发的js 类库。 jQuery 核心思想！！！ 它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的JavaScript 库，在世界前10000 个访问最多的网站中，有超过55%在使用 jQuery。 jQuery 好处！！！ jQ.
window. onload=function(){} 与 $(function(){}) 的区别
qq_36866850的博客
05-04 562
window. οnlοad=function(){} 与 $(function(){}) 的区别 页面加载事件：window.οnlοad=function(){} 和 $(function(){}); 1、window.οnlοad=function(){}是js原生的事件； 2、$(function(){});是JQuery的方法； 等同于 $(document).ready(function(){}); 意义为在DOM加载完毕后执行了ready()方法。也等同与 jQuery(function(){
java中jq转移符,jQuery教程
weixin_36155081的博客
03-21 121
文章目录jQuery什么是JQuery？js方式操作dom一：开始JQuery1、DOM对象2、jquery小试牛刀3、dom对象和jquery对象二：选择器1.基本选择器2.表单选择器三：过滤器1、基本过滤器2、表单属性过滤器四：函数1.**val()**2.text()3.attr()val text attr 例子4. remove5.empty6.append7.html例子8.each五...
window.onload加载js函数不起作用
zhituji的博客
01-14 7866
使用window.onload加载函数，不起作用 其实是不同js都使用了window.onload加载应用于同一个页面这样通常只有第一个js文件中的函数会被调用。 例： first.js window.onload=function(){ function one(){ ... } } second.js window.onload=function(){
用window.onload方法加载函数
ios0213的专栏
06-29 2104
例如脚本中要执行一个函数，当页面也没有触发行为或者其他调用的时候，函数无法被执行。 这个时候可以用window.onload进行调用函数进行执行。 如： function ce1() { alert("123"); } window.onload=ce1; 注意后面不用加() . 当脚本内部有几个函数的时候，如果只用如下面 function ce1() { alert("
onload()方法只能在body标签中调用吗？怎么调用多个多个方法？
weixin_30267785的博客
04-09 892
第一个问题： onload()方法并非只能在body标签中调用的，还可以在js中用window.onload = function() {函数名};来调用；另外img等标签也支持onload方法。 支持onload方法的标签有：<body>, <frame>, <frameset>, <iframe>, <img>, &lt...
JAVA+JQuery实现异步分页
随遇而安
09-03 8756
最近一个项目要求实现异步分页，简单的写了一下，不好的请指出~ /** *分页类 */ public class PageBean { publicint rowCount = 0; // 总记录数 publicint currentPage = 1;// 当前页数 publicint sizePerPage = 20;// 每页显示条数 publicint
jQuery基础（帮助理解）和认识
weixin_45414350的博客
07-16 163
jQuery 就是对js进行了封装 只有jQuery能调用$() 开发环境.js 运行环境.min.js <script> //执行文档加载事件 $(docment).ready(function(){ }) $(function(){ }) 简写 $(function(){ -------------------------------------...
javaweb+jQuery ajax实例
这里是博客标题
02-14 796
原文链接：https://blog.csdn.net/rammus7/article/details/78419567 在页面上使用jQuery封装好的ajax方法： $.ajax({ url:'', //要请求的url地址 type:'POST', //请求方法 GET or POST async:true, //是否使用异步请求的方式 timeout:50...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值