<%@ 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(){
//选取拥有属性id的元素
$("div[id]").css("color","red");
//选取title的值为 normal 的div元素
$("div[title=normal]").css("color","blue");
//选取title的值不为normal2 的span元素
$("span[title!=normal2]").css("color","red");
//选取属性的值以test开头的元素
$("span[title^=test]").css("font-size","20");
//选取属性的值以3结束的元素
$("span[title$=3]").css("font-size","20");
//选取属性的值含有 normal 的元素
$("span[title*=normal]").css("font-size","20");
//选取满足多个条件 选取拥有属性id,并且属性title以test结束的 div 元素
$("div[id][title$=test]").css("color","blue");
});
</script>
</head>
<body>
<span title="normal">
SPAN2
</span>
<div id="div1">
<h1>div h1</h1>
</div>
<div title="normal">
<h2 >div h2</h2>
</div>
<div>
<span>div span</span>
</div>
<div>
<span title="test123">
<span id="sp1" title="normal2">div.div.span1</span>
<span>div.div.span2</span>
</span>
</div>
<span title="normal2">
SPAN1
</span>
</body>
</html>
分享到：
相关推荐
第二天：DOM操作 - 理解DOM（Document Object Model）结构 - 使用jQuery选择和操作元素，包括获取和设置元素属性 - 学习元素的添加、删除与替换 第三天：事件处理 - 掌握jQuery的事件绑定方式，如.on()方法 - 学习...
1. **第1-3天**：理解jQuery基本概念，学习选择器和DOM操作，实现简单的元素选取和操作。 2. **第4-6天**：深入学习事件处理，包括事件绑定、解绑和自定义事件，同时了解AJAX的基本用法。 3. **第7-9天**：掌握...
第二天：DOM操作 1. 使用jQuery进行元素的获取、遍历和过滤 2. 学习如何添加、删除和复制DOM元素 3. 理解并运用jQuery中的属性操作，如attr()和prop() 4. 掌握HTML内容的读取和修改，如html()、text()和val() 第三...
第二天，将深入探讨jQuery中的事件处理。jQuery提供了丰富的事件函数，如click()、hover()、change()等，使得处理用户交互变得更加简单。同时，会介绍事件委托，这是一种优化性能的方法，尤其在处理大量动态生成的...
第二天：jQuery事件处理 1. 事件绑定：理解`.on()`方法的使用，包括事件委托，以及如何处理点击、鼠标移动等常见事件。 2. 自定义事件：了解如何触发和监听自定义事件，增强代码的可扩展性。 3. 阻止默认行为与事件...
4. **过滤选择器**：如 `$("div:first")` 选择第一个 `div`，`$("input:checked")` 选择已选中的输入元素。 5. **`.each()` 方法**：遍历匹配的选择器集合，对每个元素执行函数。 **第三天：DOM 操作** 1. **元素...
3. **选择器**：了解基本的选择器，如ID选择器、类选择器、元素选择器，以及组合选择器和属性选择器的用法。 **第二天：DOM操作** 1. **元素操作**：掌握`$(selector).html()`, `text()`, `val()`等方法，用于获取...
2. **选择器**：学习jQuery的选择器语法，如ID选择器、类选择器、元素选择器等，以及更高级的选择器如后代选择器、兄弟选择器和属性选择器，用于精确选取DOM元素。 3. **DOM操作**：掌握如何使用jQuery来添加、删除...
第二天 1.锁机制 2.时间插件、XSS过滤、在线编辑器使用 3.商品的删除 4.商品的修改完成-一张表的操作全部完成 5.tp中使用AJAX提交表单 6.把模板套到项目中 7. 管理员的登录 第三天 1.模板布局 2.图片上传函数、代码...