JQuery基础二

时间：2024-06-17 19:04:25

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

    {

        width: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>
<!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>
<!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="width: 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>

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

有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>

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

    {

        width: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>

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>

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="width: 300px; height: 150px; border: 1px solid red">

        <input type="checkbox" name="name" value="1" id="ck" />打铅球

    </div>

</body>

</html>

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>

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="width: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>

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>
<!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>

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=" width:290px; height:100px; border:2px solid red;">

        <input type="text" name="name" value="文本框" />

        <input type="button" name="name" value="我骄傲" />

    </div>

</body>

</html>

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>

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>

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>

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=" width:300px; height:200px; border:1px solid red;">

        <p>这是p

        </p>

        <p>这也是p

        </p>

    </div>

</body>

</html>

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>

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; width: 40px; height: 100px;" id="se1">

            <option>添加</option>

            <option>删除</option>

            <option>修改</option>

            <option>查询</option>

            <option>打印</option>

        </select>

        <div style="width: 50px; float: left;">

            <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />

            <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />

            <input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />

            <input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />

        </div>

        <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">

        </select>

    </div>

</body>

</html>

相关文章