层次元素关系
?????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 type="text/javascript"> $(document).ready(function(){ /**层级元素选择器的使用方式*/ /**祖先关系 符号为===>空格*/ //获取div元素的后代的所有input的元素 返回一个Jquery对象 var $inputs=$("div input"); /**输出Jquery对象的大小*/ alert($inputs.size()); /**父子关系 符号为===>>*/ var $inp=$("form>input"); var inpt=$inp[0] inpt.style.backgroundColor="red"; alert("------中介线-------") /**采用Jquery对象本身的css方法来设置样式*/ $inp.css("background-color","blue"); /**匹配所有紧接在某个元素后的某个元素 符号为===> +*/ var $lab=$("label+input"); /**为其添加背景颜色*/ $lab.css("background-color","green"); /**匹配 prev 元素之后的所有 siblings(兄弟) 元素 符号为====> ~*/ var $fpts=$("form~input"); $fpts.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对象的背景颜色值:"+$fpts.css("background-color")); }); </script>
?