jquery属性和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr以及css属性用法</title>
<style type="text/css">
.circle{
border: 1px solid red;
box-shadow: 3px 3px 6px #BB996C;
border-radius: 50%;
}
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<img src="../images/zly.jpg" width="200" alt="美女" title="明星" id="pic" data-nation="中国">
<div class="box1">
<div class="box2">
</div>
</div>
</body>
<!-- 本地用 -->
<!-- <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script> -->
<!-- 发布博客用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//1、 属性自定义属性操作
// attr用法
// attr中name用法
var res = $('img').attr("src");//获取img src 属性路径
// 参数properties用法:
var res = $('img').attr({src:"../images/gyy.jpg",alt:"高圆圆"});
// 参数key,value 用法:
var res = $("img").attr("src","../images/jsy.jpg");
var res = $("img").attr("alt","江疏影");
// 参数key,回调函数 用法:
var res = $("img").attr("src",function(){
return this.src;//返回src路径这里可执行各种逻辑操作
})
var res = $("img").attr("width",function(){
return 100;//执行设置img宽度
})
var res = $("img").removeAttr("alt");//移除对应属性
// var res = $("img").removeAttr("alt src");//移除多个属性
// 2、元素固有属性
var res = $("img").prop("data-nation");
var res = $("img").prop("nation");
//以上两种方式均无法获取在元素中的自定义元素
//但是在代码中的自定义元素可以获取到如下：
var res = $("img").prop("data-nation","中国000");
var res = $("img").prop("data-nation");//这样就能获取到了注意代码中定义的获取字段必须写全。
var res = $("img").removeProp("data-nation");//移除自定义属性 ，注意 此函数无法删除元素固有属性，仅仅只能单次移除单个属性，而且移除的属性值仅仅限于代码自定义的，界面上的元素当前方法无法移除
//所以如果要用 removeProp删除元素属性 多数执行的是如下操作
var res = $("img").prop("title",false);//设置false之后在对应的位置自行判断控件隐藏
var res = $("img").prop("title");
//3、元素中的数据存储data()
var res = $("#pic").data("nation");//获取界面中定义的自定义属性值 不用前缀 data 系统处理了但是获取自定义的属性值必须名字写全
var res = $("#pic").data("data-nation","123");//自定义属性
var res = $("#pic").data("data-nation");//获取自定义属性 自己定义的名称写全了
var res = $("#pic").removeData("data-nation");//移除仅仅能移除自己定义的属性
var res = $("#pic").data("data-nation");//打印参数未定义
var res = $("#pic").data("nation");//移除后系统自己的还在
//4、设置元素类样式
//4、1 通过设置标签的class属性，来设置对应标签的类样式规则
//4、2 通过设置style属性来控制
$("#pic").addClass("circle");//添加类样式
$("#pic").removeClass("circle");//移除类样式 可以多个移除 中间加 空格分隔
$('#pic').toggleClass('circle');//这个方法是如果没有当前类样式 那么 加上如果有了当前类样式 那么就去掉 -- 加上
$('#pic').toggleClass('circle');//这个方法是如果没有当前类样式 那么 加上如果有了当前类样式 那么就去掉 -- 去掉
var res = $('#pic').hasClass("circle");// 判断 hasClas hasData 等等具体要看手册了
// 以上方法可以判断是否添加了类样式 如果 没添加 执行添加
// 5、css
// 参数name 用法:
var res = $("img").css("color");//获取某个样式的对应值
// 参数properties 用法:
var res = $("img").css({"width":"500px","height":"100px"}); //设置内部某个元素的属性，例如宽 高
// 参数name,value 用法:
var res = $("img").css("width","200px"); //键值对形式设置
// 参数name,回调函数 用法:
// $("img").click(function(){
// $(this).css("width","50");
// })
$("img").click(function(){
$(this).css({
width:function(index,value){
return parseFloat(value)*1.2;
},
height:function(index,value){
return parseFloat(value)*1.2;
},
})
})
//注意内部元素完了之后 要加的是 逗号
$("img").css({
'width':'100px',
'height':'150px',
'box-shadow':'10px 10px 10px #444444'
})
$("img").width(90);//单位值可以不加默认就是px
// 跟var res = $("img").css("width","200px");类似
var res = $('img').offset();
var res = $('img').offset().left;
var res = $('img').offset().top;
//查看元素在父级块中的偏移量
var res = $('.box2').position().left;
var res = $('.box2').position().top;
//offset()和position()方法仅适用于页面中的可视元素,并且仅能获取,不能设置
//类似的还有scrollLeft()返回水平滚动条位置,scrollTop()返回垂直滚动条的位置,大家自行测试
console.log(res);
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
