• jquary

    什么是jquary

    jQuery 是一个 JavaScript 函数库。

    jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

    jQuery 库包含以下功能：

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • 实用程序

    jQuery的特点

    轻量级：经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB
     
    链式语法 ：$("p.surprise").addClass("ohmy").show("slow");
    CSS 1-3 选择器：支持CSS选择器选定DOM对象
    跨浏览器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+

    简单：较其它JS库更容易入门，中、英文档很齐全
    易扩展： JQuery UI 、 JQuery FX –已经有很完善的基于JQuery的用户界面库 和网页特效库


    “写的更少，做的更多” 的轻量级 JavaScript 库。

    jQuery对象与DOM对象转换

    定义DOM对象
    JavaScript方式
        var id=document.getElementById(“id”);

    jQuery方式
        var $id=$(“#id”);

    说明：jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象

     jQuery对象转换成DOM对象

    jquery对象[索引]

    jquery对象.get(索引)

    var $id=$(“.d”);                                 得到一个jQuery数组对象$id
    var id=$id[0];                                    得到数组中的第一个DOM对象

    另外也可以使用：
    var id=$id.get(0);

    Dom对象转换为jQuery对象

    $(dom对象)
    var id=document.getElementById(“id”);
    var $id=$(id);

    在jQuery库中，$就是jQuery的一个简写形式。
    如：
        $(“#id”)
    等价于
        jQuery(“#id”)

    在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法，以免在同时使用JavaScript和jQuery时发生冲突。

    jQuery 语法  

    jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

    基础语法： $( selector ). action ()

    • 美元符号定义 jQuery
    • 选择符（selector）"查询"和"查找" HTML 元素
    • jQuery 的 action() 执行对元素的操作

    实例:

    • $(this).hide() - 隐藏当前元素

    • $("p").hide() - 隐藏所有

      元素

    • $("p.test").hide() - 隐藏所有 class="test" 的

      元素

    • $("#test").hide() - 隐藏 id="test" 的元素

     文档就绪事件/入口

    1. <script>
    2. $( document ) . ready ( function () { 
    3.  
    4.    //  开始写 jQuery 代码... 
    5.  
    6. }) ;
    7.  
    8. //简写
    9. $( function () { 
    10.  
    11.    //  开始写 jQuery 代码... 
    12.  
    13. }) ;
    14. script>

    JavaScript 入口函数: 

    1. 窗户 .onload = function () {
    2.     // 执行代码
    3. }

    jQuery 入口函数与 JavaScript 入口函数的区别：

    • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
    • JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

     jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头：$()。

    元素选择器 

    jQuery 元素选择器基于元素名选取元素。

    在页面中选取所有

    元素:$("p")

    实例

    用户点击按钮后，所有

    元素都隐藏：

    1. <script>
    2. $(document).ready(function(){
    3.   $("button").click(function(){
    4.     $("p").hide();
    5.   });
    6. });
    7. script>

    #id 选择器

    当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

    1. <script>
    2. $(document).ready(function(){
    3.   $("button").click(function(){
    4.     $("#test").hide();
    5.   });
    6. });
    7.  
    8. script>

    • 兄弟选择器

      • $("E+F")
        • $("E").next() 紧邻E选择器后的那一个兄弟选择器
        • $("E").next("F") 紧邻E选择器后的那一个F兄弟选择器
      • $("E~F")
        • $("E").nextAll() E选择器后的所有的兄弟选择器
        • $("E").nextAll("F") E选择器后的所有F兄弟选择器
      • 往前查找
        • $("E").prev() 紧邻E选择器的上一个兄弟选择器
        • $("E").prev("F") 紧邻E选择器的上一个F兄弟选择器
        • $("E").prevAll() E选择器前的所有的兄弟选择器
        • $("E").prevAll("F") E选择器前的所有F兄弟选择器
      • 选择其他兄弟
        • $("E").siblings() E选择器的所有的其他兄弟选择器
        • $("E").siblings(”F“) E选择器的所有的其他F兄弟选择器

    • 父子选择器

      • $("E F")
        • $("E").find("F") 查找E选择器里所有的F选择器
      • $("E > F")
        • $("E").children() 查找E选择器里的所有的直接子元素
        • $("E").children(”F“) 查找E选择器里的所有的直接子元素F
      • 查找父元素
        • $("E").parent() 查找E选择器的直接父元素
        • $("E").parent(”F“) 查找E选择器的直接父元素F
        • $("E").parents() 查找E选择器的所有的包含框父元素
        • $("E").parents(”F“) 查找E选择器的所有的包含框父元素F
    1. <body>
    2.     <ul class="list">
    3.         <li>1li>
    4.         <li>2li>
    5.         <li>3li>
    6.         <li>4li>
    7.     ul>
    8. body>
    9. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js ">script>
    10. <script>
    11.     // var lis = document.querySelectorAll(".list li");
    12.     // for (var i = 0; i < lis.length; i++) {
    13.     //     lis[i].style.color = "blue";
    14.     // }
    15.  
    16.  
    17.     $(document).ready(function () {
    18.  
    19.         // $(".list li").css("color", "red")
    20.  
    21.         // $(".on + li").css("color", "red");
    22.         // $(".on").next("li").css("color", "#00f")
    23.         // $(".on").prev("li").css("color", "#00f")
    24.  
    25.         // $(".on ~ li").css("color", "red");
    26.         // $(".on").nextAll().css("color", "#00f")
    27.         // $(".on").nextAll("li").css("color", "#00f")
    28.  
    29.         // $(".on").prevAll("li").css("color", "#00f")
    30.  
    31.  
    32.         // console.log($(".on"));
    33.         $(".list li").click(function () {
    34.             // console.log(this);//dom对象
    35.             // $(this).css("color", "red");//给当前的li添加样式
    36.             // $(this).nextAll("li").css("color", "");//去掉后面li的兄弟的样式
    37.             // $(this).prevAll("li").css("color", "");//去掉前面li的兄弟的样式
    38.  
    39.             // $(this).css("color", "red");
    40.             // $(this).siblings("li").css("color", "");//去掉前面与后面的所有li兄弟的样式
    41.  
    42.             $(this).css("color", "red").siblings("li").css("color", "");//链式写法
    43.         });
    44.  
    45.     });
    46.  
    47.  
    48.     // 紧邻E选择器后的那一个兄弟选择器F
    49.     // $("E + F")
    50.     // $("E").next("F")
    51.  
    52.     // E选择器后的所有的兄弟选择器F
    53.     // $("E ~ F")
    54.     // $("E").nextAll("F")
    55.  
    56.  
    57.     // 紧邻E选择器的上一个兄弟选择器F
    58.     // $("E").prev("F")
    59.  
    60.     // E选择器前的所有的兄弟选择器F
    61.     // $("E").prevAll("F")
    62.  
    63.     // siblings()  查找除了自身之外的其他兄都   nextAll + prevAll()
    64.  
    65. script>

     jQuery基本选择器

     jQuery层次选择器

    jQuery过滤选择器

    内容过滤选择器 

    可见性过滤选择器

     属性过滤选择器

     子元素过滤选择器

    :nth-child()选择器详细功能描述:
    :nth-child(even)能选择每个父元素下的索引值是偶数的元素
    :nth-child(odd)选择出每个父元素下的索引值是奇数的元素
    :nth-child(2)选取每个父元素下的索引值等于2的元素
    :nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始
    :nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

    表单对象属性选择器

     表单选择器

     特殊选择器

    this是JavaScript中的关键字，指的是当前的上下文对象。在js中this是动态的，可以通过call(),apply()等方法改变指向。

    在jquery中需要把this加工成jquery对象。
    $this=$(this)

    this表示当前的上下文对象是一个html的DOM对象，可以调用html对象所拥有的属性和方法。

    $(this)代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性。

    选择器中的注意事项

    特殊符号的处理
    “.”、”#”、”(“、”]”

    示例：
        

    www.baidu.com

        
    hello

    如果写成：
        $(“#id#b”)和$(“#id[1]”)程序就会出错

    正确的写法：使用转义符\\将特殊符号转义
        $(“#id\\#b”)
        $(“#id\\[1\\]”)

    特殊选择器

    this是JavaScript中的关键字，指的是当前的上下文对象。在js中this是动态的，可以通过call(),apply()等方法改变指向。

    在jquery中需要把this加工成jquery对象。
    $this=$(this)

    this表示当前的上下文对象是一个html的DOM对象，可以调用html对象所拥有的属性和方法。

    $(this)代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性。

  • 相关阅读:
    SHA256 安全散列算法加速器实验
    VMware云数据中心中常用的术语清单
    新开源HTML5单文件网页版ACME客户端，可在线申请Let's Encrypt、ZeroSSL免费HTTPS多域名通配符泛域名SSL/TLS证书（RSA/ECC/ECDSA）
    ModBus TCP/RTU 报文解析
    x265源码分析-estimateCUCost
    NCV7724DQBR2G车规级半桥电机驱动芯片-专为汽车，工业自动化应用提供完美解决方案
    存储bag文件并转csv，一键启动思路、默认python3
    源码构建Tomcat 8.5.81启动
    【Darknet版YOLOv3&YOLOv4模型训练】
    Python的10个编程技巧，你不一定都知道
  • 原文地址：https://blog.csdn.net/m0_59642141/article/details/126609543