实验一 jQuery选择器
【实验目的】
1、熟悉jQuery开发环境的配置；
2、掌握jQuery应用程序的编写；
3、掌握jQuery常用的选择器
【实验准备】
1、复习教材相关内容；
2、预习本次实验；
【实验内容】
1、实现表格的隔行变，并且对含有文本“王五”的数据行高亮显示。其页面效果如图1-1所示。
图1-1
代码：
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("tbody tr:even").addClass("even");
    $("tbody tr:odd").addClass("odd");
    $("tbody tr:contains('女')").addClass("selected");
   
    })
   
</script>
2、实现复选框的全选、全不选和反选功能，其页面效果如图1-2所示。
图1-2
代码：
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#CheckedAll").click(function(){
        $("[type='checkbox']").attr("checked",true);
        })
        $("#CheckedNo").click(function(){
            $("[name='items']").attr("checked",false);
            })
            $("#CheckedRev").click(function(){
                $("[name='items']").each(function(){
                    $(this).attr("checked",!$(this).attr("checked"));
                    })
                })
   
    })
</script>
3、实现品牌列表的展示效果，用户进入该页面时，品牌列表默认精简显示，如图1-3所示，用户单击“显示全部品牌”按钮来显示全部的品牌；同时将推荐的品牌名字高亮显示，按钮文字也换成“精简显示品牌”，如图1-4所示。
图1-3
图1-4
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var $category=$("ul li:gt(5):not(:last)");
    $category.hide();
    var $toggleBtn=$(".showmore>a");
    $toggleBtn.click(function(){
jquery在线库        if($category.is(":hidden")){
            $category.show();
            $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");   
            $(".showmore>a span").css("background","url(img/up.gif) no-repeat 0 0").text("显示精简品牌");}
            else
            {
                $category.hide();
                $('ul li').removeClass("promoted");
                $(".showmore>a span").css("background","url(img/down.gif) no-repeat 0 0").text("显示所有品牌");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。