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

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

jQueryCSSAjaxJavaScriptCMM
阅读更多

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>

 

 

     

   

  

   

 

  

<!--EndFragment-->
  • jquery.rar (208.3 KB)
  • 描述: 最新最全
  • 下载次数: 65
0
顶
2
踩
分享到：
| javascript eval函数解析json数据时为什么 ...
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics