<!-- 引入jquery文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">
/**第一步加载html页面*/
// window.onload = function(){};//加载html 并且加载外部所有的引用文件(图片,css样式,js等)
/**Jquery*/
//window --->location /history/document/Na...
//DOM对象 是不能使用Jquery中的方法的. JQuery中的对象是不能使用DOM对象的方法
//但是它们之间可以相互转换
//那又是怎么转换的呢?
/**
讲解第一种:DOM对象转换成Jquery对象的方式
1、对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象
var document = window.document;//DOM对象
实现转换方式如下：
var $document=$(document);//$()从哪里来 到底从哪里来？
*/
/**Jquery的页面载入事件处理方式 */
$(document).ready(function ());
<!-- 引入Jquery的文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
<script>
/**
在这里重点介绍：
一：Jquery中的基本选择器
1、id选择器
2、class选择器
3、元素选择器器
4、*
5、并列选择器 用英文的逗号区分
二：重点介绍了Jquery对象转换成DOM对象的方法
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
2、可以采用Jquery中get(index)方法获取
get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
三：重点介绍Jquery对象中的get(index)方法,size()方法,length属性
*/
$(document).ready(function(){
//ID匹配的选择器Jquery对象
//alert($("#thed"));
/**转换成DOM对象的方式
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
*/
alert(($("#thed")[0]).innerHTML);
//class匹配选择器Jquery对象
alert($(".rdc"));
})
/**
2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取
get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
*/
var domObject = $(".rdc").get(0);
alert(domObject.innerHTML);
//* 匹配所有的元素的Jquery对象
alert($("*"));
alert($("*").get(0).innerHTML)
//根据给定的元素名称获取Jquery对象
alert($("tr"));
/**采用第一种方式把$("tr")转换成DOM对象*/
alert(($("tr")[$("tr").size()-1]).innerHTML);
alert(($("tr")[$("tr").length-1]).innerHTML);
//匹配所有选择器的Jquery组合对象
alert($("tr,tr.rdc"));
alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML)
});
</script>
<style>
#thed{
background-color: blue;
}
.rdc{
background-color: red;
}
#tbdy rdc{
}
</style>
</head>
<body>
<div>
<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>
1001
</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>
1003
</td>
<td>
m_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<!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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
层次元素关系
1、祖先关系 空格符号
2、父子关系 大于符号
3、紧跟的关系 +符号
4、紧跟后的所有兄弟关系 ~符号
CSS样式
1、css("");带有一个参数是获取其属性的值
2、css("","");为其对象设置一个指定的属性和属性值
3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};
*/
$(document).ready(function(){
/**层级元素选择器的使用方式*/
/**祖先关系 符号为===>空格*/
var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象
/**输出Jquery对象的大小*/
alert("后代个数是："+$frmipts.size());
/**父子关系 符号为===>>*/
var $ipt = $("form>input");
//为你获取的input添加背景颜色
/**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/
var iptt = $ipt[0];
iptt.style.backgroundColor="red";
alert("-----------改变中介线---------------");
/**采用Jquery对象本身的css方法来设置样式*/
$ipt.css("background-color","blue");
/**匹配所有紧接在某个元素后的某个元素 符号为===> +*/
var $lipts=$("label+input");
/**为其添加背景颜色*/
$lipts.css("background-color","green");
/**匹配 prev 元素之后的所有 siblings(兄弟) 元素 符号为====> ~*/
var $fipts = $("form~input");
$fipts.css("background-color","yellow");
/**我使用到了CSS样式
.css("")//获取其样式属性的值
案例： $fipts.css("background-color");
.css("","") //为其添加样式属性及属性值
$fipts.css("background-color","yellow");
.css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。
$fipts.css({"background-color":"red","color":"blue"});
*/
alert("获取该Jquery对象的背景颜色值："+$fipts.css("background-color"));
});
</script>
</head>
<body>
<div>
<div>
<input name="ddd"/>
<h1>
层级选择器的使用方式
</h1>
</div>
<div id="#frm">
邮箱：<input name="test"/>
<form>
<label>
Name:
</label>
<input name="name"/>
<fieldset>
<label>
Newsletter:
</label>
<input name="newsletter" />
</fieldset>
<label>
Age:
</label>
<input name="age"/>
</form>
<label>
周星驰:
</label>
<br/>
姓名：<input name="none" /><br/>
</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的js文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
/**
简单选择器
1、：first 匹配的第一个
2、：last 匹配的最后一个
3、：lt(index) 小于某个的
4、：gt(index) 大于某个的;
5、：eq(index) 等于某个 相当于过滤器中的.eq(index)
6、：even 奇数行
7、：odd 偶数行
8、：header 匹配h1,h2 h3 等标题
9、：not 除去匹配的(剩下的)
过滤器：
.eq(index)匹配某个
属性中html代码
.html()返回整个html文本
属性的文本
.text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
//纠正：开始讲的过滤器
*/
/**页面载入事件处理*/
$(function(){
//获取class类别选择器JQuery对像集合中的第一个对象
var $tr1 = $(".rdc:first");
//属性：.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
alert($tr1.html());
//获取class选择器对象集合中的最后一个对象
var $ltr = $(".rdc:last");
//属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
alert($ltr.text());
/** even匹配的是索引是:0 2 4 但行数是1,3 5......
:even 选择奇数行并且为其添加背景颜色为红色*/
$("tr:even").css("background-color","red");
/** :odd 选择偶数行并且为其添加背景颜色为蓝色*/
$("tr:odd").css("background-color","blue");
/**$("tr")取得所有的行的JQuery对象的集合
.eq(index)匹配一个给定索引值的元素的Jquery对象
.css("","")为Jquery对象添加一个样式属性和属性值
对象链式操作*/
$("tr:eq(2)").css("background-color","yellow");
//等效于
$("tr").eq(2).css("background-color","yellow");
/**集合 List --->get(index)--->具体的对象--->具体对象的方法*/
/**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/
$("tr:lt(1)").css("background-color","green");
/**取得索引大于1 并且把背景颜色设置为black*/
$("tr:gt(1)").css("background-color","black");
//匹配不是最后一行的样式背景颜色统一设置为红色
$("tr:not(:last)").css("background-color","red");
//匹配标题
alert($(":header").html());
});
</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>
1001
</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 class="rdc">
<td>
1003
</td>
<td>
m_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
<tr>
<td>
1004
</td>
<td>
x_j
</td>
<td>
redarmy_chen@qq.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
分享到：
相关推荐
**jQuery 框架知识讲解** jQuery 是一个高效、易用的 JavaScript 库，它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画设计以及Ajax交互。由程祖红老师主讲的这门课程深入浅出地介绍了jQuery的核心概念和...
房延昌老师的jQuery讲解PPT系列，全面覆盖了jQuery的基础知识到高级技巧，旨在帮助学习者深入理解并熟练运用这一强大的工具。 在jQuery（一）.ppt中，房老师可能首先介绍了jQuery的基本概念，包括其核心理念“Write...
在IT领域，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，使得网页动态化和DOM操作变得简单易行。本篇文章将深入探讨jQuery的使用，并通过一系列实例来帮助理解其核心概念和功能。 首先，...
经典的JQuery讲解和案例，，更容易了解JQuery精髓
本教程通过一个详细的视频讲解，旨在帮助新手和初学者快速掌握这两个工具的核心知识。 **jQuery简介** jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及AJAX交互等任务。...
jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。自2006年发布以来，jQuery已经成为了Web开发领域不可或缺的一部分，因其简洁易用的API而备受开发者喜爱。...
**jQuery核心讲解** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个“jQuery核心讲解帮忙文档”是专为初学者设计的，旨在帮助他们快速掌握jQuery的基本概念...
jQuery是一款强大的JavaScript库，它极大地简化了JavaScript编程，使得网页动态化和DOM操作变得更加简单。自2006年发布以来，jQuery迅速成为Web开发领域中最受欢迎的库之一，尤其在处理浏览器兼容性和事件处理方面，...
**jQuery基础讲解及示例** jQuery是一个广泛应用于Web开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。学习jQuery对于前端开发者来说至关重要，因为它提高了开发效率并降低了...
接下来，我们将详细讲解如何使用 `jquery.cookie` 插件以及实现这个功能的具体步骤。 首先，`jquery.cookie` 是一个 jQuery 的扩展插件，它允许我们在客户端存储和读取 cookies。Cookie 是一种小型文本文件，存储在...
jquery.validate例实讲解，用户手册
jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API、强大的功能和良好的浏览器兼容性赢得了开发者们的喜爱。本文将深入解析jQuery的源码，帮助你更好地理解其内部机制，从而提升你的JavaScript编程...
**jQuery实战讲解及详细API** 在Web开发领域，jQuery是一个非常流行且强大的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本教程将深入讲解jQuery的核心概念，通过实战案例来帮助理解，...
标题中的“jquery写的一个日期选择应用”指的是使用jQuery库开发的一款日期选择插件。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在网页开发中，日期选择器是常见的...
JQuery是一个轻量级的JavaScript库，极大地简化了DOM操作、事件处理、动画效果以及AJAX交互。在Struts2应用中，JQuery可以用于增强用户体验，例如实现动态加载数据、表单验证和异步提交等。结合Struts2的Ajax插件，...
本教程将深入讲解如何使用jQuery来创建一个在线二维码（QRCode）生成器，使得用户可以通过简单的扫瞄，快速获取或分享信息。 首先，我们需要引入jQuery库。在HTML文件中，可以通过以下方式添加jQuery引用： ```html...
本篇文章将详细讲解基于jQuery的一个简单消息提醒插件的实现和应用，帮助开发者更好地理解和使用这类插件。 首先，我们要明白消息提醒插件的基本功能：在网页中显示提示信息，如警告、成功、错误或信息通知，通常以...
本教程将详细讲解如何利用jQuery这个强大的JavaScript库来实现一个简单而实用的电子相册效果，非常适合初学者学习和借鉴。 ### 1. jQuery基础 在开始之前，我们需要了解jQuery的基本概念。jQuery是一个轻量级的...