当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery基础语法

jQuery基础语法

2020年07月17日 | 移动技术网IT编程 | 我要评论

一、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操作文档：

这里我们使用正常版来做实验（方便查看），压缩版的适用于生产，版本使用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对象

在这里插入图片描述

二、查找元素

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>

在这里插入图片描述

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>

在这里插入图片描述

<!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>

在这里插入图片描述

（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(){
	$(...)
})

在这里插入图片描述

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

小程序之页面获取自定义组件中的值

新建组件：在component下新建一个tabBar在组件的index.wxml中写如下代码：<cover... [阅读全文]
asp.net中ajax和一般处理程序（handler.ashx）的交互

（记得引入js哦）我们假设这样一个场景，现在有一个删除界面。我们需要根据身份证来查询数据，并且将这个人的信息显示... [阅读全文]
模块分离，创建启动服务的方法，并判断用户发出的请求

模块分离1 index.js 启动服务var serve=require("./serve");//导入服务的模... [阅读全文]
nodejs中的path、url、http、fs小综合

Nodejs1 文件流stream var fs=require("fs"); var writeS... [阅读全文]
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用

1、egg项目的创建创建项目 npm init egg --type=simple安装依赖 npm i依赖安装完... [阅读全文]
计算机前端基础

介绍什么是前端？计算机前端就是创建web页面和APP（例如微信、支付宝等）前端界面呈现给使用者的过程，通过HTM... [阅读全文]
node.js基础知识

【1】Node.js严格来说不是一个框架，而是一个平台。Node.js的技术栈：（1）Node.js的核心模块。... [阅读全文]
iOS WKWebView加载HTML字体大小问题

NSString *jScript = @"var meta = document.createElement(... [阅读全文]
基于Swift的简易iOS天气APP

文章目录1. 项目简介1.1 功能与参数1.2 效果图2. 运行方法3. 相关资源3.1 API参考文档3.2 ... [阅读全文]
Firebase接入

Firebase接入1.Firebase开发者文档：https://console.firebase.googl... [阅读全文]

网友评论


验证码：

jQuery基础语法

2020年07月17日 | 移动技术网IT编程 | 我要评论

一、jQuer介绍及安装

1、jQuery介绍

2、jQuery使用

（1）把jquery-1.12.4.js复制到同级目录

（2）转换

二、查找元素

1、基本选择器

2、层级选择器

3、基本筛选器

（1）命令说明

（2）层级和first叠加使用

4、属性

5、选择实例

6、样式操作

三、筛选器

1、查找

2、过滤

四、属性操作

1、用于自定义属性

2、专用于checkbox，radio

3、示例一

4、菜单切换

5、通过index实现

五、文档处理

1、内部插入

2、外部插入

3、删除

4、复制

六、CSS处理

1、CSS

2、位置

3、尺寸

七、事件

1、事件绑定（三种）

2、阻止事件发生

（1）说明

（2）示例（表单验证）

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

1、说明

2、之前代码修改后：

九、jQuery扩展

1、说明

2、二种写法

（1）方法一

（2）方法二

3、单独文件

（1）同级目录建立plugin.js

（2）调用plugin.js

您可能感兴趣的文章:

相关文章:

网友评论

（1）把`jquery-1.12.4.js`复制到同级目录