HTML中JQuery选择器的实例
2018-09-13 本文已影响6人
阿猫阿狗py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="./js/lib/jquery-2.2.4/jquery-2.2.4.min.js"></script>
<style>
#img-group div{
float:left;
margin: 10px;
}
#img-group div img{
width:200px;
}
</style>
</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="name"><a href="">导航栏菜单</a></li>
<li class="list-group-item" id="name1"><a href="">导航栏菜单</a>
<ul>
<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>
<li><a href="">二级菜单</a></li>
</ul>
<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/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
<div class="img-group-item"><img src="./images/img.jpg" alt=""></div>
</div>
</div>
<script>
$(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":'orange',
"margin-top":'5px',
"color":'white'
})
});
$("#btn7").click(function () {
//群组选择器
$("#list-group,#img-group").css({
"border":"dashed 2px red",
"margin-top":"5px"
})
});
$('#btn8').click(function(){
//伪类选择器
$("#list-group>li:first").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
})
});
$('#btn9').click(function(){
//属性包含选择器
$("#list-group>li[id]").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
})
});
$('#btn10').click(function(){
//属性指定选择器
$("#list-group>li[id='name']").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
})
});
$('#btn11').click(function(){
//属性正则选择器
$("#list-group>li[id^='name']").css({
"border": "#069 solid 2px",
"margin-top": "5px",
"color": "white"
})
})
})
</script>
</body>
</html>
