jQuery实例–基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="hid">jQuery实例--基本选择器</h1>
<ul id="uid">
<li>aaa</li>
<li class="lid">bbb</li>
<li>ccc</li>
</ul>
<h2>ahsdahdasl</h2>
<ol id="oid">
<li class="cc">aa</li>
<li>bb</li>
</ol>
<script src="./jquery-3.5.0.min.js"></script>
<script>
$(function(){
$('#hid').css('color','red');
$('li').css('color','blue');
$('.cc').css('color','blue');
$('h1,h2,h3,h4').css('background-color','#ddd');
});
</script>
</body>
</html>
jQuery实例–层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jQuery实例--层级选择器</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<ol>
<li>5</li>
<li>6</li>
</ol>
</ul>
<li>7</li>
<li>8</li>
<li id="li">9</li>
</body>
<!-- 使用jquery时千万不要忘记导入jquery的js包 -->
<script src="./jquery-3.5.0.min.js"></script>
<script>
$(function(){
$('ul~li').css('color','red');
});
</script>
</html>
jQuery实例–基本筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jQuery实例--基本筛选器</h1>
<ul>
<li>aaaaaa</li>
<li class="cc">bbbbbb</li>
<li>cccccc</li>
<li class="cc">dddddd</li>
<li>eeeeee</li>
</ul>
<ol>
<li>ffffff</li>
</ol>
<script src="./jquery-3.5.0.min.js"></script>
<script>
$(function(){
$('ul li').mouseover(function(){
$(this).animate({paddingLeft:'+=20'},80);
}).mouseout(function(){
$(this).animate({paddingLeft:'-=20'},50);
});
});
</script>
</body>
</html>
jQuery实例–内容选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jQuery实例--内容选择器</h1>
<div>John</div>
<div>John Li</div>
<div>Smith Tang</div>
<div>Mary Li</div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
$(function(){
$("div:contains('John')").css('color','red');
});
</script>
</body>
</html>
jQuery实例–属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="hid">jQuery实例--属性选择器</h1>
<form action="#">
姓名:<input type="text" name="name" value="zhangsan "><br><br>
年龄:<input type="text" name="age"><br><br>
邮箱:<input type="text" name="email"><br><br>
电话:<input type="text" name="phone"><br><br>
地址:<input type="text" name="address">
</form>
<script src="./jquery-3.5.0.min.js"></script>
<script>
$(function(){
$('input[name *= "a"]').css('border','1px solid red');
});
</script>
</body>
</html>
jQuery实例–子元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jQuery实例--子元素选择器</h1>
<ul>
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
<li>dddddd</li>
</ul>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
$(function(){
$('ul li:nth-child(3)').css('color','red');
});
</script>
</html>
jQuery实例–表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jQuery实例--表单中选择器</h1>
<ul>
<li><input type="checkbox" name="likes[]" value="1"> aaaaaa</li>
<li><input type="checkbox" name="likes[]" value="2"> bbbbbb</li>
<li><input type="checkbox" name="likes[]" value="3"> cccccc</li>
<li><input type="checkbox" name="likes[]" value="4"> dddddd</li>
<li><input type="checkbox" name="likes[]" value="5"> eeeeee</li>
</ul>
<button onclick="doFun()">获取</button>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
function doFun(){
var list = $(':checkbox:checked');
alert(list.length);
$('li:has(input:checked)').css('color','red');
}
</script>
</html>