jQuery 浅浅学习一下历史的产物

什鲤子

已于 2022-12-14 14:52:01 修改

阅读量78

点赞数

分类专栏： web开发文章标签： jquery 学习 javascript

于 2022-12-14 14:44:32 首次发布

本文链接：https://blog.csdn.net/m0_48209770/article/details/128313641

版权

web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery

是 JavaScript 的第三方模块

0.1 下载

点此下载 jQuery，放在 static/js/ 中，在 body 标签中加上

<script src="static/js/jquery-3.6.0.min.js"></script>

0.2 示例

<span id="world">hello world</span>
<script>
    //找到 id 为 world 的标签，修改其文本为 goodbye world，jQuery的做法是
    $("#world").text("goodbye world")
	
	/*
    $("#world") //找到 id 为 world 的标签
    $("#world").text() //获取标签文本
    $("#world").text("goodbye world") //修改其文本为 goodbye world
    */
</script>

比 DOM 快多了

1.1 直接寻找标签

种类	语法	备注
ID选择器	`$("#txt")`
样式选择器	`$(".c1")`
标签选择器	`$("h1")`
层级选择器	`$(".c1 .c2 a")`
多选择器	`$("#c1,#c2,li")`	可以选很多
属性选择器	`$input[name='n1']`	选出`input`标签且`name`为`"n1"`的

1.2 间接寻找标签

$("#txt").prev() 前一个兄弟
$("#txt").next() 后一个兄弟
$("#txt").siblings 所有的兄弟

$("#txt").parent() 找父亲
$("#txt").children() 获取所有孩子
$("#txt").children(".p10") 获取所有孩子，且样式为p10的
$("#txt").find(".p10") 找子孙里样式为p10的

2 操作样式

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

<button class="abab" onclick="clickMe(this);">点我就消失</button>
<!-- this 表示当前对象的一个引用 -->

<script>
    function clickMe(self) {
        $(self).addClass("hide") // 添加样式
        //$(self).removeClass("hide") // 删除样式
        //$(self).hasClass("hide") // 返回布尔值
    }
</script>

3 操作值

$("#c1").text()      //获取文本内容
$("#c1").text("abc") //修改文本内容
$("#c1").val()       //获取用户输入的值
$("#c1").val("abc")  //设置用户输入的值

4 创建标签

$("li") // 找 li 标签
$("<li>") // ⭐创建 li 标签对象
$("#一个ul的ID").append($("<li>").text("内容")) //就可以实现添加了

5 事件

DOM 方式的事件

<input type="button" value="提交" onclick="getInfo()">
<script>
    function getInfo(){
    }
</script>

jQuery 方式的事件

<input type="button" value="提交">
<script>
    $("input").click(function(){ // 对所有的<input>加上点击响应
    	// 点击li标签时，自动执行这个函数
    	$(this) //当有多个input时，$(this)可以取出当前点击的标签，
    })
</script>

点击就删除

<input class="abab" type="button" value="点我就消失">
<script>
    $(".abab").click(function(){
        $(this).remove() //⭐
    })
</script>

6 小 trick

<body>
    <!-- 加载内容 -->
    <div></div>
    <img src="" alt="">
    <div></div>
    <!------------->

    <script>
        js内容
    </script>
</body>

简单来说，就是js默认会在框架及内容都加载完成后再加载。若img过大加载时间过长，js的一些功能就不会起作用。

<body>
    <!-- 加载内容 -->
    <div></div>
    <img src="" alt="">
    <div></div>
    <!------------->
    
    <script>
        $(function () {
            js内容
        })
    </script>
</body>