jQuery基础

最新推荐文章于 2023-04-27 17:06:25 发布

菜汪在路上

最新推荐文章于 2023-04-27 17:06:25 发布

阅读量435

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qx020814/article/details/125980648

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

获取到鼠标监听事件：

点击按钮显示图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1 {
				display: none;
			}
		</style>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(document).ready(function() {
				$("#an1").click(function() {
					$("#p1").show(1000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="an1" value="显示" />
		<div id="p1">
			<img src="../img/3.png" />
		</div>
	</body>
</html>

点击按钮，一秒后显示被隐藏的图片。

通过传入id选中标签，再使用显示方法。

点击文字隐藏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<style>
			.h2Class {
				color: pink;
				cursor: pointer;
			}

			ul {
				list-style: none;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("h2").click(function() {
					// alert("我是你爹");
					$(this).toggleClass("h2Class").next("ul").toggle();
				});
			});
		</script>
	</head>
	<body>
		<h2>新闻娱乐</h2>
		<ul>
			<li>惊天大瓜</li>
			<li>民间趣事</li>
			<li>国际时态</li>
			<li>隔壁学校厕所漏了</li>
		</ul>
	</body>
</html>

$(this).toggleClass("h2Class").next("ul").toggle();

toggleClass方法会判断是否实现的这个类，实现了就清除，没实现就进行实现

执行完后next切换到ul类，toggle调用切换类方法。

通过不同的方式获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			body {
				font-size: 0.75rem;
				text-align: center;
			}

			div,
			span {
				display: none;
				float: left;
				width: 7.5rem;
				height: 7.5rem;
				margin: 0.5rem;

			}
		</style>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			// $(function(){
			$(document).ready(function() {
				$("div,span").css("display", "block");
				$("#one").css("color", "red");
				$("span").css("font-size", "25px");
				$(".two").css("background-color", "pink");
				$("div,span").css("border-style", "dashed")
			});
		</script>
	</head>
	<body>
		<div id="one">div的id属性</div>
		<div class="two">div的class属性</div>
		<span>SPAN</span>

	</body>
</html>

jquery不仅id、class获取，还可以直接用标签获取

标签过滤器的运用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			// $(function() {
			$(document).ready(function() {
				$("#btnTitle").click(function() {
                //header：第一个标题标签
					$(":header").css("color", "pink");
				});
                //even：偶数
				$("#butDan").click(function() {
					$("li:even").css("color", "bisque");
				});
                //odd:奇数
				$("#btnShuang").click(function() {
					$("li:odd").css("color", "yellow");
				});
			});
		</script>
	</head>
	<body>
		<h1>文字标题</h1>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<input type="button" id="btnTitle" value="标题样式" />
		<input type="button" id="butDan" value="奇数样式" />
		<input type="button" id="btnShuang" value="偶数样式" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			div {
				width: 6.25rem;
				height: 6.25rem;
				float: left;
				margin-left: 0.625rem;
			}

			p {
				clear: left;
			}
		</style>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#btnContain").click(function() {
                //contains：包含元素
					$("div:contains('A')").css("background-color", "red");
				});
				$("#btnNull").click(function() {
                 //empty：空的容器
					$("div:empty").css("background-color", "yellow");
				});
				$("#btnSpan").click(function() {
                //has(span)：包含指定容器
					$("div:has(span)").css("background-color", "pink");

				});
				$("#notNull").click(function() {
                //parent：非空容器
					$("div:parent").css("background-color", "yellowgreen");

				});
			});
		</script>
	</head>
	<body>
		<div>ABCD</div>
		<div></div>
		<div><span></span></div>
		<p><input type="button" value="内容包含A的div" id="btnContain" />
			<input type="button" value="空div" id="btnNull" />
			<input type="button" value="子类为span的div" id="btnSpan" />
			<input type="button" value="不为空的div" id="notNull" />
		</p>
	</body>
</html>

指定元素名称选择：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("input[type='button']").click(function() {
					$("input[name='s']").attr("checked", "checked");
				});
			});
		</script>
	</head>
	<body>
		<p>
			<input type="checkbox" name="s" />1
			<input type="checkbox" name="s" />2
			<input type="checkbox" name="s" />3
		</p>
		<input type="button" value="全选" />
	</body>
</html>

指定按钮鼠标监听，把全部为多选赋值为选中状态：checkde

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$(":header").css("color", "red");
				$(":header+ul>li").css("color", "green");
				$(":header+ul>li>ul>li").css("color", "red");
			});
		</script>
	</head>
	<body>
		<h2>你喜欢</h2>
		<ul>
			<li>游戏
				<ul>
					<li>土豪玩的游戏</li>
					<li>最受欢迎的游戏</li>
					<li>4399小游戏</li>
				</ul>
			</li>
			<li>影视
				<ul>
					<li>动漫大全</li>
					<li>热门综艺</li>
					<li>体育音乐</li>
				</ul>
			</li>
			<li>购物
				<ul>
					<li>9快9包邮</li>
					<li>地理杂志</li>
					<li>同款特价</li>
				</ul>
			</li>
			<li>小说
				<ul>
					<li>热门小说</li>
					<li>凡人修仙</li>
					<li>暴打人渣</li>
				</ul>
			</li>

		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.txt {
				border: 1px solid black;
			}
		</style>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			
			$(function() {
				var b = $("text1");
				var c = b;
				/*
				enabled:启用
				*/
				$("#pa :button").click(function() {
					var a = $("#pa :text:enabled");
					a.css("border", "1px solid red");
				});
				$("#pb :button").click(function() {
					b.css("background-color", "white");
					b = $("#pb :radio:checked").parent();
					b.css("background-color", "pink");
				});
				$("#pc :button").click(function() {
					c.css("background-color", "white");
					c = $("#pc :checkbox:checked").parent();
					c.css("background-color", "green");
				});
				$("#pd :button").click(function() {
					var data = "你最喜欢的球星是:";
					data += $("#pd :input option:selected").val();
					alert(data);
				});
			});
		</script>

	</head>
	<body>
		<div id="text1"></div>
		<p id="pa">
			<input type="text" value="可用文本框" class="txt" />
			<input type="text" value="不可用文本框" disabled="disabled" class="txt" />
			<input type="button" value="选取可用文本框" />
		</p>
		<p id="pb">
			你是否喜欢旅游：<br />
			<label>
				<input type="radio" value="喜欢" name="trip" />喜欢
			</label>
			<label>
				<input type="radio" value="不喜欢" name="trip" />不喜欢
			</label>
			<label>
				<input type="radio" value="无所谓" name="trip" />无所谓
			</label>
			<input type="button" value="显示" />
		</p>
		<p id="pc">
			<label><input type="checkbox" / value="跑步">跑步</label>
			<label><input type="checkbox" / value="打球">打球</label>
			<label><input type="checkbox" / value="登山">登山</label>
			<label><input type="checkbox" / value="跳舞">跳舞</label>
			<input type="button" value="显示" />
		</p>
		<p id="pd">
			请选择你最喜欢的足球明星：<br />
			<select>
				<option value="李义">李义</option>
				<option value="卡卡">卡卡</option>
				<option value="C罗">C罗</option>
				<option value="梅西">梅西</option>
			</select>
			<input type="button" value="显示" />
		</p>
	</body>
</html>

空格：$('parent childchild')表示获取parent下的所有的childchild节点，所有的子孙。

大于号：$('parent > child')表示获取parent下的所有child的儿子，第一代。

加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法

波浪号：$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。

菜汪在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

('parentchildchild')表示获取parent下的所有的childchild节点，所有的子孙。$('pre~brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。$('pre+nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法。$('parent>child')表示获取parent下的所有child的儿子，第一代。jquery不仅id、class获取，还可以直接用标签获取。...
复制链接

扫一扫