jquery13 attr() prop() val() addClass()等 : 对元素属性的操作 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>

jQuery.fn.extend({
    attr
    removeAttr
    prop
    removeProp
    addClass
    removeClass
    toggleClass
    hasClass
    val
});
jQuery.extend({
    valHooks
    attr
    removeAttr
    attrHooks
    propFix
    prop
    propHooks
});

$(function(){
    $('#div1').attr('title','hello');
    alert( $('#div1').attr('id') );
    
    $('#div1').prop('title','hello');
    alert( $('#div1').prop('id') );
----------------------------------------------------------
    //setAttribute()
    //. |  []
    
    var oDiv = document.getElementById('div1');
    oDiv.setAttribute('title','hello');
    oDiv.title = 'hello1';
    oDiv['title'] = 'hello2';
----------------------------------------------------------    
    $('#div1').attr('miaov','妙味');//可以加自定义属性
    $('#div1').prop('miaov','妙味');//不可以加自定义属性
    
    alert($('#div1').attr('miaov'));//可以获取自定义属性
    alert($('#div1').prop('miaov'));//不可以获取自定义属性
---------------------------------------------------------    
    alert($('#div1').prop('href'));//a标签href属性，
    alert($('#div1').attr('href'));
---------------------------------------------------------
    $('#div1').removeAttr('id');
    alert($('#div1').attr('id'));
    //对自带属性用attr操作，
    $('#div1').removeProp('id');
    alert($('#div1').prop('id'));//删不掉，
---------------------------------------------------------    
    $(document).attr('title','hello');
    
    $('#div1').attr('miaov'，null);//调用remove
    //checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped
    
    alert(  $('input').attr('checked')  );   //checked
    alert(  $('input').prop('checked')  );   //true
    $('input').attr('checked','checked');//没问题
    $('input').attr('checked',true);//没问题，做兼容了
    
    $('#div1').removeAttr('class');
    
});

</script>
</head>

<body>
<a id="div1" miaov="妙味" class="box" href="miaov.com">aaaaaaaaaaaaaaaaa</a>
<input type="checkbox">
<input type="text" tabindex="2">
<input type="text" tabindex="1">
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>

$(function(){
    $('#div1').addClass('box2 box3');
    $('#div1').removeClass('box3');
    
    $('#div1').toggleClass('box3');//切换，有就删除没有就添加，
    
    alert( $('#div1').hasClass('box3') );
    
    $('div').addClass(function(index){
        alert(index);
        return 'box'+index;
    });
    

    alert( 1 || 0 && 2 );//1，先后面在前面，&&优先级高于||
    
    $('#div1').removeClass('box1 box2');
    $('#div1').removeClass('');//全部删除
    
    $('#div1').toggleClass('box2 box3')//有就删除没有就添加
    $('#div1').toggleClass('box2 box3',true);//有没有都是add
    $('#div1').toggleClass('box2 box3',false);//有没有都是删除
    
    $('#div1').toggleClass(false);//已有的class全部删除
    $('#div1').toggleClass(true);//删除的class全部添加进去
});

</script>
</head>

<body>
<div class="">aaaaaaaaaaaa</div>
<div class="">aaaaaaaaaaaa</div>
<div class="">aaaaaaaaaaaa</div>

<div id="div1" class="box1    box2">aaaaaa</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>

$(function(){
    
    alert( $('#input1').val() );
    $('#input1').val('hi');
    alert( $('#input1').val() );
    
    //兼容处理 valHooks : option select radio checkbox
    alert( $('checkbox').get(0).type );//checkbox
    alert( $('select').get(0).type );//select-one
    
    
    alert( $('option').eq(0).get(0).nodeName );
-------------------------------------------------------------------------    
    $('#input2').click(function(){
        
        alert( $('select').val() );//select多选时弹出数组
        
    });
    $('#select').val(111);//111被选中了
----------------------------------------------------------------------    
    $('#input1').val(123123);
    
    $('#input2').val(['hello']);
    
    $('select').val(222);
});

window.onload = function(){ //window.onload 是原生写法，$(function()是jQuery写法
    var oP = document.getElementsByTagName('option')[0];
    alert( oP.attributes.value.specified );
};

</script>
</head>

<body>
<input type="text" id="input1" value="hello">
<select multiple>
    <option>111</option>
    <option disabled>222</option>
    <option>333</option>
</select>
<input type="checkbox" id="input2" value="hello">
</body>
</html>

 

posted @ 2017-06-02 23:09  无天666  阅读(575)  评论(0)    收藏  举报