Jquery从入门到精通及附件下载（一）
Jquery从入门到精通及附件下载（一）
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k)?，它兼容CSS3，还兼容各种浏览器?（IE?,?FF??Safari?,?Opera?）。jQuery使用户能更方便地处理HTML?documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
版本：
???Jquery有对应不同语言有不同的版本，这里只说说java中的jquery
???Java??jquery最新的版本是：jquery-1.5.1
???下面的附件是最新版本的jquery大家可以直接下载。大家也可以登录官网：????http://jquery.com/下载。
下载之后直接将jquery文件引入：
?
<script type="text/javascript" src="./js/jquery-1.4.4.js"> </script>
?
?
优点：
??其短小精悍，轻量级的js库使用简单方便，性能高效，能极大地提高开发效率，是开发Web应用的最佳的辅助工具之一。
Jquery设计理念：???
????回忆或想象一下，我们在Web开发中是如何使用JavaScript？绝大多数时间都是采用getElementById在Dom文档中找到DOM元素，然后取值或设定值，采用innerHTML取其内容或设定其内容，或进行事件的监听(如click)，在控制样式方面，我们会进行height,width,display等的改变，达到视觉上的效果，对于Ajax方面，也是取到数据在页面的某元素里面去添充内容。
????但是这些还是不能满足开发的需要，比如在DOM树中寻找DOM元素，仅仅只能是通过元素的ID，但是我们想要更方便的查找方法，同时还希望能有一个统一的入口，不要太泛，学习曲线过高或难于使用。
jQuery就是从这里出发，把所有一切都统一在jQuery对象中。使用jQuery就是使用jQuery对象。其实jQuery开创性的工作就是如其名一样：query。它强大的查找功能令所有的框架都黯然失色。jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操作的功能。这样说来jQuery就是查询和操作的统一。查询是入口，操作是结果。
Jquery组成部分：
?1、Selector，查找元素。这个查找不但包含基于CSS1~CSS3的CSS?Selector功能，还包含其对直接查找或间接查找而扩展的一些功能。
2、Dom元素的属性操作。Dom元素可以看作html的标签，对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加，修改，删除，取值等。
3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度，宽度，display等这些常用的CSS的功能。
4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。
5、Event的操作。对Event的兼容做了统一的处理。
6、动画(Fx)的操作。可以看作是CSS样式上的扩展
??
??Jquery的对象：
??在jQuery文档中提供了四种方式：jQuery(expression,[context])，jQuery(html)，jQuery(elements)，jQuery(callback)四种构寻jQuery对象的方式。其中jQuery可以用$代替。这四种是经常用到。其实jQuery的参数可以是任何的元素，都能构成jQuery对象。
??举例说明：?
??1、$($(“P”))可以看出其参数可以是jQuery对象或ArrayLike的集合。
??2、$()是$(document)的简写。
??3、$(3)会把3放到jQuery对象中集合中。
?Jquery对象转换成DOM对象的方法
?1、Jquery对象返回的是一个数组对象可以采用如下方式转换
?????var?domObject?=?$("#thed")[0];
?????2、可以采用Jquery中get(index)方法获取
????get(index)//取得其中一个匹配的元素。?index表示取得第几个匹配的元素。它返回的是一个DOM对象
Jquery中的基本选择器:
???????????????1、id选择器?$("#div");
???????????????2、class选择器?$(".class");
???????????????3、元素选择器器?$("input");
???????????????4、*?匹配所有的元素的Jquery对象?$("*");
???????????????5、并列选择器?用英文的逗号区分?$("tr,tr.text");
层次元素关系
???????????????1、祖先关系???空格符号
???????????????2、父子关系???大于符号
???????????????3、紧跟的关系??+符号
???????????????4、紧跟后的所有兄弟关系??~符号
CSS样式
???????????????1、css("");带有一个参数是获取其属性的值
???????????????2、css("","");为其对象设置一个指定的属性和属性值
???????????????3、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></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>?
?
Jquery的简单选择器
??????????????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代码中的文本内容?如果是多个就组合文本内容并返回
??举例说明：
??????
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script> <script type="text/javascript"> //提示：$(document).ready(function(){});=$(function(){}); $(function (){ var $ses=$(".ses:first"); alert($ses.html());//输出html文本 $ses.css("background-color","blue");//用css样式改变颜色 alert("------"); var $ses1=$(".ses:last"); alert($ses1.text());//输出文本 $ses1.css("background-color","pink"); //even:表示获得偶数的奇数行 及0，2，4 //$("tr:even").css("background-color","green"); //odd:表示获得奇数的偶数行 及1，3，5 //$("tr:odd").css("background-color","red"); //等于某个数 $("tr:eq(1)").css("background-color","red"); //小于 2的数 //$("tr:lt(2)").css("background-color","black"); //大于 3的数 $("tr:gt(2)").css("background-color","yellow"); $(":header").css({"color":"red","font":"18"}); $("tr:not(:first)").css("background-color","black"); }); </script> </head> <body> <div> <h2>信息显示</h2> <fieldset> <table cellpadding="0" cellspacing="0"style="border: 1px solid red; "> <thead> <tr id="thed" style="border: 1px solid red; "> <th> 序号 </th> <th> 姓名 </th> <th> 邮箱 </th> </tr> </thead> <tbody id="tdby"> <tr style="line-height: 18pt; margin-top: 7.5pt; margin-bottom: 7.5pt;">??
?????
???
??
???
?
??
<!--EndFragment-->