jQuery（一）

最新推荐文章于 2024-08-10 16:15:00 发布

檬是柠檬的檬826

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量204

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_62343228/article/details/123903307

版权

本文介绍了jQuery的基本概念、特点和使用方式，包括简化的DOM操作、丰富的选择器系统如基本选择器、层次选择器、过滤选择器和属性过滤选择器。jQuery的轻量级、跨浏览器兼容性和强大的DOM操作能力使其成为JavaScript开发中的得力工具。通过实例展示了如何改变元素样式、选择特定DOM元素以及利用属性过滤选择器进行更精确的操作。

摘要由CSDN通过智能技术生成

初识jQuery

1.什么是jQuery

jQuery：jQuery是一个快速、简介的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。

jQuery特点：

jQuery是一个轻量级的脚本，其代码非常小巧。
语法简介易懂，学习速度快，文档丰富。
支持CSS1~CSS3定义的属性和选择器。
跨浏览器，支持的浏览器包括IE6~IE11和FireFox、Chrome等。
实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。
插件丰富，可以通过插件扩展更多功能。

2.使用jQuery

//语法一（简写形式）
$(function(){
	//页面DOM加载后执行的代码
})

//语法2（完整形式）
$(document).ready(function(){
	//页面DOM加载完成后执行的代码
})

‘$’是jQuery的全局对象，代表的是jQuery。

<body>
    <div id="dd"></div>
    <script>
        // $(document).ready(function(){
        //     $("#dd").css({
        //         "width":"200px",
        //         "height":"200px",
        //         "background":"red"
        //     })
        // })

        $(function(){
            $("#dd").css({
                "width":"200px",
                "height":"200px",
                "background":"red"
            })
        })
    </script>
</body>

在这里插入图片描述

3.jQuery选择器

jQuery的基本选择器和CSS选择器类似：

（1）基本选择器

在这里插入图片描述

<body>
    <p id="one">one</p>
    <p id="two">two</p>
    <p id="three">three</p>

    <script>
        $(function(){
            $("#two").css("backgroundColor","red")

            $("p").css({"color":"blue"})

            $("p").eq(0).css("backgroundColor","yellow")
        })
    </script>
</body>

（2）层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器

在这里插入图片描述

<body>
    <div id="one">
        <div id="two">
            <p>西安邮电大学</p>
        </div>
        <div>
            <div>陕西师范大学</div>
        </div>
    </div>

    <div id="pt">AAAAAA</div>
    <div id="pf">BBBBBB</div>

    <script>
        $(function(){
            // $("body div").css("backgroundColor","red");

            $("body>div").css("backgroundColor","red");

            $("#one+div").css("backgroundColor","#bbffaa")

        })
    </script>
</body>

（3）过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

在这里插入图片描述

<body>
    <p>西游记</p>
    <p>水浒传</p>
    <p>红楼梦</p>
    <p>三国演义</p>

    <script>
        $(function(){
            $("p:first").css("color","red");

            $("p:last").css("color","green")
        })
    </script>
</body>

<body>
    <p id="p1">西游记</p>
    <p id="p2">水浒传</p>
    <p id="p3">红楼梦</p>
    <p id="p4">三国演义</p>

    <script>
        $(function(){
            //将id不是p1的元素的字体改成红色
            // $("p:not('#p1')").css("color","red");

            //将索引为偶数的p元素背景设置为绿色
            $("p:even").css("backgroundColor","green");

            //将索引为奇数的p元素字体颜色设置为红色
            $("p:odd").css("color","red");
        })
    </script>
</body>

（4）属性过滤选择器

在这里插入图片描述

<body>
    用户名:<input type="text" name="userName" id="userId">
    <br><br>
    地址:<input type="text" name="userAddr" id="addrId">
    <br><br>
    电话:<input type="text" name="phoneAA" id="phoneId">

    <script>
        $(function(){
            //选择拥有name属性的input元素
            $("input[name]").css("color","red");

            //选择name属性为userName的input
            $("input[name='userName']").css("color","blue");

            //选择id属性值是以addr开头的input
            $("input[id^='addr']").css("backgroundColor","green");

            //选择name属性值是以AA结束的input
            $("input[name$='AA']").css("backgroundColor","yellow")
        })
    </script>
</body>

（5）子元素过滤选择器

在这里插入图片描述

<body>
    <div id="one">
        <p>背景</p>
        <p>西安</p>
        <p>洛阳</p>
        <p>南京</p>
    </div>

    <div id="two">
        <p>丁一</p>
        <p>倪二</p>
        <p>张三</p>
        <p>李四</p>
    </div>

    <input type="text" disabled>

    <br><br>

    <label>
        <input type="radio" checked name="sex">男
    </label>

    <label>
        <input type="radio" name="sex">女
    </label>

    <br><br>
    <select multiple>
        <option value="1">陕西</option>
        <option value="2">河南</option>
        <option value="1" selected>上海</option>
        <option value="1">北京</option>
    </select>

    <script>
        $(function(){
            //选择div所有索引为偶数的子元素  （div和：中间有空格）
            $("div :nth-child(even)").css("color","green")

            //选择div下索引为2的倍数的子元素（index从1开始）
            $("div :nth-child(2n)").css("color","blue");

            //选择id为two的第一个子元素
            $("#two :first-child").css("color","#bbffaa")
        })
    </script>
</body>