`
javawangli
  • 浏览: 224908 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery从入门到精通及附件下载(一)

阅读更多

Jquery从入门到精通及附件下载(一)

Jqueryprototype之后又一个优秀的Javascrīpt框架。它是轻量级的js(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE , FF  Safari , Opera )。jQuery使用户能更方便地处理HTML documentsevents、实现动画效果,并且方便地为网站提供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?绝大多数时间都是采用getElementByIdDom文档中找到DOM元素,然后取值或设定值,采用innerHTML取其内容或设定其内容,或进行事件的监听(click),在控制样式方面,我们会进行height,width,display等的改变,达到视觉上的效果,对于Ajax方面,也是取到数据在页面的某元素里面去添充内容。

    但是这些还是不能满足开发的需要,比如在DOM树中寻找DOM元素,仅仅只能是通过元素的ID,但是我们想要更方便的查找方法,同时还希望能有一个统一的入口,不要太泛,学习曲线过高或难于使用。

jQuery就是从这里出发,把所有一切都统一在jQuery对象中。使用jQuery就是使用jQuery对象。其实jQuery开创性的工作就是如其名一样:query。它强大的查找功能令所有的框架都黯然失色。jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操作的功能。这样说来jQuery就是查询和操作的统一。查询是入口,操作是结果。

Jquery组成部分

 1Selector,查找元素。这个查找不但包含基于CSS1~CSS3CSS Selector功能,还包含其对直接查找或间接查找而扩展的一些功能。

2Dom元素的属性操作。Dom元素可以看作html的标签,对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加,修改,删除,取值等。

3Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度,宽度,display等这些常用的CSS的功能。

4Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。

5Event的操作。对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对象的方法

 1Jquery对象返回的是一个数组对象可以采用如下方式转换

     var domObject = $("#thed")[0];

     2、可以采用Jqueryget(index)方法获取

    get(index)//取得其中一个匹配的元素。 index表示取得第几个匹配的元素。它返回的是一个DOM对象

Jquery中的基本选择器:

               1id选择器 $("#div");

               2class选择器 $(".class");

               3、元素选择器器 $("input");

               4匹配所有的元素的Jquery对象 $("*");

               5、并列选择器 用英文的逗号区分 $("tr,tr.text");

层次元素关系

               1、祖先关系   空格符号

               2、父子关系   大于符号

               3、紧跟的关系  +符号

               4、紧跟后的所有兄弟关系  ~符号

CSS样式

               1css("");带有一个参数是获取其属性的值

               2css("","");为其对象设置一个指定的属性和属性值

               3css(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>

 

 

     

   

  

   

 

  

<!--EndFragment-->
  • jquery.rar (208.3 KB)
  • 描述: 最新最全
  • 下载次数: 65
0
2
分享到:
评论

相关推荐

    jquery从入门到精通

    jquery、javascript、入门到精通,jquery从入门到精通

    Jquery从入门到精通

    "jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,我们需要理解jQuery的核心理念是"Write Less, Do More",即用更少的代码实现更多的功能。jQuery通过封装JavaScript的API,使得开发者能够...

    jquery 从入门到精通 葵花宝典

    jquery 从入门到精通 葵花宝典 ,新手必须掌握的一门技术,里面内容很全很好。

    jquery从入门到精通电子书下载

    在《jQuery从入门到精通》一书中,作者深入浅出地讲解了jQuery的核心概念、使用技巧及最佳实践,为初学者和进阶开发者提供了一条清晰的学习路径。 #### 二、jQuery是什么? jQuery本质上是一个**JavaScript脚本库*...

    jquery 从入门到精通 demo示例下载

    《jQuery:从入门到精通——实战Demo解析》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本篇将通过介绍jQuery的基础概念、核心功能以及提供的...

    jquery从入门到精通课件

    《jQuery从入门到精通》是一门深度探讨JavaScript库jQuery的课程,主要针对想要提升Web开发技能,特别是希望简化DOM操作、实现动态效果和交互的开发者。jQuery是JavaScript的一个强大工具,它通过提供简洁的API,...

    jquery开发从入门到精通 光盘下载地址

    jquery开发从入门到精通 光盘下载地址 迅 雷:thunder://QUFodHRwOi8vbS5saWJ0b3AuY29tL2QvOS83MDU5ODMwMjc2NzM5LzBaWg==

    jQuery从入门到精通案例

    本教程将带你从零开始,深入理解并熟练运用jQuery。 **jQuery选择器** jQuery的选择器是其强大功能之一,它们基于CSS选择器,但提供了更多的便利性。例如: 1. `$("#id")`:通过ID选择元素,如`$("#myDiv")`。 2....

    jQuery 入门到精通

    这个“jQuery 入门到精通”的主题旨在帮助初学者快速掌握jQuery的核心概念,并逐步提升到高级水平。 一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`&lt;head&gt;`标签内添加`&lt;script&gt;`标签来引入jQuery库,...

    jQuery入门到精通

    jQuery入门到精通,前端开发技术,前端javaScript

    jQuery 手机开发从入门到精通电子书加配套随书源码 全

    《jQuery手机开发从入门到精通》是一本专为移动端开发者设计的教程,旨在帮助初学者和有经验的开发者深入理解并掌握使用jQuery进行移动应用开发的技术。jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作...

    jQuery开发从入门到精通(原书网页模板代码)

    《jQuery开发从入门到精通》是一本旨在帮助初学者快速掌握jQuery技术的专业书籍,由袁江编著。这本书深入浅出地介绍了如何使用jQuery来简化HTML文档操作、处理事件、执行动画效果以及与Ajax进行交互,是Web开发人员...

    jQuery开发从入门到精通源代码和示例 清华大学 袁江

    《jQuery开发从入门到精通》是由清华大学出版社出版的一本关于jQuery技术的专著,作者是袁江。这本书全面深入地介绍了jQuery这一强大的JavaScript库,旨在帮助读者从零基础开始掌握jQuery,逐步提升到精通水平。...

    jQuery Mobile快速入门.pdf

    ### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**:jQuery Mobile 是一款流行的开源 JavaScript 库,它主要用于构建响应式的 Web 应用程序,支持触摸操作,兼容多种移动设备。...

    jQuery开发从入门到精通源代码和示例(8-15)

    《jQuery开发从入门到精通》是一本由袁江编著,清华大学出版社于2013年出版的技术书籍,旨在帮助初学者和有一定基础的开发者深入理解并熟练掌握jQuery这一强大的JavaScript库。jQuery以其简洁易用的API,极大地简化...

    jQuery UI 中文版 入门到精通 PDF

    《jQuery UI 中文版 入门到精通》是一本针对jQuery UI框架的全面教程,旨在帮助初学者快速掌握这一强大的用户界面库。jQuery UI是基于jQuery JavaScript库的扩展,提供了丰富的交互式组件和设计模式,使得网页开发...

    jquery实例 入门到精通

    《jQuery实例:入门到精通》是一份专门为JavaScript和jQuery初学者设计的学习资源,也是专业开发者不可或缺的参考资料。jQuery,作为一款强大的JavaScript库,简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等...

    JQuery Mobile从入门到精通视频教程

    JQuery Mobile从入门到精通视频教程,本人重金购买,只是了为整合人脉资源,相互学习

Global site tag (gtag.js) - Google Analytics