zoukankan      html  css  js  c++  java
  • jquery选择器案例分享

    其中选择器都已经注释,需要测试哪个打开注释即可观察效果!!

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				//标签选择器
    				//$("p").css("color","red");
    				//类选择器
    				//$(".p1").css("background","red");
    				//ID选择器
    				//$("#box").css("border","1px solid black").css("height","400px");
    				//并集选择器
    				//$("p,span").css("color","blue");
    				//全局选择器
    				//$("*").css("color","pink");
    				//后代选择器
    				//$("#box p").css("color","red");
    				//子选择器:
    				//$("#box>p").css("color","red");
    				//相邻元素选择器
    				//$(".p2+p").css("color","red");
    				//同辈元素选择器
    				//$(".p2~p").css("color","red");
    				
    				//属性选择器
    				//给包含name的元素表单里面赋值
    				//$("[name]").val("已经赋值");
    				//选择name属性的值为text的赋值
    				//$("[name='text']").val("已经赋值");
    				//给name属性的值不是text的赋值
    				//$("[name!='text']").val("已经赋值");
    				//给name属性的值以p开头的
    				//$("[name^='p']").val("已经赋值");
    				//给name属性的值以e结尾的
    				//$("[name$='e']").val("已经赋值");
    				//给name属性的值包含e的
    				//$("[name*='e']").val("已经赋值");
    				//给包含type属性等于password和name=phone的input属性赋值
    				//$("input[name='password'][type='password']").val("已经赋值");
    				
    				//过滤性选择器
    				//第一个p元素的字体为红色
    				//$("p:first").css("color","red");
    				//最后一个p元素的字体为红色
    				//$("p:last").css("color","red");
    				//p里面class不是p3的字体为红色
    				//$("p:not(.p3)").css("color","red");
    				//p里面偶数的字体为红色(从0开始)
    				//$("p:even").css("color","red");
    				//p里面奇数的字体为红色(从1开始)
    				//$("p:odd").css("color","red");
    				//p里面索引等于3的字体为红色(从0开始)
    				//$("p:eq(3)").css("color","red");
    				//p里面索引大于2的字体为红色(从0开始)
    				//$("p:gt(3)").css("color","red");
    				//p里面索引小于2的字体为红色(从0开始)
    				//$("p:lt(3)").css("color","red");
    				//将网页中的所有标题颜色
    				//$(":header").css("color","red");
    				//获取网页中聚焦点的元素
    				//$("[name='password']").focus();
    				//$(":focus").css("color","red");
    			})
    		</script>
    	</head>
    	<body>
    		<header>
    			这是头部分
    		</header>
    		<div id="box">
    			<p class="p1">
    				第一个p标签
    				<span>这是p1里面的span标签</span>
    				<p>这是p1里面的p标签</p>
    			</p>
    			
    			<p class="p2">第二个p标签</p>
    			<p class="p3">第三个p标签</p>
    			<p class="p4">第四个p标签</p>
    			<p class="p5">第五个p标签</p>
    			<span>
    				这是一个span标签
    				<p>这是span里面的p标签</p>
    			</span>
    			<h2>这是一个h2标签</h2>
    			属性选择器:
    			用户名:<input type="text" name="text" value="" />
    			密码:<input type="password" name="password" value="" />
    			电话:<input type="text" name="phone" value="" />
    			电子邮件:<input type="text" name="email" value="" />
    		</div>
    	</body>
    </html>
    
    
  • 相关阅读:
    开采镍矿与冶炼加工镍的上市公司一览(转载)
    2010年螺纹期货基本走势分析(个人分析原创文章)
    从松柏那转载的ajax类
    推荐30个可以养站的博客(转载)
    年报掘金:机构增仓路线图曝光(20100306转载)
    一个人过习惯了,两个人不知道怎么过。。。
    各大搜索引擎的网站登录入口(转载)
    志向
    主力做庄骗术
    网上发现襄阳市场,说是正品,初步推断举步维艰
  • 原文地址:https://www.cnblogs.com/a1111/p/12815959.html
Copyright © 2011-2022 走看看