[学习交流] 【上海校区】JQuery实例

本帖最后由 biu波儿了罢于 2020-1-8 10:14 编辑

JQuery实例

例1.添加，删除class

知识要点：

1. 通过<script src='jquery-1.12.4.js></script>调用jquery

2. 相对于Dom的document.getElementbyID('i1'), JQuery直接使用$('#i1')；

类似的，查找类可以用$('.c1')，查找p标签 $('p')，查找form的元素 $(':text') ，还可以组合使用。具体的选择器可以参考https://www.w3schools.com/jquery/jquery_ref_selectors.asp

3. addclass（‘hide’）直接给找到的标签添加一个样式class，removeClass('hide')删除一个class，无需使用classlist了

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="hide"/>
    <div id="i1">
        <div class="item"></div>
        <div class="item">
            <div class="c1">123</div>
            <a>百度</a>
        </div>
        <div class="item"></div>
    </div>
    <div id="i2"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        flag=true;
        function hides() {
            if (flag==true){
                 $('#i1').addClass('hide');
                 console.log(flag)
                 flag=false;
            }else{
                 $('#i1').removeClass('hide');
                     console.log(flag)
                 flag=true;
            }
        }
    </script>
</body>
</html>

点击hide按钮切换隐藏效果

例2. 全选和反选

这个例子在前面的Dom里面出现过，现在看看JQuery如何实现

知识点：

1. 选择器可以组合使用比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素

2. 对于checkbox的属性，通过prop()来实现，如果是自定义的其他的属性，通过attr()实现

3. each()可以实现循环，循环里面如果输出this,可以看见他是一个dom的格式，如果把他转换成jquery对象的格式（数组格式），可以通过$(this)实现，如果想把jquery转为dom的格式，那么直接取第一个数组的值就行了，例子里面实现了3种方式，dom，jquery以及三元运算符的格式

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" />
    <input type="button" value="反选" />
    <input type="button" value="取消" />
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this,代指当前循环的每一个元素
                // Dom
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
                */
              // 三元运算var v = 条件? 真值：假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

例3 隐藏菜单

知识点：

1. click的事件可以直接选择到标签之后执行，这个比在html里面使用onclick事件要好很多。

2. Jquery支持链式的编程，因此如下所示可以一行实现很多功能

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>

        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

        })
    </script>
</body>
</html>

例4. 复制，删除文本框

clone（）克隆标签

find（）查找标签

attr（）添加一个事件

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>
            <a> + </a>
            <input type="text" />
        </p>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(ths){
            var p = $(ths).parent().clone();
            p.find('a').text(' - ');
            p.find('a').attr('onclick', 'Remove(this);');
            $(ths).parent().parent().append(p);
        }
        function Remove(ths){
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

效果：点击+自动复制一行，点击-删除自己所在

例5. 绑定事件-例2的升级版

例2里面我们需要给每个标签都手动的添加onclick事件，如果可以统一绑定事件，会省事很多。有两种方式，如下所示;

$(function){

....

}里面执行的...会在文档树加载之后自动执行，不会等待所有的图片内容的加载

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" >菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
//方法一
//        $(function(){
//            // 当文档树加载完毕后，自动执行
//            $('.item .title').click(function(){
//                // this,$(this)
//                $(this).next().removeClass('hide');
//                $(this).parent().siblings().find('.body').addClass('hide');
//            });
//        });
        
        
//方法二        
        $('.item .title').bind('focus', function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.body').addClass('hide');
        })
        
    </script>
</body>
</html>

例6 事件的延迟绑定

比如通过javascript创建的新标签，如何让他自动绑定事件？可以通过delegate实现

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" />
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            $('li').click(function () {
                alert($(this).text());
            });
            */
            $("ul").delegate("li","click",function(){
                alert($(this).text());
            });
        });
        function Add(){
            var tag = document.createElement('li');
            tag.innerText = '666';
            $('ul').append(tag);
        }
    </script>
</body>
</html>

例7　模态对话框　（高级版）

之前用DOM实现过模态对话框，现在用JQuery实现同样的功能。

知识要点：

1.模态对话框的HTML和CSS布局，3层，最上层居中，中间一个阴影层，最下面是主界面，上面两层默认隐藏，通过z-index区分上下顺序

2. 可以通过attr()方法来获取和设置自定义的属性；如果是checkbox或者radio，那么通过prop()方法来获取和设定属性

3.通过属性来定位元素，比如 $("[editable='false']")则可以获取editable属性为false的那个标签元素

4. 文本编辑，对于InnerText的值是通过text()实现，对于input的表单内容则是通过val()实现

5. 添加class，删除class通过addClass()和removeClass()实现

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

        .item{
            position: relative;
            width: 100px;
            margin-top: 20px;
            margin-left: 30px;

        }
        .label{
            width: 40px;
            color: chocolate;
        }
        .content{
            width:100px;
            position: absolute;
            right:-80px;

        }
        .buttons{
            margin-top: 20px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <a>添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit" >编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div >
            <div class="item">
                <label class="label">主机名</label>
                <input class="content" name="hostname" type="text"  />
            </div>
            <div class="item">
                <label class="label">端口</label>
                <input class="content" name="port" type="text" />
            </div>
            <div class="item">
                <label class="label">IP地址</label>
                <input class="content" name="ip" type="text" />
            </div>

        </div>

        <div class="buttons">
            <input type="button" value="取消" />
            <input type="button" value="添加" />
            <input type="button" value="修改" />
        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        $("#tb").delegate('.del',"click",function () {
            $(this).parent().parent().remove();
        })

        function  addModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = $(".modal input[name='hostname']").val();
            var att1=document.createAttribute('target');
            att1.value='hostname';
            td1.setAttributeNode(att1);

            var td2 = document.createElement('td');
            td2.innerHTML = $(".modal input[name='port']").val();
              var att2=document.createAttribute('target');
              att2.value='port';
            td2.setAttributeNode(att2);
                         
                        var td3 = document.createElement('td');
            td3.innerHTML = $(".modal input[name='ip']").val();;
              var att3=document.createAttribute('target');
              att3.value='ip';
            td3.setAttributeNode(att3);
                        
                        var td4 = document.createElement('td');
            td4.innerHTML = " <a class='edit'>编辑</a> | <a class='del'>删除</a>"

            $(tr).append(td1);
            $(tr).append(td2);
                        $(tr).append(td3);
                        $(tr).append(td4);
                        

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');

        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }
        function updateModal(){
            var host=$(".modal input[name='hostname']").val()
            var port=$(".modal input[name='port']").val()
            var ip=$(".modal input[name='ip']").val()
            var tds=$("[editable='false']").prevAll()
            console.log(tds)
            tds.each(
                function () {
                    console.log($(this).attr('target'))
                    if($(this).attr('target')=='ip'){
                        $(this).text(ip);
                        console.log('update ip')
                    }
                    else if($(this).attr('target')=='port'){

                        $(this).text(port);
                    console.log('update port')
                    }
                    else if($(this).attr('target')=='hostname'){

                        $(this).text(host)
                        console.log('update host')
                    }

                }
            )


                 $(".modal,.shadow").addClass('hide');


            $("[editable='false']").attr('editable','true')
        }



        $("#tb").delegate(".edit","click",function() {
            $(".modal,.shadow").removeClass('hide');
            // this
            $(this).parent().attr('editable', 'false')
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            })
        })


    </script>
</body>
</html>

6. delegate 延迟绑定的实现，一般用于未来的新的标签，比如通过脚本创建的标签

7. 动态的创建标签，可以直接插入html字符串或者通过CreateElement()实现

文章摘自：https://blog.51cto.com/beanxyz/1893396

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】JQuery实例

0 个回复