• jQuery学习笔记


    1、什么是 jQuery ?

    jQuery是一个JavaScript函数库。

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

    jQuery库包含以下功能:

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

    提示: 除此之外,Jquery还提供了大量的插件。

    2、jQuery语法:

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

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

       实例:

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

    • $("p").hide() - 隐藏所有 <p> 元素

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

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

    3、jQuery选择器:

         基本选择器:

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

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

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

         例:元素选择器:选择p元素: $("p")

                                     #id选择器: $("#id")

                                     class选择器:$(".class")

        组合选择器:后代选择器 $(".outer p")  子代选择器 $(".outer>p")     多元素选择器:$(".outer,#d1")

                             属性选择器:    $("[属性名='值'][.....]")

                             表单选择器:    针对表单元素   $("[type='text']")   ===》简化   $(":text")

                             筛选器:$("ul li").eq()   $("ul li").first()   $("ul li").last()   $("").hasclass("c1")    

    4、jQuery事件:    

         页面对不同访问者的响应叫做事件。

        事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

        实例:

    • 在元素上移动鼠标。
    • 选取单选按钮
    • 点击元素

         在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

         常见 DOM 事件:

          

        常用的 jQuery 事件方法:

               1> click()

               click() 方法是当鼠标点击事件被触发时会调用一个函数。例:$("p").click();

               2> dblclick()

               当双击元素时,会发生 dblclick 事件。

               3> mouseenter()

               当鼠标指针穿过元素时,会发生 mouseenter 事件。

               4> mouseleave()

                当鼠标指针离开元素时,会发生 mouseleave 事件。

               5> mousedown()

                当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

               6> mouseup()

               当在元素上点击后松开鼠标按钮时,会发生 mouseup 事件。

               7> hover()

               hover()方法用于模拟光标悬停事件。

              8> focus()

               当元素获得焦点时,发生 focus 事件。

               当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点.

              9> blur()

               当元素失去焦点时,发生 blur 事件。

    5、jQuery动画效果:

            显示和隐藏:通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,toggle() 方法来切换 hide() 和 show() 方法。         

    $("#hide").click(function(){
      $("p").hide();
    });
     
    $("#show").click(function(){
      $("p").show();
    });
    

      淡入淡出:

    • fadeIn()   用于淡入已隐藏的元素。
    • fadeOut()  方法用于淡出可见元素。
    • fadeToggle()  方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    • fadeTo()  方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

          滑动效果:

              slideDown()  方法用于向下滑动元素。  语法:$(selector).slideDown(speed,callback);  

                       可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

                       可选的 callback 参数是滑动完成后所执行的函数名称。

              slideUp()  方法用于向上滑动元素。语法:$(selector).slideUp(speed,callback)

               可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
               可选的 callback 参数是滑动完成后所执行的函数名称。
          slideToggle()  方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 语法:$(

    selector

          ).slideToggle(

    speed,callback

        ) 。 

              动画:animate() 方法用于创建自定义动画。

                       语法:$(selector).animate({params},speed,callback);             

                            必需的 params 参数定义形成动画的 CSS 属性。

                            可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

                            可选的 callback 参数是动画完成后所执行的函数名称。

              停止动画:stop() 方法

                   stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

                   语法:$(selector).stop(stopAll,goToEnd);

                   可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

                   可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

                   因此,默认地,stop() 会清除在被选元素上指定的当前动画。

    6、jQuery属性操作:

              基础文本操作:         

               text() - 设置或返回所选元素的文本内容      $().text("值")

               html() - 设置或返回所选元素的内容(包括 HTML 标记)  $().html("值")

               val() - 设置或返回表单字段的值  $().val("值")

             获取属性: $().attr("属性名")   

             给属性赋值:$().attr("属性名","值")  。   attr() 方法也允许您同时设置多个属性:$().attr({"属性名":"值","属性名1":"值1"......}) 

             添加元素:

               append() - 在被选元素的结尾插入内容。例:$("p").append("追加文本");    

               prepend() - 在被选元素的开头插入内容。   例:添加多个元素--$("p").append(txt1,txt2,txt3);

               after() - 在被选元素之后插入内容。   例:$("img").after("在后面添加文本");

               before() - 在被选元素之前插入内容   例:$("img").before("在前面添加文本");  同样可以添加多个元素,方法同append().

             删除元素:

               remove() - 删除被选元素(及其子元素)  例:$("#div1").remove();   remove()方法可以将过滤出来的单个元素删除;

               empty() - 从被选元素中删除子元素  例:$("#div1").empty();

              css操作:

               addClass() - 向被选元素添加一个或多个类      例:$("p").addClass("blue");

       removeClass() - 从被选元素删除一个或多个类   例:$("p").remove("blue")

               toggleClass() - 对被选元素进行添加/删除类的切换操作  例:$("p").toggleClass("blue")

               css() - 设置或返回样式属性:返回css的属性:$("p").css("background-color");

                                                             设置css的属性:$("p").css("background-color","yellow");

                                                             设置css的多个属性:$("p").css({"background-color":"yellow","font-size":"200%"});

    7、jQuery查找:

              查找祖先:parent() 方法返回被选元素的直接父元素。

                                parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)

                                parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

               查找子标签:children() 方法返回被选元素的所有直接子元素。

                                    find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

              查找兄弟标签:siblings() 方法返回被选元素的所有同胞元素。

                                      next() 方法返回被选元素的下一个同胞元素。

                                      nextAll() 方法返回被选元素的所有跟随(向后寻找)的同胞元素。

                                      nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

                                      prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已

                                      它们返回的是前面的兄弟元素(在 DOM 树中沿着兄弟之前元素遍历,而不是之后元素遍历)。

               过滤:first() 方法返回被选元素的首个元素。

                         last() 方法返回被选元素的最后一个元素。

                         eq() 方法返回被选元素中带有指定索引号的元素。

                         filter() 方法允许您规定一个相同类型的标签。不匹配标签会被从集合中删除,匹配的标签会被返回。

                         not() 方法返回不匹配该类型的所有元素。

              

  • 相关阅读:
    php的四种算法
    laravel框架安装过程中遇到的问题
    json_decode转码无效
    php通过mysqli链接mysql数据库
    jq函数绑定与解绑
    redis的运行机制
    数据库设计的三范式
    MYSQL数据库索引
    PHP超全局变量数组
    vue的settings.json格式化配置
  • 原文地址:https://www.cnblogs.com/brightbrother/p/7762549.html
Copyright © 2020-2023  润新知