jquery进阶

最新推荐文章于 2021-09-06 19:08:26 发布

troysps

最新推荐文章于 2021-09-06 19:08:26 发布

阅读量427

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/troysps/article/details/80318125

版权

jquery 进阶

jquery特殊效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box,.box2{
        width: 300px;
        height: 300px;
        background: gold;
        /* display: none; */
    }
    </style>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $btn = $("#btn");
            var $div = $('.box');

            $btn.click(function () { 
                // 隐藏
                $div.hide();
                // 显示
                $div.show();

                // 自动显示 隐藏
                $div.toggle();

                // 制作淡入和淡出动画

                // 淡入
                $div.fadeIn();
                // 淡出
                $div.fadeOut();
                // 自动淡入淡出
                $div.fadeToggle();


                // 制作向下展开和向上卷起

                // 向上卷起
                $div.slideUp();
                // 向下展开
                $div.slideDown();
                // 自动 向下展开 向上卷起
                $div.slideToggle();


                // 最后一次有效 stop
                $div.stop().slideToggle();
             });
         })
    </script>
</head>
<body>
    <input type="button" value="动画" id="btn">
    <div class="box"></div>

</body>
</html>

链式调用 – 重要特性

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

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

操作元素属性

1、html() 取出或设置html内容
2、prop() 取出或设置某个属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $a = $("#link01");
            var $div = $("#div1");

            // prop 读取属性值
            var sId = $a.prop('id');
            alert(sId);

            // prop 设置属性值
            $a.prop({"href":'http://www.baidu.com', 'title':'你猜链接去哪里的', 'class':'big'});

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

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

            $div.html("<ul><li>list</li><li>list</li></ul>");

        })
    </script>
</head>
<body>
    <a href="#" id="link01" title="去百度的链接">链接</a>

    <div id="div1">这是一个div</div>
</body>
</html>

jquery事件

事件函数列表：

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

表单验证

1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

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

4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感

8、常用函数
test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

正则默认规则
匹配成功就结束，不会继续匹配，区分大小写

正则表达式的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建正则表达式

        // 第一种方式:
        var reTest01 = new RegExp("a")

        alert(reTest01);

        // 第二种方式:
        var reTest02 = /a/;
        // 忽略大小写
        var reTest03 = /a/i;
        // 数字匹配
        var reTest04 = /\d+/;
        // 限制开头结尾
        var reTest05 = /^\d+$/;

        var sTr01 = 'abc';
        var sTr02 = 'Abc';
        var sTr03 = '123434324';
        var sTr04 = '12334abcde';

        // 使用正则表达式
        // test 返回 True 或者 False
        alert(reTest02.test(sTr01));
        alert(reTest02.test(sTr02));
        alert(reTest03.test(sTr02));

        alert(reTest04.test(sTr03));
        alert(reTest04.test(sTr04));


        alert(reTest05.test(sTr03));
        alert(reTest05.test(sTr04));

        // \d 数字
        // 

    </script>
</head>
<body>

</body>
</html>

troysps

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery进阶

jquery 进阶jquery特殊效果fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素&lt;!DOCTYPE html&gt;&lt;html lang="en...
复制链接

扫一扫