操作样式、操作属性

原生样式:

获取:

var   oBox=document.getElementsByTagName("div")[0];

设置:

oBox.style.width="100px";

删除:

oBox.style.width="";


jQuery:

获取:

$("div");

设置:

设置单个:

$("div").width(200);

$("div").css("width","200px");

设置多个:

$("div").css({"width":"200px","height:200px"});//属性和属性之间用逗号分开,属性和属性值之间用f冒号分开

使用函数来设置

$("div").css("width",function(){return 500;})


操作属性:

原生:

.操作的是原生属性

[]操作变量属性

function fn(id,ev){

var btn=id;

btn[ev]=function(){

alert(1);

}}

fn("div","onclick");

fn("p","onmouseover");

<div id="div"></div>

<p id="p"></p>


jQuery操作:

获取:

$("input").attr("type");

设置:

$("input").attr("type","text");//单个设置

$("input").attr({"value":"ccc","attn":"123"});//多个设置

添加:

$("input").attr({"value":"ccc","www":"123"});//多个设置

删除:

$("input").removeAttr("value");//单个

函数操作属性

$("img").attr("width",function(n,v){return v=10});


操作class

原生:

className

jQuery:

添加class

addClass();

$("div").addClass("aaa");

删除class

removeClass();

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 3,365评论 0 1
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,069评论 2 19
  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 4,468评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,913评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,222评论 0 2