jQuery基本选择器的使用(一)

最新推荐文章于 2024-09-05 16:56:18 发布

董世森学习

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量110

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43319279/article/details/102370492

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

接着上一讲的内容:代码如下：

<!DOCTYPE html><!--标记文本为html-->
<html>
<head>
	<meta charset="utf-8"><!--编码是utf-8 --> 
	<title>day01</title><!--标题-->
	<script src="jquery-3.3.1.min.js">
	</script><!--搭建环境-->
	<script>
		$(document).ready(
			function(){
				//第一种
				// alert("hello world");

				//二种 
				// if(confirm("你好！")){
				// 		alert("yes");
    // 			}else{
 			// 			alert("no");
		  //   	}
			
				// 三种
				// var c //声明变量，可以一开始就对它进行赋值 ；
				// var b = 123;
				// var d = '123';
			 	// var a=prompt("请输入密码：");
			 	// alert(a);
				
			 	// function c(){
 				// 	b=1234;		
			 	// };

			 	// c();
			 	// alert(b); 

				// if(b===d){
				// 	alert("相等");
				// 	//注意这里要使用全等，===
				// }else{
			 //        alert("不相等");
				// }


	});
	</script>
</head>
<body>
	<div class="c"> 
		c
	</div>
	<div id="a"  name="b" class="c">
			id="a"  name="b" class="c"的选择器。
			<div>eq(0)
				<div >div1</div>
			</div>
	        <div class="c">eq(1)</div>
		    <div>eq(2)</div>
	</div>
	<div class="c"> 
		c
	</div>
	<div id="a"  name="b1" class="c1">
			.a.c的类选择器。
	</div>
	<div id="a1">
			a1的类选择器。
	</div>
	<div id="a2">
			a2的类选择器。
	</div>
	<div class="a1"> 
		a1 
	</div>

	<div class="c"> 
		c
	</div>

	<div class="a2"> 
		a2
	</div>
	<div class="a3"> 
		a3
	</div>
	<script>

		// $("div").eq(0).css("color","red");
		//$("div")表示是一个jQuery的选择器
		// 改变css样式
		//$("div").eq(0) ;这个eq(0)是相对于父元素的排行榜，第一个为0。
		// $("#a").css("background","#ff0");//id选择器的使用
		// $(".c").css("color","red");//类名选择器的使用
		// $(".a.c").css("color","blue");//类名选择器的使用
		// $(".c,.c1,#a1").css("color","red");//拼接选择器。
		// $("*").css("color","red");//作用与页面中的所有
        // $("#a div").eq(0).css("background","red"); //层次选择器。
       //  $("#a>.c").css("background","red"); //>只找子元素。
      //   $("#a+.c").css("background","red"); //下一个选择器。
        // $("#a~.c").css("background","red"); //这个选择器后面的兄弟。 =
        // $("#a").siblings(".c").css("background","red");//sibling:同辈的
        // $("#a").siblings().css("background","red");//找同辈的选择器
          // $("#a").parent().css("background","red");//找父辈，这个父辈是bady，
          // $("#a").children().css("background","red");//子类中所有的元素。
          //$("#a").find(".c").css("background","red");//找后代
	</script>
</body>
</html>