Jquery从入门到精通及附件下载（一） -

javawangli

浏览: 224876 次
性别:
来自: 北京

最近访客更多访客>>

mmylover

rubys

yss1605

qq222196

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Jquery从入门到精通及附件下载（一）

博客分类：

java编程

jQuery CSS Ajax JavaScript CMM

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 class="ses">

                <td>100 </td>

                <td>wangli</td>

                <td>111@11.cmm </td>              

               </tr>

               <tr>

                <td>1001 </td>

                <td>wangli2222</td>

                <td>111@11sf.cmm </td>              

               </tr>

               <tr class="ses">

                <td>1002</td>

                <td>wangliqqq</td>

                <td>111@11adsad.cmm </td>              

               </tr>              

              </tbody>           

           </table>

           </fieldset>    

        </div>

</html>

jquery.rar (208.3 KB)
描述: 最新最全
下载次数: 65

0
顶

2
踩

分享到：

Android 入门eclipse+ADT配置，bug处理及 ... | javascript eval函数解析json数据时为什么 ...

2011-03-30 08:15
浏览 3851
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery从入门到精通及附件下载（一）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery从入门到精通及附件下载（一）

评论

发表评论

相关推荐

项目框架和项目架构的区别是什么？

(原创)javascript 实现批量打印《简历》

java+Ckeditor

iteye 这是咋了

不查不知道 一查全知道（hibernate注解实现set集合排序）

《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}

JDK7.0语法新特性及下载

系统性能调优总结分享(转载)

JAVA内存问题：Java heap space

Json 浅谈及解析

Ajax 实现分页及表与表的级联

《神》预测本周五 java 考试题！！

DOM总结（三）及综合案例

DOM 总结（二）

DOM 总结（一）

javascript实现全选，反选及全不选

仿谷歌，百度分页计算分析 代码实现

Java反射概念及类的反射的实例应用

BeanUtils工具包下载及应用

“世界上最复杂的邮件”诞生了

最近访客更多访客>>

不查不知道一查全知道（hibernate注解实现set集合排序）

仿谷歌，百度分页计算分析代码实现