文本操作

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());//获取匹配元素的相邻同辈元素（下面的）

更多相关文章

1. $.get,$.post,$ajax与Vue基本术语
2. 2021年全自动最新引流神器大数据获客系统各行业的推广神器
3. 个人信息表的网页
4. 1.理解 box-sizing功能并实例演示; 2. 理解相对定位与绝对定位，并
5. 实例演示dom元素的增删改查操作
6. 字体图标的引用及页面布局盒模型常用属性
7. 字体图标的用法 盒模型的演示 box-sizing的用法
8. css_0701作业
9. 属性访问器和dom元素的获取、遍历、增加

随机推荐

1. android之接收和发送广播的开机可自动运
2. Android通知的基本用法
3. android获取wifi信号强度
4. Android ScrollView 内部控件 layout_mar
5. android button 上添加图片
6. [置顶] Android高手进阶教程(四)之----An
7. android 自动化(1)
8. 解决java.lang.RuntimeException: Unable
9. Fiddler跟踪监控android数据包
10. android 新增一個廣播偵聽USB設備的插拔