jQuery的学习

最新推荐文章于 2022-08-08 15:43:14 发布

右耳发烫

最新推荐文章于 2022-08-08 15:43:14 发布

阅读量128

点赞数

分类专栏：基础学习

本文链接：https://blog.csdn.net/weixin_42009638/article/details/90550693

版权

基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery3.3.1

1.引包

# 该标签如果用来引包，里面不允许写任何js语句！
<script src="jquery-3.3.1.min.js></script>

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    alert("hello world.");
</script>

注意：使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包。

2.入口函数

$()或jQuery() 称之为jq选择器环境，在里面加上引号填写相关选择器即可，就可以获取匹配的元素。

js：window.onload=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});

（1）两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
（2）JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
（3）JQ入口允许存在多个，且并行存在，都会生效；
（4）JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。

3.案例

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
 
    // JS 页面加载完成
    window.onload = function () {
        alert("谢谢惠顾！");
    }
 
    window.onload = function () {
        alert("恭喜你，中特等奖！");
    }
 
    // $ 符号就是 jquery 的简写方式.
    // 复杂书写 : 
    $(document).ready(function () {
        alert("恭喜你，中一等奖！");
    });
 
    // 简化书写
    $(function () {
        alert("恭喜你，获得女朋友一个！");
    })
 
</script>

4.事件

# jq中的事件类型统一不要加on
js：js对象.onclick = function(){...}
jq：jquery对象.click(function(){...})

5.案例-js代码

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // 注意 : JS 的代码都是写在 = 后面.   jquery 的代码基本上都是写在 () 里面.
    // jquery 入口函数 :
    $(function () {
 
        // JS 代码 :
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("按钮被点击了...");
        }
    });
</script>

jQuery代码

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // 注意 : JS 的代码都是写在 = 后面.   jquery 的代码基本上都是写在 () 里面.
    // jquery 入口函数 :
    jQuery(function () {
 
        // jquery 代码 :
        $("#btn").click(function () {
            alert("按钮被点击了...");
        });
    });
</script>

  <input type="button" value="按钮" id = "btn"/>

6.事件

（1）在jq里面，通过$()返回的数组，允许开发者整体操纵
（2）选择数组中的其中一个元素：js对象[下标] jq对象.eq(下标)

html代码：

<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>

js代码：

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {
 
        // JS 代码为两个按钮绑定事件 (JS代码不可以进行整体绑定)
        // JS 中 document.getElementsByTagName 该方法返回的是一个数组, 只能取出对应的元素才可以绑定.
        var inputs = document.getElementsByTagName("input");
        inputs[0].onclick = function () {
            alert("按钮1111被点击了...");
        }
 
        inputs[1].onclick = function () {
            alert("按钮2222被点击了...");
        }
    });
</script>

jQuery代码：

# JQuery整体操作绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {
 
        // jquery 书写 :
        $("input").click(function () {
            alert("按钮被点击了...");
        });
    });
</script>

# 单个标签实现事件绑定
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    // jquery 入口函数 :
    $(function () {
 
        // jquery 书写 :
        $("input").eq(0).click(function () {
            alert("按钮1111被点击了...");
        });
 
        $("input").eq(1).click(function () {
            alert("按钮2222被点击了...");
        });
    });
</script>

jQuery的学习到此结束！！

右耳发烫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的学习

JQuery3.3.11.引包# 该标签如果用来引包，里面不允许写任何js语句！<script src="jquery-3.3.1.min.js></script><script src="../js/jquery-3.3.1.min.js"></script><script> alert("hello world."...
复制链接

扫一扫

专栏目录