web开发：jquery高级

一、jq选择器

二、属性操作

三、jq轮播图

四、样式操作

五、jq动事件

六、jq动画

七、自定义动画

八、jq动画案例

一、jq选择器

- css3语法选择器

```js
$('css3选择器位')
```

- 索引匹配

```js
$('div:eq(0)')
$('div').eq(0)
```

- 内容

```js
$('div:contains(标签文本内容)')
// 注: 采用模糊匹配
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq选择器</title>

    <script src="js/jquery-3.3.1.js"></script>

</head>

<body>

<ul class="ul1">

    <li class="li l1">ul1 l1</li>

    <li class="li l2">ul1 l2</li>

    <li class="li l3">ul1 l2</li>

</ul>

<ul class="ul2">

    <li class="li l1">ul2 l1</li>

    <li class="li l2">ul2 l2</li>

    <li class="li l3">ul2 l3</li>

</ul>

</body>

<script>

    // console.log($);

    // 1.采用css3语法

    // $('css3选择器')

    console.log($('.ul1 .l2').text());

    console.log($('.l1 ~ .l2').text());

    console.log($('.l1, .l2, .l3').text());

    // 2.css3之前jq已有的自身选择器

    // 偶数位

    // 注: 不加结构时, 将所有li作为考虑整体从上之下进行排序, 查找索引为偶数位的(0,2...)

    console.log($('.ul1 .li:even'));

    // 奇数位

    console.log($('.ul2 .li:odd'));

    // 匹配索引 *****

    console.log($("ul").eq(0));

    // $("ul")页面中的所有ul, 取第n个ul

    // --  $("ul")[n] => 得到第n索引位js对象, 本非jq对象

    // --  $("ul").eq(n)  => 得到第n索引位jq对象

    // --  $("ul:eq(n))" => 得到第n索引位jq对象

    // 3.通过内容进行匹配

    // 内容只有包含l1即可, ul1 l1 | ul1 l2 | ul1 l3 | ul2 l1

    console.log($('li:contains(l1)').text())

</script>

</html>

二、属性操作

- 文本

```js
// 赋值: 有参数
$('.box').html('<i>beat box</i>');
// 取值: 无参数
console.log($('.box').text());
// 表单内容
// $('.inp').val("input 内容为 value");
console.log($('.inp').val());
```

- 属性

```js
// 取
console.log($('img').attr('alt'));
// 设
$('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
// 增
$('img').attr('abc', function () {
return "ABC";
})
```

- 类名

```js
$(this).addClass('active'); // 添加
$(this).removeClass('box'); // 删除
// 如果有active 删除, 反之添加
$(this).toggleClass('active'); // 切换
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>属性操作</title>

    <script src="js/jquery-3.3.1.js"></script>

    <style>

        .active {

            width: 100px;

            height: 100px;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <input class="inp" type="text" value="12345">

    <img src="" alt="提示">

    <!--表单元素的布尔类型属性, 不写为false, 书写后,不管值为什么, 均为属性名-->

    <!--eg: checked="checked" | checked="" | checked-->

    <input class="ck" type="checkbox" checked="false">

</body>

<script>

    // 文本内容操作

    // html() | text() | val()

    // 赋值: 有参数

    $('.box').html('<i>beat box</i>');

    // 取值: 无参数

    console.log($('.box').text());

    // 表单内容

    // $('.inp').val("input 内容 为 value");

    console.log($('.inp').val());

</script>

<script>

    // 属性操作

    console.log($('img').attr('alt'));

    $('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')

    $('img').attr('abc', function () {

        return "ABC";

    })

    // $('.ck').prop("checked", "true");  // 了解

    // $('.ck').attr("checked", "true");

</script>

<script>

    $('.box').click(function () {

        // $(this).addClass('active'); // 添加

        // $(this).removeClass('box');  // 删除

        // 如果有active 删除, 反之添加

        $(this).toggleClass('active');  // 切换

    })

</script>

</html>

三、jq轮播图

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style >

        * {

            /*不允许选择文本, 网页文本不能负责*/

            user-select: none;

        }

        body, ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .scroll {

            width: 1226px;

            height: 460px;

            margin: 0 auto;

            background-color: orange;

            position: relative;

            cursor: pointer;

        }

        .scroll_view {

            width: 100%;

            height: 100%;

            position: relative;

        }

        .scroll_view li {

            background: red;

            width: 100%;

            height: 100%;

            font: normal 100px/460px 'STSong';

            text-align: center;

            position: absolute;

            top: 0;

            left: 0;

            opacity: 0;

        }

        .scroll_view li.active {

            opacity: 1;

            transition: .5s;

        }

        .left {

            position: absolute;

            top: 170px;

            left: 0;

            background-color: #eee;

            font-size: 100px;

        }

        .left:hover, .right:hover {

            cursor: pointer;

            background-color: #333;

        }

        .right {

            position: absolute;

            top: 170px;

            right: 0;

            background-color: #eee;

            font-size: 100px;

        }

        .scroll_tag {

            position: absolute;

            right: 10px;

            bottom: 10px;

        }

        .scroll_tag li {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background-color: #333;

            border: 3px solid #ddd;

            float: left;

            margin: 0 10px;

        }

        .scroll_tag li.active {

            background-color: #ccc;

            border: 3px solid #333;

        }

    </style>

</head>

<body>

<div class="scroll">

    <ul class="scroll_view">

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <ul class="scroll_toggle">

        <li class="left">&lt;</li>

        <li class="right">&gt;</li>

    </ul>

    <ul class="scroll_tag">

        <li class="active"></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

// 页面文档树加载完毕回调

$(function () {

    var page_index = 0;

    var length = $('.scroll_view li').length;

    var toggle_time = 1000;

    var timer = 0;

    // 无限轮播

    timer = setInterval(toggleRole, toggle_time, 1);

    // 悬浮停止,移走轮播

    $('.scroll').mouseenter(function () {  // 悬浮停止

        clearInterval(timer);

    }).mouseleave(function () {  // 移走轮播

        timer = setInterval(toggleRole, toggle_time, 1);

    });

    // 右轮播

    $('.right').click(function () {

        toggleRole(1);

    });

    // 左轮播

    $('.left').click(function () {

        toggleRole(-1);

    });

    // 切换依据

    function toggleRole(role_num) {

        page_index += role_num;

        // role_num:1向右切换, role_num:-1向左切换

        if (role_num > 0) {

            if (page_index >= length) { // 右切换临界点

                page_index = 0;

            }

        } else {

            if (page_index < 0) { // 左切换临界点

                page_index = length - 1;

            }

        }

        toggleState(page_index);

    }

    // 切换状态

    function toggleState(index) {

        $('.scroll_view li').removeClass('active').eq(index).addClass('active');

        $('.scroll_tag li').removeClass('active').eq(index).addClass('active');

    }

})

</script>

</html>

四、样式操作

```js
// 取值
console.log($('.box').css('font-size'));

// 设值
$('.box').css('color', 'deeppink') // 单一属性设值
    .css({ // 设置多个属性值
        // 1.就是给css()函数赋值一个js对象
        // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
        // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
        width: '300px',
        'height': 300,
        'background-color': 'cyan',
        borderRadius: '30px'
    })
    .css('width', function(index, oldWidth) { // 逻辑单一属性设值
        if (index == 0) {
            // 延迟1s
            // var b_time = new Date().getTime();
            // while (new Date().getTime() - b_time < 1000){}
            return 1.5 * parseInt(oldWidth);
        }
        return oldWidth;
    })
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>样式操作</title>

    <script src="js/jquery-3.3.1.js"></script>

    <style>

        .box {

            font-size: 100px;

        }

    </style>

</head>

<body>

    <div class="box">12345</div>

    <div class="box">67890</div>

</body>

<script>

    // 取值

    console.log($('.box').css('font-size'));

    // 设值

    $('.box').css('color', 'deeppink')

        .css({

            // 1.就是给css()函数赋值一个js对象

            // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法

            // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值

            width: '300px',

            'height': 300,

            'background-color': 'cyan',

            borderRadius: '30px'

        })

        .css('width', function(index, oldWidth) {

            if (index == 0) {

                // 延迟1s

                // var b_time = new Date().getTime();

                // while (new Date().getTime() - b_time < 1000){}

                return 1.5 * parseInt(oldWidth);

            }

            return oldWidth;

        })

</script>

</html>```js

// 取值

console.log($('.box').css('font-size'));

// 设值

$('.box').css('color', 'deeppink')  // 单一属性设值

    .css({  // 设置多个属性值

        // 1.就是给css()函数赋值一个js对象

        // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法

        // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值

        width: '300px',

        'height': 300,

        'background-color': 'cyan',

        borderRadius: '30px'

    })

    .css('width', function(index, oldWidth) {  // 逻辑单一属性设值

        if (index == 0) {

            // 延迟1s

            // var b_time = new Date().getTime();

            // while (new Date().getTime() - b_time <){}

            return 1.5 * parseInt(oldWidth);

        }

        return oldWidth;

    })

```

五、jq动事件

- 绑定方式

```js
// 第一种 on
// 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})

// 第二种
// 两个参数: {key-value传入的数据}, 事件回调函数
$('.box').click({name: 'hehe'}, function(ev){})
```

- 事件对象

```js
// 为jq事件对象, 兼容js事件对象
// 坐标: ev.clientX | ev.clientY
// 按键: ev.keyCode
// 数据: ev.data.key名 => eg:ev.data.name
```

- 冒泡与默认动作

```js
// 冒泡: ev.stopPropagation();
// 默认动作: ev.preventDefault();
```

- 委派

```js
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq事件</title>

    <style>

        .box, .ele, .sub {

            width: 100px;

            height: 100px;

            background-color: orange;

        }

        .sup {

            width: 200px;

            height: 200px;

            background-color: red;

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <div class="box">box</div>

    <a href="https://www.baidu.com">别动</a>

    <div class="ele">ele</div>

    <div class="sup">

        <div class="sub"></div>

        <span>123</span>

    </div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    /*

    // 1.事件的绑定语法

    $('.box').on('click', function () {

        console.log('你丫点我了!!!')

    });

    $('.box').click(function () {

        console.log('你丫又点我了!!!')

    });

    // 2.事件对象

    $(document).click(function (ev) {

        console.log("父级点击了");

        // jq事件对象, 兼容js事件对象

        console.log(ev);

        // 鼠标点

        console.log(ev.clientX, ev.clientY);

    });

    $(document).keydown(function (ev) {

        // jq事件对象, 兼容js事件对象

        console.log(ev);

        // 鼠标点

        console.log(ev.keyCode);

    });

    // 3.冒泡与默认动作

    $('a').click(function (ev) {

        console.log("默认动作取消了");

        // 取消默认动作1

        ev.preventDefault();

        // 取消默认动作2

        // return false;

    })

    $('.ele').click(function (ev) {

        // ev.cancelBubble = true;  // 未兼容

        // 阻止冒泡

        ev.stopPropagation();

        console.log("子级点击了");

    })

    */

</script>

<script>

    var name = "张三";

    /*

    $('.sub').click();

    $('.sub').on('click', {name: name, age: 8}, function (ev) {

        ev.stopPropagation();

        console.log(ev);

        console.log(">>>", ev.data.name)

    });

    */

    // 将sup的点击事件委派给自己的span子级

    $('.sup').on('click', 'span', {}, function (ev) {

        // ev.stopPropagation();

        console.log("==================");

    });

    $('.sup').on('click', {}, function (ev) {

        // ev.stopPropagation();

        console.log("++++++++++++++++");

    })

</script>

</html>

六、jq动画

- 系统预定义

```js
// time_num: 动画持续的时间
// finish_fn: 动画结束后的回调函数

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq动画</title>

    <style>

        .ele {

            width: 100px;

            height: 100px;

            background-color: orange;

            margin-top: 10px;

        }

    </style>

</head>

<body>

<button class="b1">消失</button>

<button class="b2">显示</button>

<button class="b3">切换</button>

<div class="ele e1"></div>

<hr>

<button class="b4">消失</button>

<button class="b5">显示</button>

<button class="b6">切换</button>

<div class="ele e2"></div>

<hr>

<button class="b7">消失</button>

<button class="b8">显示</button>

<button class="b9">切换</button>

<div class="ele e3"></div>

<div class="ele e4"></div>

<div class="ele e5"></div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    $('.b1').click(function () {

        $('.e1').hide(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    });

    $('.b2').click(function () {

        $('.e1').show(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

    $('.b3').click(function () {

        $('.e1').toggle(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

</script>

<script>

    $('.b4').click(function () {

        $('.e2').slideUp(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    });

    $('.b5').click(function () {

        $('.e2').slideDown(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

    $('.b6').click(function () {

        $('.e2').slideToggle(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

</script>

<script>

    $('.b7').click(function () {

        $('.e3, .e4, .e5').fadeOut(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    });

    $('.b8').click(function () {

        $('.e2 ~ .ele').fadeIn(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

    $('.b9').click(function () {

        $('.e3, .e4, .e5').fadeToggle(500, function () {

            console.log("动画结束了, 你可以再干一些事")

        });

    })

</script>

</html>

七、自定义动画

- 自定义动画

```js
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
    width: 300,
    height: 500
}, 300, 'linear', function() {
    // 动画结束后回调
})
// 动画本体采用的是css动画
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>自定义动画</title>

    <style>

        .box {

            width: 300px;

            height: 300px;

            background-color: orange;

        }

    </style>

</head>

<body>

    <button class="btn">消失</button>

    <button class="btn">显示</button>

    <div class="box"></div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<script>

    $('.btn').eq(0).on('click', function () {

        $('.box').animate({

            width: 0

        }, 1000, 'linear', function () {

            console.log("动画结束了!!!")

        })

    });

    $('.btn').eq(1).on('click', function () {

        $('.box').animate({

            width: 300

        }, 'slow', 'swing', function () {

            console.log("动画结束了!!!")

        })

    })

</script>

</html>

八、jq动画案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq动画案例</title>

    <style>

        .wrap {

            width: 600px;

            height: 200px;

            border: 5px solid black;

            margin: 0 auto;

            position: relative;

            overflow: hidden;

            /*overflow: auto;*/

        }

        .btn {

            text-align: center;

            margin-top: 50px;

        }

        ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .scroll {

            width: 2000px;

            position: absolute;

        }

        .scroll li {

            width: 200px;

            height: 200px;

            font: 500 50px/200px 'STSong';

            text-align: center;

            background-color: yellow;

            float: left;

        }

        .scroll li:nth-child(2n) {

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="btn">

        <button class="btn1">&lt;</button>

        <button class="btn2">&gt;</button>

    </div>

    <div class="wrap">

        <ul class="scroll">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>9</li>

            <li>10</li>

        </ul>

    </div>

</body>

<script src="js/jquery-3.3.1.js"></script>

<!--

<script>

    // 滚动条滚动(overflow)产生的距离

    // console.log($('.wrap').scrollLeft());

    // 和绝对定位匹配使用

    // console.log($('.scroll').position().left);

    // 和固定定位匹配使用

    // console.log($('.scroll').offset());

    // 滚动scroll的总长度

    var scroll_total = $('.scroll').width();

    // 显示的总宽度,也就是一次性最大滚动的长度

    var wrap_width = $('.wrap').width();

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

        // 往左已滚动的长度, 是负值

        var scroll_left = $('.scroll').position().left;

        // 剩余的可滚动的长度: 总长抛出显示的一个平面长度,再减去已经滚动到左侧的长度

        // 注scroll_left是负值,使用用+运算

        var less_long = scroll_total - wrap_width + scroll_left;

        // 通过剩余的可滚动长度计算出下一次能滚动的长度

        var next_scroll = less_long > wrap_width ? wrap_width : less_long;

        // 动画: left为从当前已滚动的长度(scroll_left)再滚动(减去)下一次可滚动的长度

        $('.scroll').animate({

            left: scroll_left - next_scroll

        })

    });

    $('.btn2').click(function () {

        // 往左已滚动的长度, 是负值

        var scroll_left = $('.scroll').position().left;

        // 往右剩余的可滚动的长度

        var less_long = -scroll_left;

        // 通过剩余的可滚动长度计算出下一次能滚动的长度

        var next_scroll = less_long > wrap_width ? wrap_width : less_long;

        $('.scroll').animate({

            left: scroll_left + next_scroll

        })

    })

</script>

-->

<script>

    // 不能被点击

    var disable_click = false;

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

        if (!disable_click) { // 能被点击时

            disable_click = true; // 动画过程中, 应该不能再被点击

            $('.wrap').animate({

                scrollLeft: $('.wrap').scrollLeft() + 600

            }, 300, function () {

                disable_click = false;  // 动画结束后,可以重新被点击

            })

        }

    });

    $('.btn2').click(function () {

        if (!disable_click) {

            disable_click = true;

            $('.wrap').animate({

                scrollLeft: $('.wrap').scrollLeft() - 600

            }, 300, function () {

                disable_click = false;

            })

        }

    })

</script>

</html>

web开发：jquery高级的更多相关文章

静态Web开发 JQuery
伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线A ...
Web开发——jQuery基础
参考: 参考W3School:jQuery 教程参考:jQuery 参考手册参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
Web开发——jQuery进阶
参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...
Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
[转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

随机推荐

什么是MVC模型
经典的MVC模式 MVC是模型-视图-控制器的简称. M代表示模型,英文是Model.也就是指POJO(JavaBean) V表示视图,英文是View.也就是.jsp,同类的视图html,pdf,ex ...
如何下载spring sts
1.打开https://spring.io/ 2.翻到页面最底部点击tools 3.页面下滑点击Download STS4 Windows 64-bit
导入/导出数据库/数据库表（wordpress做例子）
导入数据库: 1. 数据库层面: 没有wordpress的情况下,建立wordpress数据库 create database wordpress; 进入wordpress数据库 use wordpr ...
[Cometoj#3 D]可爱的菜菜子_线段树_差分_线性基
可爱的菜菜子题目链接:https://cometoj.com/contest/38/problem/D?problem_id=1543 数据范围:略. 题解: 首先,如果第一个操作是单点修改,我们就 ...
kafka consumer 的配置(五)
fetch.min.bytes. #获取最小字节数据 Consumer 向broker中要数据时是按大小来返回的,如果数据没有达到指定的MB,consumer会处于等待状态,直到broker 从pro ...
【转帖】samba的配置文件smb.conf详细说明
samba的配置文件smb.conf详细说明 https://blog.csdn.net/cqboy1991/article/details/9791033 找时间自己写一个blog 说明一下搭建过程 ...
redis主从复制初识
一.作用 slave会通过被复制同步master上面的数据,形成数据副本当master节点宕机时,slave可以升级为master节点承担写操作. 允许有一主多从,slave可以承担读操作,提高读性 ...
SQLite进阶-13.Autoincrement关键字
目录 AUTOINCREMENT 是一个关键字,用于表中的字段值自动递增.我们可以在创建表时在特定的列名称上使用 AUTOINCREMENT 关键字实现该字段值的自动增加. 关键字 AUTOINCRE ...
IDEA插件之PMD
1.是什么? PMD 是一个开源静态源代码分析器,它报告在应用程序代码中发现的问题.PMD包含内置规则集,并支持编写自定义规则的功能.PMD不报告编译错误,因为它只能处理格式正确的源文件.PMD报告的 ...
如何配置虚拟机的ip地址以及如何使用XShell和WinSCP工具
参考资料:https://blog.csdn.net/phy1997/article/details/78928796

web开发：jquery高级

web开发：jquery高级的更多相关文章

随机推荐

热门专题