0
点赞
收藏
分享

微信扫一扫

【前端入门】jQuery

覃榜言 2022-02-27 阅读 71
JavaScript和jQuery

jQuery是一个库,存在大量的javascript函数。

一、获取jQuery

jQuery官网
在这里插入图片描述
常用的两种,上面的是压缩的,我们用compressed的就可以了,下面那种的是未压缩的,给开发者用的。
当然懒一点的话也可以用cdn,cdn就理解为有些大公司给你加速访问的一些在网上不用下载的jQuery。
提供一个cdn库:cdn库

引入一个官网的cdn做个示范(注释掉的是引入下载的jQuery文件):
在这里插入图片描述

二、语法

jquery的万能公式:

selector是选择器,和css的选择器类似,id选择器就加 # ,class选择器就加 . 。
action是行为,当进行某个操作时触发。
举个例子:

$('#test-jquery').click(function (){
    alert('嘿休休');
});

所以通过id选择器选择了 test-jquery 这个标签,在点击时触发函数(弹一个弹窗显示“嘿休休”)。

三、事件

事件一般有三种:鼠标事件、键盘事件、其他事件
以鼠标事件举例:
在这里插入图片描述
这是在选择器选择完成后可以调用的关于鼠标事件的方法。
当然,不只有这些,还有点击、双击……的事件可以去帮助文档上查看。
举个例子,帮助理解:

mouse : <span id="location"></span>
<div id="divMove">
    在这里移动鼠标试试!
</div>

<script>
    //当网页元素加载完毕之后响应事件
    // $(document).ready(function (){})
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#location').text(e.pageX+' , '+e.pageY);
        });
    })
</script>

在这里插入图片描述
当鼠标在红框内移动时,上面的两个数字,会实时显示鼠标的坐标。

四、操作DOM元素

操作节点文本
jquery方法js方法
text()innerText()
html()innerHTML()
操作css
$(selector).css({"key1":"value1","key2":"value2",});

举个例子:

<ul id="ul">
    <li class="js">JavaScript</li>
    <li name="py">Python</li>
</ul>

显示如下所示:
在这里插入图片描述
加上jquery

<script>
    //操作节点文本
    $('#ul li[name=py]').text('pppython');
    //操作css
    $('#ul li[class=js]').css({"color":"red","font-size":"34px"});
</script>

变成了下面这样:
在这里插入图片描述

显示与隐藏
$(selector).show();//显示
$(selector).hide();//隐藏

本质是css的display的值是否为none

举报

相关推荐

0 条评论