演示文本操作3个功能+演示样式属性操作 3个功能+演示 效果操作 3个功能 +什么是节点以及演示节点功能操作

文本操作

1：val() 设置或获取表单字段的值

// 不带参数：获取
            console.log($("#user").val());
            // 带参数：设置
            console.log($("#user").val("亚瑟"));
            // 带参数：参数为回调函数
            let users = $("#user").val(()=>"米莱迪");

2：text() 设置或获取所选元素的文本内容

// 获取
            console.log($("button").text());
            // 设置
            $("button").text("按钮");
            console.log($("button").text());

3：html() 设置或获取所选元素的内容（包含 HTML 标签）

$("#select_s").change(function(){
            let select = $("#select_s").val();
            // console.log(select);
            let html_data;
            let html_data1;
            if(select == 1){
                html_data += '<option value="101">北京市</option>';
            }else if(select == 2){
                html_data += '<option value="201">济南市</option>';
                html_data += '<option value="202">青岛市</option>';
                html_data += '<option value="203">淄博市</option>';
                html_data += '<option value="204">枣庄市</option>';
                html_data += '<option value="205">东营市</option>';
                html_data += '<option value="206">菏泽市</option>';
            }
            $("#select_ss").html(html_data);
            let selected = $("#select_ss").val();
            console.log(selected);
            if(selected == 101){
                html_data1 += '<option value="2001">东城区</option>';
                html_data1 += '<option value="2002">西城区</option>';
                html_data1 += '<option value="2003">朝阳区</option>';
                html_data1 += '<option value="2004">丰台区</option>';
                html_data1 += '<option value="2005">海淀区</option>';
                html_data1 += '<option value="2006">顺义区</option>';
            }else if(selected == 201){
                html_data1 += '<option value="2001">历下区</option>';
                html_data1 += '<option value="2002">市中区</option>';
                html_data1 += '<option value="2003">槐荫区</option>';
                html_data1 += '<option value="2004">天桥区</option>';
                html_data1 += '<option value="2005">历城区</option>';
                html_data1 += '<option value="2006">长清区</option>';
            }
            $("#select_q").html(html_data1);
        });

样式属性操作

1：addClass() 向被选中元素添加一个或者多个类名

// jq:增加类名
        $("input").addClass("one");
        // js:增加类名
        document.querySelectorAll("input")[0].classList.add("two");

2：removeClass() 向被选中元素删除指定类名

// 删除类名js
        document.querySelectorAll("input")[0].classList.remove("two");
        // 删除类名 jq
        $("input").removeClass("one");

3：toggleClass() 对设置或者移动指定类进行切换

// 切换类名 如果类名已经存在则删除，如果不存在则添加
        $("button").click(()=>$("label").toggleClass("label_1"));

效果操作

1：hide() 隐藏被选元素

// jq 隐藏
            $(".content1").hide();
            // js 隐藏
            document.querySelector(".content1").style.display = "none";

2：show() 显示被选元素

// jq 显示
            $(".content1").show();
            //js 显示
            document.querySelector(".content1").style.display = "";

3：toggle() 被选元素在显示与隐藏之间切换

// 显示与隐藏 来回切换操作
            $(".content1").toggle();

什么是节点？

html代码中所有的事物都是节点，里面的元素称之为元素节点。

节点功能操作

 // children()
        console.log($("ul").children());//获取匹配元素的所有子元素
        // find(选择器)
        console.log($("body").find("div"));//获取匹配元素的所有后代，由find内的参数选择器决定
        // siblings()
        console.log($(".content").siblings("ul"));//获取匹配元素的同级元素，具体由siblings内的选择器决定
        // next()
        console.log($(".content").next());//获取匹配元素的相邻同辈元素（下面的）