5.1jQuery 的案例

Posted 2022-06-05 xuwangqi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5.1jQuery 的案例相关的知识，希望对你有一定的参考价值。

1.选择器

<!DOCTYPE>
<html>
<head>
<title>基本选择器练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body
    font-family: "微软雅黑"

div,span 
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;


div.mini 
    width: 40px;
    height: 43px;
    background: #CC66FF;
    border: #000 1px solid;
    font-size: 12px;
    font-family: Roman;

input margin: 5px 5px; 
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function()
        //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
        $("#b1").click(function () //click()为单击事件，在页面执行到此句时为所选元素绑定单击事件
            $("div").css("background-color","#FF69B4")  //jquery对象.css是修改样式
        );
        
        //<input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
        $("#b2").click(function()
            $("#one").css("background-color","#9ACD32")
        )

        //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
        $("#b3").click(function()
            $(".mini").css("background-color","#FF0033") //类选择器
        )

        //<input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
        $("#b4").click(function()
            $("*").css("background-color","#FDF5E6")
        )

        //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5" />
        $("#b5").click(function()
            $("span,#two").css("background-color","#FF1493")
        )

        //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6" />
        $("#b6").click(function()
            $("span,#two,#one,.mini").css("background-color","#006400")
        )
    )
</script>
</head>

<body>
    <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
    <input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
    <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
    <input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
    <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5" />
    <input type="button"
        value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
        id="b6" />


    <h1>天气冷了</h1>
    <h2>天气又冷了</h2>

    <div id="one">id为one</div>

    <div id="two" class="mini">
        id为two class是 mini
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one">
        class是 one
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">动画</div>
    <br>
    <span class="spanone"> span </span>
    <span class="mini"> span class是mini </span>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span 
    width: 140px;
    height: 140px;
    margin: 20px;
    background: #9999CC;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Roman;


div.mini 
    font-size: 14px;
    height: 53px;
    width: 47px;
    background: #CC66FF;
    border: #000 1px solid;
    font-family: Roman;

input margin: 5px 5px; 
</style>

<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
    $(function()
        //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
        $("#b1").click(function()
            $("body div").css("background-color","#F08080")
        )

        //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
        $("#b2").click(function()
            $("body > div").css("background-color","#FF0033")
        );

        //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
        $("#b3").click(function()
            $("#one + div").css("background-color","#0000FF")
        )

        //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
        $("#b4").click(function()
            $("#two ~ div").css("background-color","#9ACD32")
        )

        //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"id="b5" />
        $("#b5").click(function()
            $("#two").siblings("div").css("background-color","#FF6347") //siblings是选择兄弟元素是无差别选择
            //里面加上div则会选取的是 div元素的兄弟
        )
        
    )
</script>
</head>

<body>
    <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
    <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
    <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3" />
    <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
    <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" />

    <h1>天气冷了</h1>

    <div id="one">id为one</div>

    <div id="two">
        id为two
        <div class="mini"> class是 mini</div>
    </div>

    <div class="one">
        class是 one
        <div class="mini"> class是 mini</div>
        <div class="mini"> class是 mini</div>
    </div>
    <div class="one">
        class是 one
        <div class="mini01"> class是 mini01</div>
        <div class="mini"> class是 mini</div>
    </div>

    <br>
    <div id="mover">动画</div>
    <br>
</body>
</html>

以上是关于5.1jQuery 的案例的主要内容，如果未能解决你的问题，请参考以下文章

Siki_Unity_2-4_UGUI_Unity5.1 UI 案例学习

HTML 5.1 的 14 个新特性（含使用案例）

QGIS入门实战精品教程5.1：QGIS地理坐标转火星坐标系（GCJ02）案例教程

JQuery_案例1_广告显示和隐藏与JQuery_案例2_抽奖_演示

JQuery-04-笔记

jQuery-案例