jQuery学习

一、jQuery基本语法

        <script type="text/javascript">
            // js的写法,在页面中只能出现一次,如果出现多个,以最后一个为主
            window.onload = function(){
                
            }
            
            //jQuery的写法  (document).ready可以省略,可以写多个
            $(function(){
                /*语法:jQuery("选择器").方法
                jQuery可以和$互换
                addClass()添加类属性
                $将DOM转为jQuery对象
                */
               $("#img").click(function(){
                   //$(this).css("border","10px solid red");
                   //toggleClass()如果存在（不存在）就删除（添加）一个类。
                   $(this).toggleClass("img");
               });
              
            });
        </script>

实现隐藏和显示的效果

                //实现h1轮流点击隐藏和显示的效果
                $("h1").toggle(
                    //轮流点击    
                    function(){
                        $(this).css("background-color","#00FFFF")
                        $("ul").css("display","block");
                    },
                    
                    function(){
                        $(this).css("background-color","white")
                        $("ul").css("display","none");
                    },
                );

二、选择器

$(document).ready(function(){
    
    //全局选择器*
    $("*").css({
        "margin":"0px",
        "padding":"0px"
    });
    
    //标签选择器$("标签名")
    $("li").css("list-style","none")
    //多个属性
    $("li").css({
        "font-size":"30px",
        "background-color":"pink",
        "margin-top":"5px"
    });
    
    //id选择器$("#id名")
    $("#liid").addClass("litest");
    
    //类选择器$(".类名")
    $(".litest").css({
        "width":"200px",
        "color":"white"
    });
    
    //并集选择器
    $(".litest,#liid").click(function(){
        alert("并集选择器")
    });
    
    //交集选择器
    $("li.litest").css("border-radius","5px");


    
    //----------------层级选择器
    //后代选择器（多个选择器之间用空格隔开）
    $("ul li").css("color","white");
    
    //子类选择器 >，只能到子类，后代不行
    $("ul>li").css("color","red");
    
    //相邻元素选择器+，匹配所有紧接在 prev 元素后的 next 元素
    //后面的一个
    $("#liid+span").css("display","block");

    //同辈元素选择器~，匹配 prev 元素之后的所有 siblings 元素
    $("#liid~span").css("display","block");
    
    

    //-------------------属性选择器
    //属性选择器[属性]：选中所有id,匹配给定的属性是某个特定值的元素
    $("[id]").css("letter-spacing","20px");
    
    //属性选择器[属性=值]：匹配给定的属性是某个特定值的元素
    $("[id=id02]").css("background-image","url(../img/img01.jpg)");
    

    
    //-------------------基本选择器
    //获取第一个元素
    $("dt:first").html("123");
    $("dt:last").css("background-color","red");
    $("dd:first").css("color","blue");
    
    //除了第一个以外的,去除所有与给定选择器匹配的元素
    $("dt:not(:first)").css("color","aqua");
    
    //:even，匹配所有索引值为偶数的元素，从0开始
    //实现表格隔行换色
    $("td:even").css("background-color","aqua");
    $("td:odd").css("background-color","red");
    
    //:eq(index) 匹配一个给定索引值的元素
    $("td").css("width","40px");
    $("td:eq(1)").text("你好");
    
    //:gt(index)匹配所有大于给定索引值的元素
    //:lt(index)小于（开区间）
    $("td:gt(5)").text("你好");
   

        //匹配表单元素:input
    $(":input").css("width","300px");
    //匹配所有文本框
    $(":text,:password").css("width","300px");
    $(":radio").css("width","30px");
    $(":checkbox").css("width","10px");
    $("select").css("width","100px");
    $(":submit").css("width","50px");
       
    
       //表单对象
       //:enabled、:disabled、:checked、:selected
    
});        

三、事件

$(document).ready(function() {

    //获取焦点事件focus()
    $(":text").focus(function() {
        $(this).css("border", "1px solid red");
    });

    //失去焦点事件，获取输入框中的文本
    //val()用于获取值和设置值
    $("[type=text]").blur(function() {
        //alert($(this).val());
        $(this).next().html("用户名在8-16位之间").css("color", "red");
    });

    //change()当元素的值发生改变时，会发生 change 事件。适用于textarea和select
    $("[name=info]").change(function() {
        var t = $(this).val();
        //alert(t);
    });

    //单击：click()，双击：dblclick()

    //键盘事件：keydown,keypress,keyup
    $(document).keydown(function(event) {
        //alert("键盘码：" + event.keyCode);
    });

    $(document).keyup(function(event) {
        //window.close();
    });

    //mouseover()鼠标指针在指定的元素中移动时发生
    //mousedown、move、out
    $("#text").mouseover(function() {
        $(this).css("width", "300px");
    });
    $("#text").mouseout(function() {
        $(this).css("width", "163px");
    });
    $("#text").mousedown(function() {
        $(this).val("你好，再见");
    });

    //滚动条事件
    $(document).scroll(function() {
        let h = $(this).scrollTop();
        //offset()获取元素在当前视口的偏移量
        var top = $("form").offset().top;
        $("form").offset({
            top: h + 100,
            left: 100,
        });
    });

    //on()同时绑定多个事件；bind()
    $("span").on("click", test);

    //移除所有on绑定的事件
    $("span").off();

    //bind()，同时绑定多个函数
    $(".btn").bind({
        click: function() {
            alert("鼠标点击");
        },
        mouseover: function() {
            alert("鼠标移入事件");
        }
    });

});

function test() {
    //remove()从DOM中删除
    $(this).hide()
    //hide()隐藏
    //$(this).hide()
}

四、动画效果

    //动画效果
    //show()、hide()显示、隐藏
    //toggle()用于响应被选元素的轮流点击事件
    
    //滑动
    //slideDown()上而下
    //slideUp()自下而上
    //slideToggle轮流
    
    //淡入淡出
    //fadeIn、fadeOut
    //fadeTo只改变透明度,不改变高度
    //fadeToggle轮流
    
    //自定义动画
    //animate({},{})指定动画形式及结果样式属性对象。
    //这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
    //注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
    
    //stop()停止所有在指定元素上正在运行的动画。

五、文档处理

$(function(){
    var son = "<img src='../img/21.jpg' />";
    var son1 = "<img src='../img/22.jpg' />";
    //append()在匹配元素的子元素末尾追加元素（和子元素成为兄弟）
    $("#con").append(son);
    //效果和上面相同
    $(son).appendTo("#con");
    
    //prepend()向每个匹配的元素内部前置内容。和append()相反
    $("#con").prepend(son);
    $(son).prependTo("#con");
    
    //after()在每个匹配的元素之后插入内容。（和当前元素成为兄弟）
    //before()之前插入
    $("#con").after(son1);
    $("#con").before(son1);
    //insertAfter()和之前相反
    
    
    //replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。
    //replaceAll()用匹配的元素替换掉所有 selector匹配到的元素。
    //$(son).replaceAll("div")
    
    
    //empty()删除匹配的元素集合中所有的子节点。
    //$("#con").empty()
    
    //remove()从DOM中删除所有匹配的元素。(只删除自己)
    
    //detach()，值删除元素，里面的数据还在。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
    
    
    //clone(true|false)
    var clone = $("#con").clone(true);
    $("#son").append(clone)


    
})

筛选、过滤

            $(function(){
                $(".p").last().text("最后一个");
　　　　　　　　　　//除了id=p的元素设置css
                $(".p").not($("[id=p]")).css("color","red");
                
                //index获取匹配元素在集合中的索引值(从0开始)
                var index = $("p").index($("#p"));
                //alert(index)
            })

六、案例：使用jQuery实现表格的动态增加、删除、修改

效果图：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格的增删改</title>
        <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/table.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            table{
                width: 70%;
                border-collapse: collapse;
                border: 1px solid #CCCCCC;
            }
            
            td,th{
                border-bottom: 1px solid #CCCCCC;
                height: 30px;
                text-align: center;
                border-right: 1px solid #CCCCCC;
            }
            span{
                border: 1px solid #CCCCCC;
                padding: 2px 5px;
                cursor: pointer;
            }
            input{
                text-align: center;
            }
            /* 下标从1开始 */
            tr:nth-child(even){
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>老奶洋芋盖饭</td>
                <td>100</td>
                <td>
                    <span>+</span>
                    <input type="number" value="1" />
                    <span>-</span>
                </td>
                <td>100</td>
                <td>
                    <input type="button" id="add" class="btn" value="增加" />
                    <input type="button" id="del" class="btn" value="删除" />
                    <input type="button" id="edit" class="btn" value="编辑" />
                </td>
            </tr>
        </table>
    </body>
</html>

js代码

$(function() {
    $("th").css("background-color", "greenyellow");

    //绑定事件
    $(".btn").mousedown(function() {

        var btnVal = $(this).val();
        var thistr = $(this).parent().parent();

        if (btnVal == "增加") {
            //克隆并追加
            var trval = thistr.clone(true);
            $("table").append(trval);

        } else if (btnVal == "删除") {
            //如果是最后一行了就不能再删除
            if ($("tr").length > 2) {
                thistr.remove();
            } else {
                var f = confirm("已经是最后一个了，是否确定删除？");
                if (f == true) {
                    thistr.remove();
                }
            }

        } else if (btnVal == "编辑") {
            //编辑
            //获取按钮所造td前面的所有同辈元素
            //var tds = $(this).parent().prevAll();
            var tds1 = $(this).parent().siblings();

            //获取行中的单元格
            var tds = thistr.children();
            //将编辑之前的数据保存起来
            //var name = tds[0].innerHTML;
            //var price = tds[1].innerHTML;
            for (var i = 0; i < 2; i++) {
                var tdtext = tds.eq(i).text();
                tds.eq(i).html("");
                //tds.eq(i).append("<input value="+tdtext+" />");
                //或者下面的方法

                //定义input赋值
                var input = document.createElement("input");
                $(input).val(tdtext);
                tds.eq(i).append(input);

            }
            $(this).val("确定");

        } else if ($(this).val() == "确定") {

            //var tds = thistr.children();
            var tds = $(this).parent().prevAll(":gt(1)");

            for (var j = 0; j < 2; j++) {
                var tdtext = tds.eq(j).children("input").val();
                tds.eq(j).text(tdtext);
            }
            $(this).val("编辑");
        }
    });

    //为+-绑定事件
    $("span").mousedown(function() {
        //获得+-
        var jiajian = $(this).parent().children("span");
        var input = $(this).parent().children("input");
        var v = input.val();
        var count = v;
        for (var i = 0; i < jiajian.length; i++) {
            if (jiajian[i].innerHTML == "+") {
                count++;
                //alert(count)
            } else if (jiajian[i].innerHTML == "-") {
                count--;
            }
        }
        console.log(count)
        input.innerText = "";
        input.innerText = count;
        
    });


});