DOM
<body> <div class="box" data-bai="这里是一个盒子"> <p class="blue width" id="lgbd" onclick="dianji()" title="这里是一段文字" >这里是一段文字</p> <p class="red" id="aaa" onclick="dianji2()" title="第二段文字">第二段文字</p> <p class="zdy border " title="删除类名" onclick="dianji3()" >添加删除类名</p> </div>
css
.box{
position: relative;
top: 20px;
}
.blue{
color: lightblue;
}
.font{
color: red;
}
.border{
box-shadow: 1px 1px 1px black;
}
p{
border: 1px solid black;
}
.width{
width: 30px;
}
.green{
color: lawngreen;
}javascript
// 通过标签选择器选择p标签,通过.attr方法,获得p标签的title的属性值
function dianji(){
// $("p").attr("title");
// 修改title属性值
$(".blue").attr("title","这里不是一段文字");
// 设置title的值为一个回调函数
$(".blue").attr("title",function(){return this.value;});
// 访问自定义属性
$(".box").attr("data-bai");
// 删除title id属性
$(".blue").removeAttr("title id data-bai");
// 添加一个类名
$(".blue").addClass("font");
// 添加多个类名
$(".blue").addClass("border green");
// 删除类名
$(".blue").removeClass("width");
}
function dianji2(){
// prop只能读取固有属性.如果要读取自定义属性,需要另行操作
// 如果要删除固有属性,只能将固有属性值设置为false;
$(".red").prop("title","啦啦啦");
$(".red").prop("id", false);
// removeProp,不能删除固有属性,一旦删除,则不能恢复
}
function dianji3(){
// 设置一个css样式
$(".zdy").css("width","100px");
// 设置多个css样式
$(".zdy").css({"height":200,"border":"1px solid yellow"});
// 获得符合条件的第一个元素内容的高度,宽度值,加入参数,则是设置所有符合条件的元素的内容的宽高值
console.log($(".zdy").height());
console.log($(".zdy").width());
// offset()获得元素的偏移量,有两个值top left.指定时单独获得
console.log($(".zdy").offset()); //同时获得
console.log($(".zdy").offset().left);
console.log($(".zdy").offset().top);
// position(),获取元素相对于最近的一个position为relitive或absolute的父节点的相对偏移量
// 有两个值,top left
console.log($(".zdy").position());
}
