HTML5小记十五

1.使用js将css中的控件属性进行获取和修改的操作:

index.html:
                 

                抢单
        
css :
#scrape{
color:white;
}
js:
    function clickScrape(){
            var Money = document.getElementsByTagName("wode");
        console.log("这个是输出了"+Money);
            Money.style.color="red";
当div嵌套在ul ;li中时,这种方法失效;
}

2. 仿照即达个人中心的css界面

index.html:

        

            
我的
            设置按钮
        
        

            个人图片
            
13117407363
            

                
Lv 初出茅庐
            
            

                

                    

                        
$100.00
                        
今日收益
                    
                
                

                    

                        
$200.00
                        
可提现收益
                    
                
                

                    

                        
$300.00
                        
总收益
                    
                
            
            
            
            
            
        
        

            

                

                    

                        
我的钱包
                    
                

                

                    
历史订单
 
                
                
                

                    

                        
培训学习
                    
                

                    

                        
达人认证
                    
                

                    

                        
信用金认证
                    
                

                    

                        
分享好友
                    
                

                    

                        
规则说明
                    
                

                        

                        
邦办商城
                    
                

                    

                        
联系客服
                    
                
            
        
     
    

        

            
 

                
抢单
            
            
 

                
工作
            
            
 

                
 我的
            
        
        
    
    

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:
暂无

3. document.getElementsByTagName()获取到某个控件
   index.html{
   
   获取到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:使用