jQuery基础

最新推荐文章于 2024-10-02 05:39:15 发布

不期望不希望不奢望

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量194

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_72101182/article/details/126291738

版权

为了简化JavaScript的开发，一些JavsScript库就诞生了。JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。

一.jQuery的特点

轻量级:封装后的库只有不到100k，下载的时候很快
强大选择器:方便快速查找DOM元素
隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数
链式调用:可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容
丰富的插件支持

二.如何使用jQuery

1,引入jQuery文件
2．入口函数
3．功能实现

jQuery文件下载地址：jQuery

jQuery入口函数

//第一种写法
$(function() {

})  
//第二种写法      
$().ready(function () {

})
//第三种写法     
$(document).ready(function() {

})

三.jQuery选择器

什么是jQuery选择器？

jQuery选择器是jQuery为我们提供的一组茜法，让我们更加方便的获取到页面中的元素。注意: jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

1.基本选择器

2.层次选择器

案例：

<body>
    <input type="text" id="one">+<input type="text" id="two">=<input type="text" id="three">
    <button type="button" id="btn1">计算</button><br>
    <button type="button" id="btn2">重置</button>
    <div id="div0">这是一个div</div>
    <p id="div0">这是一个p</p>
    <script>
        $(function() {
            $("#btn1").click(function() {
                var first = $("#one").val()
                var second = $("#two").val()
                var result = parseInt(first) + parseInt(second)
                $("#three").val(result)
            })
            $("#btn2").click(function() {
                $("div,p").css("color", "#fff")
                $("p#div0").css("background", "green")
            })
        })
    </script>
</body>

3.属性选择器

案例：

<body>
    <button id="btn1">所有含class的标签</button>
    <button id="btn2">所有含class是box1的标签</button>
    <button id="btn3">所有class不是box1的标签</button>
    <button id="btn4">所有class以b开头的标签</button>
    <button id="btn5">所有class包含o的标签</button>
    <br>
    <div>div</div>
    <div class="box1">box1</div>
    <div class="bex2">bex2</div>
    <div class="pox1">pox1</div>
    <div class="pox2">pox2</div>
    <script>
        $(function() {
            $("#btn1").click(function() {
                $("div[class]").css("background", "red")
            })
            $("#btn2").click(function() {
                $("div[class=box1]").css("background", "green")
            })
            $("#btn3").click(function() {
                $("div[class!=box1]").css("background", "blue")
            })
            $("#btn4").click(function() {
                $("div[class^=b]").css("background", "pink")
            })
            $("#btn5").click(function() {
                $("div[class*=o]").css("background", "yellow")
            })
        })
    </script>
</body>

4.操作标签的属性

案例：

<body>
    <div id="div0" class="box0"></div>
    <input type="checkbox" id="cb">
    <input type="button" value="点击" id="ipt">
    <script>
        $(function() {
            $("#div0").click(function() {
                //attr(属性名):可以获取到标签的属性值(非布尔类型)
                // console.log($("#div_0" ).attr( "class" ))
                //attr(属性名,属性值):用来设置标签的属性
                $("#div0").attr("class", "box1")
            })
            $("#ipt").click(function() {
                // prop(属性名):用来获取属性值是布尔类型的
                $("#cb").prop("checked", "true")
            })
        })
    </script>
</body>

5.基本过滤选择器

案例：

            $("#btn1").click(function() {
                $("tbody tr:even").css("background", "green")
            })
            $("#btn2").click(function() {
                $("tbody tr:eq(2)").css("background", "yellow")
            })
            $("#btn3").click(function() {
                $("tbody tr:first").css("background", "pink")
            })
            $("#btn4").click(function() {
                $("tbody tr:gt(1):not(:last)").css("background", "aqua")
            })

6.筛选选择器

7.筛选选择器的方法

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        ul {
            list-style: none;
        }
        
        ul li {
            width: 200px;
            /* height: 220px; */
            border: 1px solid pink;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <span class="title">标题</span>
            <div>我是弹出来的</div>
        </li>
        <li>
            <span class="title">标题</span>
            <div>我是弹出来的</div>
        </li>
        <li>
            <span class="title">标题</span>
            <div>我是弹出来的</div>
        </li>
        <li>
            <span class="title">标题</span>
            <div>我是弹出来的</div>
        </li>
    </ul>
    <script>
        $(function() {
            $(".title").click(function() {
                $(this).next().slideDown(1000).parent().siblings().children("div").slideUp(1000)
            })
        })
    </script>
</body>

</html>