zoukankan      html  css  js  c++  java
  • jquery:

    jquery

    是一个模块 一个库 js封装的一个库

    导入jq

     <script src="jquery.js"></script>  
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
     $  ==  Jquery
     dom对象 _> jq对象
     $(dom对象)
     jq对象 _> dom对象
     jq对象[0]

    选择器

    基本选择器

     通用选择器  $('*')
     标签选择器 $('div')
     id选择器   $('#id')
     类选择器   $('.class')
     
     组合选择器 $('div.class1')     并集
              $('div,p')     交集

    层级选择器

     后代选择器    $('div span') 
     子代选择器   $('#li>span')
     毗邻选择器   $('#li+span')
     弟弟选择器   $('#li~span')
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <ul href="" id="ul">
    <li> 1
    <ul>
    <li>11</li>
    </ul>
    </li>
    <li id="l2">2</li>
    <li> 3<a class="c1" href="www.baidu.com">百度</a></li>
    <li> 4</li>
    </ul>
    <button id="b1">点击</button>
    <script src="jquery.js"></script>
    <script>
    console.log($("#ul li"));
    $("button").click(function () {
    alert(123)
    });
    var b1 = document.getElementById("b1");
    b1.onclick = function () {
    alert(456)
    }
    </script>
    </body>
    </html>

    属性选择器

     $('[属性]')
     $('[属性="值')
     $('[属性!="值')
     $('[属性^="值')
     $('[属性$="值')
     $('[属性*="值')

    筛选器

     $('选择器:筛选器')
     :first   第一个
     :last   最后一个
     :eq(index) 按照索引
     :has(选择器) 包含某个子代的父标签
     :not(选择器) 排除

    筛选方法

     .first()  last
     .eq(index)
     .siblings() 兄弟
     .parent()
     .children()
     .next() .nextAll() .nextUntil('#l2')
     .prev() .prevAll() .prevUntil()
     .has() 包含某个子代的父标签
     .filter('#l2')   当前标签包含选择器
     .not(选择器)     不包含

    值的操作

     .text()   文本
     .html() HTML标签

    绑定事件

     $('button').click(function () {
            alert(123)
     })

    标签的操作

     父标签.append(子标签)     // 子标签添加到父标签的子代的最后
     子标签.appendTo(父标签)  
     
     
     父标签.prepend(子标签)     //   子标签添加到父标签的子代前面
     子标签.prependTo(父标签)  
     
     a.after(b)   // 在a标签后面添加b标签
     a.before(b) // 在a标签前面添加b标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    </ul>

    </div>

    <button id="b1">添加</button>
    <button id="b2">添加2</button>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    var li = $('<li>')
    li.text('3')

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

    var li = $('<li>')
    li.text('3')
    // $('li:eq(1)').after(li)
    $('li:eq(2)').before(li)
    })

    //
    // $('#b1').click(function () {
    //
    // var li = $(document.createElement('li'))
    // // li.innerText = '5'
    // var num = $('li:last').text()
    // // console.log(typeof (num))
    // num++;
    // li.text(num)
    // // console.log(li)
    // // $('ul').append("<li>5</li>")
    // // $('ul').append(li)
    // // li.appendTo($('ul'))
    //
    // // $('ul').prepend(li)
    // li.prependTo($('ul'))
    //
    //
    // })

    $('#b1').click(function () {
    $('ul').prepend(li)

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

    $('ul').append(li)
    })

    </script>


    </body>
    </html>

    删除

     .remove()  删除标签和事件
     .detach() 删除标签 保留事件
     .empty()   清空标签中的内容
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <div>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    </ul>

    </div>

    <button id="b1">删除</button>
    <button id="b2">恢复</button>
    <button id="b3">清空</button>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>

    var last;

    $('#b3').click(function () {
    // $('li').remove()
    $('ul').empty()

    });

    $('#b1').click(function () {
    last = $('li:last').detach()

    });

    $('#b2').click(function () {
    $('ul').append(last)

    });

    $('li').click(function () {
    alert($(this).text())

    })
    </script>

    </body>
    </html>

    克隆 复制

     .clone()       复制标签
     .clone(true)   复制标签 也有事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <div>
    <ul>
    <li>1</li>
    <li>2</li>

    </ul>

    </div>

    <button id="b1">添加</button>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>

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

    var li = $('li:last').clone(true)
    li.text(Number(li.text()) + 1)
    $('ul').append(li)

    })

    $('li').click(function () {
    alert($(this).text())

    })
    </script>

    </body>
    </html>

    替换

     a.replaceWith(b)    //  用b替换a
     b.replaceAll(a)     // 用b替换a   a可以是标签 选择器
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <div>
    <ul>
    <li>1</li>
    <li>2</li>

    </ul>

    </div>

    <button id="b1">替换</button>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>

    $('#b1').click(function () {
    var l2 = $('li:last')
    var li = l2.clone()

    li.text(Number(li.text()) + 1)

    // l2.replaceWith(li)
    li.replaceAll('li:eq(1)')

    })


    $('li').click(function () {
    alert($(this).text())

    })

    </script>

    </body>
    </html>

    属性的操作

     .attr('属性')  // 获取属性的值
     .attr('属性','值') // 设置属性的值
     .removeAttr('属性') // 删除某个属性
     
     .prop('checked')   // radio checkbox select(option)
     .prop('checked',true)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <a href="https://www.baidu.com" id="a1" class="c1">百度</a>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>


    </body>
    </html>

    值的操作

     val()
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <form action="">

    <input type="text">
    <input type="radio" name="sex" value="1">
    <input type="radio" name="sex" value="2">
    <input type="checkbox" name="hobby" value="唱">
    <input type="checkbox" name="hobby" value="跳">
    <input type="checkbox" name="hobby" value="rap">
    <input type="checkbox" name="hobby" value="篮球">

    <select name="hobby2" id="" multiple>
    <option value="1" selected>唱</option>
    <option value="2">跳</option>
    <option value="2">跳</option>
    <option value="2">跳</option>
    <option value="2">跳</option>
    <option value="2">跳</option>
    <option value="2">跳</option>
    <option value="3">rap</option>
    <option value="4">篮球</option>
    </select>



    </form>



    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>


    </body>
    </html>

    事件的绑定和解绑

     $('button').bind('click',function () {
        })
       
     $('button').click(function () {
     
      })  
       
      $('button').unbind('click')

    各种事件

     click   点击
     hover   悬浮
     blur 失去焦点
     focus 获取焦点
     change 内容变化
     keyup   按键启动
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    <p><input type="text" id="i1"></p>
    <p>
    <select name="" id="s1">
    <option value="">北京</option>
    <option value="">上海</option>
    </select>
    </p>

    <button>点击</button>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script>

    // $('button').click(function () {
    // alert(123)
    // })

    $('button').bind('click', function () {
    alert(123);
    $('button').unbind('click')
    })


    $('#i1').focus(function () {
    console.log('聚焦了')
    $(this).val('')
    $(this).next().remove()


    })

    $('#i1').blur(function () {
    console.log('失去焦点了')
    if ($(this).val() === '') {
    var sp = $('<span>')
    sp.text('不能为空')
    $(this).after(sp)

    }
    })

    $('#i1').change(function () {
    console.log('内容变化了')

    })

    $('#i1').keyup(function (e) {
    // console.log(e.keyCode)
    if (e.keyCode === 27) {
    alert(123)
    }

    })


    $('#s1').change(function () {
    console.log('内容变化了')

    })

    </script>


    </body>
    </html>
    模态框:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .hide{
    display: none;
    }
    .mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(144,144,144,0.5);
    }
    .motai{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    400px;
    height: 400%;
    background-color: rgba(245,73,229,0.55);
    }
    </style>
    </head>
    <body>

    <button id="b1">登录</button>

    <div class="c1 hide">
    <div class="mask"></div>
    <div class="motai">
    <p><input type="text"></p>
    <p><input type="text"></p>
    <button>提交</button>
    <button>取消</button>
    </div>
    </div>
    <script src="jquery.js"></script>
    <script>
    $("#b1").click(function () {
    $(".c1").removeClass("hide")
    // $(".c1").addClass("hide")
    // $(".c1").toggleClass("hide")
    });
    $(".motai button").click(function () {
    $(".c1").addClass("hide")
    });
    $(window).keyup(function (e) {
    if (e.keyCode === 27){
    $(".c1").addClass("hide")
    }
    })
    </script>
    </body>
    </html>
    表格的操作包含全选取消反选:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .hide {
    display: none;
    }
    .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(144, 144, 144, 0.5);
    }
    .motai {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    400px;
    height: 400px;
    background-color: rgba(245, 73, 229, 0.55);
    }
    </style>
    </head>
    <body>
    <button id="b1">新增</button>
    <button onclick="selectAll()">全选</button>
    <button onclick="Cancel()">取消</button>
    <button onclick="reverse()">反选</button>
    <table border="1">
    <thead>
    <tr>
    <th>选择</th>
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>爱好</th>
    <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>宝元</td>
    <td>不详</td>
    <td>钻</td>
    <td>
    <button>删除</button>
    </td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>2</td>
    <td>和尚</td>
    <td>男</td>
    <td>合气道</td>
    <td>
    <button>删除</button>
    </td>
    </tr>
    <tr class="hide">
    <td><input type="checkbox"></td>
    <td>2</td>
    <td>和尚</td>
    <td>男</td>
    <td>合气道</td>
    <td>
    <button>删除</button>
    </td>
    </tr>
    </tbody>
    </table>
    <div class="c1 hide">
    <div class="mask"></div>
    <div class="motai">
    <p>
    <label for="name">姓名</label>
    <input type="text" id="name">
    </p>
    <p>
    <label for="sex">性别</label>
    <select name="sex" id="sex">
    <option value="男">男</option>
    <option value="女">女</option>
    <option value="不详">不详</option>
    </select>
    </p>
    <p>
    <label for="hobby">爱好</label>
    <input type="text" id="hobby">
    </p>
    <button id="submit">提交</button>
    <button>取消</button>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $('#b1').click(function () {
    $('.c1').removeClass('hide');
    // $('.c1').addClass('hide');
    // $('.c1').toggleClass('hide');
    });
    $('.motai button').click(function () {
    $('.c1').addClass('hide')
    });
    $(window).keyup(function (e) {
    if (e.keyCode === 27) {
    $('.c1').addClass('hide')
    }
    });
    // $('#submit').click(function () {
    // var name = $('#name')
    // var sex = $('#sex')
    // var hobby = $('#hobby')
    // var hide_tr = $('tr:last')
    // var tr = hide_tr.clone(true)
    // tr.removeClass('hide')
    //
    // var td = tr.find('td');
    //
    //
    // td.eq(1).text($('tr:not(.hide)').length)
    // td.eq(2).text(name.val())
    // td.eq(3).text(sex.val())
    // td.eq(4).text(hobby.val())
    // name.val('')
    // sex.val('男')
    // hobby.val('')
    //
    // hide_tr.before(tr)
    //
    //
    // })
    $('tr button').click(function () {
    $(this).parents('tr').remove()
    });
    $('#submit').click(function () {
    var name = $('#name');
    var sex = $('#sex');
    var hobby = $('#hobby');
    var num = $('tr').length;
    var string = `<tr><td><input type="checkbox"></td><td>${num}</td><td>${name.val()}</td><td>${sex.val()}
    </td><td>${hobby.val()}</td><td><button>删除</button></td></tr>`;
    // $('tbody').append('<tr> ' +
    // ' <td><input type="checkbox"></td> ' +
    // ' <td>' + num + '</td> ' +
    // ' <td>' + name.val() + '</td> ' +
    // ' <td>' + sex.val() + '</td> ' +
    // ' <td>' + hobby.val() + '</td> ' +
    // ' <td> ' +
    // ' <button>删除</button> ' +
    // ' </td> ' +
    // ' ' +
    // ' </tr>')
    $('tbody').append(string)
    });
    function selectAll() {
    var inputs=document.getElementsByTagName("input");
    for (var i=0;i<inputs.length;i++){
    var input=inputs[i];
    input.checked=true;
    }
    }
    function Cancel() {
    var inputs=document.getElementsByTagName("input");
    for (var i=0;i<inputs.length;i++){
    var input=inputs[i];
    input.checked=false;
    }
    }
    function reverse() {
    var inputs=document.getElementsByTagName("input");
    for (var i=0;i<inputs.length;i++){
    var input=inputs[i];
    if(input.checked){
    input.checked=false;
    }else{
    input.checked=true;
    }
    }
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    JAVA数组复制和扩容
    Nginx-fastdfs安装与配置
    ssh安全免密登录
    修改Linux默认源
    Linux查看IP
    整合ssm框架
    Java-maven-shangcheng-parent-web-配置
    Java-maven-shangcheng-manager-service-配置
    Java-maven-shangcheng-manager-配置
    jquery美化select,自定义下拉框样式
  • 原文地址:https://www.cnblogs.com/zhang-da/p/12011558.html
Copyright © 2011-2022 走看看