2021-05-27

Query基础使用与样式篇总结

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

jQuery的语法
            jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作
            基础语法：$(selector).action();
                - $美元符号定义jQuery
                - selector 选择符需要查找的元素  支持css1~css3中的主流选择器
                - action() 执行对元素的操作
            例如：
                $("p").hide();  隐藏所有 <p> 元素
        $(".box").hide();

1.    jQuery选择器  通过ID选择器获取元素
1.1 ID选择器   $("#id");
       id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
    原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
        注意:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，
     将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

1.2    class选择器 $(".classname");  通过类选择器获取元素
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选
        同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

       jQuery样式html()及.text()
               读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

                .html()方法 
                获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
            1、.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
            2、.html( htmlString )  设置每一个匹配元素的html内容
            3、.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
            注意事项：
            .html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）、

        .text()方法
        得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
                .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
                .text( textString ) 用于设置匹配元素内容的文本
                .text( function(index, text) ) 用来返回设置文本内容的一个函数
        注意事项：
        .text()结果返回一个字符串，包含所有匹配元素的合并文本

      jQuery增加样式.addClass()
        通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名
        .addClass( className )方法
            1、.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
            2、.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
            注意事项：
            .addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
        
       
        function AddClass()   设置背景颜色为红色
        {
            $("#mydiv").addClass("backRed");
            console.log($("#mydiv").attr("class"));
        }
 

jQuery样式删除.removeClass()
       .removeClass( )方法
            .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
            .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
            注意事项
        如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除*/

        jQuery的属性与样式之切换样式.toggleClass()
        在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果

        jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

        .toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

        .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
        .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
        .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
        .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
        注意事项：
        toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
        toggleClass会保留原有的Class名后新增，通过空格隔开