9、jQuery

最新推荐文章于 2024-06-13 16:29:32 发布

秃头酱酱

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量2.3k

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript css

本文链接：https://blog.csdn.net/weixin_59806308/article/details/128735048

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

jQuery库：里面存在大量的JavaScript函数

官网：https://jquery.com/

在这里插入图片描述

9.1 获取jQuery

jQuery引入

cdn 引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>

本地引入

<script src="lib/jquery-3.6.3.js"></script>

jQuery公式：$(selector).action()

<a href="" id="test-jquery">点我试试</a>
<script>
    //原来
    var test = document.getElementById('id');
    test.click()
    //使用jquery后
    //选择器就是CSS的选择器
    $('#test-jquery').click(function (){
        alert('hello,jquery');
    });
</script>

9.2 选择器

//原生的js 选择器少 麻烦不好记
document.getElementsByTagName();//标签
document.getElementById();//id
document.getElementsByClassName();//类

//jQuery，CSS中的选择器全都可以用
$('p').click();//标签
$('#id1').click();//id
$('.class1').click();//类

文档工具站： jQuery

9.3 事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.3.js"></script>
    <style>
      #divMove{
        width: 500px;
        height: 500px;
        border:1px solid red;
      }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse：<span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>

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

9.4 操作DOM

节点文本操作

$('#test-ul li[name="html"]').text();//获得值
$('#test-ul li[name="html"]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

CSS的操作

$('#test-ul li[name="css"]').css("color","pink");

元素的显示和隐藏

本质 display:none

$('#test-ul li[name="css"]').show();
$('#test-ul li[name="css"]').hide();

其他测试

$(window).width();
$(window).height();
$('#test-ul li[name="css"]').toggle();

秃头酱酱

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
4
评论
9、jQuery

jQuery库：里面存在大量的JavaScript函数，官网：https://jquery.com/。 jQuery引入：cdn 引入、本地引入。选择器就是CSS的选择器。事件：鼠标事件，键盘事件，其他事件。操作DOM：节点文本，CSS，元素的显示和隐藏，其他测试
复制链接

扫一扫