JQuery-10.链式编程与多库共存

最新推荐文章于 2023-09-06 12:48:19 发布

凡小多

最新推荐文章于 2023-09-06 12:48:19 发布

阅读量97

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/wgh4318/article/details/120384304

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

【案例：五角星评分案例】

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>五角星评分案例</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.comment {
				font-size: 40px;
				color: #ff16cf;
			}

			.comment li {
				float: left;
			}

			ul {
				list-style: none;
			}
		</style>
		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function() {
				//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
				var wjx_k = "☆";
				var wjx_s = "★";
				$(".comment>li").on("mouseenter", function() {
					$(this).text(wjx_s).prevAll().text(wjx_s);
					$(this).nextAll().text(wjx_k);
					// $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
				});

				//2. 给ul注册鼠标离开时间，让所有的li都变成空心
				$(".comment").on("mouseleave", function() {
					$(this).children().text(wjx_k);
					//再做一件事件，找到current，让current和current前面的变成实心就行。
					$("li.current").text(wjx_s).prevAll().text(wjx_s);
				});

				//3. 给li注册点击事件
				$(".comment>li").on("click", function() {
					$(this).addClass("current").siblings().removeClass("current");
				});
			});
		</script>
	</head>
	<body>
		<ul class="comment">
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
		</ul>
	</body>
</html>

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

【案例：不同的透明度】

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>复制</title>
		<style>
			ul {
				list-style: none;
			}

			li {
				float: left;
				width: 200px;
				height: 200px;
				background: red;
				text-align: center;
				line-height: 200px;
				margin: 0 20px 20px 0;
			}
		</style>

		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function() {

				//      for(var i = 0; i < $("li").length; i++) {
				//        $("li").eq(i).css("opacity", (i+1)/10);
				//      }
				//each方法
				$("li").each(function(index, element) {
					$(element).css("opacity", (index + 1) / 10);
				})
			});
		</script>
	</head>
	<body>
		<ul id="ulList">
			<li>透明度1</li>
			<li>透明度2</li>
			<li>透明度3</li>
			<li>透明度4</li>
			<li>透明度5</li>
			<li>透明度6</li>
			<li>透明度7</li>
			<li>透明度8</li>
			<li>透明度9</li>
			<li>透明度10</li>
		</ul>
	</body>
</html>

多库共存

jQuery使用 $ 作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放 $ 符的控制权

var $$ = $.noConflict();//释放$的控制权,并且把$的能力给了$$

凡小多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery-10.链式编程与多库共存

链式编程通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。【案例：五角星评分案例】<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例&l
复制链接

扫一扫