jQuery学习笔记

最新推荐文章于 2024-08-23 20:55:13 发布

HiLittleBoat

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量752

点赞数 4

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_46485137/article/details/124205753

版权

前端学习专栏收录该内容

8 篇文章 4 订阅

订阅专栏

一、jQuery简介与安装

1.1 初识jQuery

1、JavaScript 和 jQuery的关系：jQuery是一个库，里边存在大量的JavaScript函数

2、相关学习网站：

官网：jQuery

比较好的文档：show([s,[e],[fn]]) | jQuery API 3.2 中文文档 | jQuery API 在线手册 (cuishifeng.cn)https://jquery.cuishifeng.cn/show.html

3、jQuery的优势：

1.2 jQuery的安装

1、方法一：下载

step1：进入官网点download --->这里提供了两个版本

一个是 compressed 是压缩版本的（生产使用，体积小）, 一个是uncompressed是未压缩版本的（开发使用，体积大）,可以下未压缩的,东西会多一点,

step2：点击选的的版本，会跳转到出一群源码，右键另存为即可下载成想要的.js文件

step3：在HTML的<head>中用<script>标签引用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 下载完引用 -->
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>

2、使用CDN（内容分发网络）引用

提供CDN的很多，可以看一下网址：jQuery cdn加速 (jq22.com)从中选择一个放到<head>的代码中就行了，例如我选择百度CDN

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- CDN引用 -->
    <script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>
<head>

1.3 jQuery的基础语法

基本公式如下,就是通过selector选择符查找到HTML元素,并对他们执行某些操作action

   $(selector).action()

示例代码如下,

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

<a href="" id="test-jqury">点我点我</a>

<script>
    // 选择器就是css的选择器，绑定事件
    $('#test-jqury').click(function () {
        alert('hello,world');
    }) 
</script>

</body>
</html>

好了,你已经掌握了基本的jQuery, 接下来让我们深入学习吧!

二、选择器

原生js和jquery的联系, 与CSS选择器很像,详情可以看这篇文章CSS学习笔记_爱学习的小船的博客-CSDN博客_css学习笔记

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

    // jQuery CSS中的选择器,它都能用  基本公式: $(selector).action()
    $('p').click(); //标签选择器
    $('#id1').click(); //id选择器
    $('.class1').click(); //id选择器

文档工具站: 多利用1.1.2中提到的网站:https://jquery.cuishifeng.cn/ 进行学习

可以点击你需要去了解的东西来进行学习

三、事件

鼠标事件, 键盘事件, 其他事件等, 以下代码实现鼠标移动获取坐标位置:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.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('x:'+e.pageX+'y:'+e.pageY)
        })
    });

</script>
</body>

效果如图所示:

其他也可以实现许多事件,详细还是可以参考那个文档工具站去获取实现

三、操作DOM元素

3.1 节点文本的操作

<ul id="test-ul">
    <li class="java">Java</li>
    <li name="python">Python</li>
</ul>

<script>
    // 节点文本操作
    $('#test-ul li[name=python]').text(); // 获得值
    $('#test-ul li[name=python]').text('hello'); // 设置值
    $('#test-ul').html(); // 获得值
    $('#test-ul').html('<strong>123</strong>'); // 设置值
</script>

3.2 CSS的操作

可以对CSS样式进行操作

    //CSS操作
    $('#test-ul li[name=python]').css("color","red");

3.3 元素的显示和隐藏

本质其实就是 display:none

    //元素的显示和隐藏：本质 display：none
    $('#test-ul li[name=python]').show();  //显示
    $('#test-ul li[name=python]').hidden();  //隐藏

写在最后: 其他关联到的ajax可能得后期在更了, 学习的方法还是多看源码多看文档多练多实现

HiLittleBoat

关注

4
点赞
踩
1

收藏

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

jQuery的下载和导入, jQuery的初步学习选择器事件基本语法
复制链接

扫一扫

专栏目录