jQuery(7)——DOM操作 html,html,val,attr方法

jQury学习DOM操作


text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
以下代码测试三者获取元素的值有什么区别:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery学习 dom操作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            //测试text()和html()和val()方法
            var text=$("#box").text();
            var html=$("#box").html();
            var val=$("#box").val();
            var val_input=$("#input").val();
            
            console.log("html():"+html);
            console.log("text():"+text);
            console.log("val ():"+val);
            console.log("val()获取input方法:"+val_input);
            
            //测试text()和html()方法对于表单元素的起不起作用
            //var val_input=$("#input").text();
            //var val_input=$("#input").html();
        })
    </script>
    <style>
        #box{
            width: 500px;
            border: 1px green;
            margin:0 auto;
        }
        #a,#b,#c{
            height: 30px;
            border: 2px solid #666;
            background:rgba(0,0,0,.1);
            margin:20px 0px;
        }
        #input{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
        <input type="text" id="input" value="val()获取表单元素">
    </div>
    
</body>
</html>

结果如图:
jq dom

经测试,text()和html()有明显的自带标签元素与否的区别,而val()并不能获取div内的值,相反text()和html()也不能获取input的value,val()可以。

测试三者修改元素内容的区别

直接添加js代码:

 $(document).ready(function(){
            //测试text()和html()和val()方法
            var text=$("#box").text();
            var html=$("#box").html();
            var val=$("#box").val();
            var val_input=$("#input").val();
            
            console.log("text():"+text);
            console.log("html():"+html);
            console.log("val ():"+val);
            console.log("val()获取input方法:"+val_input);
            
            //测试text()和html()方法对于表单元素的起不起作用
            //var val_input=$("#input").text();
            //var val_input=$("#input").html();

            //通过text()和html()和val()方法修改元素内的值
            var text2=$("#a").text("你好,我是A");
            var html2=$("#b").html("你好,我是B");
            var val2=$("#input").val("你好,我是input的value");
            //console.log("text():"+text2);
            //console.log("html():"+html2);
            //console.log("val ():"+val2);
            
        })

如图:
jq dom

效果是一样的,审查元素结果是一样的。


attr()

  • jQuery attr() 方法用于获取属性值。
<div id="box">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
        <input type="text" id="input" value="val()获取表单元素">
        <div>
            <a id="attr" href="https://liantao.me">个人主页</a>
        </div>
    </div>
//===============测试attr============
            var attr=$("#attr").attr("href");
            alert(attr);
            attr=$("#attr").attr("href","https://blog.liantao.me");
            attr=attr.attr("href");
            alert("href修改为:"+attr)

显示,如图:
liantao.me

当然,也可以修改它
jq attr

完整demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery学习 dom操作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            //=================测试text()和html()和val()方法=============
            var text=$("#box").text();
            var html=$("#box").html();
            var val=$("#box").val();
            var val_input=$("#input").val();
            
            console.log("text():"+text);
            console.log("html():"+html);
            console.log("val ():"+val);
            console.log("val()获取input方法:"+val_input);
            
            //=========测试text()和html()方法对于表单元素的起不起作用=========
            //var val_input=$("#input").text();
            //var val_input=$("#input").html();

            //通过text()和html()和val()方法修改元素内的值
            var text2=$("#a").text("你好,我是A");
            var html2=$("#b").html("你好,我是B");
            var val2=$("#input").val("你好,我是input的value");
            //console.log("text():"+text2);
            //console.log("html():"+html2);
            //console.log("val ():"+val2);

            //===============测试attr============
            var attr=$("#attr").attr("href");
            alert(attr);
            attr=$("#attr").attr("href","https://blog.liantao.me");
            attr=attr.attr("href");
            alert("href修改为:"+attr)
            
        })
    </script>
    <style>
        #box{
            width: 500px;
            border: 1px green;
            margin:0 auto;
        }
        div{
            height: 30px;
            border: 2px solid #666;
            background:rgba(0,0,0,.1);
            margin:20px 0px;
        }
        #input{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
        <input type="text" id="input" value="val()获取表单元素">
        <div>
            <a id="attr" href="https://liantao.me">个人主页</a>
        </div>
    </div>
    
</body>
</html>

END

转载于:https://www.cnblogs.com/famine/p/9781402.html

以下是对提供的参考资料的总结,按照要求结构化多个要点分条输出: 4G/5G无线网络优化与网规案例分析: NSA站点下终端掉4G问题:部分用户反馈NSA终端频繁掉4G,主要因终端主动发起SCGfail导致。分析显示,在信号较好的环境下,终端可能因节能、过热保护等原因主动释放连接。解决方案建议终端侧进行分析处理,尝试关闭节电开关等。 RSSI算法识别天馈遮挡:通过计算RSSI平均值及差值识别天馈遮挡,差值大于3dB则认定有遮挡。不同设备分组规则不同,如64T和32T。此方法可有效帮助现场人员识别因环境变化引起的网络问题。 5G 160M组网小区CA不生效:某5G站点开启100M+60M CA功能后,测试发现UE无法正常使用CA功能。问题原因在于CA频点集标识配置错误,修正后测试正常。 5G网络优化与策略: CCE映射方式优化:针对诺基亚站点覆盖农村区域,通过优化CCE资源映射方式(交织、非交织),提升RRC连接建立成功率和无线接通率。非交织方式相比交织方式有显著提升。 5G AAU两扇区组网:与三扇区组网相比,AAU两扇区组网在RSRP、SINR、下载速率和上传速率上表现不同,需根据具体场景选择适合的组网方式。 5G语音解决方案:包括沿用4G语音解决方案、EPS Fallback方案和VoNR方案。不同方案适用于不同的5G组网策略,如NSA和SA,并影响语音连续性和网络覆盖。 4G网络优化与资源利用: 4G室分设备利旧:面对4G网络投资压减与资源需求矛盾,提出利旧多维度调优策略,包括资源整合、统筹调配既有资源,以满足新增需求和提质增效。 宏站RRU设备1托N射灯:针对5G深度覆盖需求,研究使用宏站AAU结合1托N射灯方案,快速便捷地开通5G站点,提升深度覆盖能力。 基站与流程管理: 爱立信LTE基站邻区添加流程:未提供具体内容,但通常涉及邻区规划、参数配置、测试验证等步骤,以确保基站间顺畅切换和覆盖连续性。 网络规划与策略: 新高铁跨海大桥覆盖方案试点:虽未提供详细内容,但可推测涉及高铁跨海大桥区域的4G/5G网络覆盖规划,需考虑信号穿透、移动性管理、网络容量等因素。 总结: 提供的参考资料涵盖了4G/5G无线网络优化、网规案例分析、网络优化策略、资源利用、基站管理等多个方面。 通过具体案例分析,展示了无线网络优化中的常见问题及解决方案,如NSA终端掉4G、RSSI识别天馈遮挡、CA不生效等。 强调了5G网络优化与策略的重要性,包括CCE映射方式优化、5G语音解决方案、AAU扇区组网选择等。 提出了4G网络优化与资源利用的策略,如室分设备利旧、宏站RRU设备1托N射灯等。 基站与流程管理方面,提到了爱立信LTE基站邻区添加流程,但未给出具体细节。 新高铁跨海大桥覆盖方案试点展示了特殊场景下的网络规划需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值