索引选择器

  • 想HTML中的表格里面一定会有许多的tr,td,下拉列表框中会有许多"option"或者无序列表中有许多的"li"元素,所以针对于这些返回多个元素的操作,就可以通过索引来完成处理.
  • 索引选择器有如下几种
1 :first 取得所有返回元素的第一个索引元素,或使用first()函数代替 返回单个元素
2 :last 取得所有返回元素的最后一个索引元素,或者使用last()函数代替 返回单个元素
3 :not(元素) 排除制定元素之外的所有元素 元素集合
4 :even() 取得所有索引编号是偶数的元素,索引值都是从0开始 返回元素集合
5 :odd() 取得所有索引编号是奇数的元素 返回元素集合
6 :eq 取得指定索引编号的内容 单个元素
7 :gt 取得大于指定索引编号的所有元素 返回元素集合
8 :lt 取得所有小鱼指定索引变好的元素 元素集合
9 :header 取得所有的元素的信息 返回元素集合
  • 以上的选择器可以直接使用查找 ,但是直接使用默认是从根元素开始查找

取得首个元素

  • 编写一个简单的列表元素
  • 取得第一个元素
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8">script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(
			function(){
				$("div>ul li:first").attr("class","init");
			}
		);
	script>
head>
<body>
	<div>
		<ul>
			<li>便利店li>
			<li>麦当劳li>
			<li>加油站li>
			<li>居民楼li>
			<li>物业li>
		ul>
	div>
	
body>
html>	
  • 运行结果

索引选择器_第1张图片

  • 以上的操作同样也可以使用first()函数来代替
	$(
			function(){
				$("div>ul li").first().attr("class","init");
			}
		);
  • 想表格行,第一行都是一些标题信息,标题信息旺旺会使用一些特殊的样式来进行显示设置.
  • 对于此时要想取得所有的li元素可以有如下的两种形式
    • $(“div>ul li”).attr(“class”,“init”);
      • 以div作为父元素,并且以ul是直接子元素的所有li元素
    • $(“ul li”).attr(“class”,“init”);
      • 找到所有ul中的所有li子元素,不管这些元素见是否有关系.

取得最后一个元素

  • 使用":last"取得最后一个元素
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8">script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(
			function(){
				$("div>ul li:last").attr("class","init");
			}
		);
	script>
head>
<body>
	<div>
		<ul>
			<li>便利店li>
			<li>麦当劳li>
			<li>加油站li>
			<li>居民楼li>
			<li>物业li>
		ul>
	div>
	
body>
html>	

索引选择器_第2张图片

  • 同样也可以使用last()函数来代替
		$(
			function(){
				$("div>ul li").last().attr("class","init");
			}
		);

排除选择器

  • 排除选择器指的是要进行指定元素的排除
  • 选择div下的所有p元素,排除span元素
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8">script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(
			function(){
				$("div *:not(span)").attr("class","init");
			}
		);
	script>
head>
<body>
	<div>
			<p>便利店p>
			<p>麦当劳p>
			<p>加油站p>
			<p>居民楼p>
			<span>自动洗车span>
			<p>高速公路p>
	div>
body>
html>	

索引选择器_第3张图片

  • 此类的操作也可以使用not()函数来进行处理
	$(
			function(){
				$("div *").not("span").attr("class","init");
			}
		);

奇偶数索引选择器

    • 一把情况下在进行表哥列表的时候,会出现奇偶数的问题
  • 表格处理操作—偶数处理
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8">script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//选择表格下的偶数位tr元素
			$("table tr:even").attr("class","init");
		})
	script>
head>
<body>
	<div>
		<table border="">
			<tr><td>姓名td><td>年龄td><td>编号td>tr>
			<tr><td>xiemaoshutd><td>22td><td>9527td>tr>
			<tr><td>lanchaohuitd><td>21td><td>78945td>tr>
			<tr><td>killtd><td>20td><td>45612td>tr>
			<tr><td>admintd><td>33td><td>4561td>tr>
		
		table>
	div>
	
body>
html>	

索引选择器_第4张图片

  • 示例:设置奇数操作
		$(function(){
			
			$("table tr:odd").attr("class","init");
		})

索引选择器_第5张图片

标题选择器

  • 可以选择h1,~h9的元素对象信息
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8">script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			
			$("div :header").attr("class","init");
		})
	script>
head>
<body>
	<div>
		<h1>HelloWorldh1>
		<h2>HelloWorldh2>
		<h3>HelloWorldh3>
		<h4>HelloWorldh4>
		<h5>HelloWorldh5>
		<h6>HelloWorldh6>
		<h7>HelloWorldh7>
		<h8>HelloWorldh8>
		<h9>HelloWorldh9>
		<h10>HelloWorldh10>
	div>
	
body>
html>	

索引选择器_第6张图片

  • 一定要记住的是,进行元素查询的时候需要设置后查询的范围

你可能感兴趣的:(javaweb学习笔记)