Jquery的应用

kuaile863 · 发表于 2013-2-7 22:52:58

Jquery是继prototype之后又一个优秀的Javascrīpt框架。
Jquery的优势：
1.        它是轻量级的js库
2.        它兼容CSS3
3.        还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+,Opera 9.0+）
4.        jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
Jquery中层次的元素的关系：
Js中代码：
<script> /**             层次元素关系             1、祖先关系空格符号             2、父子关系大于符号             3、紧跟的关系  +符号             4、紧跟后的所有兄弟关系  ~符号          CSS样式             1、css("");带有一个参数是获取其属性的值             2、css("","");为其对象设置一个指定的属性和属性值             3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};             */    $(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> 页面中的代码：
<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>

		自动登录	找回密码
密码			立即注册