8.15 day04早上开始JQuery JQuery的元素,css,类,id选择器

最新推荐文章于 2024-08-16 09:21:59 发布

一身正气z

最新推荐文章于 2024-08-16 09:21:59 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/wudingan/article/details/99625642

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JQuery练习</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p>比较</p>
		<div id="div">
		</div>
		<form action="#" method="post">
			test:<input type="text" name="test"  value="123"/><br/>
			test:<input type="text" name="test2" /><br/>
			test:<input type="text" name="test3"  value="4123"/><br/>
		</form>
		<hr/>
		<!-- <img src="img/2.jpg" > -->
		<h3>脚本可以嵌到页面的任意位置</h3>
		<script type="text/javascript">
			$(document).ready(function() {
				var div = document.getElementById("div");
				div.innerHTML = "<span style = 'color:red;'>aaa</span>";
				//对象
				// html方法,text方法,val方法的三个区别
				// html:表示一个html代码 片段,
				// text:表示文本,并不能点击
				$("#div").html("<span style = 'color:red;'>bbb</span>")
				$('#div').text("<a href='#'>abc</a>")
				//val有值就取值,没有值就是在赋值jquery对象和dom对象互相转换
				var val=$("input[type=text]").val(12);
				
				var input0=val[0];
				//j_input0.name="aaa123";
				var input1=val[1];
				
				console.log("这是"+input0.value+"第二个:"+input1.value);
				//console.log("这是"+val[0].value+"第二个:"+val[1].value);
				//console.log("这是"+val);
				
				//dom变成JQuery
				 var j_input0 = $(input0);
				// j_input0.attr("name","aaa");
				// var name = j_input0.attr("name");
				// j_input0.attr("name"+name);
				console.log(j_input0.val("abc"));
				//debugger;
				
			});
		</script>

		<!-- 		<script type="text/javascript">
			$(document).ready(
			alert("hi")
			);
		</script> -->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1"></div>
		<div class="div2"></div>
		<div id="div3">
			<span></span>
			<p>
				<span>
				</span>
			</p>
		</div>
		<!-- 标签选择器 -->
		<a href="#">a标签</a>
		<script type="text/javascript">
			//id选择器
			$("#div1").html("我的id为div1");
			//类选择器
			$(".div2").html("我的class为div2")
			//console.log("#div3 p>span:")+$("#div3 p>span")[0];
			//通配符,
			//如果要获取id为div3的直接span子元素
			$("#div3>span").text("我的id为div3的子节点")
			//$("#div3>*").html("我的id为div3的子节点")
			
			//元素(标签选择器
			//$("a").css("color","red");
			//textDecoration:"none"去除下划线
			$("a").css({color:"blue",textDecoration:"none"});
		</script>
	</body>
</html>





<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>attribute</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.aaa.com">新浪</a>
		<a href="http://www.bbb.com">新闻</a>
		<a href="">空链接</a>
		<a>空标签</a>
		<br/>
		<span><b>test</b></span>
		<script type="text/javascript">
			//属性选择器的使用
			$(function() {
				$("b").css({
					color:"red"
				});
				
				
				$("[href]").css({
					color: "red"
				});
				$("[href='http://www.baidu.com']").css({
					fontSize: "30px"
				});
				//a标签并且链接不为http://www.baidu.com
				$("a[href!='http://www.baidu.com']").css({
					color: "black"
				});
				//http开头
				$("[href^='http']").css({
					textDecoration:"none"
				});
				//com结尾
				$("[href$='com']").css({
					fontStyle:"italic"
				});
				$("[href*='com']").css({
					color:"blue"
				});
				
			})
		</script>
	</body>
</html>