jQuery简单基础用法

jQuery

JavaScript

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

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>

</body>
</html>

选择器

<!--
公式：$(selector).action()
-->

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

  // jQuery
  $('p').click(); // 标签选择器
  $('#id1').click(); // id选择器
  $('.class1').click(); // 类选择器
</script>

事件

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

<!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('x:' + e.pageX + ',y:' + e.pageY);
    })
  })
</script>

</body>
</html>

操作DOM

节点文本操作

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

css的操作

$('#test-ul li[name=python]').css("color","red");
$('#test-ul li[name=python]').css({"color":"red"}); // 键值对设置属性

元素的显示和隐藏：本质: display : none

$('#test-ul li[name=python]').show(); // 显示
$('#test-ul li[name=python]').hide(); // 隐藏

可根据相应功能查询相关文档

posted @ 2023-01-24 03:55 家兴Java 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript基础

· CSS选择器相关

· jQuery 基础

· jQuery

· jQuery学习

公告

昵称：家兴Java
园龄： 2年3个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

jiaxing-java

jQuery简单基础用法

jQuery

公告

搜索

常用链接

随笔档案

阅读排行榜