初识JQuery，上课笔记

最新推荐文章于 2021-08-10 17:59:15 发布

别不说话

最新推荐文章于 2021-08-10 17:59:15 发布

阅读量291

点赞数 1

CC 4.0 BY-SA版权

分类专栏：代码文章标签： jquery jsp

本文链接：https://blog.youkuaiyun.com/qq_28316183/article/details/78051371

代码专栏收录该内容

29 篇文章

订阅专栏

本文通过一系列示例介绍了JQuery的基本使用方法，包括选择器、筛选器的应用及动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JQurey 基本应用

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	function onChoose() {
		var username = $("#name").val();
		alert(username);
	}
	function onChooseA(obj) {
		//js原生态对象。
		//jq对象$(obj)，是经过包装的
		alert($(obj).val());
	}
	function onChooseB() {
		var div1 = $("#div1");
		alert(div1.text());
	}

	//标签选择器
	function onChooseC() {
		var div= $("div");
		//遍历所有某个标签的值
		div.each(function(i) {
			alert($(this).text());
		});
	}
	
	//遍历所有同id标签
		function onChooseD() {
		   var classs=$("#div1");
		   classs.each(function(i) {
		   alert("第"+ ++i +"个"+$(this).text());
		});
		}
		
		//类型选择器
		function onChooseE() {
		//嵌套标签，上级调用下级class注意打空格
		//多个div用逗号隔开
		   var span=$("div,div .a");
		   alert($(span).text());
		}
		
		function onChooseF() {
		//空格找其下级所有（子孙）
		   var span=$("p input");
		    span.each(function(i) {
		   alert("第"+ ++i +"个"+$(this).val());
		});
		}
		
		function onChooseG() {
		//>只找下级（儿子）
		   var span=$("p>input");
		    span.each(function(i) {
		   alert("第"+ ++i +"个"+$(this).val());
		});
		}
		
		function onChooseH() {
		//+找同级第一个（兄弟）
		   var span=$("span + input");
		    span.each(function(i) {
		   alert("第"+ ++i +"个"+$(this).val());
		});
		}
		
		function onChooseI() {
		//+找同级所有（兄弟）
		   var span=$("span ~ input");
		    span.each(function(i) {
		   alert("第"+ ++i +"个"+$(this).val());
		});
		}
		function onChooseJ() {
		$("#first").fadeIn();
		$("#two").fadeIn("slow");
		$("#three").fadeIn("3000");
		}
		
		//筛选器
		function onChooseK() {
		//查找第一个标签的值
		  var span=$("li:first");
		   alert($(span).text());
		}
		
		function onChooseL() {
		//:not(:属性值) 排除。。。。。
		   var span=$("p>input:not(:text)");
		    span.each(function(i) {
		   alert("第"+ ++i +"个"+$(this).val());
		});
		}
		
		function onChooseM() {
		  var span=$("li:eq(3)");
		   alert($(span).text());
		}
</script>
</head>

<body>
	<input type="button" value="试一试 " onclick="onChoose()">
	<input type="button" value="试一试 " onclick="onChooseA(this)">
	<input type="button" value="试一试 " onclick="onChooseB()">
	<input type="button" value="试一试 " onclick="onChooseC()">
	<input type="button" value="试一试 " onclick="onChooseD()">
	<input type="button" value="试一试 " onclick="onChooseE()">
	<input type="button" value="试一试 " onclick="onChooseF()">
	<input type="button" value="试一试 " onclick="onChooseG()">
	<input type="button" value="试一试 " onclick="onChooseH()">
	<input type="button" value="试一试 " onclick="onChooseI()">
	<input type="button" value="试一试 " onclick="onChooseJ()">
	<input type="button" value="试一试 " onclick="onChooseK()">
	<input type="button" value="试一试 LLL" onclick="onChooseL()">
	<input type="button" value="试一试 LLL" onclick="onChooseM()">
	<br> 用户名：
	<input type="text" id="name">
	<div id="div1" style="width: 100ps;height: 100px;color: green;">
		谁的手机号</div>
	<div id="div1" style="width: 100ps;height: 100px;color: green;">
		水电费刚回家</div>
		
		<div>
		     <span class="a">我可复杂了</span>
		</div>
		
		<p>
		   <span>
		      <input >
		   </span>
		   <input type="text" value="111">
		   <input type="checkbox" value="woman">woman
		   <input type="radio" value="man">man
		
		</p>
		
		<div id="first" style="width: 100px;height: 100px;display:none; background: blue;" ></div>
		<div id="two" style="width: 100px;height: 100px;background: violet;display:none; "></div>
		<div id="three" style="width: 100px;height: 100px;background: pink;display:none; "></div>
		<ul>
		  <li>111</li>
		   <li>222</li>
		    <li>333</li>
		     <li>444</li>
		      <li>555</li>
		</ul>
		
		
</body>