JavaScript >jquery>选择器
2018-09-13 本文已影响9人
命运丿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#img-group div{
float:left;
margin:10px;
}
#img-group div img{
width:200px;
}
</style>
<!-- 引入JQuery支持 -->
<script src="./js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
</head>
<body>
<button id="btn1">ID选择器</button>
<button id="btn2">CLASS选择器</button>
<button id="btn3">标签选择器</button>
<button id="btn4">子类选择器</button>
<button id="btn5">包含选择器</button>
<button id="btn6">序号选择器</button>
<button id="btn7">群组选择器</button>
<button id="btn8">伪类选择器1</button>
<button id="btn9">伪类选择器2</button>
<button id="btn10">属性选择器1</button>
<button id="btn11">属性选择器2</button>
<button id="btn12">属性选择器3</button>
<div id="container">
<ul id="list-group">
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item" id="nameinfo"><a href="">导航菜单内容</a></li>
<li class="list-group-item" id="namemsg"><a href="">导航菜单内容</a>
<ul>
<li><a href="">二级菜单内容</a></li>
<li><a href="">二级菜单内容</a></li>
<li><a href="">二级菜单内容</a></li>
<li><a href="">二级菜单内容</a>
<ul>
<li><a href="#">三级菜单内容</a></li>
<li><a href="#">三级菜单内容</a></li>
<li><a href="#">三级菜单内容</a></li>
</ul>
</li>
<li><a href="">二级菜单内容</a></li>
</ul>
</li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
<li class="list-group-item"><a href="">导航菜单内容</a></li>
</ul>
<div id="img-group">
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/a.jpg" alt=""></div>
<div style="clear:both;"></div>
</div>
</div>
<script>
// 要求网页中的所有DOM元素全部加载完成才会执行JQuery代码
// window.onload = function() {} // JS
// JQuery
// 1. 加载函数
// jQuery(document).ready(function() {
// // 写网页DOM加载完成之后的代码
// })
// 2. 简化写法
// $(document).ready(function() {
// // 写网页DOM加载完成之后的代码
// })
// 3. 常规操作写法
$(function() {
$("#btn1").click(function () {
// ID选择器
$("#list-group").css({"border": "solid 5px red"});
});
$("#btn2").click(function() {
// class选择器
$(".img-group-item").css({
"border":"solid 2px #888",
"border-radius": "5px"
})
});
$("#btn3").click(function() {
// 标签选择器
$("li").css({
"border-bottom": "solid 2px orange",
})
});
$("#btn4").click(function() {
// 子类选择器
$("#list-group > li").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn5").click(function() {
// 包含选择器
$("#list-group li").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn6").click(function() {
// 序号选择器
$("li:nth-of-type(1)").css({
"background-color": "orange",
"margin-top": "5px",
"color": "white"
});
});
$("#btn7").click(function() {
// 群组选择器
$("#list-group, #img-group").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn8").click(function() {
// 伪类选择器
$("#list-group > li:first").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn9").click(function() {
// 伪类选择器
$("#list-group > li:last").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn10").click(function() {
// 属性包含选择器
$("#list-group > li[id]").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn11").click(function() {
// 属性指定选择器
$("#list-group > li[id='nameinfo']").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
$("#btn12").click(function() {
// 属性正则选择器
$("#list-group > li[id^='name']").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
});
});
});
</script>
</body>
</html>
