jquery框架的基本原理(web开发之-jquery的基本使用)

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") }); });

jquery框架的基本原理(web开发之-jquery的基本使用)(1)

注:

addClass:用来给元素添加一个class;

removeClass:用来给元素删除一个class;

toggleClass:用来动态的添加和删除class;

css:用来获取一个元素的属性;同样的也可以用来设置一个元素属性;

拓展:

css的方法设置属性时,需要使用驼形命名属性,驼形命名法:首字母小写,之后每个单词首字母大写;

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页