h5开发小细节

最新推荐文章于 2024-08-21 14:09:37 发布

再卷毛都没了

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量172

点赞数 1

文章标签： html5 css3 前端 javascript

本文链接：https://blog.csdn.net/weixin_44411556/article/details/126884735

版权

1. 输入框去除两边空格

$('#id名').val().trim()

2. 配置样式时，前面加上大div标签，避免全局污染

#big span

3. 输入框常用配置样式

input{

width: 200px;

height:20px;

padding: 4px 0;

outline: none;

font-size: 14px;

text-indent: 10px;

color: #333;

box-shadow: none;

}

4.单选框

<!DOCTYPE html>

<html lang="en">

        <head>

        <meta charset="UTF-8">

        <title>HTML5</title>

<style>



                 #big .checkBox{

                font-size: 14px;

         }

</style>

        </head>

        <body>
<div id="big" >

                        <div style="padding: 5px 0">

                <div class="radioDiv">

                <span class="mandatory">申请等级：</span>

                    <input type="radio" value="1"> <p>你</p>

<input type="radio" value="2" > <p>我</p>

<input type="radio" value="3" > <p>他</p>

        </div>

        </div>

</div>

<script  type="text/javascript">



                        // 单选框

                let radioValue = '';

                $(".radioDiv input[type='radio']").click(function(){

                //1.先移除之前元素的checked

                $(".radioDiv input[type='radio']:checked").removeAttr("checked");

                //2.给当前点击的单选框加checked

                $(this).attr("checked","true")

                radioValue = $(".radioDiv input[type='radio']:checked").val();

                 })

</script>

</body>

</html>

5.表单ajax提交

#big .btn{

color: aliceblue;

background-color: #3598ff;

width: 200px;

height: 35px;

border-radius: 4px;

border-style: none;

font-size: 14px;

}

                <div>

        <span>姓名：</span>

        <input type="text" id="name" value="">

      </div>

      <div>

          <span>密码：</span>

        <input type="number" id="password" value="" >

     </div>

                <div>

        <button class="btn">提交申请</button>

       </div>

$("button").on('click', function(){

const name = $('#name').val().trim();

const password = $('#password').val().trim() || '';

const disabled = !name || !password

//const disabled = !name || !password || !radioValue //radioValue是上面提到的

if(disabled){

alert('必填项，请填写完整');

}else{

const pram = {

content: {

name,

password,

radioValue,

}

};

$.ajax({

type : "POST", //提交方式

url : "",//路径

data : pram, //数据，这里使用的是Json格式进行传输

success : function(result) {//返回数据根据结果进行相应的处理

alert(result.description);

$("#name").val("");

$("#password").val("");

//$(".radioDiv input[type='radio']:checked").removeAttr("checked");

},

complete: function() {

console.log();

}

});

}

});