jquery框架的基本原理(web开发之-jquery的基本使用)
index.html:
<html>
<head>
<title>js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="content_id">显示的内容</div>
<button id="add_btn">添加class</button>
<button id="remove_btn">删除class</button>
<button id="toggle_btn">toggle切换class</button>
<button id="get_btn">获取css属性</button>
<button id="change_btn">更改css属性</button>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./index.js">
</script>
<style>
.testCla{
color:red;
}
</style>
</html>
index.js:
$(function(){
var dom = $("#content_id");
$("#add_btn").click(function(){
dom.addClass("testCla");
});
$("#remove_btn").click(function(){
dom.removeClass("testCla");
});
$("#toggle_btn").click(function(){
dom.toggleClass("testCla");
});
$("#get_btn").click(function(){
console.log(dom.css("backgroundColor"));
});
$("#change_btn").click(function(){
dom.css("backgroundColor","yellow")
});
});
注:
addClass:用来给元素添加一个class;
removeClass:用来给元素删除一个class;
toggleClass:用来动态的添加和删除class;
css:用来获取一个元素的属性;同样的也可以用来设置一个元素属性;
拓展:
css的方法设置属性时,需要使用驼形命名属性,驼形命名法:首字母小写,之后每个单词首字母大写;
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com