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

Posted 672530440

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(miaovnull);//调用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>

 

以上是关于jquery13 attr() prop() val() addClass()等 : 对元素属性的操作的主要内容,如果未能解决你的问题,请参考以下文章

jquery属性操作之html,text,val方法

jQuery中attr和prop方法的区别

jQuery中的prop()和attr()的区别

关于jQuery中attr(),prop()的使用

jquery attr与prop的区别

Jquery学习笔记--jquery1.6中的.prop()和.attr()异同