元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式

元素的样式设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.cls {width: 200px;height: 100px;background-color: crimson;}.cls2 {border:2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 为div设置类样式,同时应用多个类样式// $("#dv").addClass("cls");// $("#dv").addClass("cls").addClass("cls2");// $("#dv").addClass("cls cls2");// console.log($("#dv").addClass());// console.log($("#dv").addClass("cls"));// addClass()方法,括号里什么也没有,返回来的仍然是这个对象// 即使在括号中设置内容,返回来的还是这个对象// removeClass()方法,同上// 移除类样式// $("#dv").removeClass("cls");// $("#dv").removeClass("cls").removeClass("cls2");// $("#dv").removeClass("cls cls2");// console.log($("#dv").removeClass());// console.log($("#dv").removeClass("cls"));// css方法是不能添加或移除类样式的// $("#dv").css("class","cls");});}); // 总结:设置元素的样式可以使用css()方法,也可以使用addClass()或者是// removeClass()方法</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv" class=""></div></body>
</html>

元素类样式的操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.cls {width: 200px;height: 100px;background-color: red;}.cls2 {border: 2px solid green;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 判断这个元素是否应用了某个类样式if($("#dv").hasClass("cls cls2")){console.log("应用了");}else{console.log("没有应用");}});});// hasClass()是判断元素是否应用了这个类样式的// addClass()添加类样式// removeClass()移除类样式</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv" class="cls cls2"></div></body>
</html>

开关灯效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.cls {background-color: black;}</style><script src="jquery-1.12.1.js"></script><script>// $(function(){//     $("#btn").click(function(){//         // 判断body是否应用了cls类样式,如果应用了就移除,否则就添加//         if($("body").hasClass("cls")){//             $("body").removeClass("cls");//             $("#btn").val("关灯");//         }else{//             $("body").addClass("cls");//             $("#btn").val("开灯");//         }//     });// });// 第二种方式$(function(){$("#btn").click(function(){// 切换----类样式$("body").toggleClass("cls");});});</script>
</head>
<body>
<input type="button" value="关灯" id="btn"></body>
</html>

获取兄弟元素的几个方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>ul {list-style-type: none;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#three").click(function(){// 获取某个li的下一个兄弟元素// $(this).next("li").css("backgroundColor","yellowgreen");// 获取某个li的前一个兄弟元素// $(this).prev("li").css("backgroundColor","greenyellow");// 获取某个li的后面的所有的兄弟元素// $(this).nextAll("li").css("backgroundColor","red");// 获取某个li的前面的所有的兄弟元素// $(this).prevAll("li").css("backgroundColor","red");// 获取当前的li的所有的兄弟元素$(this).siblings("li").css("backgroundColor","gray");});});</script>
</head>
<body>
<ul id="uu"><li>凤姐</li><li>芙蓉姐姐</li><li id="three">犀利哥</li><li>大力哥</li><li>小月月</li><li>小胖</li><li>小明</li><li>小红</li>
</ul></body>
</html>

当前元素的兄弟元素样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>ul {list-style-type: none;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("ul>li").mouseenter(function(){// 鼠标进入事件$(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");}).mouseleave(function(){// 鼠标离开事件$(this).parent().find("li").css("backgroundColor","");}).click(function(){// 点击事件// $(this).prevAll("li").css("backgroundColor","yellow");// $(this).nextAll("li").css("backgroundColor","blue");// 断链:对象调用方法之后,返回的已经不是当前的这个对象了,// 此时再调用方法,就出现了断链// .end()方法是修复断链,恢复断链之前的状态// 不推荐使用链式编程$(this).prevAll("li").css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");});});</script>
</head>
<body>
<ul id="uu"><li>凤姐</li><li>芙蓉姐姐</li><li>犀利哥</li><li>大力哥</li><li>小月月</li><li>小胖</li><li>小明</li><li>小红</li>
</ul></body>
</html>

元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式相关推荐

easyX库颜色模型和颜色及样式设置相关函数（注释版）
0.颜色模型和颜色及样式设置相关函数概览本次我给您带了easyX库系列的颜色模型和样式设置的相关函数,希望您能看得开心. 函数或数据类型描述 LINESTYLE 画线样式对象. FILLSTYLE ...
POI封装工具easyexcel导出EXCEL表样式设置
POI封装工具easyexcel导出EXCEL表样式设置 java中对Office操作比较好的工具是POI,但POI在导出数据量较大的情况下很容易因内存占用过大,而出错,阿里巴巴推出的easyexce ...
java怎么指定父窗口大小_[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离...
[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离 0 2016-01-03 11:00:19 jQuery如何获取div距离窗口顶部或者父元素顶部的距离: 在实际应用或许会需 ...
CSS样式中伪类和伪类元素的区别（css中一个冒号和两个冒号的区别）
首先介绍下什么是伪类,所谓伪类就是: 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
CSS表单元素样式设置
(1)表单由两部分组成,访问者在页面上可看见并填写的控件.标签和按钮的集合,以及用于获取信息并将其转化为可以读取或计算的的格式的处理脚本. (2)表单创建,以form标签开始结束,开始和结束form标 ...
2015-07-22 JQuery 第二课（JQ元素获取，添加，删除，判断，遍历，取值，样式设置，改变对象，切换）...
1.获取元素: 1).size(): 获取元素的个数. $("img").size():获取有多少个img. 2).eq():获取元素. $("img[title]&qu ...
验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程
验证用户输入的是不是中文名字 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
js中元素样式设置的六种方法
元素的样式设置六种方法 1.对象.style 2.对象.className 3.对象.setAttribute("style") 4.对象.setAttribute("c ...

元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式

元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式相关推荐

最新文章

热门文章

元素的样式设置 元素类样式的操作 开关灯效果 获取兄弟元素 当前元素的兄弟元素样式

元素的样式设置 元素类样式的操作 开关灯效果 获取兄弟元素 当前元素的兄弟元素样式相关推荐

最新文章

热门文章

元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式

元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式相关推荐