zoukankan      html  css  js  c++  java

  • jQuery学习（1）

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type='text/javascript' src='js/jquery.js'></script>
    <style type="text/css">
    #one{
        width:45px;
        background:#D876F4;
        margin:20px;
    }

    #two,#three,#mover{
        background:#9C9AC9;
        width:150px;
        margin-top:-85px;
        position:absolute;
        float:left;
    }
    #two{
        margin-left:100px;
    }
    #two1,#two2,#three01{
        width:100px;
        height:100px;
        margin:10px;
    }
    #two,#two1,#two2,#three,#three01,#mover{
        border:1px solid black;
    }
    #three{
        margin-left:275px;
    }
    #mover{
        margin-left:450px;
    }
    </style>
</head>
<body>
    <h1>XXXXX</h1>
    <h2>XXXXXXXXXXXXXX</h2>
    <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3>
    <input type="button" value="改变第一个div元素的背景色为" id="b1"/>
    <input type="button" value="改变最后一个div元素的背景色为 #0000FF" id="b2"/>
    <input type="button" value="改变class不为one的所有div元素的背景色为#0000FF" id="b3"/>
    <input type="button" value="改变索引值为偶数的所有div元素的背景色为#0000FF" id="b4"/>
    <input type="button" value="改变索引值为奇数的所有div元素的背景色为#0000FF" id="b5"/>
    <input type="button" value="改变索引值为大于3的所有div元素的背景色为#0000FF" id="b6"/>
    <input type="button" value="改变索引值为等于3的所有div元素的背景色为#0000FF" id="b7"/>
    <input type="button" value="改变索引值为小于3的所有div元素的背景色为#0000FF" id="b8"/>
    <input type="button" value="改变所有的标题元素背景色为#0000FF" id="b9"/>
    <input type="button" value="改变当前正在执行动画的所有元素的背景色为#0000FF" id="b10"/>
    <div id="one" class="mini">
        div id为one
    </div>
    <div id="two">
        div id为two
        <div id="two1">
            id twoo1
        </div>
        <div id="two2">
            id twoo2
        </div>
    </div>
    <div id="three" class="one">
        div id为three class one
        <div id="three01">
            id three01
        </div>
    </div>

    <div id="mover">
        执行动画
    </div>

    <span id="s_one" class="mini">
        span one
    </span>
    
    <script type="text/javascript" language="javascript">
    //如何做出动画效果，jquery提供一些特效
//**************************************
    mymove();
    function mymove(){
        $("#mover").slideToggle("fast",mymove);
    }
//**********************************
    //改变第一个div元素的背景色为#0000FF
    $("#b1").click(function (){
        $("div:first").css("background","#0000FF")
    });
//**********************************
    //改变最后一个div元素的背景色为#0000FF
    $("#b2").click(function (){
        $("div:last").css("background","#0000FF")
    });
//**********************************
    //改变class不为one的所有div元素的背景色为#0000FF
    $("#b3").click(function(){
        $("div:not(.one)").css("background","#0000FF")
    });
//**********************************
    //改变索引值为偶数的所有div元素的背景色为#0000FF
    $("#b4").click(function(){
        $("div:even").css("background","#0000FF")
    });
//**********************************
    //改变索引值为偶数的所有div元素的背景色为#0000FF
    $("#b5").click(function(){
        $("div:odd").css("background","#0000FF")
    });
//**************************************
    //改变索引值为大于3的所有div元素的背景色为#0000FF
    $("#b6").click(function(){
        $("div:gt(3)").css("background","#0000FF")
    });
//*************************************
    //改变索引值为等于3的所有div元素的背景色为#0000FF
    $("#b7").click(function(){
        $("div:eq(3)").css("background","#0000FF")
    });
//*************************************
    //改变索引值为小于3的所有div元素的背景色为#0000FF
    $("#b8").click(function(){
        $("div:lt(3)").css("background","#0000FF")
    });    
//*************************************
    //改变所有的标题元素背景色为#0000FF
    $("#b9").click(function(){
        $(":header").css("background","#0000FF")
        //$("div").css("background","#0000FF")
    });
//*************************************
    //改变当前正在执行动画的所有元素的背景色为#0000FF
    $("#b10").click(function(){
        $(":animated").css("background","#0000FF")
    });
    </script>
</body>
</html>

    让被隐藏的元素显示出来。

    //改变含所有可见的div元素的背景元素为#0000FF
    $("#b1").click(function(){
        $("div:visible").css("background","#0000FF");
    });
    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type='text/javascript' src='js/jquery.js'></script>
    <style type="text/css">
    
    
    
    #one{
        margin:20px;
    }
    #two{
    
    }
    #three{
        width:300px;
    }
    
    </style>
</head>
<body>
    <h1>XXXXX</h1>
    <h2>XXXXXXXXXXXXXX</h2>
    <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3>
    <input type="button" value="含有属性title的div元素" id="b1"/>
    <input type="button" value="属性title值等于'test'的div元素" id="b2"/>
    <input type="button" value="属性title值不等于'test'的div元素（没有属性title的也将被选中）" id="b3"/>
    <input type="button" value="属性title值 以'te'开始 的div元素" id="b4"/>
    <input type="button" value="屬性title值 以'est'结束 的div元素" id="b5"/>
    <input type="button" value="屬性title值 以'est'结束 的div元素" id="b6"/>
    <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div元素" id="b7"/>
    <input type="button" value="屬性title值 以'est'结束 的div元素" id="b8"/>
    
    <div style="display:none">
    <input type="button" value="hidden1"/>
    <input type="button" value="hidden2"/>
    <input type="button" value="hidden3"/>
    <input type="button" value="hidden4"/>
    </div>
    
    <div id="one" title="te">
        div id为one test
    </div>
    <div id="two" title="test">
        aaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div id="three" class="one">
        XXXXXXXXXXXXXXXXXX
    </div>
    
    <script type="text/javascript">
    //含有属性title的div元素
    $("#b1").click(function(){
        $("div[title]").css("background","#0000FF");
    });
    
    //属性title值等于"test"的div元素
    $("#b2").click(function(){
        $("div[title='test']").css("background","#0000FF");
    });
    
    //属性title值不等于"test"的div元素（没有属性title的也将被选中）
    $("#b3").click(function(){
        $("div[title!='test']").css("background","#0000FF");
    });
    
    //属性title值 以"te"开始 的div元素。
    $("#b4").click(function(){
        $("div[title^='te']").css("background","#0000FF");
    });
    
    //屬性title值 以"est"结束 的div元素。
    $("#b5").click(function(){
        $("div[title$='est']").css("background","#0000FF");
    });
    
    //屬性title值 以"est"结束 的div元素。
    $("#b6").click(function(){
        $("div[title$='est']").css("background","#0000FF");
    });
    
    //选取有属性id的div元素，然后在结果中选取属性title值含有"es"的 div元素
    $("#b7").click(function(){
        $("div[id][title*='est']").css("background","#0000FF");
    });//         表示有id属性并且有title属性
    
    </script>
</body>
</html>

    子元素过滤选择器

     1.:nth-child(index)

    2、:first-child

    用法：$("url:first-child") 返回值 集合元素

    说明：匹配第一个子元素：

    3、:last-child

    用法：$("ul li:last-child")  返回值 集合元素

    发现过一个错误，如果直接在下面代码中写jquery，则无法运行。

    <script type="text/javascript" src="js/jquery.js">
   
//******************

</script>
    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type='text/javascript' src='js/jquery.js'></script>
    <style type="text/css">
    #one{
        width:45px;
        background:#D876F4;
        margin:20px;
    }

    #two,#three,#mover{
        background:#9C9AC9;
        width:150px;
        margin-top:-85px;
        position:absolute;
        float:left;
    }
    #two{
        margin-left:100px;
    }
    #two1,#two2,#three01{
        width:100px;
        height:100px;
        margin:10px;
    }
    #two,#two1,#two2,#three,#three01,#mover{
        border:1px solid black;
    }
    #three{
        margin-left:275px;
    }
    #mover{
        margin-left:450px;
    }
    </style>
</head>
<body>
    <h1>XXXXX</h1>
    <h2>XXXXXXXXXXXXXX</h2>
    <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3>
    <input type="button" value="改变含有文本'i'的div元素的背景元素" id="b1"/>
    <input type="button" value="改变不包含子元素的div背景色为#0000FF" id="b2"/>
    <input type="button" value="改变含有class为mini元素的div元素的背景色为#OOOOFF" id="b3"/>
    <input type="button" value="改变含有子元素（或者文本元素）的div元素的背景色为#0000FF" id="b4"/>
    <div id="one" class="mini">
        div id为one
    </div>
    <div id="two">
        div id为two
        <div id="two1">
            id twoo1
        </div>
        <div id="two2">
            id twoo2
        </div>
    </div>
    <div id="three" class="one">
        div id为three class one
        <div id="three01">
            id three01
        </div>
    </div>
    
    <div class="one">
    d
    </div>

    <div id="mover">
        执行动画
    </div>

    <span id="s_one" class="mini">
        span one
    </span>
    
    <script type="text/javascript">
    //********************
    //改变含有文本"id"的div元素的背景元素为#0000FF
    $("#b1").click(function(){
        $("div:contains('two')").css("background","#0000FF");
    });
    //********************
    
    //改变不包含子元素（或文本元素）的div背景色为#0000FF
    $("#b2").click(function(){
        $("div:not(:contains('di'))").css("background","#0000FF");
    });
    
    //改变含有class为mini元素的div元素的背景色为#OOOOFF
    $("#b3").click(function(){
        $("div:has(.mini)").css("background","#0000FF");
    });
    //改变含有子元素（或者文本元素）的div元素的背景色为#0000FF
    $("#b4").click(function(){
        $("div:parent").css("background","#0000FF");
    });
    </script>
</body>
</html>

    练习题：

    <!DOCTYPE html>
<html>
  <head>
    <title>pratice.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.js">
    </script>
    
  </head>
  
  <body>
  
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    
    <input type="button" value="给网页中所有的<p>元素添加onclick事件" id="b1"/>
    
    <table style="border:1px solid black">
    <tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
    <tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
    <tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
    <tr><td>第四行第一列</td><td>第四行第二列</td><td>第四行第三列</td></tr>
    <tr><td>第五行第一列</td><td>第五行第二列</td><td>第五行第三列</td></tr>
    </table>
  </body>
  <script type="text/javascript">
   //给网页中所有的<p>元素添加onclick事件
   $("p").click(function(){
           alert($(this).text());
   });
   
   //使一个特定的表格隔行变色
   $("table:eq(0) tr:even").css("background","red");
  </script>
  
</html>
  • 相关阅读:
    linux下TOMCAT自启动
    Tomcat指定(JDK路径)JAVA_HOME而不用环境变量
    Windows防火墙无法正常打开或关闭,上方显示"出于安全原因 某些设置由系统管理员管理”解决方法
    Windows实用操作
    [INS-30131]执行安装程序验证所需的初始设置失败（无法访问临时位置）解决方法！
    Linux 网络一般设置
    集合（set）-Python3
    zip函数-Python 3
    enumerate用法总结-Python 3
    Python3中的字符串函数学习总结
  • 原文地址：https://www.cnblogs.com/liaoxiaolao/p/9839108.html
Copyright © 2011-2022 走看看