首页 > 其他分享 >jQuery简单基础用法

jQuery简单基础用法

时间:2023-01-24 04:11:07浏览次数:42  
标签:jQuery name python li ul 简单 test 用法

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(); // 隐藏

 

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

 

 

标签:jQuery,name,python,li,ul,简单,test,用法
From: https://www.cnblogs.com/jiaxing-java/p/17065756.html

相关文章

  • 简单命令
    echo @echooff回显命令关echo窗口打印文本type 显示文本文件内容的内置命令。使用 type 命令查看文本文件而不对其进行修改。type[<drive>:][<path>]<filenam......
  • 环境简单配置
    rem(remcmd注释声明)cmd默认路径:C:\Users\用户名>有些不喜欢将测试文件放在C盘这时要将cmd的工作目录更改不然无法找到练习文件以D盘根目录为例cd/dd:\ 练习......
  • 机制设计原理与应用(二)简单的拍卖机制
    目录2简单的拍卖机制2.1在CS/EE中的应用2.2VCG机制2.3LOS机制(类似Vickrey)2简单的拍卖机制2.1在CS/EE中的应用关键词拍卖/机制设计/游戏(真实性/激励相容性/......
  • 编写简单的button配合input实现上传文件操作
    <template> <button>导入文件<inputtype="file"@change="fileChange"accept=".*":disable="disable"/></button></template><script>d......
  • python一个函数简单接收命令行参数
    需要使用sys和getopt库defarg(_,__):#接收命令行参数importsysimportgetopt'''参数:_:短参数str,列如:-f-g-p__:长参数list,列如:['file','......
  • Vue3中的异步组件defineAsyncComponentAPI的用法示例
    介绍当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载;这样的做得目的可以很好的提高用户体验。为了实现这个功能,Vue3中为我......
  • caddyserver nginx adaper 简单说明
    caddyserver包含了一个强大的adapter架构设计,我们可以方便的进行caddyserver扩展nginx扩展的处理核心也是基于adapter模块扩展的,通过解析nginx.conf文件,然后转换......
  • 简单C/S模型代码
    server.c#define_CRT_SECURE_NO_WARNINGS#include<WinSock2.h>//windowssocked第二版本#pragmacomment(lib,"Ws2_32.lib")#include<stdio.h>#include<stdlib.h>......
  • C# 简单实现 奇葩排序中的算盘排序(算珠排序)算法
    Console.WriteLine("HelloWorld!");int[]arr={1,3,4,0,22,4,0,6,3,10,8,6,7};Console.WriteLine(string.Join(",",arr.ToList(......
  • dremio api 简单说明
    以前在简单介绍dremiowebserver的时候提过dremio的api,实际上包含了量大部分,一个是为了bff的(方便前端使用的),一个是独立的restapi方便业务调用的(实际上就是官方文档中看......