JQuery 第二天 - 内容过滤选择器
2010-03-30 11:07
162 查看
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>阅读更多
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><title>JQuery DEMO</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
div {
width: 250px;
height: 100px;
border: 1px solid black;
float: left;
padding: 10px;
}
span {
margin: 3px;
border: 1px solid black;
padding: 5px;
}
h1, h2 {
display: inline;
}
</style>
<!--引入 jquery.js 文件-->
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(function(){
//选取所有 内容有1的 div
$("div:contains('1')").css("border","1px solid red");
//选取不包含子元素(包括文本元素)的div空元素
$("div:empty").css("background","red");
//改变含有class为mini元素的div元素的背景色
$("div:has(.mini)").css("background","#bbffaa");
//含有 子元素的div
$("div:parent").css("background","#eeeeee");
//选取所有不可见的img元素 显示5000毫秒
$("img:hidden").show(5000);
//选取所有可见的p元素 :visible
$("p:visible").css("border","1px dashed blue");
});
</script>
</head>
<body>
<span>SPAN2</span>
<div id="div1">
<h1>div h1</h1>
<h2>div h2</h2>
<h1>div h3</h1>
</div>
<div>
<h2>div h2</h2>
<span>div span</span>
</div>
<div>
</div>
<div class="mini">
<span><span id="sp1">div.div.span1</span><span>div.div.span2</span></span>
</div>
<span>SPAN1</span>
<p><input type="text" class="normalText" value="1232"></p>
<p><input type="password" value="1232"></p>
<p><input type="text" value="1232"></p>
<p><input type="text" value="1232"></p>
<p>
<textarea>132</textarea>
<textarea>333</textarea>
<textarea>444</textarea>
<textarea>5555</textarea>
</p>
<!--此图片缓慢显示-->
<img style="display:none" src="image/gun01.jpg" width="400px" height="250px">
</img>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery\Dom对象转换、JQuery各类选择器（基本/层次选择器、基本过滤/内容过滤选择器）
- 【代码片段】jQuery测试内容过滤选择器
- jquery:内容过滤选择器和属性过滤选择器
- jquery内容过滤选择器
- JavaScript学习笔记8-jQuery内容过滤选择器、可见性过滤选择器深度解析
- jQuery选择器之过滤选择器之内容过滤选择器
- jQuery的内容过滤选择器学习教程
- jquery选择器之内容过滤选择器详解
- jQuery过滤选择器之伪类选择器和内容选择器
- jquery内容过滤选择器
- jQuery 内容过滤选择器
- 35、实例 jQuery过滤选择器之内容过滤器
- jQuery 的内容过滤选择器
- jQuery的选择器——内容过滤选择器
- 黑马day16 jquery&内容过滤选择器&可见度选择器
- jQuery内容过滤选择器用法示例
- 使用jQuery内容过滤选择器选择元素
- 【6】jQuery学习——入门jQuery选择器之过滤选择器-内容过滤选择器
- jQuery内容、可见性过滤选择器
- JQuery 内容过滤选择器