您的位置：首页 > Web前端 > JQuery

jQuery选择器

2017-02-16 13:56 417 查看

（一）基本选择器

基本：ID，class,标签选择器
组合：并列，后代，子级

（二）过滤选择器
1.基本过滤：按照冒号前面的元素在HTML文档中的原始位置来过滤
:first,:last,:eq(n)，not(选择器)，:lt(n)，:gt(n)，odd，even

2.属性过滤：根据元素的属性进行筛选
[属性名],[属性名=值],[属性名!=值],[属性名*=值],[属性名^=值]，[属性名$=值]

3.内容过滤
:has(选择器) 找出带有某种选择器的子元素的外部元素
:contains(文字)

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="JS/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//***********内容过滤选择器*************
//$("div:has(span)").css("background-color","green");找包含span标签的div
//$("div:has(*)").css("background-color","green");*是找带有子元素的div
//$("div:contains(ve)").css("background-color","green");找内容包含ve的div
//***********属性过滤选择器*************
//$("div[title]").css("background-color","green");找有title属性的div
//$("div[title=love]").css("background-color","green");找title是love的div
//$("div[title!=love]").css("background-color","green");找title不是love的div
//$("div[title*=ve]").css("background-color","green");*=包含
//$("div[title^=ve]").css("background-color","green");^=以什么开头
//$("div[title$=ve]").css("background-color","green");$=以什么结尾
//***********基本过滤选择器*************
//$("div:first").css("background-color","green");第一个div
//$("div:last").css("background-color","green");最后一个div
//$("div:eq(1)").css("background-color","green");根据索引号找，索引号从0开始
//$("div:lt(2)").css("background-color","green");找索引号2之前的
//$("div:gt(2)").css("background-color","green");找索引号2之后的
//$("div:not(div:eq(1))").css("background-color","green");not(过滤器)是排除掉哪一个
//$("div:odd").css("background-color","green");奇数
//$("div:even").css("background-color","green");偶数
//***********基本选择器*************
//$("div").css("background-color","green");    找所有的div
//$(".tt").css("background-color","green"); 根据Class名找
//$("#d5").css("background-color","green"); 根据ID名找
//$("div,p").css("background-color","green"); 找所有的div和p,并列关系
//$("div p").css("background-color","green"); 找div里面的p，后代关系
//$("div.tt").css("background-color","green");找class是tt的div
//$("div>p").css("background-color","green"); 找是div子级的p

});
</script>
<style type="text/css">
div{
width:100px;
height:100px;
background-color: yellow;
border: 5px solid red;
margin: 10px;
float: left;
}
span{
width:80px;
height:80px;
background-color: blue;
border: 1px solid red;
margin: 10px;
float: left;
}
p{
width:50px;
height:50px;
background-color: aqua;
border: 1px solid red;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="d1" class="tt" title="love">title="love"</div>
<div id="d2">
<span>
<p></p>
</span>
</div>
<div id="d3">
<p></p>
</div>
<div id="d4" class="tt"></div>
<div id="d5" title="very">title="very"</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航