一.hasClass()

用于检查元素是否应用了类样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 100px;background-color: red;}.cls{background-color: green;}</style><script src="../jquery-1.12.2.js"></script><script>$(function () {//点击第一个按钮添加类样式$('#btn1').click(function () {$('#dv').addClass('cls');});//点击第二个按钮检查这个div是否成功应用了cls样式$('#btn2').click(function () {var re = $('#dv').hasClass('cls');console.log(re);//true});})</script>
</head>
<body>
<input type="button" value="添加类样式" id="btn1"/>
<input type="button" value="检测元素是否应用了类样式" id="btn2"/>
<div id="dv"></div>
</body>
</html>

二.toggleClass()

切换类样式

toggleClass(‘cls’)
toggleClass(‘cls’,switch) switch是一个布尔值(可以是一个表达式)
toggleClass(func) 里面是一个回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.cls{background-color: black;}div {width: 200px;height: 200px;}.happy {background-color: pink;}.sad {background-color: grey;}</style><script src="../jquery-1.12.2.js"></script><script>//页面加载后点击按钮btn实现开关灯的效果$(function () {$('#btn1').click(function () {//先判断body是否应用了某个样式,如果应用了就移除,否则就添加if($('body').hasClass('cls')){//应用了--移除该类样式$('body').removeClass('cls');$(this).val('关灯');}else{//没有应用--让body添加这个类样式$('body').addClass('cls');$(this).val('开灯');}});//第二个实现方式,利用toggleClass函数// toggleClass(class|fn[,sw])// 作用：切换类// 有就删除，没有就添加$('#btn2').click(function () {$('body').toggleClass('cls');//切换类样式});//cls+switchvar count = 1;$('#btn3').click(function () {//点击三次就切换样式$('body').toggleClass('cls', count % 3 === 0);count = count + 1;//判断是什么标签或者类样式名,id名// console.log($('body').is('body'));});      //回调函数     $('#btn4').click(function () {$('#dv').toggleClass(function () {if($(this).parent().is('.ll')){return "happy";} else {return 'sad';}});});});</script>
</head>
<body>
<input type="button" value="开关灯" id="btn1"/>
<input type="button" value="开关灯2" id="btn2"/>
<input type="button" value="点三次开关灯" id="btn3"/>
<input type="button" value="切换" id="btn4">
<div id="dv"></div>
</body>
</html>

三.链式编程demo1

获取列表中每个li,当鼠标进入后,当前的li有高亮显示,点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链式编程demo</title><script src="../jquery-1.12.2.js"></script><script>//获取列表中每个li,当鼠标进入后,当前的li有高亮显示,// 点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体$(function () {$('#uu>li').mouseover(function () {//当前进入的li高亮显示,其他li不高亮$(this).css('backgroundColor','yellow').siblings('li').css('backgroundColor','');}).click(function () {$(this).css('fontSize','20px').css('color','green').css('fontFamily','宋体');});});</script>
</head>
<body>
<ul id="uu"><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li>
</ul>
</body>
</html>

四.链式编程demo2

点击按钮,改变按钮的value值,鼠标进入到按钮中,按钮的宽改变,高改变,鼠标离开的时候,按钮的背景颜色为绿色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链式编程demo2</title><script src="../jquery-1.12.2.js"></script><script>//点击按钮,改变按钮的value值,鼠标进入到按钮中,按钮的宽改变,高改变,鼠标离开的时候,按钮的背景颜色为绿色$(function () {$('#btn').mouseover(function () {$(this).css({width:"200px",height:'150px'});}).mouseout(function () {$(this).css('backgroundColor','green');}).click(function () {$(this).val("改变后");});});</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>

五.获取兄弟元素

5.1 .next();获取的是当前元素的下一个兄弟元素----一个
5.2 .nextAll();获取的是当前元素的后面的所有的兄弟元素----后面的多个
5.3 .prev();获取的是当前元素的前一个兄弟元素----一个
5.4 .prevAll();获取的是当前元素的前面的所有的兄弟元素----前面的多个
5.5 .siblings();获取的是当前元素的所有的兄弟元素(自己除外)----多个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取兄弟元素</title><script src="../jquery-1.12.2.js"></script><script>$(function () {//获取ul中所有的li,为每个li注册鼠标进入的事件,// 当前元素获取到,对当前元素的兄弟元素进行操作$('#uu>li').mouseenter(function () {//.next();获取的是当前元素的下一个兄弟元素---一个// $(this).next().css('backgroundColor','pink');//.nextAll();获取的是当前元素的后面的所有的兄弟元素---后面的多个// $(this).nextAll().css('backgroundColor','yellow');//.prev();获取的是当前元素的前一个兄弟元素--一个// $(this).prev().css("backgroundColor","blue");//.prevAll();获取的是当前元素的前面的所有的兄弟元素//$(this).prevAll().css("backgroundColor","green");//.siblings();获取的是当前元素的所有的兄弟元素(自己除外)$(this).siblings().css("backgroundColor","green");});});</script>
</head>
<body>
<ul id="uu"><li>红烧土豆</li><li>清蒸豆腐</li><li>油炸菠菜</li><li>凉拌土豆丝</li><li>凉拌黄瓜</li><li>炝炒白菜</li>
</ul>
</body>
</html>

六. 获取兄弟元素demo

效果是鼠标进入高亮,离开取消高亮,点击当前元素前面的变为黄色,后面的变为蓝色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul {list-style-type: none;width: 200px;position: absolute;left: 500px;}ul li {margin-top: 10px;cursor: pointer;text-align: center;font-size: 20px;}</style><script src="../jquery-1.12.2.js"></script><script>//获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件$(function () {//获取ul>li$('ul>li').mouseenter(function () {$(this).css('backgroundColor','red').siblings().css('backgroundColor','')}).mouseleave(function () {$(this).css('backgroundColor','').siblings().css('backgroundColor','');}).click(function () {//当前元素前面的所有兄弟元素背景颜色变为黄色$(this).prevAll().css('backgroundColor','yellow');//当前元素后面的所有兄弟元素背景颜色为蓝色$(this).nextAll().css("backgroundColor","blue");//链式编程代码//断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,//解决断链--->恢复到断链之前的一个效果--修复断链//.end()方法恢复到断链之前的效果// $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");});});</script>
</head>
<body>
<ul><li>青岛啤酒（TsingTao）</li><li>瓦伦丁（Wurenbacher）</li><li>雪花（SNOW）</li><li>奥丁格教士（Franziskaner）</li><li>科罗娜喜力柏龙（Paulaner）</li><li>嘉士伯Kaiserdom</li><li>罗斯福（Rochefort）</li><li>粉象（Delirium）</li><li>爱士堡（Eichbaum）</li><li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>

七.mouseenter和mouseover的区别

mouseenter指的是进入当前元素(不包括子元素)触发的事件
mouseover指的是进入当前的元素,如果进入当前元素的子元素也会触发事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x=0;
y=0;
$(document).ready(function(){$("div.over").mouseover(function(){$(".over span").text(x+=1);});$("div.enter").mouseenter(function(){$(".enter span").text(y+=1);});
});
</script>
</head>
<body><p>mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。</p>
<p>mouseenter 事件只在鼠标移动到选取的元素上时触发。 </p><div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
<h3 style="background-color:white;">Mouseover 事件触发: <span></span></h3>
</div><div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
<h3 style="background-color:white;">Mouseenter 事件触发: <span></span></h3>
</div></body>
</html>

JQ笔记3-样式操作相关推荐

【Jquery-03】jq中的样式操作
文章目录 2.1.操作css的方法 2.2设置类样式方法 2.1.操作css的方法 jQuery可以使用css方法来修改简单的元素样式,也可以操作类,修改多个样式 1.参数是属性名.属性值.逗号分割, ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)
jq样式操作和效果 1.样式 1.jq设置样式 $("div").css('属性','值'); 2.jq排他思想 //多选一.排他思想,当前元素设置样式,其与兄弟清除样式 $(th ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
学习笔记：Word 样式操作
Word 样式操作编者按 Word 01. 页眉页脚 1.1 页眉左边的字想靠最左, 右边的字想靠最右 1.2 页码设置,比如: 第 x 页共 x 页 02. 插入表格 2.1 单元格里的字不 ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', .... dataList:[] }, ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...

JQ笔记3-样式操作

文章目录