JQuery的学习：选择器

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

企鹅漫步

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

阅读量541

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/bamboo261/article/details/10948605

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

attr:操作属性

一个参数的是在获取值

两个参数的是在设置值

层次选择器：

$("#ID p").text("...");

//只找子集，不加只要在范围内都找

alert($("#ID > p").length);

基本过滤器：

选择器：

//ID选择器下的p标签

$("#ID > p :first").css({"color":"red"});

$("#ID p :first").css({"color":"red"});

$("#ID p :not(:first)").css({"color":"red"});

$("#ID p :not(:last)").css({"color":"red"});

//隔行变色

$("#ID p :even").css({"color":"red"});

$("#ID p :odd").css({"color":"red"});

$("#ID p :eq(1)").css({"color":"red"});

$("#ID p :gt(2) ").css({"color":"red"});

$("#ID p :lt(2)").css({"color":"red"});

$("#ID p :lt(3):gt(10)").css({"color":"red"});

//所有

alert($("input").length);

//指定：type="text"

alert($("input：text").length);

alert($("input：text").click(function(){$(this).val("明天");}));

alert($("div").children("p").length);

alert($("div").children("p:last").addClass("p"));

alert($("div").find("a").attr("href"););

alert($("div").find("a").attr("href","http://baidu.com"););

以下是演示代码：

<html>
	<head>
    	<style type="text/css">
			p
			{
				width:100px;
				height:100px;	
			}
        	.p1
			{
				background-color:#069;
		
			}
			.p11
			{
				background-color:#F00;

			}
			
			.p2
			{
				background:#F0F;
				color:#0F0;
			}
			.p22
			{
				background:#000;
			}
			
			.p3
			{
				background:#0F0;
			}
        </style>
	
		<script src="jquery-1.4.1.js" type="text/javascript"/>
		</script>
		
		<script type="text/javascript">
			$(function (){alert('第二章jQuery函数');});
			
			$(function(){
					
					//为所有图像设置src属性。
					$("img").attr("src","2.jpg");
					
					//将所有段落的字体颜色设为红色并且背景为蓝色。
					//$(".p1").css({ color: "#ff0011", background: "blue" });
					$(".p1").css("color","red");
					
					//为每个匹配的元素添加指定的类名。一个或多个要添加到元素中的CSS类名，请用空格分开
					//animate创建自定义动画的函数:params 样式 speed 速度
					//function(){$(this).removeClass()} 擦除效果
					$(".p2").addClass("p22").animate({width:"400px",height:"400px"},8000,function(){$(this).removeClass()});
					
					//toggle 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
					//如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
					//toggleClass 如果存在（不存在）就删除（添加）一个类。
					$("p").toggle(function(){$(this).toggleClass("p22");},function(){$(this).toggleClass("p11");});
					
					

					
					//层次选择器
						//#div1 p 在范围内的都找
/*					$("#div1 p").text("***********");
					alert($("#div1  p").length);*/
						//#div1 > p 只找子集，若不加大于号，只要在范围内的都找
					$("#div1 > p").text("***********");
					alert($("#div1 > p").length);
					
					//基本过滤器:选择器
						//first() --获取第一个元素,然后加个CSS样式
					alert($('li').first().addClass("p11"));
						//last()  --获取最后个元素
					alert($('li').last().addClass("p11"));
					
					//$("#div1 > p").css("color","green");
					//$("#div1  p").css("color","green");
					//$("#div1 > p:first").css("color","green");
					//$("#div1 > p:last").css("color","red");
					//$("#div1 > p:not(:first)").css("color","green");
					//$("#div1  p:not(:first)").css("color","green");
					//$("#div1  p:not(:last)").css("color","yellow");
						//隔行变色
					//$("#div1  p:even").css("color","green");
					//$("#div1  p:odd").css("color","green");
					//$("#div1  p:eq(0)").css("color","green");
					//$("#div1  p:gt(1)").css("color","green");
					//$("#div1  p:lt(2)").css("color","green");
					$("#div1  p:lt(3):gt(0)").css("color","green");
					
					//所有
					//alert($("input").lengh);
					//指定
					//alert($("input:text").length);
					$("ur:li").click(function(){$(this).val("哈哈");});
				}
			)
		</script>
	</head>
	
	<body>
		<img src="1.jpg" style="width:100px;height:100px"></img>
        
        <hr>
        
        <p class="p1">aaaaaaaa</p>
        
        <hr>
        
        <p class="p2">bbbbbbbb</p>
        
        
        
        <hr><hr>
        
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul> 
        
        <hr>
        
        <input type="text" id="" value="">
        <input type="text" id="" value="">
        <input type="button" id="" value="">
        <input type="button" id="" value="">        
        <input type="button" id="" value="">
        <input type="button" id="" value="">
        <input type="submit" id="" value="">
        <input type="radio" id="" value="">  
        
        <div id="div1">
        	<p>div p1</p>
        	<p>div p2</p>    
            <p>div p3</p>
        	<p>div p4</p> 
            <b><p>div p5</p> </b>           
        </div>
	</body>
</html>