《从零开始学习jQuery》:用jQuery操作元素的属性与样式

前端开发 作者: 2024-08-20 19:30:01
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也
<img id='img' src="1.jpg" alt='1' class="imgs"></img> 

attr

attr(name)    取得第一个匹配元素的属性值.    
$("input").attr("value")

attr(property)    将一个"名/值"形式的对象设置为所有匹配元素的属性    
$("input").attr({ value: "txt",title: "text" });

attr(key,value)    为所有匹配的元素设置一个属性值    
$("input").attr("value","txt");

attr(key,fn)    为所有匹配的元素设置一个计算的属性值    
$("input").attr("title",function () { return this.value });

removeAttr(name)    从所有匹配的元素中删除一个属性    
$("input").removeAttr("value");
$("#txt1").attr("value")
$("#txt1").attr("value","1234");

$("#dv1").attr("innerHTML",'this is a div');
$("#dv1").attr("innerHTML");

val(),html(),text()

val()    获取第一个匹配元素的value值    
$("#txt1").val()

val(val)    为匹配的元素设置value值    
$("#txt1").val("txt1")

html()    获取第一个匹配元素的html内容
$("#dv1").html()

html(val)    设置每一个匹配的元素的html内容    
$("#dv1").html("this is a div")

text()    取得所有匹配文本节点的内容,并将其连接起来    
$("div").text()

text(val)    将所有匹配元素的置为val    
$("div").text("divs")

修改CSS类

addClass(classes)    为每个匹配的元素添加指定的类名    
$("input").addClass("colorRed borderBlack");

hasClass(class)    判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回true    
alert($("input").hasClass("borderBlack"));

removeClass([classes])    从匹配元素中移除所有或指定的css类    
$("input").removeClass("colorRed borderBlack");

toggleClass(classes)    如果存在(不存在)就删除(添加)指定类    
$("input").toggleClass("colorRed borderBlack");

toggleClass(classes,switch)    当switch是true时,添加类,switch为false时,删除类    
$("input").toggleClass("colorRed borderBlack",1)">true);
//每当按钮被点击三次时,添加样式
    var i = 0;
    $("#btn").click(function () {
        $("input").toggleClass("colorRed borderBlack",1)">true);
    });

修改CSS样式

css(name)    访问第一个匹配元素的样式属性    
$("input").css("color")

css(properties)    把一个"名/值"对设置给所有匹配元素的样式属性    
$("input").css({border:"solid 3px silver",color:"red"})

css(name,value)    为匹配的元素设置同一个样式属性,如果是数字,将自动转换为像素值    
$("input").css("border-width","5");
$("input").css("border-width","5");
<input style="BORDER-RIGHT-WIDTH: 5px; 
    BORDER-TOP-WIDTH: 5px; 
    BORDER-BOTTOM-WIDTH: 5px; 
    BORDER-LEFT-WIDTH: 5px" 
    id="txt1" />

获取常用的属性

宽、高相关关

width()    获取第一个匹配元素的宽度,默认为px    
$("#txt1").width()

width(val)    为匹配的元素设置宽度值,默认为px    
$("#txt1").width(200)

height()    获取第一个匹配元素的高度,1)">).height()

height(val)    为匹配的元素设置宽度值,默认为px    
$("#txt1").height(20)

innerWidth()    获取第一个匹配元素内部区域宽度(包括padding,不包括border)    
$("#txt1").innerWidth()

innerHeight()    获取第一个匹配元素内部区域高度(包括padding,1)">).innerHeight()

outerWidth([margin])    获取第一个匹配元素外部区域宽度(包括padding,border)
margin为true则包括margin,否则不包括    
$("#txt1").outerWidth()

outerHeight([margin])    获取第一个匹配元素外部区域高度(包括padding,否则不包括    
$("#txt1").outerHeight(true)

位置相关

offset()    获取匹配元素在当前窗口的相对偏移
只对可见元素有效    
$("#btn").offset().top
$("#btn").offset().left

position()    获取匹配元素相对父元素的偏移
只对可见元素有效    
$("#btn").position().top
$("#btn").position().left

scrollTop()    获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效    
$("div").scrollTop()

scrollTop(val)    设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效    
$("div").scrollTop(200)

scrollLeft()    获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效    
$("div").scrollLeft()

scrollLeft(val)    设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效    
$("div").scrollLeft(200)
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65682.html