1．JQuery概述：Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。其宗旨是写更少的代码,做更多的事情。
2．JQuery：
(1) 引入JQuery对象：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
(2) 加载页面：
$(document).ready(function(){
});
或
$(function(){
});
(3) DOM对象与JQuery对象之间进行相互转化
DOM对象 是不能使用Jquery中的方法的. JQuery中的对象是不能使用DOM对象的方法，所以需要在DOM对象与JQuery对象之间进行相互转化。
DOM对象JQuery对象的转化：
1．DOM对象转换成Jquery对象的方式
对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象
例：var $document=$(document);
2．Jquery对象转换成DOM对象
第一种：get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
例：var domObject = $(".rdc").get(0);
第二种：Jquery对象返回的是一个数组对象可以采用如下方式转换，$(“tr”)[index],index是数组对象的下标
例：var domObject = $("#thed")[0];
(4) 关于query对象主要涉及到query对象中的
get(index)方法, Jquery对象转换成DOM对象
size()方法,获取query对象的长度 例：alert(($("tr")[$("tr").size()-1]).innerHTML);
length属性 例： alert(($("tr")[$("tr").length-1]).innerHTML);
(5) Jquery中的基本选择器
id选择器 ID匹配的选择器Jquery对象 例：$("#thed")
class选择器 class匹配选择器Jquery对象 例：$(".thed")
元素选择器 根据给定的元素名称获取Jquery对象 例：$("tr")
* 匹配所有的元素的Jquery对象 例：$("*")
并列选择器 匹配所有选择器的Jquery组合对象，用英文的逗号区分
例：$("tr,tr.rdc")
(6) Jquery中的层次关系
祖先关系 空格符号
父子关系 大于符号
紧跟的关系 +符号
紧跟后的所有兄弟关系 ~符号
CSS样式
css("");带有一个参数是获取其属性的值
css("","");为其对象设置一个指定的属性和属性值
css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};
案例：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script> <script>
$(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>
<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>
(7) 简单选择器
：first 匹配的第一个
：last 匹配的最后一个
：lt(index) 小于某个的
：gt(index) 大于某个的;
：eq(index) 等于某个 相当于过滤器中的.eq(index)
：even 奇数行
：odd 偶数行
：header 匹配h1,h2 h3 等标题
：not 除去匹配的(剩下的)
(8) 过滤器：
.eq(index)匹配某个
属性中html代码 .html()返回整个html文本
属性的文本 .text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
演示案例：
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
$(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>
<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>
</tbody>
</table>
</div
</div>
</body>
扫一扫
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
