VOLANTIS (^o^)

详细内容

一、jQuery概述

1.1 jQuery简介

  • jQuery是一个快速、简洁的JavaScript框架，JavaScript代码库。优化HTML文档操作、事件处理、动画设计和Ajax交互
  • jQuery核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；高效灵活的css选择器，并可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器甚至只要IE6.0+。

1.2 什么是jQuery

  • jQuery是一个JavaScript函数库。
  • jQuery是一个轻量级的“写得少，做得多”的JavaScript库。
jQuery库包含以下功能
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
HTML DOM遍历和修改
AJAX
Utilities

1.3 为什么要用jQuery

  • 目前网络上有大量开源的JS框架，但是jQuery是目前最流行的JS框架，且提供了大量的扩展。很多大公司都在使用jQuery

二、jQuery的安装

2.1 网页中添加jQuery

  • 可以通过多种方法在网页中添加jQuery

    • 从 jquery.com 下载jQuery库

    • 从CDN中载入jQuery

    • 有两个版本可选

      • Production version - 精简压缩版

      • Development version - 测试和开发，未压缩可读

        以上2个版本都可以从jquery.com下载

  • jQuery是一个JavaScript文件，可以使用HTML的<script>标签引用他

    1
    2
    3
    <head>
        <script src="jquery-3.5.1.min.js"></script>
    </head>
    1
    2
    3
    <head>
        <script src="https://apps.bdimg.com/libs//jquery/2.1.4/jquery.imn.js"></script>
    </head>

三、jQuery语法

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

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

  • 美元符号定义jQuery

  • 选择符(selector) “查询”和”查找”HTML元素

  • jQuery的action()执行对元素的操作

    实例：

    • $(this).hide() - 隐藏当前元素
    • $(“p”).hide - 隐藏所有

      元素

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

      元素

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

3.1 jQuery选择器

  • 元素/标签选择器：jQuery元素选择器基于元素名选取元素。

  • 实例：文档加载完成后选中所有按钮添加点击事件点击时所有p标签隐藏

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

  • id选择器：jQuery #id选择器通过元素id选取元素

  • 实例：文档加载完成后选中所有按钮添加点击事件点击时所有id为test的元素隐藏

    1
    2
    3
    4
    5
    $(document).ready(function(){
    	$("button").click(function(){
    		$("#test").hide();
    	})
    })

  • class选择器：jQuery类选择器可以通过指定的class查找元素

  • 实例：文档加载完成后选中所有按钮添加点击事件点击时所有类名为test的元素隐藏

    1
    2
    3
    4
    5
    $(document).ready(function(){
    	$("button").click(function(){
    		$(".test").hide();
    	})
    })

3.2 jQuery事件及常用事件方法

  • 什么是事件？
    • 页面对不同访问者的响应
  • 事件处理程序指的是当HTML中发生某些事件时所调用的方法
  • 事件举例：
    • 在元素上移动鼠标
    • 选取单选按钮
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
mouseover(冒泡)
mouseup(冒泡)

四、jQuery效果

4.1 隐藏显示

1
2
3
4
5
6
7
8
9
10
11
12
// 点击id为hide的元素时隐藏所有p元素
$("#hide").click(function(){
    $("p").hide();
})
// 点击id为hide的元素时显示所有p元素
$("#hide").click(function(){
    $("p").show();
})
// 点击id为hide的元素时切换隐藏或者显示所有p元素
$("#hide").click(function(){
    $("p").toggle();
})

事实上这三种方法都是有2个参数的

1
2
3
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
  • speed：规定隐藏/显示的速度 可以取：”slow”、”fast”或毫秒数
  • callback：执行完后的回调函数

4.2 淡入淡出

  • 通过jQuery，可以实现元素的淡入淡出效果
  • jQuery拥有下面四种fade方法
    • fadeIn() - 将隐藏的元素用淡出效果显示出来，例如display:none;
    • fadeOut() - 将显示的元素用淡出效果隐藏起来
    • fadeToggle() - 切换淡入淡出
    • fadeTo() - 将被选元素的不透明度逐渐地改变为指定的值。

四种方法都是可以有参数的

1
2
3
4
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
  • speed：规定隐藏/显示的速度 可以取：”slow”、”fast”或毫秒数
  • callback：执行完后的回调函数
  • opacity：0~1之间的数字

4.3 滑动

  • 通过jQuery可以在元素上创建滑动效果，有以下滑动效果方法
    • slideDown() - 滑下来
    • slideUp() - 滑上去
    • slideToggle() - 滑来滑去

三种方法都是可以有参数的

1
2
3
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
  • speed：规定隐藏/显示的速度 可以取：”slow”、”fast”或毫秒数
  • callback：执行完后的回调函数

4.4 动画

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

1
$(selector).animate({params},speed,callback);
  • 必须的params参数：定义形成动画的css属性
  • 可选的speed参数：规定效果时长 可以取：”slow”、”fast”或毫秒数
  • 可选callback参数：动画完成后所执行的函数名称

举例：点击按钮后div在2秒的时长里向右移动300px透明度变为0.5

1
2
3
4
5
6
$("button").click(function(){
    $("div").animate({
        left:'300px',
        opacity:'0.5'
    },2000);
});

注意：使用animate()时，必须使用Camel标记法书写所有属性名，比如：paddingLeft、marginRight；也可以定义相对值（改值相对于元素的当前值）。需要在值的前面加上+=或-=；

1
2
3
4
5
6
$("button").click(function(){
    $("div").animate({
        left:'300px',
        paddingLeft:'+=150px'
    });
});

预定义的值：可以把属性的动画值设置为”show”、”hide” 或 “toggle”

1
2
3
4
5
$("button").click(function(){
    $("div").animate({
        left:'toggle'
    });
});
  • 队列功能：编写多个animate()调用，jQuery会创建包含这些方法调用的”内部”队列。然后逐一运行这些animate调用。
1
2
3
4
5
6
7
$("button").click(function(){
    var div=$("div")
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
});

4.5 停止动画

  • jQuery stop()方法用于停止动画或效果，在他们完成之前。
  • stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
1
$(selector).stop(stopAll,goToEnd);
  • stopAll：是否清楚动画队列，默认false。
  • goToEnd：是否立即完成当前动画，默认false。

五、jQuery HTML

5.1 捕获

  • jQuery有可操作HTML元素和属性的强大方法。
  • jQuery中非常重要的部分，就是操作DOM的能力。
  • jQuery提供一系列与DOM相关的方法，这使访问和操作元素和属性变得容易
  • 三个简单使用的用于DOM操作的jQuery方法：
    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容（包括HTML标记）
    • val() - 设置或返回表单字段的值
1
2
3
4
5
6
7
8
9
$("#btn1").click(function(){
    alert("Text:"+$("#test").text());
})
$("#btn2").click(function(){
    alert("HTML:"+$("#test").html());
})
$("#btn3").click(function(){
    alert("值为:"+$("#test").val());
})
  • 获取属性值 attr()
1
2
3
$("button").click(function(){
    alert($("#a1").attr("href"));
})

5.2 设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#btn1").click(function(){
    $("#test").text("hello");
})
$("#btn2").click(function(){
    $("#test").html("<b>world<b>");
})
$("#btn3").click(function(){
    $("#test").val("!");
})
$("#btn4").click(function(){
    $("a").attr("href","https://www.baidu.com");
})
$("#btn4").click(function(){
    $("#font").attr("color","red");
})

5.3 添加元素

  • append() - 在被选元素结尾插入内容
  • prepend() - 在被选元素开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
1
2
3
4
5
6
//被选元素内部
$("p").append("在结尾追加文本")
$("p").prepend("在开头追加文本")
//被选元素外部
$("p").after("在之后追加文本")
$("p").before(("在之前追加文本")

  • 创建元素方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //html标签
    var txt1="<p>文本<p>";
    //jq
    var txt2=$("<p></p>").text("文本");
    //js
    var txt3=document.createElement("p");
    txt3.innerHtml="文本";

    $("body").append(txt1,txt2,txt3)

5.4 删除元素

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

    • 可以接受一个参数，对被删除元素进行过滤

      1
      2
      //删除class=“italic"的所有p元素
      $("p").remove(".italic");

  • empty() - 清空被选元素的子元素

5.5 CSS类

  • addClass() - 向被选元素添加一个或多个类

    1
    2
    //给所有div添加warp和blue类
    $("div").addClass("warp blue");

  • removeClass() - 从被选元素删除一个或多个类

    1
    2
    //删除所有div的warp和blue类
    $("div").removeClass("warp blue");

  • toggleClass() - 对被选元素进行添加/删除类的切换操作

    1
    2
    //有就删没就加blue类
    $("div").toggleClass("blue");

  • css() - 设置或返回样式属性

5.6 css()方法

css()方法可以设置或返回样式属性

  • 返回属性

    1
    2
    //返回id为#a的元素的背景颜色属性
    $("#a").css("background-color");

  • 设置单个属性

    1
    2
    //设置所有p标签的背景颜色为黄色
    $("p").css("background-color","yellow");

  • 设置多个属性

    1
    $("p").css({"background-color":"yellow","font-size":"200%"});

5.7 尺寸

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

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
1
2
3
4
5
6
//返回值
$(selector).width()
//设置值
$(selector).width("200px")

//其他方法也是这样设置

六、jQuery遍历

6.1 遍历

  • jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找“(或选取)HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达你所期望的元素为之
  • 通过jQuery遍历，能够从被选（当前）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历

6.2 祖先 jQuery parent() 方法

  • parent() 方法返回被选元素的直接父元素

  • 该方法只会向上一级对DOM数进行遍历

  • 下面的例子返回每个span元素的直接父元素

    1
    2
    3
    $(document).ready(function(){
        $("span").parent();
    });

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

  • 下面例子返回每个span元素的所有祖先

    1
    2
    3
    $(document).ready(function(){
        $("span").parents();
    });

6.3 后代 jQuery children() 方法

  • children() 返回被选元素的所有直接子元素

  • 该方法只会向下一级对DOM树进行遍历

  • 下面的例子返回每个<div>元素的所有直接子元素;

    1
    2
    3
    $(document).ready(function(){
    	$("div").children();
    });

  • 你也可以使用可选参数过滤对子元素的搜索

  • 下面的例子返回类名为”a”的所有

    元素,并且他们是div的直接子元素

    1
    2
    3
    $(document).ready(function(){
    	$("div").children(p.a);
    });

  • find() 方法返回被选元素的所有后代元素，一路向下直到最后一个后代

  • 下面例子返回属于div后代的所有span元素

    1
    2
    3
    $(document).ready(function(){
    	$("div").find("span");
    });

6.4 jQuery同胞方法

  • siblings() 方法返回被选元素的所有同胞元素

  • 下面例子返回h2的所有同胞元素

    1
    2
    3
    $(document).ready(function(){
    	$("h2").siblings();
    });

  • 可以使用可选参数过滤对同胞元素的搜索

  • 下面例子返回h2的同胞元素的所有p元素

    1
    2
    3
    $(document).ready(function(){
    	$("h2").siblings("p");
    });

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

  • 该方法只返回一个元素

  • 下面例子返回h2的下一个同胞元素

    1
    2
    3
    $(document).ready(function(){
    	$("h2").next();
    });

  • nextAll() 方法返回被选元素的所有跟随的同胞元素。

  • 下面例子返回h2的所有跟随的同胞元素

    1
    2
    3
    $(document).ready(function(){
    	$("h2").nextAll();
    });

  • nextUntil(stop,filter) 方法返回介于给定参数之间的所有跟随的同胞元素

    • stop:表示在哪里停止搜索元素之前匹配的同级元素的选择器表达式、元素、jQuery 对象。
    • filter:规定缩小搜索介于 selector 与 stop 之间的同级元素范围的选择器表达式。

  • 下面例子返回介于h2与h6元素之间的所有同胞元素

    1
    2
    3
    $(document).ready(function(){
    	$("h2").nextUntil("h6");
    });

  • prev() 方法法返回被选元素的前一个同级元素。

    1
    2
    3
    4
    //返回带有类名"start"的每个<li>元素的前一个同级元素
    $(document).ready(function(){
      $("li.start").prev();
    });

  • prevAll() 返回被选元素之前的所有同级元素。

  • prevUntil(stop,filter) 返回 selector 与 stop 之间的每个元素之前的所有同级元素。

    • stop:表示在哪里停止搜索元素之前匹配的同级元素的选择器表达式、元素、jQuery 对象。
    • filter:规定缩小搜索介于 selector 与 stop 之间的同级元素范围的选择器表达式。

6.5 jQuery 过滤方法

  • first() 方法返回被选元素的第一个元素

  • last() 方法返回被选元素最后元素

  • eq() 方法返回带有被选元素的指定索引号的元素。（第几个元素）

    • 使用负数将从被选元素的结尾开始计算索引。

  • filter() 方法返回符合一定条件的元素。

    • 下面例子返回带有类名 “intro” 的所有 <p> 元素：

      1
      $("p").filter(".intro")

    • 语法：$(selector).filter(criteria,function(index))

      • criteria:规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素。
      • function(index):为集合中的每个元素规定要运行的函数。如果返回 true，则保留元素，否则元素将被移除。

  • not() 方法返回不符合一定条件的元素。

    • 下面例子返回不带有类名 “intro” 的所有 <p>元素：

      1
      $("p").not(".intro")

    • 语法：$(selector).not(criteria,function(index))

      • criteria:规定要从被选元素组合中移除的选择器表达式、jQuery 对象、一个或多个元素。
      • function(index):为集合中的每个元素规定要运行的函数。如果返回 true，则移除元素，否则元素将被保留。

七、jQuery AJAX

7.1 AJAX简介

  • AJAX：异步JavaScript和XML（Asynchronous JavaScript and XML）。

7.2 get和post方法

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

1
$.get(URL,callback);
  • 必须的url规定你希望请求的url
  • 可选callback是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
  • 下面例子使用$.get()方法从服务器上一个文件取回数据
1
2
3
4
5
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

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

1
$.post(URL,data,callback);
  • 必需的 URL 参数规定您希望请求的 URL。
  • 可选的 data 参数规定连同请求发送的数据。
  • 可选的 callback 参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
  • 下面的例子使用 $.post() 请求页面并获取返回内容：
1
2
3
4
5
6
7
8
9
10
$("button").click(function(){
    $.post("test_post.php",
    {
        name:"钢铁侠",
        url:"http://www.baidu.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

7.3 ajax() 方法

ajax()方法可以实现$.get和$.post的合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//使用 AJAX 请求改变 <div> 元素的文本：
$("button").click(function(){
    $.ajax({url:"demo_test.txt",
            success:function(result){
        $("#div1").html(result);
    }});
});

//加载并执行一个js文件
$.ajax({
    type:"GET"，
    url:"test.js",
    dataTyep:"script"
});

//保存数据到服务器，成功时显示信息
$.ajax({
    type:"POST",
    url:"some.php",
    data:"name=tom&location=us",
    success:function(msg){
        alert("data save"+msg);
    }
});


$.ajax({  
    //async: false,//设置为同步，默认为异步（一般不需要）  
    url : "xxx/xxx.html",  
    type : "post",  
    //dataType : "json", //传输格式 
    data : {  
        "method" : "bb",  
        "doc_no" : "aa"  
    },  
    //complete 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
    complete : function(XMLHttpRequest, textStatus){  
        //alert("textStatus="+textStatus);  
        //closeLoading();//关闭进度条  
    },  
    //请求失败时调用此函数。
    error : function(XMLHttpRequest, textStatus, errorThrown){  
        //closeLoading();//关闭进度条  
        if("error" == textStatus){  
            //$.messager.alert("系统提示", "服务器未响应，请稍候再试", "info");  
        }else{  
            //$.messager.alert("系统提示", "请求失败，textStatus="+textStatus, "info");  
        }  
     },  
     //请求成功时调用此函数。
     success : function(data){  
         if(data != null){  
             if("success" == data.result){  
                 //TODO  
             }else{  
                // $.messager.alert("系统提示", "操作失败，请重试", "info");  
             }  
             //console.log("result = " + data.result + "，msg=" + data.msg);//IE不支持console输出  
         }else{  
             //$.messager.alert("系统提示","返回结果为空!","info");  
         }  
     }  
});

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://1940879828.github.io/posts/caf3da32.html

评论