前端（jQuery） 5

一、初识jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

二、jQuery 的功能概括为：

// 先引入后使用
			// 语法结构 / 通用格式
			// $(AAA).BBB(CCC)
			// AAA = jq选择器
			// BBB = jq对象.方法名

1、html 的元素选取

DOM = Document Object Model（文档对象模型）

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

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

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

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

实操：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2</title>
	</head>
	<body>
		<button onclick="test1()">button</button>		
		<div id="id_a" class="class_a" name="name_a">
			<span>AAA</span>
		</div>
			
		<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8">
		
		</script>
		<script>
			function test1(){// css选择器 =id/class/tag/attr
				// var dom1 = document.getElementById('id_a');
				var jq1 = $("id_a"); // 通过id			
				// var jq2 = $("class_a"); // 通过class名
				// var jq3 = $("div");  // 通过标签名
				// var jq4 = $("[name='name_a']"); // 通过name名
					// var  html = jq1.html();  // innerHtml
					// jq1.html("<input type = 'text/'>ccc")
					// alert(html)
					// var  text = jq1.text(); // innerText
					// jq1.html("<input type = 'text/'>ccc")
					// alert(text)
				
					// var jq1 = $("div");
					// jq1.html(function(index,html){ // function 可以得到第几个 也可以得到第几个的  还可以改变它的数值内容
					// alert(index + "---" + html) // index 找到第几个的标签（下标从0开始，依次输出）
					// return index +"---" +html  // 改变数值
					// })
					
					// var jq1 = $("div");
					// var html = $("div")
					// var html = jq1.html();
					// alert(html) // 找第一个
					
					var jql
					
					// 无参数 描述: 返回p元素的内容。
					//	jQuery 代码:
						$('p').html();
					
					// 参数val 描述:设置所有 p 元素的内容
					//	jQuery 代码:
						$("p").html("Hello <b>world</b>!");
					
					// 回调函数描述:使用函数来设置所有匹配元素的内容。
					//	jQuery 代码:
						$("p").html(function(n){
							return "这个 p 元素的 index 是：" + n;
					    });

					
					
					// 总结html 以上
					// 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
					// 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 
					// 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

				
				
			}
		</script>
		
	</body>
</html>

2、html的元素操作

设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始

（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使

用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

实操：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3</title>
	</head>
	<body> 
		标签属性
		常规属性  attr(简单记 大概率不会出错)
		<button  onclick="test()"> button</button>
		<img src="../../img/1.jpeg" >
		表单属性  prop
		value属性 既不用attr也不用prop  只能用val
		<input type="text" value=""/> 
		<input type="checkbox" value=""/>
		<input type="checkbox" value=""/>
		
		<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// function test(){
			// 	var img = $("img");
				// var src = img.attr('src'); // 获取某个标签的属性
				// alert(src)
				
				// img.attr("src","../../img/1.jpeg") // 设置某个属性
				
				// var obj = {src:'../../img/1.jpeg',width:'300px',height:'400px'};
				// img.attr(obj)// 设置多个属性
				
				// img.attr('src',function(index,demo){ // function 获取
				// 	alert(index+"=="+demo)
				// 	return '../../img/1.jpeg';
				// })	
			// }
			
			// function test1(){
			// 	var inputs = $("input[type ='text']");
			// 	alert(inputs.prop('checked')) // 直到当前标签是否被选中 true/false
			// 	inputs.prop('checked',true)  // 设置多个 获取一个
				
			// }	
			function test2(){
				var inputs = inputs.val(); //不传参就是获取
				var val = inputs.val(); // val 用来获取value属性的值  html/text
				alert(val)
				inputs.val("asdasas"); 
			}
			
			
		</script>
	
	</body>
	
</html>

3、css操作

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

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

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

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

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery removeClass() 方法

下面的例子演示如何不同的元素中删除指定的 class 属性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

实操：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4</title>
		<style type="text/css">
			.class_a{background-color: #00FFFF;}
			.class_b{font-size: 40px;}
		</style>
	</head>
	<body>
		<button onclick="test()">button</button>
		<div> AAA</div>
		
		<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function test(){
				var jq_div = $('div');
				// jq_div.css("color","red");// 两个参数是赋值
				// alert(jq_div.css('color'));// 一个参数时获取
				// jq_div.css({"color":"red","background":"blue"});
				// jq_div.css('heigth':function(index,value){ // 方法的方式
				// 	return "";	
				// })
				
				jq_div.addClass('class_a class_b'); // 可以加多个属性  中间用空格分隔
		// 未写完	$("button").click(function(){
		// 			$("p:first").addClass("class_a");
		// 		});
				
				jq_div.addClass(function(){
				})// 也存在方法方式  
				jq_div.removeClass('class_a')// 清空样式
				jq_div.toggClass('class_a') // 切换样式 （有就删 没有就加）
				
			}
		</script>
	</body>
</html>

4、html事件操作

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

在上面的例子中，当按钮的点击事件被触发时会调用一个函数：

$("button").click(function() {..some code... } )

该方法隐藏所有 <p> 元素：

$("p").hide();

单独文件中的函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

实操：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5</title>
	</head>
	<body>
		<table border="" width="99%">
			<tr  height="50px">
				<td colspan="3"> 
					<div id="div_a" style="text-align: right;"></div>
				</td>
			</tr>
			<tr>
				<td><button style="width: 99%;" onclick="test(9)">9</button></td>
				<td><button style="width: 99%;" onclick="test(8)">8</button></td>
				<td><button style="width: 99%;" onclick="test(7)">7</button></td>
				
			</tr>
			<tr>
				<td><button style="width: 99%;" onclick="test(6)">6</button></td>
				<td><button style="width: 99%;" onclick="test(5)">5</button></td>
				<td><button style="width: 99%;" onclick="test(4)">4</button></td>
			</tr>
			<tr>
				<td><button style="width: 99%;" onclick="test(3)">3</button></td>
				<td><button style="width: 99%;" onclick="test(2)">2</button></td>
				<td><button style="width: 99%;" onclick="test(1)">1</button></td>
			</tr>
		</table>
		<script type="text/javascript">
			function test(val){ // 转换
				// var jq = $(val);// dom -> jq
				// var jq = $("<p></p>");// html -> jq
				// var dom = document.createElement("p")
				// var html = jq.html();
				// $("#div_a").prepend($(val).html())				
				 $("#div_a").html($("#div_a").html()+val)
				// $("#div_a").prepend(val)
			}
			
		</script>
		
	</body>
</html>

小结

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

5、html dom遍历和修改

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环(就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

参数

callbackFunctionV1.0

对于每个匹配的元素所要执行的函数

描述:

迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

描述:

如果你想得到 jQuery对象，可以使用 $(this) 函数。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

描述:

你可以使用 'return' 来提前跳出 each() 循环。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

jQuery 代码:

$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

实操：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>6</title>
		<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div >111</div>
		<div >222</div>
		<div >333</div>
		<div >444</div>
		<button onclick="test()">button</button>
		<script>
			function test(){// 对象遍历  类似于java 动态实例方法
				$("div").each(function(index,element){// element 每个标签对应的dom对象
					// alert(index+"---"+element)
					// console.log(element)// element 每个标签对应的dom对象
					// console.log(&(element).html()) // 每个标签对应的内容
					// console.log(&(this).html()) // 等价于上面
					// this  dom对象 和elemen是同一个
			    })
				
				// 遍历
				// 只存在结构上不同 功能相同
				//$.each();// 等价于	自己的得到的   类似于java中静态方法
				// each 传入的是一个（回调）方法
				//jQuery.each();// 等价于  预先js文件中给出的   类似于java中实例方法
				// each 传入的是一个数组 和 一个(回调)方法   两个参数
				
				// 数组遍历   类似于java静态方法
				$.each([1,2,3,4],function(i,e){// i数组下标  e 数组中每一个元素
					alert(i+"--"+e)	
				});
			}
		</script>
	</body>
</html>

6、js特效和动画效果

jQuery hide()演示一个简单的 jQuery hide() 方法。

jQuery hide()另一个 hide() 演示。如何隐藏部分文本。

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

实操：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>7</title>
		<script src="../Demo211224/js/jquery-3.6.0.js" type="text/javascript" charset="utf-8">
		
		</script>
	</head>
	<body>
		<button onclick="test_hide()">隐藏</button>
		<button onclick="test_show()">显示</button>
		<button onclick="test_toggle()">切换</button>
		<div style="border: 1px solid red;">assd</div>
		
		<button onclick="test()">test</button>
		<br>
		<br>
		<br>
		<span style="position: absolute; border: 1px solid blue;" >12345 </span>
		
	
		<script >
			function test(){
					$("span").animate({ // 为span 添加动画  需要加绝对定位
						top:"200px",
						left:"300px"
					},5000)
				
				
				
				// $("div").animate({ // 为div 添加动画
				// 	width:'70%',
				// 	height:'200px',
				// 	fontSize:'50px',
				// 	borderTopWidth:'10px',
				// 	marginLeft:'20px',
				// 	paddingTop:"100px"
				// },2000)
			}
			
			function test_hide(){
				// $("div").hide(3000);// 隐藏  慢动作  经过5000毫秒隐藏	
				// $("div").hide(5000,function(){ // 隐藏完之后会执行的效果
				//	alert(123)
				//});
				$("div").fadeTo(3000,0.4); // 透明度 显现
			}
			function test_show(){ // 显示
				 // $("div").show(5000);// 显示
				 // $("div").slideUp(7000);// slideUp向上收回 slideDown向上收回   高度变化（向上减小）来动态地隐藏所有匹配的元素
				 // $("div").fadeOut(7000); // fadeOut渐渐淡出  fadeIn 渐入/渐进
				  $("div").fadeOut(3000); // 透明度 消失
			}
			function test_toggle(){ // 进行隐藏和显示之间的切换
				 $("div").toggle(4000);
				// $("div").fadeIn(3000); // 透明度  显现
			}
			// 以上三种方式 都不会占用空间  属于 display(隐藏后原有空间仍不占有)
			//  如果要实现visibility（隐藏后原有空间仍占有） 需要使用样式 来完成
		</script>
	</body>
</html>

7、ajax异步请求方式（待更）

三、总结

jQuery还是好用的 YYDS 可以省很多事降低耦合提高代码复用，明天继续，加油！！

If not now, when? If not me, who? “时不我待，舍我其谁。”

更多文章请关注《万象专栏》

转载请注明出处：https://www.wanxiangsucai.com/read/cv130363

话题推荐： ##

打赏
0 赞
收藏
评论
举报

下一篇：BootStrap基本使用

前端（jQuery） 5

前端（jQuery） 5

一、初识jQuery

二、jQuery 的功能概括为：

attr() 的回调函数

jQuery removeClass() 方法

jQuery toggleClass() 方法

单独文件中的函数

jQuery 名称冲突

小结

参数

callbackFunctionV1.0

描述:

HTML 代码:

jQuery 代码:

结果:

描述:

HTML 代码:

jQuery 代码:

描述:

HTML 代码:

jQuery 代码:

jQuery hide() 和 show()

语法：

jQuery toggle()

语法：

三、总结

相关文章

热门产品

热门素材

热门圈子

热门话题