jQuery基础

最新推荐文章于 2024-09-27 15:52:57 发布

hxgbieshuomeibanfa

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量758

点赞数 2

分类专栏：前端基础文章标签：前端 html5 javascript css

本文链接：https://blog.csdn.net/weixin_63997211/article/details/124134446

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery简化DOM操作，包括选择器的使用如ID、样式、标签、层级等，并展示了如何通过jQuery绑定事件，如点击事件。通过实例演示了点击表头隐藏/显示下拉菜单及表格中删除行的功能，强调了jQuery在提高效率上的优势。

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

在js的基础操作里，我们可以通过DOM和BOM来操作html中的一些内容，例如这样

var tag = document.getElementById("xxx");//跟根据id获取标签
tag.innerText //获取标签中的文本
tag.innerText = "hhhh" //修改标签中的文本
var tag = document.createElement("div");//创建标签
tag.appendChild(Tag)//把写的内容填加到标签里

但是这样做还是会有点麻烦，我们利用jQuery中的各种用法可以更加方便，同样，与bootstrap相似，在使用前也要将jQuery引入

用法笔记1

//寻找标签
1.id选择器 $("#txt")
2.样式选择器 $(".c1")   
<h1 class="c1"></h1>
<h1 class="c1"></h1>
<h1 class="c2"></h1>
3.标签选择器 $("h1")             
<h1 class="c1"></h1>
<div class="c1"></div>
<h1 class="c2"></h1>
4.层级选择器 $(".c2 .c2 a") 
<h1 class="c1">
    <h1 class="c1">
        <a></a>
        <span></span>
    </h1>
</h1>
5.多选择器$("h1,h2") 选择多个
6.属性选择器  $("input[name='n1']")
<div>
    <div>北京</div>
    <div id="c1">上海</div>
    <div>深圳</div>
</div>
7.找到上一级 $("#c1").prev()
8.找到下一级或下下级 $("#c1).next.next()

9.找到所有的兄弟  $("#c1").siblings()
10.找到父亲 $("#c1").prarent()
11.找到孩子 $("#c1").child()
12.在所有的儿子里面找到class="huhu"
$("#c1").child(".huhu")

不要问我为什么这一块用两段代码块，因为我写的时候设置了语法不显示了呜呜呜

<div id="c1"></div>

$("#c1").text() //获取文本内容
$("#c1").text("huhuhu") //设置文本内容
<input type="text" id="c2">
$("#c2").val() //获取用户输入的值
$("#c2").val() //设置值

$("<li>") //创建li标签

案例一

实现一个点击表头可以隐藏或显示下拉栏的动态操作

<!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>
    <style>
        .menus {
            width: 200px;
            height: 900px;
            border: 1px solid pink;
        }

        .menus .header {
            background-color: gold;
            padding: 5px 5px;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddd
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="click_me(this)">上海</div>
            <div class="content hide">
                <a>宝山区</a>
                <a>普陀区</a>
                <a>青浦区</a>
            </div>
        </div>

        <div class="item">
            <div class="header" onclick="click_me(this)">北京</div>
            <div class="content hide">
                <a>大兴区</a>
                <a>昌平区</a>
                <a>海淀区</a>
            </div>
        </div>
        

    </div>

    <script src="static\jquery-3.5.1.min.js"></script>
    <script>
        function click_me(self) {
            
            var has_hide = $(self).next().hasClass("hide");
            if(has_hide){
                $(self).next().removeClass("hide");
            }else{
                $(self).next().addClass("hide");
            }
        }
    </script>

</body>

</html>

输出展示

用法笔记二

jQuery中的绑定事件
<ul>
    <li>hu</li>
    <li>huhu</li>
    <li>huhuhu</li>
</ul>

$("li").click(function(){
    //点击li标签，自动执行这个函数
    //$(this) 当前你点击的这个标签
})

$(function(){
//当页面框架加载完成后，自动执行,加快显示
});

示例二

表格中添加按钮实现数据的删除或者增加

<!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>删除表格</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>huhu</td>
                <td>
                    <input type="button" value="删除" class="delete">
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>huhu</td>
                <td>
                    <input type="button" value="删除" class="delete">
                </td>                
            </tr>
        </tbody>
    </table>
    <script src="static\jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //找到所有class="delete"的标签，绑定事件
            $(".delete").click(function() {
            $(this).parent().parent().remove();
            });
        })
    </script>
</body>
</html>

输出结果