jQuery

1、初识JQuery及公式

获取JQuery

2、JQuery选择器

选择器

1、初识JQuery及公式

JavaScript是个工具
JQuery是个库，里面存在大量的JavaScript函数

获取JQuery

上面是开发，下面是生产（可以两个都下载下来） （去jQuery官网下载！）

导入包

官网：jQuery

中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

$(selector).action()


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    
    <script src="lib/jquery-3.6.1.js">script>
head>
<body>
 
<a href="" id="test-jquery">点我a>
 
<script>
 
    // 选择器就是css的选择器
$('#test-jquery').click(function(){
    alert('hello,jQuery');
})
 
script>

输出效果：

2、JQuery选择器

选择器


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
 
<script>
    // 原生js，选择器少，麻烦很不好记
 
    //标签选择器
    document.getElementsByTagName();
 
    //    ID选择器
    document.getElementById();
 
    //    类选择器
    document.getElementsByClassName();
 
    //    如果是jQuery 其实它就是css中的选择器它全部都能用！
 
    //标签选择器
    $('p').click();
 
    //    id选择器
    $('#id1').click();
 
    //    class选择器
    $('.class1').click()
 
script>
 
 
body>
html>

需要其他的选择器就去这里面找：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

3、JQuery事件

事件

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <script src="lib/jquery-3.6.1.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>

输出效果：

4、JQuery操作Dom元素

操作DOM

节点文本操作


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="lib/jquery-3.6.1.js">script>
head>
<body>
<ul id="test-ul">
    <li class="js">JavaScriptli>
    <li name="python">Pythonli>
ul>
 
<script>
   // $('#test-ul li[name=python]').text();//获取值
   // $('#test-ul li[name=python]').text('123');//设置值
   // $('#test-ul').html();//获得值
   // $('#test-ul').html('123');//设置值
script>
 
body>
html>

$('#test-ul li[name=python]').text();//获取值

$('#test-ul li[name=python]').text('123');//设置值

$('#test-ul').html();//获得值

$('#test-ul').html('123');//设置值

css操作


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="lib/jquery-3.6.1.js">script>
head>
<body>
<ul id="test-ul">
    <li class="js">JavaScriptli>
    <li name="python">Pythonli>
ul>
 
<script>
    $('#test-ul li[name=python]').css('color','red')
script>
 
body>
html>

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="lib/jquery-3.6.1.js">script>
head>
<body>
<ul id="test-ul">
    <li class="js">JavaScriptli>
    <li name="python">Pythonli>
ul>
 
<script>
    // $('#test-ul li[name=python]').show()
    $('#test-ul li[name=python]').hide()
script>
 
body>
html>

测试


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

相关阅读:
别再盯着40系，这些才是目前性价比最高的显卡
windows SDK编程 --- 消息(3)
OpenJudge NOI 2.1 2472:子串计算
使用CyberController来将旧手机改造成电脑外挂------手机交互翻译、人脸解锁、语音识别....各个功能等你来探索
技术速递｜宣布为 .NET 升级助手提供第三方 API 和包映射支持
python 虚拟环境搭建
光谱下的养殖业：数据可视化的现代变革
MapReduce核心原理（下）
CSP-J 2022 第一轮试题
Unity3D之简单溶解特效制作

原文地址：https://blog.csdn.net/qq_46423017/article/details/127103581