标签归档:jquery技巧

jquery 如何控制表格(table)标签隔行变色和鼠标滑过行变色呢?


摘要:
下文讲述jquery技巧-对table表格控制隔行变色的方法分享,如下所示;

 实现思路:
      1.使用jquery遍历跨行选择表格,然后附加上相应的背景颜色
        使其出现交替颜色
      2.为表格每行都绑定hover函数,使鼠标经过时,
      背景颜色发生相应的变化

例:

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"
 ></script>

<meta charset='utf-8' />
 <p>
maomao365.com <br />
jquery使鼠标放在相应行上发生颜色变化
</p>
<hr />


<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tb">
<tr>
    <th>表头</th>
    <th>表头</th>
    <th>表头</th>
    <th> </th>
  </tr>
  <tr>
    <td>1</td>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>


 
<script>

$(function(){
    $("#tb tr:even td").css("background","#ccc");
    $("#tb tr:even td").attr("bg","#ccc");
    $("#tb tr:odd td").attr("bg","#fff");
    $("#tb tr td").hover(function(){
        $(this).parent().find("td").css("background","green")
        },function(){
            var bgc = $(this).attr("bg");
            $(this).parent().find("td").css("background",bgc)
            });
       });
</script>
jquery控制表格隔行变色及滑动变色的示例分享

jquery控制表格隔行变色及滑动变色的示例分享

javascript 如何使用jquery框架向div标签中添加文字信息呢?


摘要:
下文讲述使用jquery框架向div标签中放入文字的方法分享,如下所示:

实现思路:
    使用jquery方法text可向指定标签中插入文本信息  

例:

<meta charset='utf-8' />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"
 ></script>
<script>
$(function(){
  $("#divTest").text("猫猫教程");
});
</script>
<div id="divTest">

</div>  

javascript jquery如何获取指定对象下的第一级对象呢?


摘要:
下文讲述使用jquery框架获取指定对象下的第一级子对象的方法分享,如下所示:

实现思路:
     使用jquery选择器 $("主选择器 > 子选择器")即可选择出子对象

例:
使用Jquery框架选择id=”divTest” 下的子div


 <div id="divTest">
    <div id="div1" >
        <div>...</div>
    </div>
    <div id="div2" >
        <div>...</div>
    </div>
    <div id="div3" >
        <div>...</div>
    </div>
</div>

<script>

var divList = [];
$("#divTest > div").each(function() {
    divList.push(this.id);
});
 
</script>