码迷，mamicode.com
首页 > Web开发 > 详细

JQuery基础二

时间：2016-12-04 20:48:23      阅读：238      评论：0      收藏：0      [点我收藏+]

标签：cursor   1.5   http   cli   javascrip   body   xmlns   code   asc   

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>
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="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>
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
    {
        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>
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="width: 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="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>
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=" width: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=" width: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; 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>
View Code

 

JQuery基础二

标签：cursor   1.5   http   cli   javascrip   body   xmlns   code   asc   

原文地址：http://www.cnblogs.com/ecollab/p/6131395.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！