• jQuery

    目录

    1、初识JQuery及公式

    获取JQuery

    2、JQuery选择器

    选择器

    3、JQuery事件

    事件

    4、JQuery操作Dom元素

    操作DOM

    1、初识JQuery及公式

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

    获取JQuery

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

    导入包

     

     

    官网：jQuery

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

     

    $(selector).action()

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    8.     
    9.     <script src="lib/jquery-3.6.1.js">script>
    10. head>
    11. <body>
    12.  
    14. <a href="" id="test-jquery">点我a>
    15.  
    16. <script>
    17.  
    18.     // 选择器就是css的选择器
    19. $('#test-jquery').click(function(){
    20.     alert('hello,jQuery');
    21. })
    22.  
    23. script>

     

    输出效果：

     

    2、JQuery选择器

    选择器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <script>
    10.     // 原生js，选择器少，麻烦很不好记
    11.  
    12.     //标签选择器
    13.     document.getElementsByTagName();
    14.  
    15.     //    ID选择器
    16.     document.getElementById();
    17.  
    18.     //    类选择器
    19.     document.getElementsByClassName();
    20.  
    21.     //    如果是jQuery 其实它就是css中的选择器它全部都能用！
    22.  
    23.     //标签选择器
    24.     $('p').click();
    25.  
    26.     //    id选择器
    27.     $('#id1').click();
    28.  
    29.     //    class选择器
    30.     $('.class1').click()
    31.  
    32. script>
    33.  
    34.  
    35. body>
    36. html>

     

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

     

    3、JQuery事件

    事件

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

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src="lib/jquery-3.6.1.js">script>
    8.  
    9.     <style>
    10.         #divMove {
    11.             width: 500px;
    12.             height: 500px;
    13.             border: 1px solid red;
    14.         }
    15.     style>
    16.  
    17. head>
    18. <body>
    19.  
    21. mouse : <span id="mouseMove">span>
    22. <div id="divMove">
    23.     在这里点击鼠标试一试
    24. div>
    25.  
    26. <script>
    27.     // 当前网页元素加载完毕之后，响应事件
    28.     $(function () {
    29.         $('#divMove').mousemove(function (e) {
    30.             $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
    31.         })
    32.     });
    33. script>
    34.  
    35.  
    36. body>
    37. html>

     

    输出效果：

     

    4、JQuery操作Dom元素

    操作DOM

    节点文本操作  

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="lib/jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <ul id="test-ul">
    10.     <li class="js">JavaScriptli>
    11.     <li name="python">Pythonli>
    12. ul>
    13.  
    14. <script>
    15.    // $('#test-ul li[name=python]').text();//获取值
    16.    // $('#test-ul li[name=python]').text('123');//设置值
    17.    // $('#test-ul').html();//获得值
    18.    // $('#test-ul').html('123');//设置值
    19. script>
    20.  
    21. body>
    22. html>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

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

     

    css操作

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="lib/jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <ul id="test-ul">
    10.     <li class="js">JavaScriptli>
    11.     <li name="python">Pythonli>
    12. ul>
    13.  
    14. <script>
    15.     $('#test-ul li[name=python]').css('color','red')
    16. script>
    17.  
    18. body>
    19. html>

     

     

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script src="lib/jquery-3.6.1.js">script>
    7. head>
    8. <body>
    9. <ul id="test-ul">
    10.     <li class="js">JavaScriptli>
    11.     <li name="python">Pythonli>
    12. ul>
    13.  
    14. <script>
    15.     // $('#test-ul li[name=python]').show()
    16.     $('#test-ul li[name=python]').hide()
    17. script>
    18.  
    19. body>
    20. html>

     

     

    测试

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

     

  • 相关阅读:
    make 和 makefile 的使用 ###通俗易懂
    vue3代码编写
    面向对象——封装
    复习C部分://1.练习：打印1000~2000的闰年 //2.写一个代码，打印100~200之间的素数 3.goto 跳去哪里
    PostgreSQL — 安装及常用命令
    小谈设计模式（26）—中介者模式
    windows系统下doccano标注工具使用
    如何看待时间序列与机器学习？
    简单理解《Effective Java》推荐准则
    Cmake 3.27.5 发布，开源构建系统
  • 原文地址：https://blog.csdn.net/qq_46423017/article/details/127103581