HTML5小记十五
2017-03-20 本文已影响0人
涛涛灬灬
1.使用js将css中的控件属性进行获取和修改的操作:
index.html:
<div id="scrape" onclick="clickScrape()">
抢单
</div>
css :
#scrape{
color:white;
}
js:
function clickScrape(){
var Money = document.getElementsByTagName("wode");
console.log("这个是输出了"+Money);
Money.style.color="red";
当div嵌套在ul ;li中时,这种方法失效;
}
- 仿照即达个人中心的css界面
index.html:
<body>
<div id="header">
<p class="title">我的</p>
<button type="button">设置按钮</button>
</div>
<div id="personerMsg">
<button type="button" class="imgBtn">个人图片</button>
<p class="phone">13117407363</p>
<div class="grade">
<p class="grade count">Lv 初出茅庐</p>
</div>
<ul>
<li>
<div class="money today">
<p class="p1">$100.00</p>
<p id="p2">今日收益</p>
</div>
</li>
<li>
<div class="money MyMoney">
<p class="p1">$200.00</p>
<p class="p2">可提现收益</p>
</div>
</li>
<li>
<div class="money allisMine">
<p class="p1">$300.00</p>
<p class="p2">总收益</p>
</div>
</li>
</ul>
</div>
<div id="list_item">
<ul>
<li>
<div class="kind ">
<p class="left">我的钱包</p>
</div></li>
<li>
<div class="left">
<p>历史订单</p>
</div>
</li>
<li>
<div class="right">
<p>培训学习</p>
</div></li>
<li>
<div class="left">
<p>达人认证</p>
</div></li>
<li>
<div class="left">
<p>信用金认证</p>
</div></li>
<li>
<div class="right">
<p>分享好友</p>
</div></li>
<li>
<div class="left">
<p>规则说明</p>
</div></li>
<li>
<div class="left">
<p>邦办商城</p>
</div></li>
<li>
<div class="right">
<p>联系客服</p>
</div></li>
</ul>
</div>
<div id="footer">
<ul>
<li> <div class="scrape" onclick="clickScrape()">
<p>抢单</p>
</div></li>
<li> <div class="work">
<p>工作</p>
</div></li>
<li> <div class="mine">
<p class="wode"> 我的</p>
</div></li>
</ul>
</div>
</body>
base.css :
/*我的*/
#header{
height: 68px;
width: 100%;
background: purple;
}
#header .title{
color: white;
text-align: center;
padding-top: 20px;
font: 14;
}
#header button{
float: right;
background-image: inherit;
margin-top: -40px;
}
/*个人图片*/
#personerMsg{
height: 260px auto;
width: 100%;
background: purple;
text-align: center;
}
.imgBtn{
width: 70px;
height: 70px;
border-radius: 35px;
/*margin-left: 50%;*/
}
.phone{
text-align: center;
margin-top: 0px;
}
.grade{
text-align: center;
margin-top: -15px;
}
#personerMsg ul li{
height: 60px;
width: 32%;
display: inline-block;
}
.money p{
margin-top:-10px ;
}
/*选项列表*/
#list_item{
margin-top: -20px;
height: 300px;
width: 100%;
background: white;
text-align: center;
display: inline-block;
}
#list_item ul li{
height:70px;
width: 31%;
display: inline-block;
border: 1px solid;
margin-top: -1px;
margin-left: -6px;
}
#list_item div{
line-height: 35px;
}
div .right{
}
/*底部按钮tabber*/
#footer{
height: 40px;
width: 100%;
background: palevioletred;
}
#footer ul li {
text-align: center;
width: 32%;
height: 20px;
color: white;
line-height: 15px;
display: inline-block;
}
js:
暂无
- document.getElementsByTagName()获取到某个控件
index.html{
<div id="header" class="class1"
获取到div
</div>
}
js {
document.getElementsByTagName("div");
// document.getElementById("header");
//document.getElementByClassName("class1");
}
类似属性 document.getElementById(), getElementsByClassName()
4.
function ajaxTest(){
$.ajax({
type:"get",
url:"https://www.baidu.com/",
success:function (){
console.log("请求成功");
},
complete:function (){
console.log("完成了请求");
},
beforeSend:function (){
console.log("请求之前");
},
error:function (){
console.log("出问题了");
},
async:true
});
}
此时请求因为跨域问题 请求失败 此时的输出为
1.请求之前
2.出问题了
3.完成了请求
因此在beforeSend:function (){
//执行处理加载等待的动画
},
配合success: complete:使用
