<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入Jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
内容选择器
1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合
2、:empty 匹配空元素 没有子元素或没有文本的元素
3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
4、:parent 匹配含有子元素或者文本的元素的对象集合
总结:在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合
*/
/**页面载入事件处理*/
$(function(){
/**获取td中含有10的td的对象集合*/
var $tds = $("td:contains('redarmy')");
/**输出此集合的长度*/
alert($tds.size()+"=========="+$tds.text());
/**获取tr中含有redarmy的tr对象的集合*/
var $rtds = $(".rdc:contains('redarmy')");//tr对象
/**输出此集合的长度*/
alert($rtds.text()+"-------"+$rtds.size());
/**获取rdc中td的含有redarmy的td对象集合*/
var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象
alert($rtds1.size()+"===="+$rtds1.text());
/**获取id为qw的tr对象中td的空元素*/
var $etd = $("#qw>td:empty");
alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td>
//获取tbody中含有rdc的tbody对象
var $tbdys = $("#tbdy:has(.rdc)");
alert($tbdys.html()+"------------"+$tbdys.size());
//获取tbody中含有rdc的tr对象集合
var $trs = $("#tbdy>.rdc");
alert($trs.html()+"------------"+$trs.size());
//获取.rdc中含有子元素或者文本元素的.rdc的对象
var $tdps = $(".rdc:parent"); //tr对象
alert($tdps.html()+"--------"+$tdps.text());
})
</script>
</head>
<body>
<div align="center">
<div>
<h1>内容选择器的应用</h1>
</div>
<div>
<table border="1px" cellpadding="0" cellspacing="0">
<thead>
<tr id="thed">
<th>
序号
</th>
<th>
名称
</th>
<th>
邮箱
</th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="rdc">
<td></td>
<td>
redarmy_chen
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1002
</td>
<td>
l_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr id="qw">
<td></td>
<td colspan="2"/>
<td>1</td>
</tr>
</tbody>
<!-- 为了测试:parent -->
<tr class="rdc">
aaa
</tr>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入Jquery的文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**页面载入处理*/
function test(){
/**不可见性的测试*/
var $hids = $("div:hidden");
alert($hids.html()+"----------"+$hids.text());
/**可见性测试*/
var $vlis = $("#rdc:visible");
alert($vlis.html());
/**表单选择器*/
var $btns = $(":button");
/**获取button按钮中的value属性的值*/
alert($btns.attr("value")+"------------"+$btns.size());
/**遍历所有的button的value属性值*/
for(var i=0;i<$btns.size();i++){
/**注意DOM对象转换成Jquery对象 |Jquery对象转换成DOM对象*/
// alert($($btns[i]).attr("value"));
}
//获取btn的子元素为button按钮的input对象
var $divbtns = $("#btn>input:button");
alert($divbtns.size());
//获取所有checkbox的复选框
var $ckbs = $(":checkbox");
//获取ckb中所有checkbox的复选框
var $ckbs1 = $("#ckb input:checkbox");
alert($ckbs1.length);
//获取所有的input select 的对象集合
var $ipts = $(":input");
alert($ipts.size());
}
$(function(){
//获取所有的checkedinput表单对象 不包含select中的option
//var $ickeds = $("input:checked");
var $ickeds = $("input[checked='true']");
alert($ickeds.length);
//获取所有复选框被选中的表单对象
/**
var $ckbs = $("input:checkbox:checked");
alert($ckbs.length);
*/
/**根据属性attribute=value*/
var $ckbs = $("input[type='checkbox']:checked");
alert($ckbs.length);
/**表单对象的属性:
:checked
:disabled
:enabled
:selected
以上的结果可以通过属性进行改造:
input[checked='true']
作业:查看上面三种是否也可以改造*/
});
</script>
</head>
<body>
<div>
<div>
<h1>
可见性的测试
</h1>
</div>
<div>
<div style="display: none;">
通过样式设计不可见!
</div>
<div>
<form action="">
<table>
<tr id="rdc">
<td>用户名:</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>性别:</td>
<td><select name="sex">
<option>男</option>
<option>女</option>
</select></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>上传:</td>
<td><input type="file" name="file"/></td>
</tr>
<tr id="ckb">
<td>爱好:</td>
<td><input type="checkbox" name="fav"/> 看书
<input type="checkbox" name="fav" checked="checked"/>打球
<input type="checkbox" name="fav"/>篮球
<input type="checkbox" name="fav"/>游泳
</td>
</tr>
<tr>
<td><input type="hidden" value="id" name="id"/></td>
<td><input type="button" value="修改"/></td>
</tr>
</table>
</form>
</div>
</div>
<div id="btn">
<input type="button" value="修改1"/>
<input type="button" value="修改2"/>
<input type="button" value="修改3"/>
<input type="checkbox" name="fav" checked="checked"/>游泳
<input type="radio" checked="checked"/>man
<input type="radio"/>woman
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo03.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
function test() {
/**测试设置属性值
attr("key",fn)*/
$("#attr>input").attr("value", function() {
return "redarmy";
});
alert("-------中介线-------");
/**设置属性及属性值 attr(key,value);*/
$("#attr>input").attr("value", "m_j");
//获取值
var name = $("#attr>input").attr("name");
alert(name);
//匹配元素中批量设置很多属性的最佳方式
/**attr(properties) 名/值 {}*/
$("#attr>input").attr( {
value : "x_l",
disabled : "disabled"
});
/**移除某个属性*/
$("#attr>input").removeAttr("disabled");
/**添加类名*/
$("#attr>input").addClass("ipt");
/**移除类名*/
$("#attr>input").removeClass("ipt");
alert("---------------------------执行之前观察效果");
/**如果存在(不存在)就删除(添加)一个类。
*/
$("#attr>input").toggleClass("ipt")
alert("---------------------------执行之后观察效果");
$("#attr").html('邮箱:<input name="name" type="text" />');
$("#attr").text("<u>Some</u> new text");
alert($("#single").val("Single2"));
}
$(function() {
/*如果是type =checkbox,radio,select val值代表的是checked,selected
type="text" val("")代表的是value的值*/
$("#nam").val("HelloWorld");
});
</script>
<style>
.ipt {
border-color: red;
}
</style>
</head>
<body>
<div align="center">
<div id="attr">
用户名:
<input name="name" type="text" class="ipt" />
密码:
<input name="name" type="text" id="nam"/>
</div>
<div>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo04.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入Jquery的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script type="text/javascript">
function test() {
/**eq()匹配结果中的第几个对象*/
var $p = $("p").eq(1);
alert($p.html());
/**filter("")过滤*/
var $p1 = $("p").filter(".rcd");
alert($p1.html());
/**filter(",,,,....")可以有多个表达式*/
var $p2 = $("p").filter(".rcd,:first");
alert($p2.text());
}
$(document).ready(function() {
/**把鱼$(#ad>p).span连接成一个对象*/
var $adp = $("#ad>p").add("span");
alert($adp.text())
});
</script>
</head>
<body>
<div>
<div>
<h1>
筛选的使用
</h1>
</div>
<div>
<p>
过滤
</p>
<p>
查找
</p>
<p class="rcd">
串联
</p>
</div>
<div id="ad">
<p>
Hello
</p>
<span> redarmy_chen </span>
</div>
</div>
</body>
分享到:
相关推荐
**jQuery 框架知识讲解** jQuery 是一个高效、易用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画设计以及Ajax交互。由程祖红老师主讲的这门课程深入浅出地介绍了jQuery的核心概念和...
房延昌老师的jQuery讲解PPT系列,全面覆盖了jQuery的基础知识到高级技巧,旨在帮助学习者深入理解并熟练运用这一强大的工具。 在jQuery(一).ppt中,房老师可能首先介绍了jQuery的基本概念,包括其核心理念“Write...
在IT领域,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,使得网页动态化和DOM操作变得简单易行。本篇文章将深入探讨jQuery的使用,并通过一系列实例来帮助理解其核心概念和功能。 首先,...
### jQuery实战第二版知识点概述 #### 一、书籍基本信息与评价 - **书籍名称**:《jQuery实战第二版》(jQuery in Action, Second Edition) - **作者**:Bear Bibeault 和 Yehuda Katz - **出版商**:MANNING - **...
经典的JQuery讲解和案例,,更容易了解JQuery精髓
在《锋利的jQuery第二版》中,作者深入浅出地讲解了jQuery的核心概念,包括选择器(用于定位HTML元素)、遍历(对元素集合进行操作)、属性操作(修改或获取元素的属性)、事件绑定(监听和响应用户行为)以及插件...
《锋利的jQuery第二版》是一本深入解析jQuery库及其应用的专业书籍,旨在帮助开发者更好地理解和运用这个强大的JavaScript库。该书的实例源码压缩包包含了大量的代码示例,是学习和进阶jQuery技术的重要资源。 ...
在《锋利的jQuery》第二版中,作者详细讲解了这些内容,并通过源码展示了如何在实际项目中应用。 1. **选择器**:jQuery提供了丰富的CSS选择器,使得选择DOM元素变得简单高效。例如,`$("#id")`用于选取ID为指定值...
“jquery+ajax的视频讲解”将带领你深入理解jQuery如何简化AJAX操作,以及如何在实际项目中运用这些技术。无论你是初学者还是有一定经验的开发者,这个教程都将帮助你更好地掌握这一强大工具,提升你的Web开发技能。...
10. **最新版本特性**:由于是第二版,书中会涉及jQuery的最新版本,讲解新功能和改进,确保读者掌握最新的技术趋势。 学习《精通jQuery(中文第二版)》,不仅可以提升JavaScript编程技能,还能使开发者在网页动态...
**jQuery 框架概述** jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。自2006年发布以来,jQuery已经成为了Web开发领域不可或缺的一部分,因其简洁易用的...
**jQuery核心讲解** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个“jQuery核心讲解帮忙文档”是专为初学者设计的,旨在帮助他们快速掌握jQuery的基本概念...
### 二、jQuery的主要方法 1. **选择器**:如`$("tag.class#id")`用于选取特定的元素,`.find()`则用于在已选元素中进一步查找。 2. **遍历操作**:`.each()`函数可以对集合中的每个元素执行指定的操作。 3. **...
《锋利的jQuery(第二版)》是一本深入解析jQuery技术的权威著作,它为读者提供了全面、系统的学习路径,帮助开发者充分利用jQuery的强大功能。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理...
**jQuery基础讲解及示例** jQuery是一个广泛应用于Web开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。学习jQuery对于前端开发者来说至关重要,因为它提高了开发效率并降低了...
- **第二章:选择器和DOM操作** —— 讲解如何使用jQuery进行元素的选择和DOM操作。 - **第三章:事件处理** —— 探讨jQuery提供的各种事件处理机制及其用法。 - **第四章:Ajax** —— 介绍如何利用jQuery轻松实现...
jquery.validate例实讲解,用户手册
《锋利的jQuery第二版》是一本深受前端开发者喜爱的jQuery教程,旨在帮助读者深入理解和熟练运用jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互,使得前端开发变得更加高效...
**二、jQuery API详解** `jQuery.validate.js`是用于表单验证的插件,其API包括: 1. **validate()**: 初始化验证,接受一个配置对象,用于设置验证规则和消息。 2. **rules()**: 添加或获取验证规则。 3. **...