JQuery学习笔记之JQuery选择器

最新推荐文章于 2024-04-19 15:28:40 发布

秋忆夏伤

最新推荐文章于 2024-04-19 15:28:40 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52523341

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="Scripts/JavaScript.js"></script>
</head>
<body>
    <button>选择器按钮</button>
    <p>我是段落1</p>
    <p id="p2">我是段落2</p>
    <p id="p3">我是段落3</p>
    <p class="p">我是段落4</p>
    <p class="p">我是段落5</p>
    <p class="p">我是段落6</p>

    <hr/>

    <div id="div">
        <h1 class="h">我是标题1</h1>
        <h2 class="h">我是标题2</h2>
        <p id="dp1">我是div中的段落1</p>
        <p id="dp2">我是div中的段落1</p>
    </div>

    <hr/>

    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期日</li>
    </ul>

    <hr/>

    <img src="1.jpg"/>

    <hr/>

    <form>
        用户名：<input type="text" /><br/><br/>
        密  码：<input type="password"/><br/><br/><br/><br/><br/><br/>
    </form>
</body>
</html>

JQuery代码：

// 1、$(this)：选取当前html元素；
// 文档就绪函数：为了防止文档在完全加载(就绪)之前运行JQuery代码，所有的JQuery代码全部放在文档就绪函数(ready)之内。
$(document).ready(function () {
    $("button").click(function () {     // 按钮点击事件；
        $(this).hide();                 // 隐藏当前按钮；
    });
});

// 2、$("p")：选取所有p标签：
$(document).ready(function () {
    $("button").click(function () {
        $("p").hide();
    });
});

// 3、$(".p")：选取所有 class="p" 的元素：
$(document).ready(function () {
    $("button").click(function () {
        $(".p").hide();
    });
});

// 4、$("#p2")：选取所有 id="p2" 的元素：
$(document).ready(function () {
    $("button").click(function () {
        $("#p2").hide();
    });
});

// 5、$("#div .h")：选取 id="div" 的元素中所有 class="h" 的元素：
//    $("#div #dp2")：选取 id="div" 的元素中所有 id="dp2" 的元素：
$(document).ready(function () {
    $("button").click(function () {
        $("#div .h").hide();
        $("#div #dp2").hide();
    });
});

// 6、$("ul li:first")：选取 ul 元素中的第一个 li 元素：
$(document).ready(function () {
    $("button").click(function () {
        $("ul li:first").hide();
    });
});

// 7、$("ul li:last")：选取 ul 元素中的最后一个 li 元素：
$(document).ready(function () {
    $("button").click(function () {
        $("ul li:last").hide();
    });
});

// 8、$("ul li:even")：选取 ul 元素中的偶数 li 元素(元素从 0 开始)：
$(document).ready(function () {
    $("button").click(function () {
        $("ul li:even").hide();
    });
});

// 9、$("ul li:odd")：选取 ul 元素中的奇数 li 元素(元素从 0 开始)：
$(document).ready(function () {
    $("button").click(function () {
        $("ul li:odd").hide();
    });
});

// 10、$(":header")：选择所有标题元素(h1-h6)：
$(document).ready(function () {
    $("button").click(function () {
        $(":header").hide();
    });
});

// 11、$(":empty")：选取所有空元素(即没有子元素或文本的元素)：
$(document).ready(function () {
    $("button").click(function () {
        $(":empty").hide();
    });
});

// 12、$(":text")：选取 type="text" 的input元素：
$(document).ready(function () {
    $("button").click(function () {
        $(":text").hide();
    });
});

// 13、$(":password")：选取 type="password" 的input元素：
$(document).ready(function () {
    $("button").click(function () {
        $(":password").hide();
    });
});