web前端常用知识积累

web前端常用知识积累

1、常用click事件

<input name="xxx" value="111" onclick="showValue(this)">

<script>
    function showValue(obj){
        //此处obj传递的是 input框本身对象，使用 $(obj).val(),调用val()方法，可以获取input框的value		属性值
        var value = $(obj).val();
    }
</script>

2、CSS属性

<div id="imgDiv">
	<img src=""/>
</div>

<script>
    //控制DIV的显隐，使用css属性
    function changeAttribute(){
        $("#imgDiv").css("display","block");//显示
        $("#imgDiv").css("display","none");//隐藏
    }
</script>

3、PROP属性

<input type="checkbox" id="checkbox" name="全选" value = "true" checked/>

<script>
    //控制checkbox，使用prop属性
    function changeStatus(){
        $("#checkbox").prop("checked","true");//勾选
        $("#checkbox").prop("checked","");//不勾选
    }
    //获取checkbox的勾选值
    funcitno getStatus(){
        var flag = $("#checkbox").prop("checked");
    }
</script>

<input type="checkbox" id="checkbox1" name="orglist" value = "true" checked/>
<input type="checkbox" id="checkbox2" name="orglist" value = "true" checked/>
<input type="checkbox" id="checkbox3" name="orglist" value = "true" checked/>

<script>
    //批量控制属性
    function changeGroupStatus(){
        $("input[name='orglist']").prop("checked","true");//勾选
        $("input[name='orglist']").prop("checked","");//不勾选
        
        $("input[name='orglist']").removeAttr("checked");//不勾选
    }
    
</script>