Jquery笔记（中）

共计 10085 个字符，预计需要花费 26 分钟才能阅读完成。

概述

本章会介绍jquery事件的用法，我们想要给当前元素添加事件, 只需要选中当前元素, 这里调用 click 即可, 和原生 js 不同>的是: 不用’on’开头；
animate的用法，以及一些动画效果；jquery三个属性操作方法，html()，val()，prop()的使用；
使用正则表达式完成表单的验证。

一. 绑定事件

给元素绑定click事件，可以用如下方法：

添加绑定事件

使用方法:


$('#btn1').click(function(){

    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)

})

例如: 

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('.box')
            $div.click(function(){
                console.log('haha')

                console.log($(this))

                console.log(this)
            })
        })
    </script>
</head>
<body>
    <div class="box">哈哈</div>
</body>

点击之后的结果:

Jquery笔记（中）

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

使用方法:

var $li = $('.list li').eq(1);
alert( $li.index() ); // 弹出1


<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

例如: 

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $li = $('li')
            $li.click(function(){
                console.log( $(this).index() )
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
</body>

运行结果:

Jquery笔记（中）

小案例

选项卡的制作

Jquery笔记（中）
<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $btn = $('input')
            var $div = $('.tab_cons div')
            // console.log($btn)
            $btn.click(function(){
                var index = $(this).index()
                // console.log($btn[index])
                // 给当前点击元素添加样式
                $($btn[index]).addClass('active')
                // 给其他元素去除样式
                $($btn[index]).siblings().removeClass('active')                

                // 给当前点击元素添加样式
                $($div[index]).addClass('current')
                // 给其他元素去除样式
                $($div[index]).siblings().removeClass('current')
            })
        })
    </script>
</head>

<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>

或者可以写成这样: 

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $btn = $('input')
            var $div = $('.tab_cons div')
            $btn.click(function(){
                // 当前元素添加, 其他元素去除
               $(this).addClass('active').siblings().removeClass('active')

                $div.eq( $(this).index() ).addClass('current').siblings().removeClass('current')
            })
        })
    </script>
</head>

<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>

总结:

  • 我们想要给当前元素添加事件, 只需要选中当前元素, 这里调用 click 即可, 和原生 js 不同的是: 不用’on’开头
  • 在点击事件之中,$(this) 就代表当前选中元素(jquery对象), 想要获取当前元素的索引值,可以使用 index( )方法
  • 如果当前元素是一个dom对象, 变成 jquery 对象的方法是外边加$符号: $(dom元素)
  • 调用 jquery对象的下标,获取的是 dom元素对象: $div[0] ===> dom元素对象

二. jquery动画

通过 animate 方法可以设置元素21某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

使用方法:


/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数
*/

$('#div1').animate({
    要改变的属性值
},动画持续时间,动画的效果,function(){
    动画执行完成之后调用的代码
});

例如: 

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        $(function(){
            $('.btn').click(function(){
                $('.box').animate({
                    'width':'200px'
                },1000,'swing',function () {
                    $('.box').animate({
                        'height':'200px'
                    },1000,'swing',function(){

                    })
                })   

            })
        })
    </script>
</head>
<body>
    <div class="box"></div>
    <button class="btn">按钮</button>
</body>

总结:

  • 我们使用 animate( ) 方法来设置动画
  • 动画内部有四个参数: 要更改的元素属性, 动画时长( 以毫秒计 ), 动画曲线, 动画完成之后所做操作
  • 我们可以使用这样的方式来做一些简单动画.

三. jquery特殊效果

fadeIn()             淡入
fadeOut()             淡出
fadeToggle()        切换淡入淡出
hide()                 隐藏元素
show()                 显示元素
toggle()             切换元素的可见状态
slideDown()         向下展开
slideUp()             向上卷起
slideToggle()         依次展开或卷起某个元素

使用方式: 

$('div').fadeIn()

例如: 

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            display:none;
        }
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('.btn').click(function(){
                $('.box').fadeIn()
            })
        })
    </script>
</head>
<body>
    <button class="btn">按钮</button>
    <div class="box"></div>
</body>

显示效果:

fadeIn()效果:

Jquery笔记（中）

fadeOut( )效果:

Jquery笔记（中）

fadeToggle( )效果:

Jquery笔记（中）

hide()效果:

Jquery笔记（中）

show()效果:

Jquery笔记（中）

toggle()效果:

Jquery笔记（中）

slideDown()效果:

Jquery笔记（中）

slideUp()效果:

Jquery笔记（中）

slideToggle()效果:

Jquery笔记（中）

总结:

  • jquery 帮助我们封装了一些特殊的动画效果, 我们可以直接调用这些动画效果来实现一部分常见的操作
  • 这些动画效果的使用方式都是一样的: 1. 找到当前标签 2. 调用标签的对应动画效果
  • 使用格式: $(获取元素).动画效果()

四. jquery链式调用

jquery 对象的方法会在执行完后返回这个 jquery 对象，所有 jquery 对象的方法可以连起来写：

$('#div1')                 //  id为div1的元素
.children('ul')         //  该元素下面的ul子元素
.slideDown('fast')         //  高度从零变到实际高度来显示ul元素
.parent()                  //  跳到ul的父元素，也就是id为div1的元素
.siblings()              //  跳到div1元素平级的所有兄弟元素
.children('ul')         //  这些兄弟元素中的ul子元素
.slideUp('fast');         //  高度实际高度变换到零来隐藏ul元素

层级菜单

Jquery笔记（中）

层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title> 
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }

        ul{list-style:none;}


        .menu{
            width:200px;
            margin:20px auto 0;
        }

        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;           
        }

        .menu .level1{
            border-bottom:1px solid #afc6f6;

        }

        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;

        }

        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }



        .menu li ul{
            display:none;
        }

        .menu li ul.current{
            display:block;
        }

        .menu li ul li a:hover{
            background-color:#f6b544;
        }


    </style>

    <script src="./jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $a = $('.level1')
            $a.click(function(){
                $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp()
            })
        })
    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">手机</a>
            <ul class="current">
                <li><a href="#">iPhone X 256G</a></li>
                <li><a href="#">红米4A 全网通</a></li>
                <li><a href="#">HUAWEI Mate10</a></li>
                <li><a href="#">vivo X20A 4GB</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">笔记本</a>
            <ul>
                <li><a href="#">MacBook Pro</a></li>
                <li><a href="#">ThinkPad</a></li>
                <li><a href="#">外星人(Alienware)</a></li>
                <li><a href="#">惠普(HP)薄锐ENVY</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">电视</a>
            <ul>
                <li><a href="#">海信(hisense)</a></li>
                <li><a href="#">长虹(CHANGHONG)</a></li>
                <li><a href="#">TCL彩电L65E5800A</a></li>             
            </ul>
        </li>
        <li>
            <a href="#" class="level1">鞋子</a>
            <ul>
                <li><a href="#">新百伦</a></li>
                <li><a href="#">adidas</a></li>
                <li><a href="#">特步</a></li>
                <li><a href="#">安踏</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">玩具</a>
            <ul>
                <li><a href="#">乐高</a></li>
                <li><a href="#">费雪</a></li>
                <li><a href="#">铭塔</a></li>
                <li><a href="#">贝恩斯</a></li>
            </ul>
        </li>

    </ul>
</body>
</html>

五. jquery 属性操作

html ( )

使用: html( ) 取出元素文本 或设置元素内容

作用类似于 innerHTML( )

使用方式: 

// 取出html内容
var $htm = $('#div1').html();

// 设置html内容
$('#div1').html('<span>添加文字</span>');

val( )

val( ) 方法返回或设置被选元素的值。

元素的值##是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

使用方式:

// 取出html内容
var val = $("input").val();

// 设置html内容
$("input").val("Hello World");

prop( )

取出或设置某个属性的值

这里的属性是指标签除 css 样式以外的其他属性

使用方式:


// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
<head>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $('#div1');
            var $a = $('#link01');

            // 读取元素包裹的内容
            var sTr = $div.html();            
            // alert(sTr);

            // 写入或者叫设置元素包裹的内容
            $div.html('改变的文字');

            $div.html('<a href="http://www.baidu.com">百度网</a>')
            $div.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>');

            // 操作元素标签内除样式之外的其他的属性
            // 读取属性值：
            alert( $a.prop('id') );

            // 写入或者叫设置属性值
            $a.prop({'href':'http://www.itcast.cn','title':'这是去到传智播客的网站的链接'});
            $a.html('传智播客');
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div</div>
    <a href="#" id="link01">这是一个链接</a>
</body>

六. jquery循环

each( )

对 jquery 选择的对象集合分别进行操作，需要用到 jquery 循环操作，此时可以用对象上的each方法：

使用方式: 


$(selector).each( function(){} )

例如: 

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $li = $('li')
            // 使用for循环写法: 
            // var length = $li.length
            // for(var i = 0;i < length; i++){
            //     $li.eq(i).css({'background-color':'red'})
            // }
            $li.each(function(){
                $(this).css({'background-color':'pink'})
            })
            $li.click(function(){
                $(this).css({'background-color':'pink'})
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

七. jquery事件

事件函数列表：

比原生 js 省略了 ‘on’

这里涉及到一些事件冒泡的内容, 主要原理:

我们点击子元素的时候,子元素会将事件传递到父元素去,进而触发父元素的事件.

blur()                 元素失去焦点
focus()             元素获得焦点
click()             鼠标单击
mouseover()         鼠标进入（进入子元素也触发）
mouseout()             鼠标离开（离开子元素也触发）
mouseenter()         鼠标进入（进入子元素不触发）
mouseleave()         鼠标离开（离开子元素不触发）
hover()             同时为mouseenter和mouseleave事件指定处理函数
ready()             DOM加载完成
submit()             用户递交表单

例如: 

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $input = $('#input1')
            // 默认,一上来就选中
            $input.focus()
            // 取消焦点时调用的方法
            $input.blur(function(){
                // alert('haha')
            })

            var $div1 = $('.box')
            // mouseover和mouseout的使用
            // $div1.mouseover(function(){
            //     $div1.stop().animate({'margin-top':'60px'})
            // })
            // $div1.mouseout(function(){
            //     $div1.stop().animate({'margin-top':'0px'})
            // })

            // mouseenter和mouseleave的使用
            // $div1.mouseenter(function(){
            //     $div1.animate({'margin-top':'100px'})
            // })
            // $div1.mouseleave(function(){
            //     $div1.animate({'margin-top':'0px'})
            // })

            // hover的使用
            $div1.hover(function(){
                $div1.animate({'margin-top':'100px'})
            },function(){
                $div1.animate({'margin':'0px'})
            })
        })
    </script>
</head>
<body>
    <input type="text" id="input1">
    <div class="box">
        <div class="son"></div>
    </div>
</body>

再例如: 

<head>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $form = $('#form1')
            var $user = $('#name')
            $form.submit(function(){
                alert($user.val())
                // 阻止提交事件
                return false
            })
        })
    </script>
</head>
<body>
    <form action="" id="form1">
        <p>
            <label for="name">姓名:</label>
            <input type="text" id="name"> 
        </p>

        <p>
            <label for="pswd">密码:</label>
            <input type="password" id="pswd">
        </p>

        <input type="submit">
    </form>
</body>

八. 表单验证

正则表达式

能让计算机读懂的字符串匹配规则。

正则表达式的写法

使用方法: 


// 定义一个正则表达式(两种方法)
var re = new RegExp('规则', '可选参数');
var re = /规则/参数;


// 测试正则表达式: 
var result = re.test(要测试的字符串)
// result  --->  true  
// result  --->  false

规则中的字符

普通字符匹配

规则使用方式:

/a/                  匹配字符 ‘a’  
/a,b/                 匹配字符 ‘a,b’

转义字符匹配

规则使用方式: 



\d         匹配一个数字，即0-9
\D         匹配一个非数字，即除了0-9
\w         匹配一个单词字符（字母、数字、下划线）
\W         匹配任何非单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。
\s         匹配一个空白符
\S         匹配一个非空白符
.         匹配一个任意字符

例如: 

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

量词

对左边的匹配字符定义个数

规则使用方式: 


?             出现零次或一次（最多出现一次）
+             出现一次或多次（至少出现一次）
*             出现零次或多次（任意次）
{n}         出现n次
{n,m}         出现n到m次
{n,}         至少出现n次

任意一个或者范围

[abc123] :     匹配‘abc123’中的任意一个字符

[a-z0-9]

: 匹配a到z或者0到9中的任意一个字符

限制开头结尾

^         以紧挨的元素开头

$         以紧挨的元素结尾

修饰参数

g：         global: 全文搜索，默认搜索到第一个结果接停止

i：         ingore case: 忽略大小写，默认大小写敏感

常用函数 test

使用方法: 

正则.test(字符串) 

// 匹配成功，就返回真，否则就返回假

正则默认规则

匹配成功就结束，不会继续匹配，区分大小写

常用正则规则

// 用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;

// 邮箱验证：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

// 密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

// 手机号码验证：
var rePhone = /^1[34578]\d{9}$/;

例如: 

<script src="./jquery-1.12.4.min.js"></script>
<script>
    // var str = 'helloA world'
    // var reg = /a/i

    var str = 'a123ab'
    var reg = /^\d/

    var result = reg.test(str)
    alert(result)
</script>
正文完
jquery
发表至： Javascript Language
2019-09-23
 
Dustin
版权声明：本站原创文章，由 Dustin 2019-09-23发表，共计10085字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
vue笔记（下）
Java 应用领域
不懂多态的实现原理？只需要记住一句话 | Java
Golang运行时（Runtime）解析