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即可。
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
一、下面就写一个最简单的Jquery案例:
<!-- 第一步:引入jquery文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript">
/**
讲解第一种:DOM对象转换成Jquery对象的方式
1、对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象
var document = window.document;//DOM对象
实现转换方式如下:
var $document=$(document);//$()从哪里来 到底从哪里来?
*/
/**Jquery的页面载入事件处理方式 */
$(document).ready(function (){ //加载html 立即加载
alert("第一个Jquery的案例")
});
/**理解:
1、Jquery的引入方式
2、$的由来
3、DOM对象与Jquery对象转换
4、理解匿名函数的处理*/
</script>
二、下面介绍一下基本选择器:
<1>:Jquery中的基本选择器
1、id选择器
alert(($("#thed")[0]).innerHTML);
2、class选择器
alert($(".rdc").innerHTML);
3、元素选择器器
alert($("tr"));
4、*
alert($("*"));
5、并列选择器 用英文的逗号区分
alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML)
<2>:重点介绍了Jquery对象转换成DOM对象的方法
1、Jquery对象返回的是一个数组对象可以采用如下方式转换
var domObject = $("#thed")[0];
2、可以采用Jquery中get(index)方法获取
get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象
<3>:重点介绍Jquery对象中的get(index)方法,size()方法,length属性
alert(($("tr")[$("tr").size()-1]).innerHTML);
alert(($("tr")[$("tr").length-1]).innerHTML);
三、
层次元素关系
1、祖先关系 空格符号
var $frmipts = $("div input");
2、父子关系 大于符号
var $ipt = $("form>input");
3、紧跟的关系 +符号
var $lipts=$("label+input");
4、紧跟后的所有兄弟关系 ~符号
var $fipts = $("form~input");
$fipts.css("background-color","yellow");
CSS样式
1、css("");带有一个参数是获取其属性的值
2、css("","");为其对象设置一个指定的属性和属性值
var $fipts = $("form~input");
$fipts.css("background-color","yellow");
3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};
四、
简单选择器
1、:first 匹配的第一个
var $tr1 = $(".rdc:first");
2、:last 匹配的最后一个
var $ltr = $(".rdc:last");
3、:lt(index) 小于某个的
$("tr:lt(1)").css("background-color","green");
4、:gt(index) 大于某个的;
$("tr:gt(1)").css("background-color","green");
5、:eq(index) 等于某个 相当于过滤器中的.eq(index)
$("tr:eq(1)").css("background-color","green");
6、:even 奇数行
$("tr:even").css("background-color","green");
7、:odd 偶数行
$("tr:odd").css("background-color","green");
8、:header 匹配h1,h2 h3 等标题
alert($(":header").html());
9、:not 除去匹配的(剩下的)
$("tr:not(:last)").css("background-color","red");
过滤器:
.eq(index)匹配某个
属性中html代码
.html()返回整个html文本
alert($tr1.html());
属性的文本
.text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回
alert($tr1.text());