web——jquery的使用

最新推荐文章于 2024-06-10 12:37:02 发布

weixin_52368930

最新推荐文章于 2024-06-10 12:37:02 发布

阅读量497

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_52368930/article/details/121169460

版权

文章目录

案例

什么是JQUERY

jquery诞生之处，就是为了解决IE的兼容性问题和简化操作（dom事件）
jquery的版本：jquery 提倡 write less，do more
jquery的使用：jquery第三方的库，因此必须先引入jquery的源码
本质；使用更简单的代码完成一定的css的效果

JavaScript on.load事件，是页面加载完成后(也加载成功，如图片、文字等外部资源)，会自动触发的事件

Jquery DOM对象加载完成后，会触发ready

总结：jquery使用的ready函数比起JavaScript中的on.load事件要效率高的多

jquery选择器：

 获取页面的DOM对象
 完美兼容css选择器
 基本选择器：id，类，标签

案例

$".box>p:contains(刘建宏)").css("background", "blue").css("width", "500px");//div里面的box下级的p段落中包含刘建宏关键字的段落，后面跟的是style样式

 $(".box>p").eq(3).css("background", "red").css("width", "500px"); 
			//第三个p标签 $(".box>p").first().css("background", "red").css("width", "500px");
//第一个标签			 $(".box>p").last().css("background", "red").css("width", "500px");

 $(".box>p:even").css("background", "red").css("width", "500px"); //表示偶数项的p段落实现样式

 $(".box>p:odd").css("background", "red").css("width", "500px"); //表示奇数项的p段落实现样式

 $(".box>p:lt(4)").css("background", "red").css("width", "500px"); //表示小于4行的p段落实现样式

 $(".box>p:gt(4)").css("background", "red").css("width", "500px"); //表示小于4行的p段落实现样式

判断是否存在样式

 $(function () {
        $(".box").on("mouseover", function() {
            if ($(".box").hasClass("box-red")) {
                $(".box").removeClass("box-red")
            } else {
                $(".box").addClass("box-red")
            }
        }).on("mouseout", function() {
            if ($(".box").hasClass("box-red")) {
                $(".box").removeClass("box-red")
            } else {
                $(".box").addClass("box-red")
            }
        })

    })

使用hover来判断样式

$(function () {
       
        $(".box").hover(function() {
            if ($(".box").hasClass("box-red")) {
                $(".box").removeClass("box-red")
        	// 进来时
        } else {
                $(".box").addClass("box-red")
            }
        	// 光标移出去的时候
        });

    })

实现JavaScript对象和jquery对象的转换


			$(function() {
				let jqObj = $("#box");
				// jQuery对象本质就是一个类似于数组的集合
				// 集合中存储的就是一个个JavaScript对象
				console.info(jqObj);
				// jQuery对象 ---> javascript对象
				// 因此直接通过下标，就可以得到需要的js对象
				
				const box = jqObj[0];
				box.innerHTML = `<h1>这个是使用JavaScript对象操作的内容</h1>`;
				console.info(box)
				
				
				// JavaScript对象转换为jquery
				// $(DOM对象)
				// $(window)
				// $(document)
				// $(this)
				
			});

选择上一级的对象还有下一级的对象

// $(".active2").css("color", "red").parent().css("border", "1px solid red");
			// $(".active2").css("color", "red").parent().parent().css("border", "1px solid red");
			// $(".active2").css("color", "red").parent("ul").css("border", "1px solid red");
			// 向上找需要的父级（祖宗节点）
			// $(".active2").parents("ul").css("border", "1px solid red");

next下一个，nextall下面全部

 $(".active2").next().css("color", "red")
			// $(".active2").nextAll().css("color", "red")

通配

匹配active后面所有的

// $(".active2~").css("color", "red")
			// $(".active2+").css("color", "red")

匹配active前面所有的

 $(".active2").prev().css("color", "red")
			// $(".active2").prevAll().css("color", "red")

过滤

	$(function() {
				// children 只能选择或者过滤子代
				// $(".box").children("li").css("border", "1px solid red");
				
				// find 只能选择或者过滤后代
				// $(".box").find("li").css("border", "1px solid red");
				
				// filter 过滤的什么，过滤选择的集合本身
				 $(".box>li").filter("li.active").css("border", "1px solid red");
			});

jquery之实现动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画效果</title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* margin: auto; */
				/* margin-top: 50px; */
				background-color: red;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<button onclick="hide();">隐藏</button>
		<button onclick="show();">显示</button>
		<button onclick="toggle()">显示/隐藏</button>
		
		<button onclick="slideUp();">卷帘隐藏</button>
		<button onclick="slideDown();">卷帘显示</button>
		<button onclick="toggleSlide()">卷帘切换</button>
		
		<button onclick="fideOut();">透明度隐藏</button>
		<button onclick="fideIn();">透明度显示</button>
		<button onclick="toggleFide()">透明度切换</button>
		<button onclick="fadeTo()">fadeTo</button>
		
		<div class="box"></div>
		
		<script>
			// $(()=>{
				
			// });

			function hide() {
				// $(".box").hide(); // 默认情况，瞬间隐藏和显示，表示没有过渡的动画效果
				$(".box").hide(3000);	// 表示动画执行的时间，注意，默认是一个缩放和透明度动画
				// $(".box").hide(3000, "linear", function() {
				// 	// alert("动画结束了,才会执行的事件");
				// 	$(this).show(3000);
				// });
				
			// 	// 也可以传递一个字符串来替代数字： normal  slow 	fast
			// 	// $(".box").hide("normal");
			// 	$(".box").hide("fast");
			}
			function show() {
				// $(".box").show(3000);
				$(".box").show("fast");
			}
			/*显示和隐藏同时进行*/
			function toggle() {
				$(".box").toggle("slow");
			}
			/*卷帘效果*/
			function slideUp() {
				$(".box").slideUp(3000);
			}
			
			function slideDown() {
				$(".box").slideDown(5000);
			}
			
			function toggleSlide(){
				$(".box").slideToggle(5000);
			}
			
			function fideOut() {
				$(".box").fadeOut(3000);
			}
			
			function fideIn() {
				$(".box").fadeIn(3000);
			}
			
			function toggleFide() {
				$(".box").fadeToggle(3000);
			}
			/*设置指定的透明度*/
			function fadeTo() {
				$(".box").fadeTo(2000, 0.2);
			}
		</script>
	</body>
</html>