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>
  • 相关阅读:
    ecplise 导出maven项目依赖的jar
    vue.js 中组件的使用
    爬虫:python采集豆瓣影评信息并进行数据分析
    Python爬取前程无忧十万条招聘数据
    爬虫:新浪微博爬虫的最简单办法
    爬虫:利用python完成百度贴吧数据采集
    基于SSM框架的新生报到可视化系统
    爬虫:利用selenium采集某某环境网站的空气质量数据
    基于flask框架的高校舆情分析系统
    基于flask的城市空气质量分析系统
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9839108.html
Copyright © 2011-2022 走看看