本文共 1445 字，大约阅读时间需要 4 分钟。
HTML代码:
html>
Titleid为one,class为one的div
id为two,class为one,title为test的div
style的display为none的div
包含input的type为hidden的div
正在执行动画的span元素
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码:
div,span,p{
width: 150px;
height: 150px;
margin: 5px;
background:beige;
border: black solid 2px;
float: left;
font-size: 14px;
font-family:Verdana;
}
div.mini{
width: 60px;
height: 60px;
background: #b3d4fc;
font-size: 10px;
}
div.hide{
display: none;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
jQuery代码:
//console.log('你好');
//常用基本选择器
//改变id为one的元素背景色
$(document).ready(function(){
$("#one").css("background", "red");
});
//改变class为mini的元素背景色
$(document).ready(function () {
$(".mini").css("background" , "grey");
});
//改变元素名为的所有元素的边框颜色
$(document).ready(function () {
$("span").css("border","yellow solid 2px" );
});
//常用层次选择器
//改变div所有后代div元素的边框颜色
$(document).ready(function () {
$("div div").css("border" , "blue solid 2px");
});
//改变div下所有子元素div字体颜色
$(document).ready(function () {
$("div>div").css("color" ,"white");
});
//改变class为one 的下一个div同辈元素背景色
$(document).ready(function () {
$(".one+div").css("background","green");
});
//改变id为two的元素后面的所有div同辈元素的边框阴影
$(document).ready(function () {
$("#two~div").css("box-shadow","10px 10px 5px gray");
});
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
选择器是jquery的根本与基础,掌握选择器不仅能简化代码,对以后dom ajax的操作都事半功倍.
转载地址：https://blog.csdn.net/weixin_33218985/article/details/117803350 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
