Blogger Information
Blog 35
fans 0
comment 0
visits 27617
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
详解jquery中html属性操作
小的博客
Original
603 people have browsed it
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
 <head><title></title>
 <script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
 </head>
 <body>
  <div>
   <h4>最新专题</h4>
   <ul style="list-style-type:square" >
    <li>XSLT实战教学</li>
<li>DTD基础教程</li>
<li>Xpath的经验总结</li>
<li>Xquery的详细掌握</li>
<li>Scala的详细教程</li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513756975251&di=a871de524cf53f426fdd80121f4dcd10&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc83d70cf3bc79f3df1387fdbb0a1cd11738b297b.jpg" width="200" height="200"></li>
  </ul>
  </div>

  Jquery中html属性操作

   html属性有三个

   1,获取attr();

   2,设置,attr(name,value),多个用对象attr(name:value1,name2:value2);可以用回调attr(name,callback);

   3,移除:removeAttr(name)

<script>
$(function(){
   $('img').on('click',function(){
    $('img').attr('src');//获取图片的src
        //设置图片的src 和width
     $('img').attr({'src':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=15137569757
     80&di=66fd3df3d3b46b6de26586be897e2a7b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%
     2Fitem%2F9d82d158ccbf6c814ca3cd03b63eb13532fa4041.jpg','width':'100px'})
}).on('mouseleave',function(){
    $('img').removeAttr('src');//当鼠标点击页面其他地方图片的src属性小时,即图片消失
})          
})

 


</script>
 </body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post