• jQuery笔记


    JQuery

    1.安装

    • 下载jar包

    • 或者

      npm install jquery
      或者
      yarn add jquery
      

    2.jQuery 使用版本

    我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本

    3.jQuery 语法

    3.1通过选取 HTML 元素,并对选取的元素执行某些操作。

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

    实例:

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

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

      元素

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

      元素

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

    3.2所有 jQuery 函数位于一个 document ready 函数中:

    $(document).ready(function(){  
        // 开始写 jQuery 代码...  
    });
    或者
    $(function(){
        // 执行代码
    })
    

    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作

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

    • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。可多次执行且不会被覆盖

    • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。只能执行一次,多次执行会被覆盖

    4.事件

    dblclick()

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

    mouseenter()

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

    mouseleave()

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

    mousedown()

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

    mouseup()

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

    hover()

    hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

    $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    );
    
    

    focus()

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

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

    blur()

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

    blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:

    5.隐藏显示

    5.1 jQuery hide() 和 show()

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

    $(selector).hide(speed,callback);

    5.2 jQuery toggle()

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    显示被隐藏的元素,并隐藏已显示的元素

    6.淡入淡出

    jQuery Fading 方法

    fadeIn()

    用于淡入已隐藏的元素。

    语法:

    $(selector).fadeIn(speed,callback);

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

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

    fadeOut()

    用于淡出可见元素,语法同fadeIn()

    fadeToggle()

    可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

    如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    语法同fadeIn()

    fadeTo()

    允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    语法:

    $(selector).fadeTo(speed,opacity,callback);

    7. 上下滑动

    slideDown()

    用于向下滑动元素。

    语法:

    $(selector).slideDown(speed,callback);

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

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

    slideUp()

    用于向上滑动元素,语法同上

    slideToggle() 方法

    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    8.动画

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

    语法:

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

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

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

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

    实例

    $("button").click(function(){  
        $("div").animate({    left:'250px',  
                          opacity:'0.5',  
                          height:'150px',  
                          '150px'  }); 
    });
    

    9.stop()

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

    语法:

    $(selector).stop(stopAll,goToEnd);

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

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

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

    可以在 stop() 中设置 stopAll 的参数为 true,这样就可以停止所有动画效果而不是只停止当前动画

    10.链

    允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

    11.获取内容

    11.1 三个简单实用的用于 DOM 操作的 jQuery 方法:

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值

    11.2 获取属性 - attr()

    jQuery attr() 方法用于获取属性值。

    $("button").click(function(){ 
        alert($("#runoob").attr("href"));
    });
    

    ** prop()函数的结果:**

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是空字符串。

    attr()函数的结果:

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是 undefined。

    对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

    对于HTML元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。

    12. 设置内容 - text()、html() 以及 val()

    12.1我们将使用前一章中的三个相同的方法来设置内容:

    • text() - 设置或返回所选元素的文本内容

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

    • val() - 设置或返回表单字段的值

      $("#btn3").click(function(){

      ​ $("#test3").val("RUNOOB");

      });

    12.2 设置属性 - attr()

    jQuery attr() 方法也用于设置/改变属性值。

    下面的例子演示如何改变(设置)链接中 href 属性的值:

    $("button").click(function(){   	
        $("#runoob").attr("href","http://www.runoob.com/jquery"); 
                                });
    

    attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

    13. 添加新的 HTML 内容或元素

    我们将学习用于添加新内容的四个 jQuery 方法:

    内:

    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容

    外:

    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

    $("p").prepend("在开头追加文本");

    $("body").append(txt1,txt2,txt3); // 追加新元素

    上述方法均可用于添加内容或者元素

    14. 删除元素/内容

    如需删除元素和内容,一般可使用以下两个 jQuery 方法:

    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素

    remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

    下面的例子删除 class="italic" 的所有

    元素:

    $("p").remove(".italic");

    15. jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    16. jQuery css() 方法

    css() 方法设置或返回被选元素的一个或多个样式属性

    • 返回指定的 CSS 属性的值,请使用如下语法:

    css("propertyname");

    • 设置指定的 CSS 属性,请使用如下语法:

    css("propertyname","value");

    17. jQuery 尺寸方法

    jQuery 提供多个处理尺寸的重要方法:

    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

    jQuery Dimensions

    18. 遍历

    18.1向上遍历 DOM 树

    这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

    • parent():直接父元素

    $("span").parent();

    • parents():所有父元素,直至根元素

    • parentsUntil():两者之间的所有祖先元素

    $("span").parentsUntil("div");

    18.2 向下遍历 DOM 树

    下面是两个用于向下遍历 DOM 树的 jQuery 方法:

    • children() 遍历 直接子元素,也可以使用可选参数来过滤对子元素的搜索。
    • find() 返回被选元素的后代元素,一路向下直到最后一个后代。

    18.3 在 DOM 树中水平遍历

    有许多有用的方法让我们在 DOM 树进行水平遍历:

    • siblings() 返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索

    $("h2").siblings("p");

    • next() 返回被选元素的下一个同胞元素
    • nextAll() 返回被选元素的所有跟随的同胞元素。
    • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。

    $("h2").nextUntil("h6");

    • prev()

    • prevAll()

    • prevUntil()

    18.4 过滤

    first()

    last()

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

    下面的例子选取第二个

    元素(索引号 1):

    $("p").eq(1);

    filter()

    返回带有类名 "url" 的所有

    元素:

    $("p").filter(".url");

    not() 与filter()作用相反

    AJAX

    AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

    简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

    1. load()

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

    语法:

    $(selector).load(URL,data,callback);

    可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

    • responseTxt - 包含调用成功时的结果内容
    • statusTXT - 包含调用的状态
    • xhr - 包含 XMLHttpRequest 对象

    下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:

    $("button").click(function(){ 
        $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){   
            if(statusTxt=="success")      
                alert("外部内容加载成功!");    
            if(statusTxt=="error")      
                alert("Error: "+xhr.status+": "+xhr.statusText); 
        }); 
    });
    

    2.get() 和 post() 方法

    两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

    • GET - 从指定的资源请求数据
    • POST - 向指定的资源提交要处理的数据

    GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

    POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

    2.1 $.get() 方法

    $.get() 方法通过 HTTP GET 请求从服务器上请求数据。

    语法:

    $.get(URL,callback);

    必需的 URL 参数规定您希望请求的 URL。

    可选的 callback 参数是请求成功后所执行的函数名

    第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

     $.get("demo_test.php",function(data,status){
        alert("数据: " + data + "
    状态: " + status);
      });
    

    2.2 $.post() 方法

    $.post() 方法通过 HTTP POST 请求向服务器提交数据。

    语法:

    $.post(URL,data,callback);

    必需的 URL 参数规定您希望请求的 URL。

    可选的 data 参数规定连同请求发送的数据。

    可选的 callback 参数是请求成功后所执行的函数名。

    第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。

     $.post("/try/ajax/demo_test_post.php",
        {
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("数据: 
    " + data + "
    状态: " + status);
        });
    
    由于无法解释的神圣旨意,我们徒然地到处找你;你就是孤独,你就是神秘,比恒河或者日落还要遥远。。。。。。
  • 相关阅读:
    让textarea完全显示文章并且不滚动、不可拖拽、不可编辑
    解决css3毛玻璃效果(blur)有白边问题
    mysql_binlog恢复
    SED_AWK_正则
    进程;线程
    网络编程
    面向对象
    python_递归_协程函数(yield关键字)_匿名函数_模块
    Python 函数对象 命名空间与作用域 闭包函数 装饰器 迭代器 内置函数
    python_字符_函数
  • 原文地址:https://www.cnblogs.com/momoli/p/13885709.html
Copyright © 2020-2023  润新知