zoukankan      html  css  js  c++  java

  • JQuery基础二

    1、表单过滤器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    
    div
    {
        300px;
        height:200px;
        background-color:Orange;
        margin-bottom:20px;
        }
    
    </style>

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

        $(function () {

            $('#btn').click(function () {
            //获取有id属性的层
                //                $('div[id]').css('backgroundColor','blue');
                //获取有id属性的层,但是id的值必须是dv1
                //$('div[id=dv1]').css('backgroundColor', 'blue');
                // $('input[name!=name]').css('backgroundColor', 'blue');
               //必须以name开头的
                //$('input[name^=name]').css('backgroundColor', 'blue');
                //必须以name结尾的
               // $('input[name$=name]').css('backgroundColor', 'blue');

                //                $('input[name*=name]').css('backgroundColor', 'blue');
                //有name属性还有value属性的元素
                $('input[name][value]').css('backgroundColor', 'blue');
            });
        });
    
    </script>

</head>
<body>
    <input type="button" name="name" value="显示效果" id="btn" />

    <input type="text" name="2name1" value=" " />
     <input type="text" name="3name2" value=" " />
      <input type="text" name="name3" value=" " />
       <input type="text" name="name4" value=" " />
    <div id="dv1">
    </div>
    <div>
    </div>
    <div id="dv2">
    </div>
</body>
</html>
    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

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

    <script type="text/javascript">

        $(function () {
            $('#btn').click(function () {
                //有空格，表示的是 该表单中内部被禁用的元素
                // $('form :disabled').css('backgroundColor', 'red');
                $('input:checked').css('backgroundColor', 'red');//获取 被选中的元素
                //如果没有空格，表示的是被禁用的表单
            });

        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id="btn" />

    <div>
     <input type="checkbox" name="name" value="1" checked="checked" />吃饭
     <input type="checkbox" name="name" value="2"  checked="checked" />睡觉
     <input type="checkbox" name="name" value="3" />打豆豆
    </div>
   



    <form action="" method="" id="fm1">

    <input type="button" name="name" value="按钮"  disabled="disabled" />
    </form>
    <form action="" method="get" id="fm2">
    <input type="button" name="name" value="按钮2" />
    </form>
</body>
</html>
    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            //有id属性的层
            //$('div[id]').css('backgroundColor','green');
            //层里面凡是有id属性的元素
            //$('div [id]').css('backgroundColor', 'green');
            $('div input[id]').css('backgroundColor', 'green');
        });
    
    </script>
</head>
<body>
    <div style=" 300px; height: 200px; background-color: Yellow; border: 1px solid red"
        id="dv">
        <input type="text" name="name" value="" />
        <input type="text" name="name" value="" id="txt" />
        <input type="text" name="name" value="" />
    </div>
    <hr color="red" />
    <select size="5"><!--该标签配合css使用 不是很方便.-->
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">东京</option>
        <option value="4">首尔</option>
    </select>
</body>
</html>
    View Code

    有空格，表示的是内部的元素，如果没有空格，表示的是该元素。

    有id属性的层//$('div[id]').css('backgroundColor','green');

    层里面凡是有id属性的元素//$('div [id]').css('backgroundColor', 'green');

    :input表示所有该类型元素（包括服务器解释到客户端是该种类型的元素）

    'input'表示该类型的元素

    2、元素的each方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">


        $(function () {


            $('#btn').click(function () {
                var cks = $('div input:checked');

                //元素的each用法
                cks.each(function (index, ele) {
                    alert($(ele).val());
                });
            });

        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="显示value值" id="btn" />
    <div id="dv">
        <input type="checkbox" name="name" value="1" />吃饭
        <input type="checkbox" name="name" value="2" />睡觉
        <input type="checkbox" name="name" value="3" />打豆豆
        <input type="checkbox" name="name" value="4" />打篮球
        <input type="checkbox" name="name" value="5" />打足球
        <input type="checkbox" name="name" value="6" />打铅球
    </div>
</body>
</html>
    View Code

    3、内容过滤器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
    
    div
    {
        200px;
        height:100px;
        border:1px solid red;
        }
    </style>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {
            //表示的是包含哈哈这两个字的内容的层
                //$('div:contains(哈哈)').css('fontSize','100px');
                //空层
                //                $('div:empty').css('backgroundColor', 'pink');

                $('div:has(a)').css('backgroundColor', 'pink');
            });
        });
    
    </script>
</head>
<body>

    <input type="button" name="name" value="显示效果" id="btn" />
    <div>
    
    哈哈 ，天气好晴朗
    </div>

    <div>
    嘎嘎


    </div>

    <div>

        <a href="http://www.baidu.com">content</a>

    </div>
</body>
</html>
    View Code

    4、子元素过滤器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

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

        $(function () {
            $('#btn').click(function () {

            //每个ul里面的第一个li
                //$('ul li:first-child').css('fontFamily', '全新硬笔行书简');
                $('ul li:last-child').css('fontFamily', '全新硬笔行书简');
            });
        });
    </script>

   
</head>
<body>

    <input type="button" name="name" value="显示效果" id="btn" />
    <ul>
        <li>圆通</li>
        <li>申通</li>
        <li>中通</li>
        <li>汇通</li>
        <li>顺丰</li>
    </ul>
    <hr color="gray" />
    <ul>
        <li>周伯通</li>
        <li>全球通</li>
        <li>小灵通</li>
        <li>本地通</li>
        <li>乱通</li>
    </ul>
</body>
</html>
    View Code

    5、相当于dom中innerHTML，一般写两个值,属性和属性值 --设置该属性是该值,如果只写了一个属性，那么获取的是该属性的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $('#btn').click(function () {
                //相当于dom中innerHTML
                //$('div').html('<font color="red" face="宋体">哈哈,我又活了</font>');
                //$('div').text('<font color="red" face="宋体">哈哈,我又活了</font>');

                //($('#ck')[0]).checked = true;
                //一般写两个值,属性和属性值 --设置该属性是该值,如果只写了一个属性，那么获取的是该属性的值
                $('#ck').attr('checked', true);
                //$('div').attr('class', 'cls');

                //$('div').removeAttr('属性的名字');//表示的是移除该属性,属性没了  值也没了
            });

            $('#btn1').click(function () {

                $('#ck').attr('checked', false);
                //$('#ck').removeAttr('checked');
            });
        });
    
    </script>
    <style type="text/css">
        .cls
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="设置" id="btn" />
    <input type="button" name="name" value="设置啊" id="btn1" />
    <div style=" 300px; height: 150px; border: 1px solid red">
        <input type="checkbox" name="name" value="1" id="ck" />打铅球
    </div>
</body>
</html>
    View Code

    6、动态创建元素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {

                //创建一个超链接添加到body中

                // $('<a href="http://www.baidu.com"></a>').text('百度').appendTo($('body'));

                //在body中添加超链接
               // var akObj = $('<a href="http://www.baidu.com"></a>').text('百度');
               // $('body').append(akObj);
            });
        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="创建一个元素" id="btn" />
</body>
</html>
    View Code

    7、小广告

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {

                var dvObj = $('<div style="300px; height:200px;background-color:orange;position:absolute;right:0;bottom:0;"></div>').appendTo($('body')); //层来了

                //可以关闭广告

                $('<span style="float:right; cursor:pointer;">×</span>').click(function () {
                    $(this).parent().remove();

                }).appendTo(dvObj);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示广告" id="btn" />

</body>
</html>
    View Code

    8、动态创建表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        //var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };


        $(function () {
            var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
            $('#btn').click(function () {

                //创建一个表
              var tbObj=  $('<table border="1"></table>').appendTo($('body'));
              for (var key in dic) {
                    $('<tr><td>' + key + '</td><td><a href="'+dic[key]+'">'+key+'</a></td></tr>').appendTo(tbObj);
                }

            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="创建表格" id='btn' />
</body>
</html>
    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">


        $(function () {

            $('#btn1').click(function () {

                //获取昵称，，获取 内容
                var name = $('#txt').val();
                var tt = $('#textContent').val();
                //创建行 和单元格 ，加到表中  

                $('<tr><td>' + name + '</td><td>' + tt + '</td></tr>').appendTo($('#tb'));
            });
        });
    
    </script>
</head>
<body>
<table id="tb">
        <tr>
            <td>
                猫猫：
            </td>
            <td>
                沙发耶！
            </td>
        </tr>
    </table>
    <br />
    昵称：<input type="text" id="txt" value="" /><br />
    <textarea id="textContent" rows="10" cols="15"></textarea><br />
    <input type="button" value="评论" id="btn1" />

</body>
</html>
    View Code

    9、清空元素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {
                //层没了，元素也就没了
                //$('#dv').remove();
                //元素清空了 ，层还在
                //$('#dv').empty();

              
            });
        });
    
    </script>

</head>
<body>
    <input type="button" name="name" value="清空元素" id="btn" />


    <div id="dv" style=" 290px; height:100px; border:2px solid red;">

        <input type="text" name="name" value="文本框" />
        <input type="button" name="name" value="我骄傲" />

    </div>
</body>
</html>
    View Code

    10、按钮是否可用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var sec = 5;
            var setId = setInterval(function () {
                sec--;
                if (sec <= 0) {
                    sec = 0;
                    clearInterval(setId);
                    $('#btn').val('同意').attr('disabled',false);
                } else {
                    $('#btn').val('请仔细阅读协议(' + sec + ')');
                }
            }, 1000);
        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
</body>
</html>
    View Code

    11、创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。


        $(function () {

            $(':text').blur(function () {

                if ($(this).val().length == 0) {
                    $(this).css('backgroundColor', 'red');
                } else {
                    $(this).css('backgroundColor','');
                }

            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
</body>
</html>
    View Code

    12、替换节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $('#btn').click(function () {
                //替换节点,br标签替换成hr标签
                $('br').replaceWith('<hr color="yellow" />');
               
            });
            $('#btn1').click(function () {
            //把hr标签替换成br标签
                $('<br />').replaceAll('hr');
            });
        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="替换节点" id="btn" />
    <input type="button" name="name" value="替换" id="btn1" />
    <br />
       静夜思<br />
    床前明月光,<br />
    疑是地上霜,<br />
    举头望明月,<br />
    低头思故乡.<br />
</body>
</html>
    View Code

    13、包裹元素的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {
            //每个p标签都会用一对font标签包裹上,如果所有的p标签都是一个效果,那么只需要一对font标签就足够了
                // $('div p').wrap('<font color="blue" size="7" face="全新硬笔行书简"></font>');
                //所有的p标签都被一对font标签包裹了.--
                // $('div p').wrapAll('<font color="blue" size="7" face="全新硬笔行书简"></font>');
                //把p标签中的文字内容用一对font标签包住，但是p标签在外面,每个p标签中都有一对font标签
                //$('div p').wrapInner('<font color="blue" size="7" face="全新硬笔行书简"></font>');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="变" id="btn" />

    <div style=" 300px; height:200px; border:1px solid red;">

        <p>这是p
        </p>

        <p>这也是p
        </p>
    </div>
</body>
</html>
    View Code

    14、获取被选中的单选按钮的value值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btn').click(function () {
                // alert($(':radio:checked').val());
                $(':radio:checked').each(function (index, ele) {
                    alert($(ele).val());
                });
            });
            $('#btnchecked').click(function () {

                //$(':radio[value=1]').attr('checked',true);
                $(':radio').val(['1', '2']); //让单选按钮选中
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id="btn" />
    <input type="button" name="name" value="选中" id="btnchecked" />

    <div>

        <input type="radio" name="name1" value="1" />男
        <input type="radio" name="name2" value="2" />女
        <input type="radio" name="name3" value="3" />保密

    </div>
</body>
</html>
    View Code

    15、权限选择过程练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
        //左边所有的添加到右边
            $('#toAllLeft').click(function () {
                $('#se1 option').appendTo($('#se2'));
            });
           //右边所有的添加到左边
            $('#toAllRight').click(function () {
                $('#se2 option').appendTo($('#se1'));
            });
            //左边选中的添加到右边

            $('#toRight').click(function () {
                $('#se1 option:selected').appendTo($('#se2'));

            });
            //右边选中的添加到左边

            $('#toLeft').click(function () {
                $('#se2 option:selected').appendTo($('#se1'));

            });
        });
    </script>
</head>
<body>
<div style="margin-left: 400px; margin-top: 10px;">
        <select multiple="multiple" style="float: left;  40px; height: 100px;" id="se1">
            <option>添加</option>
            <option>删除</option>
            <option>修改</option>
            <option>查询</option>
            <option>打印</option>
        </select>
        <div style=" 50px; float: left;">
            <input type="button" name="name" value=">" style=" 50px;" id="toRight" />
            <input type="button" name="name" value="<" style=" 50px;" id="toLeft" />
            <input type="button" name="name" value=">>" style=" 50px;" id="toAllLeft" />
            <input type="button" name="name" value="<<" style=" 50px;" id="toAllRight" />
        </div>
        <select multiple="multiple" style="float: left;  40px; height: 100px;" id="se2">
        </select>
    </div>
 

</body>
</html>
    View Code
  • 相关阅读:
    20191218《信息安全导论》第十二周总结
    20191218《信息安全导论》第十一周总结
    20191218《信息安全导论》第十周总结
    20191218《信息安全导论》第九周总结
    20191218《信息安全导论》第八周总结
    20191218《信息安全导论》第七周总结
    20191218《信息安全导论》第六周总结
    20191218《信息安全导论》寻找我的黑客偶像
    20191218《信息安全导论》第五周总结
    20191211_获奖感言及学习心得
  • 原文地址：https://www.cnblogs.com/ecollab/p/6131395.html
Copyright © 2011-2022 走看看