jquery笔记

最新推荐文章于 2024-09-16 08:47:17 发布

大狗晋

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量227

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_52957373/article/details/126307029

版权

jQuery

jquery是存有大量js代码的库

获取jQuery：可以直接使用在线链接。链接在cdn jQuery中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>

</body>
</html>

直接下载jQuery库导入项目，jQuery官网下载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

</body>
</html>

选择器

选择器有id选择器、类选择器、标签选择器等等。
使用方法：

$(选择器).action();

例如：

$('p').click();标签选择器
$('#id').click();id选择器
$('.class').click();类选择器

jQuery事件

jQuery能够绑定的事件主要包括：

鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是和。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。

其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当、或的内容改变时触发；
submit：当提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。

以鼠标事件为例，获取鼠标所在的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>

    <style>
        #diMove{
            width:500px;
            height:500px;
            border: solid 1px black;
        }
    </style>

</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="diMove">
  move
</div>
<script>
    $(function () {
        $('#diMove').mousemove(function (e) {
        $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>
</body>
</html>

在这里插入图片描述

操作DOM元素

$('#ul_test li[name=he]').text();//获取内容
$('#ul_test li[name=he]').text('world');//修改内容

在这里插入图片描述
设置html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="ul_test">
    <li id="js">JavaScript</li>
    <li name="he">hello</li>
</ul>
<script>
    $('#ul_test li[name=he]').text();//获取值
    $('#ul_test li[id=js]').text();//修改取值
    $('#ul_test li[id=js]').html('<b>hello world</b>');//可以增加值的标签
</script>
</body>
</html>

可见第一行在被修改的同时，格式上也进行了加粗
在这里插入图片描述

append() 把DOM添加到最后， parepend() 则把DOM添加到最前。
如果要把新节点插入到指定位置，例如，hello world和hello之间，那么，可以先定位到hello world，然
后用 after() 方法：

CSS的操作

$('#ul_test li[name=he]').css("color","blue");

在这里插入图片描述
元素的显示和隐藏：

//其本质为css中 display: none;
    $('#ul_test li[id=js]').hide();
    $('#ul_test li[id=js]').show();

大狗晋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫