02 - jQuery选择器以及样式操作
Posted article-record
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了02 - jQuery选择器以及样式操作相关的知识，希望对你有一定的参考价值。
jQuery中的选择器
在说jQuery中的选择器之前 咱们先回忆一下DOM中选择元素的方法
// id
document.getElementById('id');
// 根据标签 多个
document.getElementsByTagName('tag');
// name 多个
document.getElementsByTagName('name');
// className 多个
document.getElementsByClassName('className');
// jQuery中获取元素的方法：通过各种选择器来获取元素
// id 选择器
$('id');
// 标签选择器
$('div');
// 类选择器
$('.className');
// * 表示所有
$('*');是不是感觉和CSS选择元素语法一样呢？对的基本就是这样子的！！！
那么下面咱们先看一些案例吧；
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#dv
height: 200px;
width: 300px;
background-color: pink;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
// 点击按钮，设置层中显示内容为：这是一个层，同时设置这个层的背景颜色（id选择器）
$(function ()
// 获取按钮，调用点击事件的方法
$('#btn').click(function ()
// .text() 相当于DOM中的innerText或者textContent
$('#dv').text('这是一个层');
$('#dv').css('backgroundColor', 'yellow');
);
);
</script>
</head>
<body>
<input type="button" value="展示效果" id="btn">
<div id="dv"></div>
</body>
</html>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
// 点击按钮，设置多个p标签中的内容显示为：我们都是p(标签选择器)
// 页面加载事件
$(function ()
$('#btn').click(function ()
$('p').text('我们都是p');
);
);
</script>
</head>
<body>
<input type="button" value="设置内容" id="btn">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cls
background-color: hotpink;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
// 点击按钮，设置页面上应用cls类样式的元素背景颜色（类选择器）
$(function ()
$('#btn').click(function ()
$('.cls').css('backgroundColor', 'red');
);
);
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<br />
<span class="cls">这是一个span</span>
<p class="cls">这是一个p</p>
</body>
</html>标签+类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cls
background-color: pink;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
// 点击按钮设置页面上应用cls类样式的li标签背景颜色改变
$(function ()
$('#btn').click(function ()
$('li.cls').css('backgroundColor', 'red');
);
);
</script>
</head>
<body>
<input type="button" value="选择样式" id="btn">
<ul>
<li class="cls">1</li>
<li>2</li>
<li>3</li>
<li class="cls">4</li>
<li class="cls">5</li>
</ul>
</body>
</html>多条件选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li, span, div
display: block;
height: 100px;
width: 100px;
background-color: pink;
margin-top: 10px;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function ()
$('#btn').click(function ()
$('span,li,div').css('backgroundColor', 'yellow');
);
);
</script>
</head>
<body>
<input type="button" value="设置颜色" id="btn">
<span></span>
<li></li>
<div></div>
</body>
</html>层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div li:last-child
background-color: antiquewhite;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function ()
// 获取div中的相关元素
$('#btn').click(function ()
// 获取div中的所有p标签
//$('div p').css('backgroundColor', 'red');
// 获取div的子p标签
// $('div > p').css('backgroundColor', 'red');
$('div li:nth-child(1)').css('backgroundColor', 'yellow');
);
);
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div>
<p>这是div中的第一个p</p>
<ul>
<li>这是第一个li</li>
<li><p>这是第二个li的p</p></li>
<li>这是第三个li</li>
</ul>
<p>这是div中的第二个p</p>
</div>
<p>这是div后面的第一个p</p>
<p>这是div后面的第二个p</p>
<p>这是div后面的第三个p</p>
</body>
</html>索引选择器
<!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."></script>
<script>
$(function ()
$('#btn').click(function ()
// 获取ul中索引为4的 li元素
$('#uu > li:eq(4)').css('backgroundColor', 'red');
// 获取ul中索引大于4的所有li元素
$('#uu > li:gt(4)').css('backgroundColor', 'yellow');
// 获取ul中索引小于4的所有li元素
$('#uu > li:lt(4)').css('backgroundColor', 'green');
);
);
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<ul
</body>
</html>奇偶选择器
<!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>
$(function ()
$('#btn').click(function ()
// :even 偶数选择器 下标从零开始 页面表现为奇数
$('#uu > li:even').css('backgroundColor', 'yellow');
// :odd 奇数选择器
$('#uu > li:odd').css('backgroundColor', 'red');
);
);
</script>
</head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
<li>乔峰:降龙十八摸</li>
<li>张无忌:乾坤大摸姨</li>
<li>段誉:鳞波微步</li>
<li>丁棚:天外流星贱</li>
<li>张三丰:太极掌</li>
<li>段飞:极乐神功</li>
<li>云飞扬:天馋功</li>
<li>杨过:黯然销魂掌</li>
<li>那谁谁:如来神掌</li>
<li>孟星魂:流星蝴蝶剑</li>
<li>楠哥:少女萌萌拳</li>
</ul>
</body>
</html>jQuery中一些常见的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function ()
$('#btn').click(function ()
// .text() 没有内容表示获取文本
console.log($('p').text());
// .text() 写内容表示设置文本 相当于DOM中的innerText
console.log($('p').text('content'));
// .html() 点击按钮新增元素 如果是给body增加 会覆盖之前添加的元素
$('#div').html('<p>我是新增的内容</p>');
// .html() 获取整个div文本 相当于DOM中的innerHTML
console.log($('#div').html());
// 点击按钮设置文本框中的值 .val('content') 设置元素的value属性
$('#txt').val('hello world');
// .val() 没有内容是获取元素的value值 相当于DOM的value
console.log($('#txt').val());
// .css() 如果只是设置一个样式，就传两个参数
$('#div').css('backgroundColor', 'red');
// .css() 多个对象 就以键值对的方式 传入
$('#div').css('width': '200px', 'height': '100px', 'backgroundColor': 'yellow');
// .index()获取当前元素的索引
$(this).index();
// .find() 针对当前元素找里面的一些其他元素
$('#div').find();
// .siblings() 获取当前元素的所有兄弟元素
$(this).siblings('input');
);
);
</script>
</head>
<body>
<input type="button" value="获取内容" id="btn">
<input type="text" value="这是文本框" id="txt">
<p>我是一个p</p>
<div id="div">
<p></p>
</div>
</body>
</html>好友切换面板案例
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="UTF-8">
<style type="text/css">
#u1 li
margin-bottom: 10px;
background-color: Orange;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
#u1 li ul
list-style-type: none;
margin: 0;
padding: 0;
#u1 li ul li
background-color: pink;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function ()
$('#u1 > li > ul > li').hide();
$('#u1 > li').click(function ()
// 找到id为ul的直接的子元素li,注册鼠标点击的事件
$(this).siblings('li').children('ul').find('li').hide(500);
// 当前的li中的ul中的所有的li显示
$(this).children('ul').find('li').show(500);
);
);
</script>
</head>
<body>
<div style=" width:200px; height:500px; border:1px solid red;">
<ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>川普</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
</html>jQuery样式操作
操作类样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
height: 100px;
width: 100px;
background-color: rebeccapurple;
.cls
background-color: green;
.cls2
border: 3px solid yellow;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function ()
$('#btn').click(function ()
// 添加单个类样式
$('#div').addClass('cls');
// 添加多个类样式
$('#div').addClass('cls cls2');
$('#div').addClass('cls').addClass('cls2');
// 是否有类名 true/false
console.log($('#div').hasClass('cls2'));
// 删除类样式
$('#div').removeClass('cls'); // 指定类样式
$('#div').removeClass(); // 所有类样式
);
);
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="div"></div>d
</body>
</html>网页开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cls
background-color: black;
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function ()
$('#btn').click(function ()
if ($(this).val() == '关灯')
$('body').addClass('cls');
$(this).val('开灯');
else
$('body').removeClass();
$(this).val('关灯');
);
// 简单的代码
$('#btn').click(function ()
// .toggleClass() 切换类样式
$('body').toggleClass('cls');
$(this).val() == '关灯' ? $(this).val('开灯') : $(this).val('关灯');
);
);
</script>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
</html>以上是关于02 - jQuery选择器以及样式操作的主要内容，如果未能解决你的问题，请参考以下文章
jq 筛选选择器，方法，隐式迭代 元素显示隐藏 淡入淡出 上拉下拉 动画 类名操作以及样式