jq-css、class、属性操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aa{
background-color: pink;
}
.bb{
font-size: 30px;
}
.cr{
color: red;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<input type="button" value="添加类">
<input type="button" value="移除类">
<input type="button" value="判断cr类">
<input type="button" value="切换类">
<input type="button" value="修改属性">
<input type="text">
<ul>
<li class="aa bb">周二珂</li>
<li class="aa bb">周二珂</li>
<li class="aa bb">周二珂</li>
<li class="aa bb">周二珂</li>
</ul>
<input type="button" value="选中" id="ck1">
<input type="button" value="不选中" id="ck2">
<input type="checkbox" id="ck">

<script>
//css操作
//第一种---操作单个样式
/**
* css("name","value")---修改单个样式
* $("li").css("background","pink")
* .css("fontSize","30px")
* .css("color","#fff");
*/

//第二种---操作多个样式
/**
* css(obj)---修改多个样式
* $("li").css({
* background:"pink",
* color:"red",
* fontSize:"30px"
* })
*/

//第三种---获取样式
/**
* css(name)---获取样式
* $("li").css("fontSize")---获取字体的大小
*
* 隐式迭代：
* 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
* 获取的时候：只会返回第一个元素对应的值。
*
* 如果给每个li标签设置不同的字体大小，当获取时，获取的是第一个li标签的字体大小
*/

</script>

<script>
// 添加类---addClass("类名");
$("input").eq(0).click(function(){
$("li").addClass("cr");
});
// 移除类---removeClass("类名");
$("input").eq(1).click(function(){
$("li").removeClass("cr");
});
// 判断类---hasClass("类名");
$("input").eq(2).click(function(){
console.log($("li").hasClass("cr"));
});
// 切换类---toggleClass("类名");----判断有没有这个类，有则移除，没有则添加
// toggle--切换
$("input").eq(3).click(function(){
$("li").toggleClass("cr");
});
</script>

<script>
// 设置属性---attr
$("input").eq(4).click(function () {
$("input").eq(5).attr("value","++++++");
$("input").eq(5).attr({
// 通过对象的方法设置多个属性
// 可以添加自定义属性
aa:"bb",
bb:"cc"
});
});
// 获取属性值---attr

// 对于布尔类型的属性，不要用attr，用prop，用法与attr一样
// 若是用attr则只会执行一次
$("#ck1").click(function () {
$("#ck").prop("checked",true);
});
$("#ck2").click(function () {
$("#ck").prop("checked",false);
});
</script>

</body>
</html>

巴特西

jq-css、class、属性操作

最新文章

热门文章