欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery基础语法

程序员文章站 2022-07-01 20:55:45
jQuery 是一个 JavaScript 库，极大简化了JavaScript 编程1、jquery使用下载地址：http://jquery.com/download/压缩版：https://code.jquery.com/jquery-migrate-1.4.1.min.js正常版：https://code.jquery.com/jquery-migrate-1.4.1.js这里我......

一、jQuer介绍及安装

1、jQuery介绍

  • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架），极大简化了JavaScript 编程。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

  • jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、jQuery使用

下载地址：https://code.jquery.com/
压缩版：https://code.jquery.com/jquery-1.12.4.min.js
正常版：https://code.jquery.com/jquery-1.12.4.js
jquery操作文档：http://jquery.cuishifeng.cn/

这里我们使用正常版来做实验（方便查看），压缩版的适用于生产，版本使用1.12版本兼容之前版本浏览器。

（1）把jquery-1.12.4.js复制到同级目录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">dream</div>
<script src="jquery-1.12.4.js"></script>
<script>
    //jQuery('#1');或者下面那种调用方法
    $('#1');
</script>
</body>
</html>
（2）转换
jquery对象[0]   ===>> Dom对象
$(Dom对象)      ===>> jquery对象

jQuery基础语法

二、查找元素

1、基本选择器

$('#id')              ###查找id
$('.class')           ###查找class
$('element')          ###查找所有指定标签
$('*')                ###查找所有
$('a,p,...')          ###查找多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" class="c1">
        <a>1</a>
        <a>1</a>
    </div>
    <div class="c1">
        <a>1</a>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

jQuery基础语法

2、层级选择器

$('#i1 a')                 ###获取id为i1下面的所有a标签
$('#i1>a')                 ###父子，只会一层

3、基本筛选器

（1）命令说明
$('li:first');                    ###找出第一个
$('li:last');                     ###找出最后一个
$('tr:eq(index)');                ###通过index查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script src="jquery-1.12.4.js"></script>
</body>
</html>

jQuery基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
<script src="jquery-1.12.4.js"></script>
</body>
</html>

jQuery基础语法

（2）层级和first叠加使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div  class="c1">
        <div>
            <a>2</a>
        </div>
        <a>1</a>                 //找出这个
        <a>1</a>
        <a>1</a>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

$('.c1>a:first')             ###我们可以进行叠加使用

4、属性

$('[attribute]')               ###具有attribute属性的所有标签
$('[attribute="value"]')       ###attribute属性等于value的标签

5、选择实例

$('#tb :checkbox').prop('checked');            ###获取值
$('#tb :checkbox').prop('checked',true);       ###设置值

jQuery内置循环：$('#tb :checkbox').xxx

$('#tb :checkbox').each(function(k){
	//k当前索引值
	//this，DOM，当前循环得元素 $(this)
})

三元运算：var v = 条件? 真值:假值

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();" />
<input type="button" value="取消" onclick="Cancel();"/>
<input type="button" value="反选" onclick="Reverse();" />
<table border="1">
    <thead>
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td><input type='checkbox'/></td>
            <td>dream</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td><input type='checkbox'/></td>
            <td>dream1</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td><input type='checkbox'/></td>
            <td>dream2</td>
            <td>男</td>
            <td>22</td>
        </tr>
    </tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
    function CheckAll() {
        $('#tb :checkbox').prop('checked',true);
    }
    function Cancel() {
        $('#tb :checkbox').prop('checked',false);
    }
        function Reverse() {
        $('#tb :checkbox').each(function () {
            //还可以通过this.checked判断
            //this当前循环得每个元素
            //三元运算 var v = 条件? 真值:假值;
            var v = $(this).prop('checked')?false:true;
            $(this).prop('checked',v);
        })
    }
</script>
</body>
</html>

6、样式操作

$(#id).addClass('hide')        ###添加class
$(#id).removeClass('hide')     ###删除class
$(#id).toggleClass('hide')     ###对设置或移除被选元素的一个或多个类进行切换

开关：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id='i1' type="button" value="开关" />
    <div class="c1 hide">dreamya</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            //上面这几条等于下面一条
            // if($('.c1').hasClass('hide')){
            //     $('.c1').removeClass('hide');
            // }else {
            //     $('.c1').addClass('hide');
            // }
            $('.c1').toggleClass('hide');
        })
    </script>
</body>
</html>

三、筛选器

1、查找

$(this).next()                  ###下一个
$(this).nextAll()               ###所有下面的
$(this).nextUntil(#id)          ###找到所有下面到id为止
$(this).prev()                  ###上一个
$(this).prevAll()               ###所有上面的
$(this).prevUntil(#id)          ###找到所有上面到id为止
$(this).parent()                ###父
$(this).parents()               ###祖先
$(this).parentsUntil()          ###直到那个祖先
$(this). siblings()             ###兄弟
$(#id).find(#id1)               ###查找所有id下面的的id1标签

2、过滤

$(this).eq(index|-index)        ###选择器选取带有指定index值的元素
$(this).first()                 ###选择器选取第一个元素
$(this).last()                  ###选择器选取最后一个元素
$(this).hasClass(class)         ###检查被选元素是否包含指定的class

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: #0c0c0c;
            color: #9cc2cb;
            height: 40px;
            line-height: 40px;
            width:80px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="item">
            <div class="header">目录一</div>
            <div class="content">内容一</div>
            <div class="content">内容一</div>
        </div>
        <div class="item">
            <div class="header">目录二</div>
            <div class="content hide">内容二</div>
            <div class="content hide">内容二</div>
        </div>
        <div class="item">
            <div class="header">目录三</div>
            <div class="content hide">内容三</div>
            <div class="content hide">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function () {
            //可以合并成（链式编程）：$(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');
            $(this).nextAll().removeClass('hide');
            $(this).parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>

文档操作：

$(#id).text()                 ###获取文本内容
$(#id).text("<a>1</a>")       ###设置文本内容
$(#id).html()                 ###获取html内容
$(#id).html("<a>1</a>")       ###设置文本内容

Dom中有value：
    $(#id).val()              ###查询值
    $(#id).val("1")           ###设置值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .frame {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 400px;
            margin-left: -300px;
            margin-top: -200px;
            background-color: #0f9e60;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity:0.7;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td>dream</td>
            <td>男</td>
            <td>20</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td>DM</td>
            <td>男</td>
            <td>21</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td>dreamya</td>
            <td>男</td>
            <td>22</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
    </tbody>
</table>
<div class="frame hide">
    <span>姓名：</span>
    <input name="username" type="text" />
    <br/>
    <span>性别：</span>
    <input name="gender" type="text" />
    <br/>
    <span>年龄：</span>
    <input name="age" type="text" />
    <input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.edit').click(function () {
        //删除hide
        $('.shadow,.frame').removeClass('hide');
    })
    //添加hide和赋值
    $('#tb .edit').click(function () {

        $('.shadow,.frame').removeClass('hide');
        var tds = $(this).parent().prevAll();
        //进行赋值
        var username = $(tds[2]).text();
        var gender = $(tds[1]).text()
        var age = $(tds[0]).text();
        $('.frame input[name="username"]').val(username);
        $('.frame input[name="gender"]').val(gender);
        $('.frame input[name="age"]').val(age);
    });

    //删除hide
    $('.frame input[name="cancle"]').click(function () {
        $('.shadow,.frame').addClass('hide');
        //清除原有的值，防止显示错乱
        $('.frame input[type="text"]').val('');
    })
</script>
</body>
</html>

四、属性操作

1、用于自定义属性

$(#id).attr(key)               ###获取属性
$(#id).attr(key,value)         ###设置属性，可以
$(#id).removeattr(key)         ###删除属性

2、专用于checkbox，radio

$(#id).prop('checked')         ####获取值
$(#id).prop('checked',true)    ###设置值

我们通过属性操作对上面文本操作的示例进行优化，下面的方法进行赋值，我们只需要修改Table内容就行，不需要对js进行修改！！！

3、示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .frame {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 400px;
            margin-left: -300px;
            margin-top: -200px;
            background-color: #0f9e60;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity:0.7;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>编辑</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td target="username">dream</td>
            <td target="gender">男</td>
            <td target="age">20</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td target="username">DM</td>
            <td target="gender">男</td>
            <td target="age">21</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
        <tr>
            <td target="username">dreamya</td>
            <td target="gender">男</td>
            <td target="age">22</td>
            <td><a class="edit">修改</a></td>
            <td><a class="del">-</a></td>
        </tr>
    </tbody>
</table>
<div class="frame hide">
    <span>姓名：</span>
    <input name="username" type="text" />
    <br/>
    <span>性别：</span>
    <input name="gender" type="text" />
    <br/>
    <span>年龄：</span>
    <input name="age" type="text" />
    <input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.edit').click(function () {
        //删除hide
        $('.shadow,.frame').removeClass('hide');
    })
    //添加hide和赋值
    $('#tb .edit').click(function () {

        $('.shadow,.frame').removeClass('hide');
        var tds = $(this).parent().prevAll();
        //进行赋值
        $(tds).each(function () {
            //获取当前自定义target属性值
            var n = $(this).attr('target');
            //获取当前文本内容
            var text = $(this).text();
            var temp = '.frame input[name="' + n + '"]';
            $(temp).val(text);
        })
        // var username = $(tds[2]).text();
        // var gender = $(tds[1]).text()
        // var age = $(tds[0]).text();
        // $('.frame input[name="username"]').val(username);
        // $('.frame input[name="gender"]').val(gender);
        // $('.frame input[name="age"]').val(age);
    });

    //删除hide
    $('.frame input[name="cancle"]').click(function () {
        $('.shadow,.frame').addClass('hide');
        //清除原有的值，防止显示错乱
        $('.frame input[type="text"]').val('');
    })
</script>
</body>
</html>

4、菜单切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .active{
            color: burlywood;
            background-color: #001F3F;
        }
        .menu{
            height: 38px;
            background-color: #0c0c0c;
            color: #9cc2cb;
            line-height: 38px;
            cursor: pointer;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid rebeccapurple;
            padding: 0 10px;
        }
        .content{
            min-height: 200px;
            border: 1px solid burlywood;
        }

    </style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
    <div class="menu">
        <div class="menu-item active" a="1">菜单一</div>
        <div class="menu-item" a="2">菜单二</div>
        <div class="menu-item" a="3">菜单三</div>
    </div>
    <div class="content">
        <div b="1">内容一</div>
        <div class="hide" b="2">内容二</div>
        <div class="hide" b="3">内容三</div>
    </div>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu .menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var n = $(this).attr('a');
            $('.content ').children('[b="' + n + '"]').removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

5、通过index实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .active{
            color: burlywood;
            background-color: #001F3F;
        }
        .menu{
            height: 38px;
            background-color: #0c0c0c;
            color: #9cc2cb;
            line-height: 38px;
            cursor: pointer;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid rebeccapurple;
            padding: 0 10px;
        }
        .content{
            min-height: 200px;
            border: 1px solid burlywood;
        }

    </style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
    <div class="menu">
        <div class="menu-item active">菜单一</div>
        <div class="menu-item">菜单二</div>
        <div class="menu-item">菜单三</div>
    </div>
    <div class="content">
        <div>内容一</div>
        <div class="hide">内容二</div>
        <div class="hide">内容三</div>
    </div>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu .menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            // $(this).index();
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

五、文档处理

1、内部插入

append
prepend

2、外部插入

after
before

3、删除

remove
empty

4、复制

clone

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="1" type="text">
<input id="2" type="button" value="添加">
<input id="3" type="button" value="删除">
<input id="4" type="button" value="复制">
<ul id="ul">
    <li>1</li>
    <li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
    //添加
    $('#2').click(function () {
        var n = $('#1').val();
        var temp = "<li>" + n + "</li>";
        //我们可以把这个append修改为prepend、after、before来做测试
        $('ul').append(temp);
    })
    //删除
    $('#3').click(function () {
        var index = $('#1').val();
        //删除当前index
        $('#ul li').eq(index).remove();
        //清空value值设置为空
        //$('#ul li').eq(index).empty();
    })
    //复制,通过index进行复制
    $('#4').click(function () {
        var index = $('#1').val();
        var v = $('#ul li').eq(index).clone();
        $('ul').append(v);
    })
</script>
</body>
</html>

六、CSS处理

1、CSS

$(#id).css('样式名称','样式值')

eg.点赞：

点赞效果：
	- $(#id).append()
	- $(#id).remove()
	- setInterval
	- 透明度：1 --->> 0
	- position
	- 字体大小，位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding:50px;
            border: 1px solid bisque;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>
<div class="container">
    <div class="item">
        <span>赞</span>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.item').click(function () {
        Add(this);
    });
    function Add(self) {
        var fontSize = 15;
        var top = 0;
        var right = 0;
        var opacity = 1;
        //Dom对象,设置css属性
        var tag = document.createElement('span');
        $(tag).text('+1');
        $(tag).css('color','green');
        $(tag).css('position','absolute');
        $(tag).css('fontSize',fontSize + 'px');
        $(tag).css('top',top + 'px');
        $(tag).css('right',right + 'px');
        $(tag).css('opacity',opacity);
        $(self).append(tag);

        var obj = setInterval(function () {
            fontSize = fontSize + 5;
            top = top - 10;
            right = right - 10;
            opacity = opacity - 0.2;

            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('positon','absolute');
            $(tag).css('fontSize',fontSize + 'px');
            $(tag).css('top',top + 'px');
            $(tag).css('right',right + 'px');
            $(tag).css('opacity',opacity);
            if (opacity < 0 ){
                clearInterval(obj);
                $(tag).remove();
            }
        },100)
    }
</script>
</body>
</html>

2、位置

$(window).scrollTop()             ###获取值
$(window).scrollTop(value)     ###设置值
scrollLeft([val])
offset().top              ###指定标签在html中的坐标
offset().left              ###指定标签在html中的坐标
position()              ###指定标签相对父标签（relative）标签的坐标

3、尺寸

$(#id).height()               ###获取标签的高度 纯高度
$(#id).innerHeight()   ###获取标签边框+纯高度
$(#id).outerHeight()   ###获取标签边框+纯高度
$(#id).outerHeight(true)   ###获取标签边框+纯高度

七、事件

1、事件绑定（三种）

$('.c1').click()

### 被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
$('.c1').bind('click',function(){				
})

$('.c1').unbind('click',function(){
})

### 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$('.c').delegate('a', 'click', function(){
})

$('.c').undelegate('a', 'click', function(){

})

### 在被选元素及子元素上添加一个或多个事件处理程序
$('.c1').on('click', function(){
})

$('.c1').off('click', function(){
})

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
<script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            $('#u1').append(temp);
        });

       // $('ul li').click(function () {
       //     var v = $(this).text();
       //     alert(v);
       // })

       // $('ul li').bind('click',function () {
       //     var v = $(this).text();
       //     alert(v);
       // })

       // $('ul li').on('click', function () {
       //     var v = $(this).text();
       //     alert(v);
       // })

        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        })

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

2、阻止事件发生

（1）说明
return false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a onclick="return clickOn();" href="http://www.baidu.com">百度</a>
<a id="1" href="http://taobao.com">淘宝</a>
<script src="jquery-1.12.4.js"></script>
<script>
    //Dom方法
    function clickOn() {
        alert(1);
        //改成false的话就不会跳转
        return true;
    }
    //jQuery方法
    $('1').click(function () {
        alert(2);
        return false;
    })
</script>
</body>
</html>
（2）示例（表单验证）

简单写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这里随便指定的地址就行-->
<form action="1.html" method="post">
    <input type="text" />
    <input type="submit" value="提交" />
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            var v = $(this).prev().val();
            if(v.length > 0){
                return true;
            }else {
                alert('请输入内容');
                return false;
            }
        })
    </script>
</form>
</body>
</html>

升级：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
<!--这里随便指定的地址就行-->
<form id="1" action="1.html" method="post">
    <div><input name="n1" type="text" /></div>
    <div><input name="n2" type="password" /></div>
    <div><input name="n3" type="text" /></div>
    <div><input name="n4" type="text" /></div>
    <input type="submit" value="提交" />
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            var flag = true;
            $('.error').remove();
            $('#1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    flag = false;
                    var tag = document.createElement('span');
                    tag.className = 'error';
                    tag.innerText = " *";
                    $(this).after(tag);
                }
            })
            return flag;
        })
    </script>
</form>
</body>
</html>

八、当页面框架加载完成之后，自动执行

1、说明

$(function(){
	$(...)
})

jQuery基础语法

2、之前代码修改后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
<!--这里随便指定的地址就行-->
<form id="1" action="1.html" method="post">
    <div><input name="n1" type="text" /></div>
    <div><input name="n2" type="password" /></div>
    <div><input name="n3" type="text" /></div>
    <div><input name="n4" type="text" /></div>
    <input type="submit" value="提交" />
    <script src="jquery-1.12.4.js"></script>
    <script>
        //当页面框架加载完后，自动执行，比如我们的图片
        $(function(){
	        $(':submit').click(function () {
            var flag = true;
            $('.error').remove();
            $('#1').find('input[type="text"],input[type="password"]').each(function () {
                var v = $(this).val();
                if(v.length <=0){
                    flag = false;
                    var tag = document.createElement('span');
                    tag.className = 'error';
                    tag.innerText = " *";
                    $(this).after(tag);
                }
            })
            return flag;
        })
    })
    </script>
</form>
</body>
</html>

九、jQuery扩展

1、说明

- $.extend        $.方法
- $.fn.extend     $(..).方法

### 写入单独文件中			
(function(){
	var status = 1;
	// 封装变量
})(jQuery)

2、二种写法

（1）方法一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $.extend({
            'dream': function () {
                return 'dream';
            }
        })
        var v = $.dream();
        alert(v);
    </script>
</body>
</html>
（2）方法二
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // $.extend({
        //     'dream': function () {
        //         return 'dream';
        //     }
        // })
        // var v = $.dream();
        // alert(v);

        $.fn.extend({
            'dreamya':function () {
                return 'dreamya';
            }
        })
        var n = $('#1').dreamya();
        alert(n);
    </script>
</body>
</html>

3、单独文件

（1）同级目录建立plugin.js
(function (arg) {
    var status = 1;
    arg.extend({
        'dream': function () {
            return 'dream';
        }
    })
})(jQuery);   //jQuery也可以写$
（2）调用plugin.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="plugin.js"></script>
<script>
    var v = $.dream();
    alert(v);
</script>
</body>
</html>

本文地址：https://blog.csdn.net/Dream_ya/article/details/85623243

相关标签： 前端 jquery

上一篇： 设计模式之黑板模式

下一篇： Python和JavaScript间代码转换的4个工具

推荐阅读