jQuery（入门&选择器）

最新推荐文章于 2025-12-17 16:41:30 发布

原创最新推荐文章于 2025-12-17 16:41:30 发布 · 675 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #html

这篇博客介绍了jQuery的基本使用，包括为什么学习jQuery、如何引入和使用jQuery库。通过实例展示了jQuery的选择器功能，如ID选择器、元素选择器、类选择器、过滤选择器等，并提供了表格隔行换色的代码示例，强调了jQuery简化JavaScript开发的优势。

jQuery（入门&选择器）

3W1H

JavaScript库：封装了很多JS代码（类库）

jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。 官方地址：jQuery

Why?为什么要学习？

查看官方jQueryLOGO：理念write less，do more 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件 适用于中大型网站开发。

How?怎么用？

工具：HBuilderX

案例1：点击按钮获取输入框中的值（JS对比jQuery）使用jQuery步骤

1.下载jQuery库开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用

加载函数：

<script type="text/javascript">
            // 加载函数
            // 1.标准写法 $(document).ready(function(){});
            // 2.简写写法 $(function(){})

            $(function() {
                // 获取按钮设置点击事件弹窗
                // 这种编写代码的方式称为"链式写法"
                $("#btn2").click(function() {
                    alert(123)
                });
            });
        </script>

jQuery选择器的使用：

<!-- jQuery外部式导入 -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

        $(function() {
            //获取ID选择器
            $('#oDiv')
            //ID选择器 得到一组元素
            $('#oDiv').css('background', 'red');
            // 元素选择器   得到一组元素
            $("li").css("background", "red");

            // 类选择器   一组元素
            $(".kk").css("background","red");

            //设置多个元素样式
            // {"属性":"属性值","属性":"属性值"}
            $('#oDiv').css({'background':'red','color':'yellow'});

        });
    </script>

打开jQuery库查看后有一个基本架构

<script type="text/javascript">
(function() {
                 alert('自执行函数');

            }())
</script>

上述这种结构称为自执行函数结构，作用就是自己定义调用自己自动执行

其他选择器：

<!-- 外部式导入 -->
        <script src="js/jquery-3.6.0.js" type="text/javascript"></script>
        <script type="text/javascript">
            //加载函数
            $(function() {
                // 通配符选择器
                $("*").css("background", "red");

                // 群组选择器 可以同时设置多个标签的样式
                $("#ul1,.oBox").css("background", "red");

                // 设置ul下的子li的字体颜色
                $("#ul1>li").css("background", "red");

                // 所有后代(后代选择器)
                $("#ul1 li").css("background", "red");

                // 过滤选择器,获取第一个元素;
                $('#ul1>li:first').css("background", "red");
                //获取最后一个元素;
                $('#ul1>li:last').css("background", "red");

                //gt() 大于给定索引值的元素;大于不包括自己
                $("#ul1>li:gt(2)").css("background", "yellow");
                // lt() 小于给定索引值的元素;小于不包括自己
                $("#ul1>li:lt(2)").css("background", "yellow");
                // 获取某一范围元素
                // 注意事项：如果gt和lt混合使用，并且gt在前，那么获取后元素的下标i重新编号;
                // lt在前。
                $('#ul1>li:lt(4):gt(0)').css('background', 'yellow');


                // even 奇数 匹配下标为偶数，或者位置为奇数的标签
                $('#ul1>li:even').css('background','yellow');

                // odd 偶数  匹配下标为奇数，或者位置为偶数的标签
                $("#ul1>li:odd").css("background","yellow");

                // 获取单选框
                console.log($("#demo1>input:radio"));

            });
        </script>
    <body>
        <ul id="ul1">
            <li>item1</li>
            <p>hehe</p>
            <li class="sb">item2</li>
            <li>item3</li>
            <span>heihei</span>
            <li>item4 YANGWENGUANG</li>
            <li class="sb">item5</li>
            <p>lvelve</p>
            <ol>
                <li>abc1</li>
                <li>abc2</li>
                <li>abc3</li>
                <li>abc4</li>
                <li>abc5</li>
            </ol>
        </ul>
        <hr>
        <div class="oBox">
            我是div
        </div>

    </body>

案例：表格隔行换色

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
            $(function(){
                $("table tr:even").css("background","pink");
                $("table tr:odd").css("background","blue");
            })
        </script>

<body>
        <table border="1px" width="50%px">
            <tr>
                <td>&nbsp;&nbsp;</td>
                <td>&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;</td>
                <td>&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;</td>
                <td>&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;</td>
                <td>&nbsp;&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;</td>
                <td>&nbsp;&nbsp;</td>
            </tr>
        </table>
</body>