随笔 - 105  文章 - 0  评论 - 0  阅读 - 40744

jQuery

总体概述

 一、jQuery相当于Python中的模块，其诞生的目的就是简化DOM操作。DOM操作基本上都封装在jQuery中。不过也有例外，比如createElement创建标签的操作，还是需要DOM完成。Dom对象与jQuery对象可互相转换

jQuery对象 --------> Dom对象：$('#i1')[0]

DOM对象------> jQuery对象：$(<dom对象>)

二、参考网站：http://jquery.cuishifeng.cn

三、版本号：

1.x　　推荐使用这个，这是为了兼容旧版本浏览器

2.x

3.x

四、基本用法：

jQuery的用法大致可以分为以下4步

1、下载jQuery

2、在HTML文件中，在body标签最底部写一个script的子标签，其中写一个src属性导入jQuery

3、查找元素（使用时可以以$开头或jQuery）

4、操作元素

 

选择器

cond1、cond2为标签的条件

一、id选择器：$('#<id>')

二、class选择器：$('.<classname>')

三、标签选择器：$('<tagname>')

四、*：代表所有标签

五、组合选择器：$('a,.c1,#i10')，此选择器会选择a标签、class为c1、id为i10的标签。即只需要满足其中一个条件即可。注意是用逗号分隔。

六、层级选择器：$('cond1 cond2')，查找cond1标签下的符合cond2的所有标签（子孙也查找），用空格分隔

                             $('parent>child')：查找parent下了子元素，而不查找孙子。

　　　　　　　　prev + next

　　　　　　　　prev ~ siblings

　　　　　　　　$('cond1+conde2')：查找一个与cond1相邻的标签

　　　　　　　   $('cond1+conde2')：查找一个与cond1相邻的标签

七、属性选择器：$('[name]') 查找具有name属性的标签

　　　　　　　　$(''[name='alex']")　　查找name属性为alex的标签

　　　　　　　　$('[attribute!=value]')　　查找属性不等于value的标签

　　　　　　　　attribute^=value

　　　　　　　　attribute$=value

　　　　　　　　attribute*=value

　　　　　　　　[attrSet1][attrSet2][attrSetN]

八、表单相关：$('[:disabled]')：查找属性为disabled，比如text不能输入的标签

九、$(':checkbox)：选择了checkbox

二 、筛选器

1、:first：$('a:first')相当于$('a').first()　　找到第一个a标签

2、:not(selector)　　除了selector以外的

3、:even　　奇数

4、:odd　　偶数

5、:last：$('a:last')相当于$('a').last()　　最后一个标签

6、:eq(index)：相当于$('.类名').eq(1)　　（$('.<classname>:eq(1)')）　　找到索引为index的标签

7、:gt(index)

8、:lt(index)

9、:header　　找到类似h1 h2 h3的标签

16、hasclass：$('a').hasclass(expr)　　判断在a标签中找到有expr类的标签

10、<jQuery对象>.find(...)　　在jQuery对象中的子子孙孙查找

11、<jQuery对象>.next()　　jQuery对象的下一下对象

　　　　　　　　 nextAll()

　　　　　　　　 nextUntil(expr)　　直到找到expr

12、<jQuery对象>.prev()　　jQuery对象的上一个对象

　　　　　　　　 prevAll()

　　　　　　　　 prevUntil()

13、<jQuery对象>.parent　　父亲

　　　　　　　　  parents　　找到他的所有前辈

　　　　　　　　  parentsUntil()

14、<jQuery对象>.children　　孩子

15、<jQuery对象>.siblings　　兄弟

红色字体的返回的是DOM对象？

 案例：全选、反选、取消

复制代码
<!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>端口</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>192.168.0.20</td>
        <td>808</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>192.168.0.10</td>
        <td>9999</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>192.168.0.30</td>
        <td>8080</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>192.168.0.40</td>
        <td>80</td>
    </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    // 全选
    // 不用循环，会自动循环
    $('[value="全选"]').click(function () {
        $(':checkbox').prop('checked', true);
    })
    // 取消
    $('[value="取消"]').click(function () {
        $(':checkbox').prop('checked', false);
    })
    // 反选
    // 利用DOM完成
    // $('[value="反选"]').click(function () {
    //     $(':checkbox').each(function () {
    //         if(this.checked){
    //             this.checked=false;
    //         }else{
    //             this.checked=true;
    //         }
    //     })
    // })
    // 利用jQuery完成
    // $('[value="反选"]').click(function () {
    //     $(':checkbox').each(function () {
    //         if($(this).prop('checked')){
    //             $(this).prop('checked', false)
    //         }else{
    //             $(this).prop('checked', true)
    //         }
    //     })
    // })
    // jQuery结合三元运算
    $('[value="反选"]').click(function () {
        $(':checkbox').each(function () {
            var res = $(this).prop('checked')?false:true;
            $(this).prop('checked', res)
        })
    })

</script>
</body>
</html>
复制代码

知识点：

1、三元运算：res = condition?res1:res2;

condition成立返回res1，否则返回res2

2、在jQuery中，不需要使用循环，会自动循环，否则使用<jquery对象>.each()循环

 

样式操作

<jQuery对象>.addClass(...)　　添加样式

<jQuery对象>.removeClass()　　删除样式

<jQuery对象>.toggleClass(...)　　样式存在则删除样式，不存在则添加

<jQuery对象>.css(<name>,<val)　　样式中的某个属性设置

案例如下：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .content{
            background-color: red;
            width:200px;height: 200px;
        }
    </style>
</head>
<body>
<input type="button" value="开关">
<div class="content"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('input[type="button"]').click(function () {
        $('.content').toggleClass('hide')
    })
</script>
</body>
</html>
复制代码

 

案例：显示菜单内容

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color:blue;
            width:100px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
<div class="item">
    <div class="header">菜单1</div>
    <div class="content">
        <div>内容1</div>
        <div>内容1</div>
        <div>内容1</div>
        <div>内容1</div>
    </div>
</div>
<div class="item">
    <div class="header">菜单2</div>
    <div class="content hide">
        <div>内容2</div>
        <div>内容2</div>
        <div>内容2</div>
        <div>内容2</div>
    </div>
</div>
<div class="item">
    <div class="header">菜单3</div>
    <div class="content hide">
        <div>内容3</div>
        <div>内容3</div>
        <div>内容3</div>
        <div>内容3</div>
    </div>
</div>
<div class="item">
    <div class="header">菜单4</div>
    <div class="content hide">
        <div>内容4</div>
        <div>内容4</div>
        <div>内容4</div>
        <div>内容4</div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.header').click(function () {
        // $(this).next().removeClass('hide')
        // $(this).parent().siblings().children('.content').addClass('hide')
        // 支持链式编程
        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
    })
</script>
</body>
</html>
复制代码

支持链式编程

动画设置

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width:200px;
            height:200px;
            background-color: aqua;
        }
    </style>
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <button class="change">切换</button>
    <button class="fadeout">淡出</button>
    <button class="fadein">淡入</button>
    <button class="fadechange">淡入淡出切换</button>
</head>
<body>
<div class="outer"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $('.show').click(function () {
        $('.outer').show(1000); //显示，1000毫秒
    });
    $('.hide').click(function () {
        $('.outer').hide(1000); //隐藏，1000毫秒
    });
    $('.change').click(function () {
        $('.outer').toggle(1000); //切换，1000毫秒
    });
    $('.fadeout').click(function () {
        $('.outer').fadeOut(1000);
    });
    $('.fadein').click(function () {
        $('.outer').fadeIn(1000);
    });
    $('.fadechange').click(function () {
        $('.outer').fadeToggle(1000);
    });
</script>
</body>
</html>
复制代码

 

属性设置

1、jquery对象.prop(attr,val)　　设置值

2、jquery对象.prop(attr)　　获取值

1、2专门用于checkbox和radio （这是由于3版本以下的jQuery的问题）

3、<jQuery对象>.attr(name)　　获取属性

4、<JQuery对象>.attr(name,val)　　设置属性

也可用字典设置多个属性

5、JQuery对象.removeAttr(name)　　删除属性

添加标签

创建标签：$('<li>')

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li>111</li>
10     <li>222</li>
11     <li>333</li>
12 </ul>
13 <button>add</button>
14 <script src="jquery-3.4.1.js"></script>
15 <script>
16     $('button').click(function () {
17         var $added = $('<li>');
18         $added.html('444');
19         $('ul').append($added);
20     })
21 </script>
22 </body>
23 </html>
复制代码

 

HTML内容 文本 值

1、jQuery对象.text()　　获取文本内容

2、jQuery对象.text(str)　　设置文本内容

3、jQuery对象.html()　　获取HTML内容

4、jQuery对象.html(str)　　设置HTML内容

5、jQuery对象.val()　　获取val值

6、jQuery对象.val(str)　　设置val值

 5、6主要是针对input系列的标签，注意其中的select标签使用5、6，如果是多选，5返回的是列表，6的参数要求是列表。

案例：模态对话框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;bottom: 0;left: 0;right: 0;
            background-color: black;
            opacity: 0.5;z-index: 9;
        }
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top:50%;left:50%;
            width:300px;height:300px;
            z-index: 10;background-color: white;
            margin-left:-150px;margin-top:-150px;
        }
        .modal .ip{
            margin-top:20px;
            margin-left:20px;
        }
        .modal .port{
            margin-top:20px;
        }
        .modal .confirm{
            margin-top:10px;
            margin-right: 90px;
            text-align:right;
        }
    </style>
</head>
<body>
<input type="button" value="添加" \>
<table border="1">
    <thead>
    <tr>
        <th>IP</th>
        <th>端口</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>192.168.10.10</td>
        <td>8080</td>
        <td>
            <a class="edit">编辑</a>|<a>删除</a>
        </td>
    </tr>
    <tr>
        <td>192.168.10.20</td>
        <td>8088</td>
        <td>
            <a class="edit">编辑</a>|<a>删除</a>
        </td>
    </tr>
    <tr>
        <td>192.168.10.30</td>
        <td>808</td>
        <td>
            <a class="edit">编辑</a>|<a>删除</a>
        </td>
    </tr>
    </tbody>
</table>
<div class="shadow hide"></div>
<div class="modal hide">
    <div class="ip">
        <span>IP</span>
        <input type="text" name="ip" \>
    </div>
    <div class="port">
        <span>端口</span>
        <input type="text" name="port"\>
    </div>
    <div class="confirm">
        <input type="button" value="确定">
        <input type="button" value="取消">
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('input[type="button"]').click(function () {
        $('.shadow,.modal').removeClass('hide')
    })
    $('input[value="取消"]').click(function () {
        $('.shadow,.modal').addClass('hide')
        $('.modal .port input[name="port"]').val('')
        $('.modal .ip input[name="ip"]').val('')
    })
    $('.edit').click(function () {
        tds = $(this).parent().prevAll()
        var port = $(tds[0]).text()
        var ip = $(tds[1]).text()
        $('.modal .port input[name="port"]').val(port)
        $('.modal .ip input[name="ip"]').val(ip)
        $('.shadow,.modal').removeClass('hide')
    })
</script>
</body>
</html>
复制代码

 模态对话框（改进版）：为了实现多列的扩展

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;bottom: 0;left: 0;right: 0;
            background-color: black;
            opacity: 0.5;z-index: 9;
        }
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top:50%;left:50%;
            width:300px;height:300px;
            z-index: 10;background-color: white;
            margin-left:-150px;margin-top:-150px;
        }
        .modal .ip{
            margin-top:20px;
            margin-left:20px;
        }
        .modal .port{
            margin-top:20px;
        }
        .modal .confirm{
            margin-top:10px;
            margin-right: 90px;
            text-align:right;
        }
    </style>
</head>
<body>
<input type="button" value="添加" \>
<table border="1">
    <thead>
    <tr>
        <th>IP</th>
        <th>端口</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td target="ip">192.168.10.10</td>
        <td target="port">8080</td>
        <td>
            <a class="edit">编辑</a>|<a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="ip">192.168.10.20</td>
        <td target="port">8088</td>
        <td>
            <a class="edit">编辑</a>|<a>删除</a>
        </td>
    </tr>
    <tr>
        <td target="ip">192.168.10.30</td>
        <td target="port">808</td>
        <td>
            <a class="edit">编辑</a>|<a>删除</a>
        </td>
    </tr>
    </tbody>
</table>
<div class="shadow hide"></div>
<div class="modal hide">
    <div class="ip">
        <span>IP</span>
        <input type="text" name="ip" \>
    </div>
    <div class="port">
        <span>端口</span>
        <input type="text" name="port"\>
    </div>
    <div class="confirm">
        <input type="button" value="确定">
        <input type="button" value="取消">
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('input[type="button"]').click(function () {
        $('.shadow,.modal').removeClass('hide')
    })
    $('input[value="取消"]').click(function () {
        $('.shadow,.modal').addClass('hide')
        $('.modal .port input[name="port"]').val('')
        $('.modal .ip input[name="ip"]').val('')
    })
    $('.edit').click(function () {
        var tds = $(this).parent().prevAll()
        tds.each(function () {
            var text = $(this).text()
            var target = $(this).attr('target')
            $('.modal input[name='+target+']').val(text)
            $('.shadow,.modal').removeClass('hide')
        })
        // var port = $(tds[0]).text()
        // var ip = $(tds[1]).text()
        // $('.modal .port input[name="port"]').val(port)
        // $('.modal .ip input[name="ip"]').val(ip)
        // $('.shadow,.modal').removeClass('hide')
    })
</script>
</body>
</html>
复制代码

案例：切换菜单，内容随之改变（利用自定义属性完成）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width:980px;height:40px;
            background-color: #eeeeee;
            margin:0 auto;
        }
        .menu .menu-item{
            float:left;
            padding: 10px;
            border-right:1px solid red;
            cursor: pointer;
        }
        .menu .active{
            background-color: brown;
        }
        .content{
            width:960px;min-height: 100px;
            margin:0 auto;
            padding:10px;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="menu-item" a="1">菜单1</div>
    <div class="menu-item" a="2">菜单2</div>
    <div class="menu-item" a="3">菜单3</div>
</div>
<div class="content">
    <div b="1">内容1</div>
    <div class="hide" b="2">内容2</div>
    <div class="hide" b="3">内容3</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu .menu-item').click(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        var prop = $(this).attr('a');
        $('.content div[b='+prop+']').removeClass('hide');
        $('.content div[b='+prop+']').siblings().addClass('hide')
    })
</script>
</body>
</html>
复制代码

案例：菜单切换，改进版（利用索引完成）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width:980px;height:40px;
            background-color: #eeeeee;
            margin:0 auto;
        }
        .menu .menu-item{
            float:left;
            padding: 10px;
            border-right:1px solid red;
            cursor: pointer;
        }
        .menu .active{
            background-color: brown;
        }
        .content{
            width:960px;min-height: 100px;
            margin:0 auto;
            padding:10px;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="menu-item">菜单1</div>
    <div class="menu-item">菜单2</div>
    <div class="menu-item">菜单3</div>
</div>
<div class="content">
    <div>内容1</div>
    <div class="hide">内容2</div>
    <div class="hide">内容3</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu .menu-item').click(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
    })
</script>
</body>
</html>
复制代码

知识点：

1、$(this).index　　获取this在父类标签中的索引值

文档操作

1、<jQuery对象>.append(<obj>)　　在父标签中尾部添加

<children_对象>.appendto(<父亲对象>)

以下类同。

2、<jQuery对象>.prepend(<obj>)（相当于<html_string).prepentto(jQuery对象))　　在子标签头部添加

3、<jQuery对象>.after(<obj>)　　在标签的后面添加

4、<jQuery对象>.before(<obj>)　　在标签之前添加

obj可为jQuery对象、dom对象或字符串

5、<jQuery对象>.empty()　　清空内容

6、<jQuery对象>.clear()　　删除整个标签

7、<jQuery对象>.clone()　　复制整个标签

8

 

位置操作

一、滑轮

1、$(window).scrollTop()　　获取window滑轮位置

2、$(window).scrollTop(val)　　设置window滑轮位置

3、$(...).scrollTop()　　获取标签滑轮位置

4、$(...).scrollTop()　　设置标签滑轮位置

scrollLeft

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height:100px;overflow: auto;width:200px;">
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
    <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p>
</div>
<div style="height:2000px;"></div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
复制代码

 

二、offset 获取标签左上角在html中的位置

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1" style="height:100px;"></div>
<div id="i2"></div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
复制代码

$(...).offset().left

$(...).offset().top

三、position()：获取子标签在父标签中的坐标，不过注意的是父标签需要做一个定位，如position:relative

 

标签高度

1、<jQuery对象>.height()　　获取标签内容的高度

2、<jQuery对象>.innerHeight()　　获取标签内容的高度+2*padding高度

3、<jQuery对象>.outerHiehgt()　　获取标签内容的高度+2*padding-top+2*border

4、<jQuery对象>.outerHeight()　　获取标签内容的高度+2*padding-top+2*border+2*margin-top

 

事件绑定方式

1、<jQuery对象>.on(<event>,<func>)

2、<jQuery对象>.off(<event>,<func>)

 以下绑定方式的底层都是基本1、2

3、<jQuery对象>.<event>(<func>)

4、<jQuery对象>.bind(<event>,<func>)

5、<jQuery对象>.unbind(<event>,<func>)

6、<jQuery对象>.delegate(<选择器>,<event>,<func>)

7、<jQuery对象>.undelegate(<选择器>,<event>,<func>)

8、<JQuery对象>on(<event>,<selector>,<func)

 第6、8种绑定方式是委托方式，意思就是此处的代码不会立马绑定事件，而是当用户点击时，搜索此标签是否符合<jQuery对象>、<选择器>，符合即绑定事件。

适用范围：在Html添加新元素，而在新元素绑定事件

案例如下：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="添加">
<input type="text">
<ul>
    <li>Treelight</li>
    <li>Alex</li>
    <li>Syvia</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
    $('input[value="添加"]').click(function () {
        var new_obj = document.createElement('li');
        $(new_obj).text($('input[type="text"]').val())
        $('ul').append(new_obj)
    });
    $('ul').delegate('li','click',function () {
        alert($(this).text());
    })
</script>
</body>
</html>
复制代码

 9、$(document).ready(<func>)：整个文档加载完才执行。

相当于$(<func>)

 阻止事件发生

案例如下（DOM方式）：

JQuery方式

默认事件先执行的：checkobx

自定义事件先执行：a submit

 当页面框架加载完成就执行函数

$(<func>)

页面框架是指标签，但不指标签的内容，比如图片，这样不用加载完图片就能迅速绑定事件，

 each的用法

1、遍历数组或者对象：如下

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script src="jquery-3.4.1.js"></script>
 9 <script>
10     arr = [1,2,3];
11     obj={'name':'Treelight', 'age':38};
12     $.each(arr, function (i, v) {
13         console.log(i, v);
14     });
15     $.each(obj, function (i, v) {
16         console.log(i,v)
17     });
18 </script>
19 </body>
20 </html>
复制代码

2、遍历各个标签

<

jQuery函数扩展

一、创建：$.extend(<fun_name>:function(){

　　　　...}

调用：$.<fun_name>

例子：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $.extend({
        sum:function (a,b) {
            return a+b;
        }
    });
    var v = $.sum(10,11);
    console.log(v);
</script>
</body>
</html>
复制代码

二、创建：

$.fn.extend(<fun_name>:function(){

　　　　...}

调用：

<jQuery对象>.<fun_name>

案例：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $.fn.extend({
        sum:function (a,b) {
            return a+b;
        }
    });
    var v = $('div').sum(40,11);
    console.log(v);
</script>
</body>
</html>
复制代码

三、外部文件扩展

用法

1、<script src='path/to/file'></script>

2、$.<fun_name>

引用外部扩展的问题：

1、有可能函数名相同，没法解决

2、有可能全局变量一样，可用自执行函数解决，把jQuery传进去，如：。

(function(){
var status = 1;

arg.extend({

function ...})
// 封装变量
})(jQuery)

 

其它

设置select中的选项

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select>
    <option>Scholes</option>
    <option>Kean</option>
    <option>Beckham</option>
    <option>Giggs</option>
</select>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
复制代码

绑定ctrl+鼠标左键事件：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button">
<script src="jquery-1.12.4.js"></script>
<script>
    $('input').mousedown(function (e) {
        console.log(e.button,e.ctrlKey)
    })
</script>
</body>
</html>
复制代码

 option标签不能绑定mousedown事件

 <jquery对象>.focus()：获取焦点

作业问题

关于select标签绑定click事件：点击标签和选一个选项都会触发click事件。我们需要的是后者触发的click事件。

表单验证

================================== 验证 ================================
JS： 验证

各种验证

$(':submit').click(function(){

$(':text,:password').each(function(){
...
return false;
})
return false;
})


后端：python实现

业务处理
....

 

Ajax

初步感觉也是提交数据，也有请求方式、数据、请求的URL，也会从服务器端返回数据，但有两点好处：

1、可以异步发送数据

2、实现局部刷新数据，不会整个页面刷新

3、Ajax不要与submit按钮一起使用

初步体验Ajax和Django的交互

success：有数据返回时才执行

Ajax中数据的打包

$(<form选择器>).serialize()

 Ajax中的参数

url：请求地址

processData：默认为true，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data

data：发送给服务器的数据

type：请求类型

dataType：指定从服务器端返回的数据类型

traditional：设为true，则可以给客户端发送列表

error：请求错误时调用，可以理解为服务器没返回时调用的函数

async：默认为true，设为false则不同步。解决django中提示ConnectionAbortedError: [WinError 10053]可试试

error示例如下：

 

 

 

 

 contentType：这个是告诉服务器，我们发过去的数据是以什么编码方式发送的，常见的有：application/x-www-form-urlencoded（默认）、application/json等。这有什么用了？

注意：在视图函数里，我们的request.POST、request.GET都不是原生数据，它是对request.body进行解码才得出来的，这对于urlencoded这个编码方式才有效

如果在ajax使用了application/json这个编码方式发送数据，是需要对data进行一个序列化。但到了服务器不能直接用request.POST或request.GET处理的，那怎么办？需要对原生数据request.body进行处理，先解码，再反序列化即可。请看下图

 

 

 

 

 

利用Ajax传送文件

请看以下例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('button').click(function () {
        var formdata = new FormData();
        // 实例化一个FormData例，用于存放数据
        formdata.append('username', $(':input[type="text"]').val());
        // 添加数据
        formdata.append('img_file', $(':input[type="file"]')[0].files[0]);
        // 添加数据，注意文件句柄的获取：$(':input[type="file"]')[0]，把Jquery对象转换成Dom对象，
        // 再从Dom对象中files文件列表属性中获取第一个文件的句柄。
        $.ajax({
            url: '/index/',
            type: 'post',
            data: formdata,
            // 组装数据
            headers:{'X-CSRFToken': $.cookie('csrftoken')},
            processData: false,
            contentType: false,
            // 注意：如果是FormData的数据，需要processData、contentType都设为false
            success: function (data) {
                console.log(data)
            }
        })
    })
posted on   Treelight  阅读(228)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 Treelight
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示