Jquery的应用
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; 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>
页:
[1]