JQuery实例

时间：2020-02-10 11:30:27 阅读：62 评论：0 收藏：0 [点我收藏+]

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{
            
            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;
            
            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] 纯文本查看复制代码

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<!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;
            
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            
            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实例

原文：https://www.cnblogs.com/zhuxiaopijingjing/p/12289950.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)