jQuery 元素属性与CSS操作
标准属性
prop()
获取与设置jQuery
对象中元素的标准属性值
标准属性是指一些
DOM
元素自带的属性或window
对象,如<a>
的title
、href
、target
等等可以单个设置标准属性的值,也可以使用
{}
一次性设置多个标准属性的值
<body>
<a>博客园</a>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
$("a").prop({"href":"//www.cnblogs.com/","title":"博客园主页"}); // 设置多个
$("a").prop("target","_blank"); // 单一设置
// <a href="//www.cnblogs.com/" title="博客园主页" target="_blank">博客园</a>
</script>
removeProp()
将一个标准属性的值设置成undefined
该方法只在
jQuery1.x
版本中有效,新的标准属性值为undefined
1.6
新增,2
和3
中设置均无效
<body>
<a>这是一个链接</a>
<button type="button">点我添加标准属性</button>
<button type="button">点我删除标准属性</button>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
"use strict";
$("button").eq(0).on("click", (event) => {
$("a").prop("title","已添加");
// <a title="已添加">这是一个链接</a>
});
$("button").eq(1).on("click", (event) => {
$("a").removeProp("title");
// <a title="undefined">这是一个链接</a>
});
</script>
特征属性
attr()
获取与设置jQuery
对象中元素的特征属性值
特征属性是值一些用户自定义的属性,在设置时应该注意与标准属性的命名冲突问题
可以单个设置特征属性的值,也可以使用
{}
一次性设置多个特征属性的值
<body>
<div></div>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
$("div").attr({"data-color":"red","data-size":"w:100,h:50"}); // 设置多个
$("div").attr("data-show","true"); // 单一设置
// <div data-color="red" data-size="w:100,h:50" data-show="true"></div>
</script>
removeAttr()
将一个特征属性及其属性值删除
<body>
<a>这是一个链接</a>
<button type="button">点我添加标准属性</button>
<button type="button">点我删除标准属性</button>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
$("button").eq(0).on("click", (event) => {
$("a").attr("data-linkName","链接");
// <a data-linkname="链接">这是一个链接</a>
});
$("button").eq(1).on("click", (event) => {
$("a").removeAttr("data-linkName");
// <a>这是一个链接</a>
});
</script>
属性集
建议对特征属性进行特殊命名操作,如添加上data-
前缀,与标准属性区分。
如果您这样做,可以利用属性集对特征属性进行更加方便的管理。
data()
所有的以data-
开头的特征属性都会存放进行data()
属性集中,我们可以通过data()
进行获取与设置其属性值。
<body>
<div class="show top" data-color="red" data-font_size="15"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").data()); // {font_size: 15, color: "red"} 获取所有
console.log($("div").data("color")); // red 获取一个
$("div").data("font_size","100"); // 设置一个
console.log($("div").data()); // {font_size: "100", color: "red"}
$("div").data({"font-size":"120","color":"black"}); // 设置多个
console.log($("div").data()); // {{font_size: "100", color: "black", fontSize: "120"}
</script>
removeData()
删除属性集中的一个属性。
<body>
<div></div>
<button id="btn1">向 div 元素添加数据</button><br />
<button id="btn2">从 div 元素删除数据</button>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
$(document).ready(function () {
$("#btn1").click(function () {
$("div").data("greeting", "Hello World");
alert("Greeting is: " + $("div").data("greeting"));
});
$("#btn2").click(function () {
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});
});
</script>
节点内容
html()
获取jQuery
对象DOM
标签中的HTML
内容,并且也可以向标签中添加HTML
内容,同时触发浏览器的解析器重绘DOM。
与JavaSctip
中的innerHTML
属性效果相同。
<body>
<div><span>获取</span></div>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
console.log($("div").html()); // 获取内容 <span>获取</span>
$("div").html("<mark>设置</mark>"); // 设置内容
console.log($("div").html()); // 获取内容 <mark>设置</mark>
</script>
text()
访问或添加文本内容到jQuery
对象里的元素中。
与JavaScript
中的innerText
和textContentd
属性效果相同。
获取时忽略所有标签
设置时将内容中的标签当文本对待不进行解析
<body>
<div><span>获取</span></div>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
console.log($("div").text()); // 获取内容 获取
$("div").text("<mark>设置</mark>"); // 设置内容,会当做普通文本添加,而不是标签元素
console.log($("div").text()); // 获取内容 <mark>设置</mark>
</script>
表单内容
val()
获得匹配元素的当前值,常用于表单标签。
<body>
<input type="text" value="云崖先生">
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($(":text").val()); // 云崖先生
</script>
批量样式
hasClass()
检测元素是否具有某一class
属性值,返回boolean
类型
<body>
<div class="show"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").hasClass("show")); // true
</script>
addClass()
为jQuery
对象中的元素添加class
<body>
<div class="show"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").addClass("box_1"));
// S.fn.init [div.show.box_1, prevObject: S.fn.init(1)]
</script>
removeClass()
将jQuery
对象中的某一class
进行移除
<body>
<div class="show"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").removeClass("show"));
// S.fn.init [div, prevObject: S.fn.init(1)]
</script>
toggleClass()
如果存在(不存在)就删除(添加)一个类。
<body>
<div class="show"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
$("div").toggleClass("show"); // 删除
$("div").toggleClass("box_1"); // 添加
console.log($("div"));
// <div class="box_1"></div>
</script>
样式设置
css()
访问匹配元素的某一样式或对其进行设置,可以单个设置CSS
样式,也可以使用{}
一次性设置多个CSS
样式
如果有多个单词,可以使用驼峰形式,也可以使用
CSS
中的单词命名方式如:
background-color
或backgroundColor
均可
<body>
<div style="color: red;font-size:15px;background-color: blue;">HELLO</div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").css("color")); // 获取
$("div").css("color","#fff"); // 设置一个
$("div").css({"background-color":"black","font-size":"16px"}); // 设置多个;
</script>
元素位置
视口距离
使用offset()
可获取与设置当前元素位于视口的位置。
返回的对象包含两个整型属性:
top
和left
,以像素计。此方法只对可见元素有效。
<body>
<div style="transform: translate(100px,100px);">HELLO</div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").offset()); // {top: 108, left: 108}
// 设置元素距离视口的位置
$("div").offset({ "top": 10, "left": 30 });
console.log($("div").offset()); // {top: 10, left: 30}
</script>
父级距离
使用position()
获取标签对象对于已定位的父级元素的位置信息。
<body>
<div style="position:relative;">
<span style="transform: translate(40px,20px);position:absolute;">HELLO</span>
</div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("span").position()); // {top: 20, left: 40}
</script>
滚动条相关
scrollTop()
获取或设置当前对象的纵向滚动条的位置
<body>
<button type="button">点我跳转底部</button>
<div style="height: 3000px;"></div>
<footer>底部</footer>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
// 设置window对象的滚动条事件
window.addEventListener("scroll", function () {
console.log($(window).scrollTop());
});
document.querySelector("button").addEventListener("click", function () {
$(window).scrollTop(3000);
console.log("当前滚动条位置:",$(window).scrollTop()); // 2774
})
</script>
scrollLeft()
获取或设置当前对象的横向滚动条的位置
<body style="width: 1800px;overflow: scroll">
<button type="button">点我跳转最右侧</button>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
// 设置window对象的滚动条事件
window.addEventListener("scroll", function () {
console.log($(window).scrollLeft());
});
document.querySelector("button").addEventListener("click", function () {
$(window).scrollLeft(3000);
console.log("当前滚动条位置:", $(window).scrollLeft()); // 445
})
</script>
元素尺寸
height()&width()
height()
取得匹配元素当前计算的内容区域高度值(px
)
width()
取得匹配元素当前计算的内容区域宽度值(px
)
<body>
<div style="width: 200px;height: 300px;"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").height()); // 300
console.log($("div").width()); // 200
</script>
innerHeight()&innerWidth()
innerHeight()
取得匹配元素当前计算的内容区域以及内边距之内的补白区域高度值(px
)
innerWidth()
取得匹配元素当前计算的内容区域以及内边距之内的补白区域宽度值(px
)
包括内容区域,内边距补白区域
<body>
<div style="width: 200px;height: 300px;padding: 10px;"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").innerHeight()); // 320
console.log($("div").innerWidth()); // 220
</script>
outerHeight()&outerWidth()
outerHeight()
取得匹配元素当前计算的内容区域以及内边距之内的补白区域和边框区域高度值(px
)
outerWidth()
取得匹配元素当前计算的内容区域以及内边距之内的补白区域和边框区域宽度值(px
)
包括内容区域,内边距补白区域,边框区域
<body>
<div style="width: 200px;height: 300px;padding: 10px;border: 10px solid #ddd;"></div>
</body>
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").outerHeight()); // 340
console.log($("div").outerWidth()); // 240
</script>