• JavaScript-jQuery

    目录

    1.初始jQuery及公式

    2.jQuery选择器

    3.jQuery事件

    4.jQuery操作DOM元素

    5.小结

    1.初始jQuery及公式

    javaScript 和 jQuery的关系？
    jQuery库，里面存在大量的 JavaScript 函数

    1、 获取 jQuery
    官网下载地址
    文档工具站：http://jquery.cuishifeng.cn/

    选择：Download the uncompressed, development jQuery 3.6.1

     点击之后，是源码页面，点击页面另存为即可，把下载的 js 文件放到项目中。

    公式：

     $就代表jQuery，()内是选择器
     公式：$(selector).action()

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="lib/jquery-3.6.1.js">script>
    7. head>
    8. <body>
    10. <a href="" id="test-jquery">点我a>
    11. <script>
    12.     //这里的选择器就是css的选择器
    13.     $('#test-jquery').click(function () {
    14.         alert('hello,jQusery')
    15.     })
    16. script>
    17. body>
    18. html>

    2.jQuery选择器

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <script>
    9.     //原生js，选择器少，麻烦不好记
    10.     //标签选择器
    11.     document.getElementsByTagName();
    12.     //id选择器
    13.     document.getElementById();
    14.     //类选择器
    15.     document.getElementsByClassName();
    16.  
    17.     //jQuery(css中的选择器它全部都通用)
    18.     $('p').click();//标签选择器
    19.     $('#id1').click();//id选择器
    20.     $('.class1').click();//类选择器
    21. script>
    22. body>
    23. html>

    3.jQuery事件

    //事件
$('.class1').mousedown();//鼠标按下
$('.class1').mouseenter();
$('.class1').mouseleave();//鼠标离开
$('.class1').mousemove();//鼠标移动
$('.class1').mouseover();//鼠标点击结束
$('.class1').mouseout()
$('.class1').mouseup() 

    获取鼠标的坐标：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     <script src="lib/jquery-3.6.1.js">script>
    8.     <style>
    9.         #divMove{
    10.             width: 500px;
    11.             height: 500px;
    12.             border:1px solid blueviolet;
    13.         }
    14.     style>
    15. head>
    16. <body>
    18. mouse:<span id="mouseMove">span>
    19. <div id="divMove">
    20.     在这里移动鼠标试试
    21. div>
    22. <script>
    23.     //当网页元素加载完毕之后响应事件
    24.     // $(document).ready(function () {
    25.     //    
    26.     // })
    27.     //上述代码格式简化写法：
    28.     $(function () {
    29.         $('#divMove').mouseover(function (e) {
    30.             //要把获取的内容显示在span标签中 -> 获取span标签
    31.             $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
    32.         });
    33.     })
    34. script>
    35. body>
    36. html>

    4.jQuery操作DOM元素

    节点文本操作：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     <script src="lib/jquery-3.6.1.js">script>
    8. head>
    9. <body>
    10. <ul id="test-ul">
    11.     <li class="js">JavaScriptli>
    12.     <li name="python">Pythonli>
    13. ul>
    14. <script>
    15.     //原来的操作
    16.     // document.getElementById()
    17.     $('#test-ul li[name=python]').text();
    18.     $('#test-ul').html();
    19. script>
    20. body>
    21. html>

    获得值：

    设置值：

    css操作：

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

    元素的显示和隐藏：

    本质 display:none

    隐藏：

    $('#test-ul li[name=python]').hide();

    显示：

        $('#test-ul li[name=python]').show();

    娱乐测试：

    1. $(window).width()
    2. $(window).height()
    3. $('#test-ul li[name=python]').toggle();//切换，显示变为隐藏，隐藏变为显示

    未来ajax()： 

    1. $('#form').ajax()
    2.  
    3. $.ajax({url:"test.html",context:document.body,success:function(){
    4. 	$(this).addClass("done");
    5. }})

    5.小结

    1、如何巩固JS（看 jQuery源码，看游戏源码！）

    2、巩固 HTML、CSS（扒网站，全部 down下来，然后对应修改看效果）

  • 相关阅读:
    USB设备枚举
    想学python爬虫，有没有推荐的书籍？
    戴尔PowerEdge R650服务器荣获国家级实验室5项证书
    Solon2 之基础：一、常用应用配置说明
    目标检测YOLO实战应用案例100讲-基于机器视觉的输电线路小目标检测和缺 陷识别
    怎么打造小红书爆款笔记账号？教你几招
    低代码，没有想象的那么容易，一个过来人的吐槽
    图片的角怎么弄成圆角
    大气环境一站式技能提升：SMOKE-CMAQ实践技术
    可视化工具Netron介绍
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126677695