JQuery

最新推荐文章于 2024-07-20 23:54:17 发布

sh2001824

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量234

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/sh2001824/article/details/126289934

版权

JQuery的三种写法

1、完整写法

    $(document).ready(function() {

            })

2、简写（1）

 $().ready(function() {

            })

3.常用

   $(function() {

        })

二、认识JQuery

使用jquery实现一个小案例：

<!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>
    <!-- 引入jQuery -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" id="click" value="显示">
    <div id="div1"></div>
    <div id="div2"></div>
</body>
<script>
    $(function() {
        $("#click").click(function() {
            // $("div").css("display", "block")
            $("div").show(2000)
        })
    })
</script>

</html>

效果：

三、选择器

id：根据 id 查找标签对象
class 选择器:根据 class 查找标签对象
标签选择器：选择器:根据标签名查找标签对象
* 选择器:表示任意的，所有的元素

层次选择器

后代选择器 :在给定的祖先元素下匹配所有的后代元素，即包括儿子元素，也包括孙子等其他元素
子元素选择器:在给定的父元素下匹配所有的子元素，只包括儿子元素，不包括孙子等其他元素

ID选择器（使用#名称）

案例（计算两个数、点击变颜色）

<!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.min.js"></script>
    <style>
        .div0 {
            width: 200px;
            height: 200px;
            margin-bottom: 30px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <input type="text" id="one">+
    <input type="text" id="tow">=
    <input type="text" id="result" disabled>
    <input type="button" value="计算" id="click">
    <hr>
    <input type="button" name="" id="gai" value="更改">
    <div class="div0">这是一个div</div>
    <p class="div0">这是一个p</p>
</body>
<script>
    $(function() {
        //计算
        // 获取按钮绑定单击事件
        $("#click").click(function() {
                //获取input输入的值  val():如果不传参数就是获取到value值，要是传参就是更改值
                var on =