锋利Jquery 第五天 --- jquery基础选择器

2.4 锋利Jquery 第五天 --- jquery基础选择器

<html>
<head>
<title>jquery 选择器的基础</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>

//通过$('#') id 选择器找到Element 。然后通过.css()

//css() 有三种用法；

1、获取匹配元素的样式属性。.css(name) ,参数name 类型是string 类型。返回值为string. 如：取得第一个段落的color样式属性的值。$("p").css('color') // red

2、给匹配的元素添加样式属性值。。.css(properties) 属性值是以：name:value 的形式出现.可以是多个。如：将所有段落的字体颜色设为红色并且背景为蓝色。

// $("p").css({color:"red"}),一个。多个 $("p").css({color:"red",background:"blue"});

如果属性名包含 "-"的话，必须使用引号: 如：$("p").css({ "margin-left": "10px", "background-color": "blue" });

3、通过函数动态的给匹配的元素返回所要的属性值。.css(name,function(index,value){

// 此函数返回要设置的属性值. 接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值

})

如：逐渐增加div的大小

           $("div").click(function() {
               $(this).css({
                               width: function(index, value) {
                                return parseFloat(value) * 1.2;
                              },
                           height: function(index, value) {
                              return parseFloat(value) * 1.2;
                               }
                     });
           });

//改变class 为mini的所有元素的背景颜色
$(".mini").css("background","green");

           通过$(".") 类选择器找到匹配的元素，然后通过.css() 添加样式属性值
           //改变所有名为 div 元素的背景颜色
           $("div").css("background","yellow");

           通过$ ("element") 元素选择器(也叫标签选择器)，找到所匹配的元素，添加样式属性值
           //改变所以元素的背景颜色
           $("*").css("background","#ffaacc");

           通过通配选择器 (匹配所有的元素) 。并添加样式
           //改变所有 span 元素和 id 为two 的元素背景颜色
           $("span,#two").css("background","blue");

通过分组选择器找出匹配的元素，并给添加样式属性。
});
</script>
</head>

<body>
<div class="one" id="one">
    class等于one,id等于one
    <div class="mini">class等于mini</div>
</div>
<div class="one" id="two" title="test">
     class="one" id="two" title="test" 的DIV
     <div class="mini" title="ohter">class为mini,title="ohter"</div>
     <div class="mini" title="test">class为mini,title="test"</div>
</div>
<div class="one">
     <div class="mini">class等于mini</div>
     <div class="mini">class等于mini</div>
     <div class="mini">class等于mini</div>
     <div class="mini"></div>
</div>
<div class="mini">
      <div class="mini">class等于mini</div>
      <div class="mini">class等于mini</div>
      <div class="mini">class等于mini</div>
      <div class="mini" title="tesst">class等于mini,title="tesst"</div>
</div>
<div style="display:none" class="one">style="display:none" class="one"的div</div>
<div class="hide">class="hide"的div</div>
<div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>

以上都是自己学习Jquery 时的学习总结。自己也正在学习。拿出来和正在学习的朋友一起分享。

共同进步。。。。。

锋利的Jquery

posted @ 2012-07-31 14:27 BlackAnts 阅读(196) 评论(0) 收藏举报

刷新页面返回顶部

BlackAnts

锋利Jquery 第五天 --- jquery基础选择器

公告