前端注意点

最新推荐文章于 2021-11-07 20:30:12 发布
最新推荐文章于 2021-11-07 20:30:12 发布
阅读量208 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_12580/article/details/119757501
版权 
<a href="#"> href="#" —— #标识，不会重新加载,页面跳到页首</a><br>
<a href="">  href="" —— 空链接，会重新加载url,页面跳到页首</a><br>
<a href="javascript:void(0)"> href="javascript:void(0)" —— 死链接，页面不会跳动</a>

checkBox 选中

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<script type="text/javascript">
 
    function fn_disabled() {
        //$("input[type='checkbox']").attr("disabled", "disabled");
        //$("input[type='checkbox']").attr("disabled", true);
        //$("input[type='checkbox']").prop("disabled", true);
        $("input[type='checkbox']").prop("disabled", "disabled");
    }
 
    function fn_enable() {
        // $("input[type='checkbox']").removeAttr("disabled");
        // $("input[type='checkbox']").attr("disabled", false);
        // $("input[type='checkbox']").prop("disabled","");
        // $("input[type='checkbox']").prop("disabled", false);
        $("input[name='box']").prop("disabled", false);
    }
 
    //获取选中的 checkbox的多值
    function getCheckedValues() {
        var arr = [];
        $("input[type='checkbox']:checked").each(function (index, item) {//
            arr.push($(this).val());
        });
        alert(arr);
    }

        //获取选中的 checkbox的值,只获取匹配的第一个元素的值
    function getCheckedValue() {
    	var checkLength=$("input[type='checkbox']:checked");
    	alert("选中了"+checkLength.length+"个");
        var checkValue=$("input[type='checkbox']:checked").val();
        alert("获取匹配的第一个值:"+checkValue);
    }
 
    function checkedSecond() {
        // $("input[type='checkbox']:eq(1)").prop("checked", "checked");
        $("input[type='checkbox']:eq(1)").prop("checked", true);
    }
 
    function uncheckedSecond() {
        //  $("input[type='checkbox']:eq(1)").prop("checked", "");
        $("input[type='checkbox']:eq(1)").prop("checked", false);
    }
 
    $("#cbCheckbox1").click(function () {
        if ($(this).prop("checked")) {//jquery 1.6以前版本 用  $(this).attr("checked")
            alert("选中");
        } else {
            alert("没有选中");
        }
    });
 
</script>

<body>

 <h3>jQuery操作checkbox</h3>
 <hr>
    <input type="checkbox" name="box" id="cbCheckbox1" value="1" />
    <input type="checkbox" name="box" value="2" />
    <input type="checkbox" name="box" disabled="disabled" value="3" />
    <input type="checkbox" name="box" value="4" />
    <input type="checkbox" name="box" disabled="true" value="5" />
    <br />
    <input type="button" id="btnDisabled" value="禁用" onclick="fn_disabled();" />
    <input type="button" id="Button1" value="启用" onclick="fn_enable();" /><br />
    <input type="button" id="Button2" value="获取选中的多值" onclick="getCheckedValues();" /><br />
     <input type="button" id="Button2" value="获取选中的单值" onclick="getCheckedValue();" /><br />
    <input type="button" id="Button3" value="选中第二个" onclick="checkedSecond();" />
    <input type="button" id="Button4" value="取消选中第二个" onclick="uncheckedSecond();" /><br />

<hr/>

</body>
</html>



<script type="text/javascript">

 //注意： 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上（包含）建议用prop
 
    //1、根据id获取checkbox
    $("#cbCheckbox1");
 
    //2、获取所有的checkbox
    $("input[type='checkbox']");//or
    $("input[name='cb']");
 
    //3、获取所有选中的checkbox
    $("input:checkbox:checked");//or
    //$("input:[type='checkbox']:checked");//or
    //$("input[type='checkbox']:checked");//or
    //$("input:[name='ck']:checked");
 
    //4、获取checkbox值
    //用.val()即可，比如：
    $("#cbCheckbox1").val();
 
 
    //5、获取多个选中的checkbox值
    var vals = [];
    $('input:checkbox:checked').each(function (index, item) {
        vals.push($(this).val());
    });
     
    //6、判断checkbox是否选中（jquery 1.6以前版本 用  $(this).attr("checked")）
    $("#cbCheckbox1").click(function () {
        if ($(this).prop("checked")) {
            alert("选中");
        } else {
            alert("没有选中");
        }
    });
 
    //7、设置checkbox为选中状态
    $('input:checkbox').attr("checked", 'checked');//or
    $('input:checkbox').attr("checked", true);
 
    //8、设置checkbox为不选中状态
    $('input:checkbox').attr("checked", '');//or
    $('input:checkbox').attr("checked", false);
 
    //9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
    $("input[type='checkbox']").attr("disabled", "disabled");//or
    $("input[type='checkbox']").attr("disabled", true);//or
    $("input[type='checkbox']").prop("disabled", true);//or
    $("input[type='checkbox']").prop("disabled", "disabled");
 
    //10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
    $("input[type='checkbox']").removeAttr("disabled");//or
    $("input[type='checkbox']").attr("disabled", false);//or
    $("input[type='checkbox']").prop("disabled", "");//or
    $("input[type='checkbox']").prop("disabled", false);
	

</script>

checkBox-自练

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

// 全选
//  $(function(){
//  	$("#select-all").click(function(){
//    $("input[type='checkbox']").prop("checked","checked"); 
//  })
//  })
  
  // 全选 [注意：prop 是 jQuery-1.6之后才能使用; 之前可用 attr]
  // 使用prop,不会把checked属性加到标签内,【可以多次勾选】
  // 但是attr,则会把checked属性写到标签内,【只能勾选一次】
  function selectAll(){
    $("input[type='checkbox'][name='mybox']").prop("checked","checked"); //或者:
    // $("input[type='checkbox']").prop("checked",true); // 或者:
    // $("input[type='checkbox']").prop("checked","666"); 
    $("#tip").css("color","red");
}
  // 取消全选
  function cancelAll(){
     $("input[type='checkbox'][name='mybox']").prop("checked","");

      $("#tip").css("color","");
}

// 获取已选中的所有复选框的值
  function selectAllValues(){

  	var checkVals=[];
  	$("input[type='checkbox'][name='mybox']:checked").each(function(){
      //checkVals[i]=$(this).val(); // 前提是：function(i)
      //或者
      checkVals.push($(this).val());
  	});

  	alert("选中元素个数："+checkVals.length+"\r所有元素值为："+checkVals);
  }


// 获取已选中的所有复选框的值2(funtion(index,item)
  function selectAllValues2(){

  	var checkVals=$("input[type='checkbox'][name='mybox']:checked");
  	var Vals=[];
  	checkVals.each(function(index,item){
  	 // index为索引，item 当前为单个dom元素，不是jquery对象，不能用val()
  	 // alert(index+"---"+item.value);
      Vals.push(item.value);
  	});

  	alert("选中元素个数："+Vals.length+"\r所有元素值为："+Vals);
  }

/* -------------------------------------------------------------------------*/

  // 全选
  // 使用attr,则会把checked属性写到标签内,【只能勾选一次】
  function selectAll_attr(){

    $("input[type='checkbox'][name='box']").attr("checked","checked");

     $("#tip2").css({"color":"green","font-weight":"bold"});
}
  // 取消全选
  function cancelAll_removeAttr(){

     $("input[type='checkbox'][name='box']").removeAttr("checked");

     $("#tip2").css("color","").css("fontWeight","");
}

/* -------------------------------------------------------------------------*/

// 包在$(function())内
  $(function(){
  $("input[type='checkbox'][name='cx']").click(function(){
  	// 为每个checkbox 设置click事件

	$(this).attr("checked",true);//设置当前选中checkbox的状态为checked

    $(this).siblings().attr("checked",false); //设置当前选中的checkbox同级(兄弟级)其他checkbox状态为未选中
})
  })





// 获取已选中的复选框的值
  function selectValue(){

  	var checkVal=$("input[type='checkbox'][name='cx']:checked");
 

  	alert("选中元素个数："+checkVal.length+"\r所有元素值为："+checkVal.val());
  }


</script>


<body>

<div> 
  <fieldset>
  <legend>复选框 多选</legend>
    <br>
	<input type="checkbox" name="mybox" value="111" checked>选项1
	<input type="checkbox" name="mybox" value="222">选项2
	<input type="checkbox" name="mybox" value="333">选项3
	<input type="checkbox" name="mybox" value="444">选项4
	<input type="checkbox" name="mybox" value="555">选项5

	<br><br><br>
    <input type="button" id="select-all" value=" 全选(prop) " onClick="selectAll()">
    <input type="button" id="cancel-all" value=" 取消全选(prop) " onClick="cancelAll()">
    <span id="tip">prop,可以多次勾选;attr,只能勾选一次</span>
    <br><br>
    <input type="button" id="select-all-values" value=" 获取全选元素值" onClick="selectAllValues()">
    <input type="button" id="select-all-values" value=" 获取全选元素值2(funtion(index,item)" onClick="selectAllValues2()">

    <br><hr><br>

    <input type="checkbox" name="box" value="1" checked>选项1
	<input type="checkbox" name="box" value="2">选项2
	<input type="checkbox" name="box" value="3">选项3
	<input type="checkbox" name="box" value="4">选项4
	<input type="checkbox" name="box" value="5">选项5
	<br><br><br>
    <input type="button" id="select-all" value=" 全选(attr) " onClick="selectAll_attr()">
    <input type="button" id="cancel-all" value=" 取消全选(removeAttr) " onClick="cancelAll_removeAttr()">
    <span id="tip2">prop,可以多次勾选;attr,只能勾选一次</span>
  </fieldset>
</div>
    <hr><hr>
<div> 
  <fieldset>
  <legend>复选框 单选</legend>
    <br>
	<input type="checkbox" name="cx" value="AAA">选项A
	<input type="checkbox" name="cx" value="BBB">选项B
	<input type="checkbox" name="cx" value="CCC">选项C
	<input type="checkbox" name="cx" value="DDD">选项D
	<input type="checkbox" name="cx" value="EEE">选项E

	<br><br><br>
    <input type="button" id="select-all-value" value=" 获取选中元素值" onClick="selectValue()">
  

  </fieldset>
</div>

<hr/>

</body>
</html>

DOM_sort排序

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

    //我们选择了三个元素
	console.log($('.sel') instanceof jQuery);
	//我们选择了第一个div，它是一个JQ对象，不可以使用dom属性和方法
	$('.sel').eq(0);
	//我们也是选择了第一个div，但是这是一个dom对象，可以使用dom属性方法，但不可以使用JQ的属性方法
	$('.sel')[0];
	//选择第一个div并转换为dom对象，同上
	$('.sel').eq(0)[0];
	//以下错误，dom对象无法使用JQ方法，因为.eq()是JQ的方法
	//$('.sel')[0].eq(0);
	
function onTest(){
  var arr =   $('li');
  arr.sort(function(a,b){
	debugger;
    return a.innerHTML>b.innerHTML?1:-1;
  });//对li进行排序，这里按照从小到大排序
  $('ul').empty().append(arr);//清空原来内容添加排序后内容。
}

function myList(){
	var sels=$("ul").find("li");
	sels.sort(function(a,b){
		debugger;
		//val AAA=$(a).prop("id");
       // val BBB=$(a).prop("id");

        return (A>B);
	}).appendTo("body");
}
</script>


<body>

<div><a href="#">href="#"</a></div>
<div><a href="">href=""</a></div>


<ul>
<li class="sel" id="3"> 刘备 </li>
<li class="sel" id="2"> 关羽 </li>
<li class="sel" id="1"> 张飞 </li>
</ul>
<hr>
<input type="button" value="点击" onClick="onTest()" >

<hr/>

</body>
</html>

DOM_eq 用法

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

    //我们选择了三个元素
	console.log($('.sel') instanceof jQuery);
	//我们选择了第一个div，它是一个JQ对象，不可以使用dom属性和方法
	$('.sel').eq(0);
	//我们也是选择了第一个div，但是这是一个dom对象，可以使用dom属性方法，但不可以使用JQ的属性方法
	$('.sel')[0];
	//选择第一个div并转换为dom对象，同上
	$('.sel').eq(0)[0];
	//以下错误，dom对象无法使用JQ方法，因为.eq()是JQ的方法
	//$('.sel')[0].eq(0);
	

</script>


<body>

<div class="sel"> 刘备 </a>
<div class="sel"> 关羽 </a>
<div class="sel"> 张飞 </a>

<hr/>

</body>
</html>

radio 用法

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

// 全选
//  $(function(){
//  	$("#select-all").click(function(){
//    $("input[type='checkbox']").prop("checked","checked"); 
//  })
//  })
  


  // 获取当前选中值
  function selectOne(){
    var val=$("input[type='radio'][name='mybox']:checked").val();
    alert("当前选中值为："+val);
}

  // 获取所有值
  function printAll(){

    var vals=$("input[type='radio'][name='mybox']");
    // alert("当前选中值为："+vals.val());  // 直接是打印第一个元素的jquery对象的值
    var v=[];
    $.each(vals,function(index,item){
     
     v.push(item.value);
    })

    alert(v);
}
  

// 获取所有值
  function printAll2(){

    var vals=$("input[type='radio'][name='mybox']");
    // alert("当前选中值为："+vals.val());  // 直接是打印第一个元素的jquery对象的值
    var v=[];
    vals.each(function(index,item){
     
     v.push($(this).val());
    })

    alert(v);
}



</script>


<body>

<div> 
  <fieldset>
  <legend>单选按钮</legend>
    <br>
	<input type="radio" name="mybox" value="111" checked>选项1
	<input type="radio" name="mybox" value="222">选项2
	<input type="radio" name="mybox" value="333">选项3
	<input type="radio" name="mybox" value="444">选项4
	<input type="radio" name="mybox" value="555">选项5

	<br><br><br>
    <input type="button" value=" 获取选中值 " onClick="selectOne()">
    <input type="button" value=" 获取所有值 " onClick="printAll()">
    <input type="button" value=" 获取所有值2 " onClick="printAll2()">
  </fieldset>
</div>

<hr/>

</body>
</html>

select 用法

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

// 全选
//  $(function(){
//  	$("#select-all").click(function(){
//    $("input[type='checkbox']").prop("checked","checked"); 
//  })
//  })
  


  // 获取当前选中值
  function selectOne(){
    var val=$("select[id='selectList']").val();
    // 上面这行，等同于
    var txt=$("select[id='selectList']").find("option:selected").val();
    var txt=$("select[id='selectList']").find("option:selected").text();
    // 获取索引
    var index=$("select[id='selectList']").find("option:selected").index();

    alert("当前选中值为："+val+"\n当前选中文本为："+txt+"\n当前索引值为："+index);
}

  // 获取所有值
  function printAll(){

    var list=$("select[id='selectList']").find("option");
    // alert("当前选中值为："+vals.val());  // 直接是打印第一个元素的jquery对象的值
    var opts=[];
    var texts=[];
    $.each(list,function(index,item){

    // if(index==0){
    // 	alert(item.innerText+":"+item.innerText.length);
    // }
     str=item.innerText.replace(/^\s+|\s+$/g,"");//原生js去掉两头空格
     // 去掉“请选择”
     if(str!='请选择'){
     opts.push(item.value);
     texts.push(item.innerText);
     }
    })

    alert(opts+"\n"+texts);
}
  

// 获取所有值
  function printAll2(){

    var list=$("select[id='selectList']").find("option");
    // alert("当前选中值为："+vals.val());  // 直接是打印第一个元素的jquery对象的值
    var v=[];
    var t=[];
    list.each(function(index){

    	if(index==0){
    		alert($(this).text().trim()+":"+$(this).text().trim().length);
    	}
     // 去掉“请选择”
     if($(this).text().trim()!="请选择"){
     v.push($(this).val());
     t.push($(this).text());
    }
    })

    alert(v+"\n"+t);
}

// 追加选项(option)
  function appendOpt(){
    $("select[id='selectList']").append("<option value='AAA'> 曹操 </option>");
}

// ================================================================================

// 当前标签内部的html代码，全部打印（不包含自身）
  function use_html(){
    var html=$("select[id='selectList']").html();

    alert("当前列表为："+html);
}

// 当前标签的html代码，全部打印（包含自身）
  function use_outerHTML(){
    var outerHtml=$("select[id='selectList']").prop("outerHTML");

    alert("当前列表为："+outerHtml);
}
</script>


<body>

<div> 
  <fieldset>
  <legend>下拉列表</legend>
    <br>

    英雄：<select id="selectList">
    <option value=""> 请选择 </option>
    <option value="111"> 刘备 </option>
    <option value="222"> 关羽 </option>
    <option value="333"> 张飞 </option>
    <option value="444"> 马超 </option>
    <option value="555"> 黄忠 </option>

    </select>

	<br><br><br>
    <input type="button" value=" 获取选中值 " onClick="selectOne()">
    <input type="button" value=" 获取所有值 " onClick="printAll()">
    <input type="button" value=" 获取所有值2 " onClick="printAll2()">
    <br><br>
     <input type="button" value=" 追加选项(option) " onClick="appendOpt()">
    <br><br>
     <input type="button" value=" 显示html代码(不含自身)(html()) " onClick="use_html()">
     <input type="button" value=" 显示html代码(含有自身)(outerHTML) " onClick="use_outerHTML()">
  </fieldset>
</div>

<hr/>

</body>
</html>

table 行列选中

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">

function fun(){

    // 选中 第1行，第3列
	 var SingleTD=$("#tab tr:eq(0) td:eq(2)");
	// // 添加 css 样式 (单个样式)
	 SingleTD.css("color","red");
	// 添加 css 样式（多个样式，json格式）
	// 带连字符-属性 ，改成驼峰写法
	 SingleTD.css({"fontSize":"24px","fontWeight":"bold"});
	    alert("选中列数："+SingleTD.length);
		alert(SingleTD.html());
	
}

function fun2(){

	// 选中 第2行+第3行
	var Trs=$("#tab tr:eq(1),#tab tr:eq(2)");
	// 或者 
	var Trs=$("#tab").find("tr:eq(1),tr:eq(2)");

	alert("选中行数："+Trs.length);
    Trs.css("color","blue");

    // 进而选中 第1列，第4列，第5列
    var ComplexTD=Trs.find("td:eq(1),td:eq(3),td:eq(4)")
    alert("选中列数："+ComplexTD.length);
	

     ComplexTD.each(function(i){
     // 添加 css 样式（多个样式，json格式）
	// // 带连字符-属性 ，改成驼峰写法
      $(this).css("color","green");
      $(this).css({"fontSize":"24px","fontWeight":"bold"})
  });
}

function fo(){

/*document.getElementById("myfocus").focus();*/

$("#myfocus").focus();
}

</script>
<body>

<table id="tab"> 

<tr> <td>111</td>  <td>222</td>  <td>333</td>  <td>444</td>  <td>555</td> </tr>
<tr> <td>666</td>  <td>777</td>  <td>888</td>  <td>999</td>  <td>000</td> </tr>
<tr> <td>123</td>  <td>456</td>  <td>789</td>  <td>654</td>  <td>321</td> </tr>

</table>

文本：<input id="myfocus" type="text" />

<input type="button" value="单项" onclick="fun()"/> 
<input type="button" value="多项" onclick="fun2()"/> 
<br/>
<hr/>
<input type="button" value="触发光标" onclick="fo()"/> 
</body>
</html>

测试专用

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

// 全选
//  $(function(){
//  	$("#select-all").click(function(){
//    $("input[type='checkbox']").prop("checked","checked"); 
//  })
//  })
  


  // 获取当前选中值
  function selectOne(){
    var val=$("select[id='selectList']").val();
    // 上面这行，等同于
    var txt=$("select[id='selectList']").find("option:selected").val();
    var txt=$("select[id='selectList']").find("option:selected").text();
    // 获取索引
    var index=$("select[id='selectList']").find("option:selected").index();

    alert("当前选中值为："+val+"\n当前选中文本为："+txt+"\n当前索引值为："+index);
}

  // 获取所有值
  function printAll(){

    var list=$("select[id='selectList']").find("option");
    // alert("当前选中值为："+vals.val());  // 直接是打印第一个元素的jquery对象的值
    var opts=[];
    var texts=[];
    $.each(list,function(index,item){

    // if(index==0){
    // 	alert(item.innerText+":"+item.innerText.length);
    // }
     str=item.innerText.replace(/^\s+|\s+$/g,"");//原生js去掉两头空格
     // 去掉“请选择”
     if(str!='请选择'){
     opts.push(item.value);
     texts.push(item.innerText);
     }
    })

    alert(opts+"\n"+texts);
}
  

// 获取所有值
  function printAll2(){

    var list=$("select[id='selectList']").find("option");
    // alert("当前选中值为："+vals.val());  // 直接是打印第一个元素的jquery对象的值
    var v=[];
    var t=[];
    list.each(function(index){

    	if(index==0){
    		alert($(this).text().trim()+":"+$(this).text().trim().length);
    	}
     // 去掉“请选择”
     if($(this).text().trim()!="请选择"){
     v.push($(this).val());
     t.push($(this).text());
    }
    })

    alert(v+"\n"+t);
}

// 追加选项(option)
  function appendOpt(){
    $("select[id='selectList']").append("<option value='AAA'> 曹操 </option>");
}

// ================================================================================

// 当前标签内部的html代码，全部打印（不包含自身）
  function use_html(){
    var html=$("select[id='selectList']").html();

    alert("当前列表为："+html);
}

// 当前标签的html代码，全部打印（包含自身）
  function use_outerHTML(){
    var outerHtml=$("select[id='selectList']").prop("outerHTML");

    alert("当前列表为："+outerHtml);
}
</script>


<body>

<div> 
  <fieldset>
  <legend>下拉列表</legend>
    <br>

    英雄：<select id="selectList">
    <option value=""> 请选择 </option>
    <option value="111"> 刘备 </option>
    <option value="222"> 关羽 </option>
    <option value="333"> 张飞 </option>
    <option value="444"> 马超 </option>
    <option value="555"> 黄忠 </option>

    </select>

	<br><br><br>
    <input type="button" value=" 获取选中值 " onClick="selectOne()">
    <input type="button" value=" 获取所有值 " onClick="printAll()">
    <input type="button" value=" 获取所有值2 " onClick="printAll2()">
    <br><br>
     <input type="button" value=" 追加选项(option) " onClick="appendOpt()">
    <br><br>
     <input type="button" value=" 显示html代码(不含自身)(html()) " onClick="use_html()">
     <input type="button" value=" 显示html代码(含有自身)(outerHTML) " onClick="use_outerHTML()">
  </fieldset>
</div>

<hr/>

</body>
</html>

風行九天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery $(this).attr $(this).val方法使用介绍
zq33312757的博客
06-01 666
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法，本文整理了一些相关的示例，感兴趣的朋友可以参考下: $(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法 $(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)
Jquery操作checkbox复选框
liufuwu1的博客
12-16 581
1、获取checkbox选中值 $("input:checkbox:checked").val(); $("input[type='checkbox']:checked").val(); $("input[type='checkbox'][name='xxx']:checked").val(); 2、设置Value值为'xxx'设置checkbox为选中值 $("input:ch
jQuery中each函数小记
weixin_30709635的博客
05-02 80
　　项目中自己在写一个很简单的表单验证的时候，需要遍历所有textarea并判断。因为用jQuery，所以第一反应就是用each函数遍历，当遍历到为空的textarea时，弹出提示并中断js的运行。一开始我是这样写的： 1 input.each(function(){ 2 if($(this).val() == null) 3 { 4 ...
input标签中checkbox中默认选中，有趣的checked
热门推荐
rusi__的博客
10-17 2万+
摘要 有时候我们设置复选框的时候需要使之默认选中，官方给的解释是要添加**checked=“checked”**这样一个属性，而事实上呢？ checked 可以 checked=“checked” 可以. checked=“1” 可以 checked=" " 可以 checked="0"可以 checked=“false”，都是可以的。 ------------。----------- 总结 ...
html清除多选默认选中状态,控制多选框（input[type=checkbox]）选中状态
weixin_30278943的博客
06-03 3455
多选框input[type=checkbox]也算是经常见面的HTML标签了，又因经常混淆(js与jquery混淆)其控制选中状态的方法。故整理一下，留个笔记...设置多选框为选中状态Javascript// 设置其checked属性document.querySelector('#test').checked = true // 选中document.querySelector('#test')...
前端的一些注意点和报错总结
05-13
前端注意事项和报错总结 作为一名 IT 行业大师，我将从给定的文件中提取相关知识点，并对标题、描述和标签进行详细解释。 标题：前端的一些注意点和报错总结 本标题表明了该文件的主要内容，即总结了前端开发中的...
编写Web前端代码的注意事项小结
09-22
编写Web前端代码的注意事项，一些很重要的细节。
抓娃娃机前端源码，注意 只有前端代码
03-18
点击开始后开始移动手臂 点击确定后开始抓娃娃 抓到后弹出表单可填写新
微前端接入注意事项文档
最新发布
04-01
微前端接入注意事项文档
web 前端年总结ppt模板
01-21
本资源摘要信息提供了 Web 前端年总结 PPT 模板的主要内容和知识点，包括技术研发部汇报人、技术研发部工作总结、项目中存在的问题及改进、技术研发部的不足及总结、技术研发部的展望、Web 前端技术、框架开发、代码...
jQuery为input赋值(调用函数)
qq_41644069的博客
11-07 7524
当我们为input赋值时，有时候的赋值为函数形式。以下示例为为input赋值为guid。 这里我们需要注意： ①使用原生js和使用jQuery赋值的区别，原生js：document.getElementById('testId').value=guid; ②使用jQuery赋值时，当使用input的id时，如何进行赋值：$('#testId').val(guid); ③使用jQuery赋值时，当使用input的name时，进行赋值：$('input[name="testName"]').val(gu
关于复选框选中状态的判断
aaxzsuj的博客
04-01 2644
关于复选框选中状态的判断 1.checked的选中状态 不设置checked是默认不选被选中的， 一旦设置checked="false"或者checked = false或者checked="true"或者checked = true或者不设置任何值，都会被解释为选中。 //未被选中 <input type=“checkbox” name=“test” id=“test2”/ chec...
勾选框秘密(radio && checkbox)
七十多岁的人了、
02-20 596
或许是你不晓得勾选框小技巧
使用JQuery获取被选中的checkbox的value值
weixin_30251587的博客
12-01 1088
上网查了一下，感觉一些人回答得真的是不知所云，要么代码不够简便。或者是有些想装逼成分等。 以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> <!-- 引入JQuery --> <script src="...
java中trim_java中string.trim()函数的作用实例及源码
weixin_30581253的博客
02-12 257
trim()的作用：去掉字符串首尾的空格。public static void main(String arg[]){String a=" hello world ";String b="hello world";System.out.println(b.equals(a));a=a.trim();//去掉字符串首尾的空格System.out.println(a.equals(b));}执行结果：...
this.value和$(this).val()的区别
weixin_33697898的博客
12-14 2113
2019独角兽企业重金招聘Python工程师标准>>> ...
JS的trim()方法
jingtian678的博客
09-14 1万+
JS trim()方法使用上有浏览器限制: 1.直接使用 string.trim()   　浏览器版本限制：JavaScript Version 1.8      2.间接使用&lt;即自己使用正则构造类trim的方法&gt; function myTrim(x) { return x.replace(/^\s+|\s+$/gm,''); } function m...
前端开发需要注意什么
07-28
在前端开发时，有几个重要的方面需要注意： 1. 响应式设计：确保你的网站或应用程序在各种设备上都能够良好地展示和交互，包括桌面、平板和移动设备。使用CSS媒体查询和弹性布局等技术来实现响应式设计。 2. 浏览器兼容性：不同浏览器对HTML、CSS和JavaScript的解析和支持程度可能存在差异。要确保你的网站或应用程序在主流浏览器（如Chrome、Firefox、Safari和Edge）中都能正常工作。 3. 性能优化：优化前端代码以提高网站或应用程序的加载速度和性能。这包括压缩和合并CSS和JavaScript文件、使用图像压缩、懒加载和缓存等技术。 4. 用户体验：关注用户体验，使界面易于使用和导航。确保页面内容的布局清晰、导航易于理解，同时提供一致的用户界面和反馈。 5. 安全性：在前端开发中要注意安全性，防止常见的安全漏洞，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。使用安全的编码实践，并对用户输入进行验证和过滤。 6. 可维护性和可扩展性：编写易于维护和扩展的代码，使用模块化的开发方法，遵循最佳实践和设计原则，如DRY（Don't Repeat Yourself）和SOLID原则。 7. 团队合作：如果你是在团队中开发前端，要与设计师、后端开发人员和其他相关人员进行良好的沟通和协作，确保项目的顺利进行。 总结起来，前端开发需要关注响应式设计、浏览器兼容性、性能优化、用户体验、安全性、可维护性和可扩展性等方面。通过注意这些要点，可以开发出高质量、高性能的前端应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值