1. attribute【属性】
1.1 addClass()
<!--语法格式：addClass("属性名")/addClass(函数名)-->
<!--用法总结：为标签添加类属性进行样式设置/为标签添加函数进行功能设置-->
<!--注意事项：多个属性时用数组写法即中括号或用空格进行分割/不可直接调用标签中的类属性必须在style中新建类属性/添加类属性后会使函数里或类属性中的内容产生相同样式效果-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
.selected {
color: red;
}
.selected1{
font-size:100px;
}
.selected2{
background-color: green;
}
</style>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<p>Hello</p>
<p id="paragraph">World</p>
<p class="paragraph1">Up</p>
<script>
$(".paragraph1").addClass("selected2");
$("#paragraph").addClass(function (){$(this).text("World")})
$("p").addClass(["selected","selected1"])
$("p").addClass("selected selected1")
</script>
</body>
</html>
1.2 attr()
<!--语法格式：attr("属性名","属性值")/attr("属性名")-->
<!--用法总结：找到标签进行属性设置/属性值可用函数替代/可取出标签中已定义的属性的属性值-->
<!--注意事项：清空操作请将属性值置空/使用多个属性设置请用对象写法即大括号/注意变量的范围限制-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<p id="paragraph">Hello</p>
<p class="paragraph1">World</p>
<p class="paragraph2" style="background-color:#F7BA0B">Up</p>
<p class="paragraph3" style="font-size: 100px">Go</p>
<p class="paragraph4" ></p>
<input type="button" value="Do"/>
<script>
$("#paragraph").attr("style","color:red")
$(".paragraph1").attr({align:'center',style:'color:RGB(221,121,7)'})
$(".paragraph2").attr("style","")
$(".paragraph3").attr("style",function () {console.log("success")})
var word=$("input").attr("value")
$(".paragraph4").text(word)
</script>
</body>
</html>
1.3 hasClass()
<!--语法格式：hasClass("属性名")-->
<!--用法总结：查找出某个使用了类选择器的标签-->
<!--注意事项：了解标签位置请用index()函数且位置从0开始/函数里面加上分号以便区分语句/空格可用双引号中的空格或者使用连字符号即加号连上一个空的双引号进行实现/变量定义语句可放在函数外也可放在函数内-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hasClass demo</title>
<style>
.paragraph{
color: red;
}
</style>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<p class="paragraph">Hello</p>
<p id="paragraph1">World</p>
<button>Select</button>
<script>
$(function () {$("button").click(function () { var positionNumber=$("p").index();var flag=$("p").hasClass("paragraph");alert("position:"+positionNumber+" is "+flag)})})
var flag=$("#paragraph1").hasClass("paragraph")
console.log("This label : "+flag)
</script>
</body>
</html>
1.4 html()
<!--语法格式：html()/html("标签")/html(function(){})-->
<!--用法总结：查询HTML的元素/找到HTML元素中的标签/HTML元素中嵌入函数-->
<!--注意事项：<script>标签应该放在<body>而不是<head>中-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<script src="jquery-3.6.0.js"></script>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<div id="div">
<p>I am a HTML element!</p>
<p id="paragraph">Hello</p>
</div>
<div id="div1"></div>
<button>HTML</button>
<script>
$( "button" ).click(function() {var htmlString = $("#div").html();$( "p" ).text( htmlString );});
$( "#div1" ).html( "<p class='red'>World</p>" );
$( "#paragraph" ).html(function(){alert("I am paragraph!")});
</script>
</body>
</html>
1.5 prop()
<!--语法格式：prop("属性名")/prop("属性名","属性值")/prop({属性名:属性值,})/prop("style",function(){功能语句})-->
<!--用法总结:可找到标签对象属性的属性值/设置标签属性的属性值/可设置多个属性的属性值/可设置函数-->
<!--注意事项:如果不会写可根据之前正确写法进行尝试/单双引号皆可/注意看控制台报错信息/prop会覆盖掉已设置的属性值/如果程序正确所有代码都会执行反之亦然-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prop demo</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<p id="paragraph">Hello</p>
<p class="paragraph1" style="font-size: 100px;color:orange" >World</p>
<script>
var property=$("p").prop("id")
$("p").prop("style","color:red")
$(".paragraph1").prop({'align':'center',style:"color:orange"})
$(".paragraph1").prop("style",function () {console.log("I am function!")})
alert(property)
</script>
</body>
</html>
1.6 removeAttr()
<!--语法格式：removeAttr("属性名")-->
<!--用法总结：去除标签已设置的属性-->
<!--注意事项：<script>标签的放置位置/删除属性便是删除所有设置好的属性值/不支持函数定义-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeAttr demo</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<p style="color: red;font-size: 100px" align="center">Hello</p>
<script>
$("p").removeAttr("style")
$("p").removeAttr("align")
</script>
</body>
</html>
1.7 removeClass()
<!--语法格式：removeClass()/removeClass("类名")/removeClass("类名1 类名2")/removeClass(["类名1","类名2"])-->
<!--用法总结：去除标签已设置的类属性样式-->
<!--注意事项：多个类属性定义用空格进行分隔/多个类属性定义用[]进行分隔/不支持函数定义-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeClass demo</title>
<style>
.red{
color: red;
}
.blue {
background-color: blue;
}
.green{
font-size: 100px;
}
</style>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<h1 class="green">Up</h1>
<p id="paragraph" class="red blue">Hello</p>
<p id="paragraph1" class="blue">World</p>
<script>
$( "h1" ).removeClass();
$( "#paragraph1" ).removeClass( "blue" );
$(function(){$("#paragraph").removeClass( "blue red");})
$(function(){$("#paragraph").removeClass(["blue","red"]);})
</script>
</body>
</html>
1.8 removeProp()
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
