Hybrid App开发之jQuery基础(2)_H5之家 - 中国HTML5教程资源分享第一站

和上面一样，直接写个小例子，看下如何控制css样式的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery控制css样式</title> <style type="text/css"> .normal{ color: black; width: 150px; height: 30px; padding: 5px; } .clicked{ color: blue; width: 150px; height: 30px; padding: 5px; } </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //JQuery写法 $(function () { $("#changeCssBtn").click(function () { $(this).toggleClass("clicked") }); }); //传统写法 function changeCssBtnClick() { var className= document.getElementById("changeCssBtn").className; if(className=="clicked"){ document.getElementById("changeCssBtn").className="normal"; }else{ document.getElementById("changeCssBtn").className="clicked"; } } </script> </head> <body> <div > <button id="changeCssBtn" class="normal" onclick="changeCssBtnClick()">点击修改css样式</button> </div> </body> </html> 总结：

今天简单学习一下JQuery的基础及简单使用。

分享给小伙伴们：

本文标签： Hybrid，jQuery/">Hybrid，jQuery

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻