简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery(常用) 基本选择器与层次选择器 12.19
Blogger Information
Blog 16
fans 0
comment 0
visits 16960
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery(常用) 基本选择器与层次选择器 12.19
HTML基础标签
Original
772 people have browsed it

选择器效果图.JPG

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task2.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="task2.js"></script>
</head>
<body>

<div class="one" id="one">
    id为one,class为one的div
    <div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>

<!--快捷写法div>div.mini*4-->
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>

<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>

<div style="display:none" class="none">
    style的display为none的div
</div>

<div class="hide">class为hide的div</div>

<div>
    包含input的type为hidden的div
    <input type="hidden" size="8">
</div>

<span id="mover">正在执行动画的span元素</span>

<!--<script>-->
<!--    $("#one")-->
<!--        .css("background", "green");-->
<!--</script>-->
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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");
});

//改变元素名为<span>的所有元素的边框颜色
$(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的操作都事半功倍.

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！