第九章：关于Jquery库

其他 2018-12-10 01:34:04 阅读次数: 0

文章目录

第一节：了解Jquery

原生的JS代码的编写量非常多，且获取DOM节点并对元素进行操作也比较繁琐，为了简化，jQuery开始诞生。
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的支持多浏览器的JavaScript代码库（或JavaScript框架）。jQuery即倡导写更少的代码，做更多的事情。“write Less，Do More”.它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。在2006年1月由美国人John Resig在纽约的barcamp发布。
jQuery官方网站可点击此处链接

jQuery版本介绍

  • 1.x.x
    兼容低版本浏览器IE8-
    代码过于庞杂，性能不高
    最新版本1.12
  • 2.x.x
    已经不支持IE低版本浏览器IE8-
    最新版本2.2
  • 3.x.x
    3.0 版本是从 2.0 版本分支出来的，但由于改动过大，因此更新了主版本号
    不支持IE低版本浏览器
    性能大幅度提高（推荐使用）

jQuery下载与安装

1、官网下载地址可点击此处链接
2、CDN下载地址可点击此处链接
3、CDN.min版下载地址可点击此处链接

jQuery文档（API说明书）

jQuery库封装了很多方法，更详细的说明和使用方法，可以在jQuery文档中进行查询。jQuery文档有在线版和文件版。在线版速查起来更方便些，在线链接非常多，很多网页都有
在这里插入图片描述在这里插入图片描述

在线版jQuery文档在线链接

jQuery文档在线连接1可点击此处
jQuery文档在线连接2可点击此处
jQuery文档在线连接3可点击此处

jQuery的使用

jQueuy只做两件事情
【获取元素】 使用jQuery选择器获取元素，jQuery选择器支待CSS，还有自己私有的选择器
【操作元素】 使用jQuery操作,可操作属性、内容、样式、动画、事件等

引入jQuery

<script src="lib/jquery-3.2.1.js"></script>

jQuery的牛刀小试（获取元素）

jQuery('selector') ——获取元素
jQuery(function(){ }) —— 替代window.onload
$ —— jQuery的别名
即：$() ==jQuery(),为了编写的规范和安全性，$()最好只在function()内部才写

例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>引入jquery</title>
        <script src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function(){
                var $box = jQuery('.box');
                console.log($box);               
            })
        </script>
    </head>
    <body> 
        <div class="box"></div>
    </body>
</html>

控制台结果：
在这里插入图片描述

常用jQuery原型对象的方法介绍

写在jQuery原型对象中的方法，通过jQuery实例调用

【修改元素style属性】
css(attr[,val]): （内联样式）
取值：
css(attr),css([‘color’,’text-align’]) <==> getComputedStyle[attr]
赋值：
css(attr,val),css({attr:val});

【获取/设置匹配表单元素的值（等同于原生js中的value属性）】
val(v) :
取值：
input.val()
赋值：
input.val(v)
v:字符串
v:数组（一般用于单选/复选框的勾选）
v:函数function(idx,val){ return 值}//函数内部一定要返回值

【原生js中的innerHTML】
html() : （等同于）
取值
div.html() ——取得第一个匹配元素的html内容
赋值
div.html(‘:’) ——设置匹配元素的内容

【文本内容】
text() ——取得所有匹配元素的文本内容。
【添加/删除类】
addClass()/removeClass(): 添加/删除类,支持多个类同时添加或删除
toggleClass() ——如果存在（不存在）就删除（添加）类。
hasClass(‘con’) ——判断当前元素是否包含con这个类，返回布尔值（不支持多个类进行判断）

【获取jquery对象】
eq(n) ——获取第N个jquery对象（元素）,n支持负数（表示从后面查找）

**【获取当前元素在同辈元素中的索引值】
index() ——获取当前元素在同辈元素中的索引值
$(this).index();

【显示/隐藏】
show() ——显示元素
hide() ——隐藏元素
带参数：同时改变width,height,opacity的动画

【检测匹配元素集合】
is(expr|obj|ele|fn) ——根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，其中如果有一个元素符合这个给定的选择器表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。

【获取html标签属性】
attr(name[,val]) ——设置/获取html标签属性

【获取DOM节点属性】
prop(attr[,val]) 获取/设置DOM节点属性（一般修改布尔类型属性）
获取：获取在匹配的元素集中的第一个元素的属性值。
赋值：给集合中所有元素属性赋值
val为函数
$(':checkbox').prop('checked',function(idx,oldVal){
return !oldVal;
}

【遍历jquery对象】
each(function(idx,ele){}) ——用于遍历jquery对象
return true ——跳过当前循环，进入下一个循环（等效原生js中得continue）
return false ——退出整个each循环（等效原生js中得break）

【jquery大部分方法的共性】
无参数时为取值，带参数时为赋值
取值：取得第一个匹配元素的值
赋值：设置所有匹配元素的值
隐式迭代（隐式遍历）：看不见的遍历，大部分的jquery方法都支持隐式迭代

常用jQuery静态方法介绍

$.each(arr|obj,callback) ——通用遍历方法，用于遍历对象和数组。
callback(idx,item)
$.map(arr|obj,callback) ——根据现有数组生成一个新的数组，新数组的元素为callback内return的值
callback(item,idx)
$.type(n) ——检测参数n的数据类型
$.makeArray(obj) ——将类数组对象转换为数组。
$.parseJSON(json) ——接受一个JSON字符串，返回解析后的对象。类似原生js中的JSON.parse
$.inArray(value,array,[fromIndex]) ——确定value在数组array中的位置，从0开始计数(如果没有找到则返回 -1 )，一般用于判断数组中是否包含某一字符。
serialize()/serializeArray() ——只能在form表单中使用，并且表单元素必须有name属性

选择器介绍
  • 常用的选择器

【作用】
选择页面中的元素，得到jQuery实例对象

【ID选择器】
$(“#save”) ——ID选择器
【类选择器】
$(“.class”) ——类选择器
【标签选择器】
$(“div”) ——标签选择器
【复合选择器】
$(“div,span,p.myClass”) ——复合选择器
【属性选择器】
$(‘[id=box]’) ——属性选择器
$(‘li[data-index]’) ——获取有data-index属性的所有元素
$(‘li[data-index!=10]’) ——data-index属性不等于10的元素,css目前未支持
$(‘li[data-index^=10]’) ——data-index属性以10开头的元素
$(‘li[data-index$=10]’) ——data-index属性以10结尾的元素
$(‘li[data-index*=10]’) ——data-index属性包含10的元素
【表单选择器】
$(‘:input’)
:radio ——匹配所有单选按钮
:checkbox ——匹配所有复选按钮
:selected ——获取已选择的option元素
:checked ——匹配所有被选中的元素(复选框、单选框等，select中的option)
:submit ——匹配所有提交按钮
:reset ——匹配所有重置按钮
:button ——匹配所有按钮
:text ——匹配所有的单行文本框
:password ——匹配所有密码框
【可见性】
:hidden ——匹配所有不可见元素(display:none)，或者type为hidden的元素
:visible ——匹配所有可见元素
以上两个选择器配合is()方法通常用于判断，返回布尔值
if(box.is(':visible')){
box.css('display','none');
}

  • 选择器的常用操作

【jquery对象与原生对象的转换】
jquery转原生:
get(0)/[0] ——获取集合中第一个DOM节点
get() ——不传参得到集合中所有的dom节点
原生转
jquery: $(dom);

【判断是否为jquery对象】
var box = $('#box');
if(box.jquery){
.....
}

【判断一个jquery对象是否存在(是否能获取到元素)】
length
转成原生对象再判断

  • 筛选

利用选择器得到得结果不一定是我们想要得最终结果，有时需要进一步筛选
【基本筛选】
:odd/:even,:gt(n)/:lt(n) ——筛选范围（索引支持负数）
:contains(奥巴马) ——筛选出包含“奥巴马”这三个字的元素

【筛选方法】
first()/last() ——获取集合中第一个/最后一个元素
eq(index|-index) ——获取第N个元素,n支持负数（表示从后面查找）
filter(expr|obj|ele|fn) ——筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配* 的范围。用逗号分隔多个表达式
map(fn) ——将一组元素转换成其他数组（不论是否是元素数组）
slice(start,[end]) ——选取一个从start到end(不包括end)匹配的子集
has(expr|ele) —— 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr|ele|fn) —— 删除与指定表达式匹配的元素

  • 查找

利用当前元素去查找其他元素
【查找子元素】
find(expr|obj|ele) —— 查找后代元素
children([expr]) —— 取得匹配元素的所有子元素。(原生js:children)

【查找父级元素】
parent([expr]) —— 获取父元素
parents([expr]) —— 取得所有父级元素
closest(expr|obj|ele) —— 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
offsetParent() —— 返回第一个有定位属性(absolute,relative,fixed)* 的父元素,如果没有定位父级，则返回html元素

【查找兄弟元素】
next([expr]) —— 返回下一个同辈元素 ==> nextElementSibling
prev([expr]) —— 获取前一个同辈元素 ==> previousElementSibling
nextAll([expr]) —— 获取当前元素之后所有的同辈元素
prevAll([expr]) —— 获取当前元素之前所有的同辈元素
siblings([expr]) —— 获取当前元素的所有兄弟元素（除自身以外的所有兄弟元素 = * prevAll + nextAll）

DOM节点操作介绍
  • 增删改

【创建jquery对象】
$('<div/>');
$('<div>生成一个div</div>');

【元素添加】
1、内部添加（添加为子元素）
append(content|obj|ele|fn): 在元素内部最后面追加内容（后置）
prepend: 向元素内部增加内容（前置）
appendTo,prependTo
2、外部插入内容（添加为兄弟元素）
after: 在元素后面插入内容
before: 在元素前面插入内容
insertAfter,insertBefore
如果页面上已经存在了要添加的元素，append,prepend,after,before会把元素移动到页面相应的位置

【元素删除】
remove(); 删除元素, 虽然元素从文档中删除了，但js内部依然保留对它引用
empty(); 清空内容

【元素复制】
clone([Event[,deepEvent]])
Event：（true 或 false）是否复制元素的行为，默认为false
deepEvent: （true 或 false）是否复制子元素的行为，默认为Even的值

  • 盒模型属性

.offset():获取匹配元素相对于根元素的偏移量
返回一个对象，包含当前元素的top,left值
position():获取匹配元素相对(有定位属性)父元素的偏移量，如果没有定位父级，则相对于根元素(html)，返回一个对象，包含当前元素的top,left值。
width(v) = width; //取值/赋值,当传入v时，相当于css(‘width’,v);
innerWidth() = width + padding; -----> clientWidth
outerWidth() = width + padding + border; -------> offsetWidth
outerWidth(true) = width + padding + border + margin;

第二节：jQuery使用案例

操作样式

例：jQuery选择器+CSS方法

<script type="text/javascript">
	jQuery(function(){
		//改变背景颜色
		$('.box').css('background-color','#58bc58')              
	})
</script>

操作事件

例：jQuery选择器+点击事件方法+CSS样式方法

<script type="text/javascript">
    jQuery(function($){ 
        $('.box').on('click',function(){
            $('.box').css('background-color','#58bc58')
        })
    })
</script>

浏览器结果：
在这里插入图片描述

操作内容

例：jQuery选择器+原型对象innerHTML的方法HTML()+CSS方法==

<script type="text/javascript">
    jQuery(function($){ 
        //
        $('.box').html('我是原来的innerHtml').css('font-size',30)   //链式调用
    })
</script>

浏览器结果：
在这里插入图片描述

DOM节点操作与HTML属性

DOM节点操作

prop(attr,val)

例：为多选框默认全部勾上

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery</title>
        <style type="text/css">
        </style>
        <script src="./lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){ 
                $(':checkbox').prop('checked',true);
            })
        </script>
    </head>
    <body> 
        <div class="checkbox">
        	<!-- <input type="checkbox" name="hobby" checked>吃饭 -->
            <input type="checkbox" name="hobby">吃饭
            <input type="radio" name="hobby">睡觉
            <input type="checkbox" name="hobby">玩游戏
            <input type="checkbox" name="hobby">打豆豆
        </div>
    </body>
</html>

浏览器结果：
在这里插入图片描述

HTML属性操作

attr(attr,val)

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery</title>
        <style type="text/css">
        </style>
        <script src="./lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){ 
                $(':checkbox').attr('checked','xxxx'); //后面这个属性值可以是任意乱写，不影响
            })
        </script>
    </head>
    <body> 
        <div class="checkbox">
            <input type="checkbox" name="hobby">吃饭
            <input type="radio" name="hobby">睡觉
            <input type="checkbox" name="hobby">玩游戏
            <input type="checkbox" name="hobby">打豆豆
        </div>
    </body>
</html>

浏览器及控制台结果：
在这里插入图片描述

例：为多选框默认全部勾上（对比DOM节点操作）

显示与隐藏

Jquery专有方法
hasClass() ——判断是否有某个类名，反回true 或flase
removeClass() —— 删除一个类名
addClass() —— 增加一个类名
toggleClass() —— 自动断是否存在，然后增加/删除一个类名

实现显示与隐藏（增添类名版）

例：为div标签添加类名，切换不同类名实现显示与隐藏

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery</title>
        <style type="text/css">
            .box{width: 500px;height: 200px;line-height:200px;background-color: #ffc;text-align: center;font-size: 50px;border: 5px solid #f60}
            .hide{display: none;}
        </style>
        <script src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){ 
                var $box = $('.box');
                $('.btn').on('click',function(){
                    if($box.hasClass('hide')){
                        $box.removeClass('hide');
                    }else{
                        $box.addClass('hide');
                    }
                })
            })
        </script>
    </head>
    <body> 
        <button class="btn">显示/隐藏</button>
        <div class="box">内容</div>
    </body>
</html>

浏览器和控制台结果：
在这里插入图片描述

实现显示与隐藏（增添类名简单版）

例：为div标签添加类名，切换不同类名实现显示与隐藏（简单版）

<script type="text/javascript">
    jQuery(function($){
        var mybox = $('.box');
        $('.btn').on('click',function($){
            mybox.toggleClass('hide');
        })
    })
</script>

浏览器和控制台结果：同增添类名版

实现显示与隐藏（常用版，又叫内联样式版）

例：

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery</title>
        <style type="text/css">
            .box{width: 500px;height: 200px;line-height:200px;background-color: #ffc;text-align: center;font-size: 50px;border: 5px solid #f60}
            .hide{display: none;}
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                var $box = $('.box');

                $('.btn').on('click',function(){
                    if($box.is(':hidden')){
                        $box.show()
                    }else{
                        $box.hide();
                    }          
                })
            })
        </script>
    </head>
    <body>
        <button class="btn">显示/隐藏</button>
        <div class="box">内容</div>
    </body>
</html>

浏览器和控制台结果：
在这里插入图片描述

第三节：动画效果

jQuery动画效果方法介绍
  • 基本动画效果

【显示/隐藏】
show()/hide() —— 显示/隐藏
hide(duration) —— 通过改变元素的高度、宽度、和不透明度，直到这三个属性值到0
show(duration) —— 通过改变元素的高度、宽度、和不透明度，直至内容完全可见

【滑动（通过改变高度）】
slideDown([speed,callback]) —— 显示元素,不断改变高度，直到样式内设定的值
slideUp([speed,callback]) —— 隐藏元素,不断改变高度，直到0
slideToggle([speed,callback]) —— 当元素隐藏时调用slideDown()，当元素显示时调用slideUp();

【淡入淡出（通过改变不透明度）】
fadeIn —— 显示元素, 不断改变透明度直到1
fadeOut —— 隐藏元素,不断改变透明度直到0
fadeToggle([speed,callback]) —— 当元素隐藏时调用fadeOut()，当元素显示时调用fadeIn();
fadeTo([[speed],opacity,[fn]]) —— 不断改变透明度opacity，直到设定的值，并在动画完成后可选地触发一个回调函数。

PS：jQuery动画由三种预设速度slow,normal,fast（600，400，200）

  • 自定义动画

animate (params,[speed],[fn])) ——
:animated —— 获取正在执行动画的元素，一般与is()方法配合使用，用于判断元素是否处于动画状态

  • 动画队列

【一个元素上的动画】
当animate中存在多个属性时，动画同时发生
当同一个元素链式调用animate时，动画是按顺序发生(队列)

【不同元素上的动画】
默认情况下，动画同时发生
回调函数内的动画等到当前动画执行完后才接着执行

stop([clearQueue],[jumpToEnd]) —— 不加参数：停止当前元素所有《正在运行》的动画。
clearQueue ——值为true时，清除队列
jumpToEnd ——值为true时，跳到当前动画的最后一帧
delay(duration) ——设置一个延时来推迟执行队列中之后的动画。
duration ——延迟的时间

延迟的隐藏动画实现

例1：隐藏的盒子(为了方便，以上一个例子为例)

<script type="text/javascript">
	jQuery(function($){
		var $box = $('.box');

		$('.btn').on('click',function(){
			if($box.is(':hidden')){
				$box.show(3000)   //显示时间为3000毫秒
			}else{
				$box.hide(5000);  //隐藏时间为5000毫秒
			}          
		})
	})
</script>

浏览器执行结果：
在这里插入图片描述

滑动的动画实现

例：

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery动画</title>
        <style type="text/css">
            .meinv{padding: 3px;width: 300px;border-radius: 50%;border: 10px solid #f60;}
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                //点击后隐藏
                $('.btnH').on('click',function(){
                    $('.meinv').slideUp(1000);
                });
                //点击后显示
                $('.btnS').on('click',function(){
                    $('.meinv').slideDown(1000);
                });
                //一键显示与隐藏
                $('.btn').on('click',function(){
                    $('.meinv').slideToggle(1000);
                });

            })
        </script>
    </head>
    <body>
        <button class="btn">显示/隐藏</button>
        <button class="btnH">隐藏</button>
        <button class="btnS">显示</button><br/><br/>
        <img src="./img/meinv.jpg" class="meinv">
    </body>
</html>

浏览器执行结果：
在这里插入图片描述

淡入与淡出的动画实现

例：

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery动画</title>
        <style type="text/css">
            .meinv{padding: 3px;width: 300px;border-radius: 50%;border: 10px solid #f60;}
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                //点击后淡入
                $('.btnIn').on('click',function(){
                    $('.meinv').fadeIn(3000);
                });
                //点击后淡出
                $('.btnOut').on('click',function(){
                    $('.meinv').fadeOut(3000);
                });
                //一键淡入淡出
                $('.btn').on('click',function(){
                    $('.meinv').fadeToggle(3000);
                });
            })
        </script>
    </head>
    <body>
        <button class="btn">淡入/淡出</button>
        <button class="btnIn">淡入</button>
        <button class="btnOut">淡出</button><br/><br/>
        <img src="./img/meinv.jpg" class="meinv">
    </body>
</html>

浏览器执行结果：
在这里插入图片描述

自定义动画实现

例：

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery动画</title>
        <style type="text/css">
            .photo{
                position:absolute;
                width: 200px;
                padding: 10px;
            }
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                var $p = $('.photo');
                $p.on('click',function($){
                    //自定义方法，用CSS样式实现
                    //向左移动到800的位置，宽度增长到600，5秒内完成
                    $p.animate({left:800,width:600},5000)
                })
            })
        </script>
    </head>
    <body>
        <img src="./img/ying.jpg" class="photo">
    </body>
</html>

浏览器执行结果：
在这里插入图片描述

回调函数动画实现

例:实现背影颜色

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery动画</title>
        <style type="text/css">
            .photo{
                position:absolute;
                width: 200px;
                padding: 10px;
            }
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                var $p = $('.photo');
                $p.on('click',function($){
                    //自定义方法不能实现颜色的动画，使用回调函数实现
                    $p.animate({left:800,width:600},5000,function(){
                        $p.css({'backgroundColor':'#58bc58'})
                    })
                })
            })
        </script>
    </head>
    <body>
        <img src="./img/ying.jpg" class="photo">
    </body>
</html>

浏览器执行结果：
在这里插入图片描述

第四节：轮播图

什么是轮播图

所谓轮播图就是设置多个图片轮番播放，比如有五张图片，让这五张图片重复轮番播放。此功能一般用在网页推荐或首页广告中。

例如：淘宝首页，能自动向左滑动的图
在这里插入图片描述

制作轮播图

例：

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>关于jquery轮播图</title>
        <style type="text/css">
            ul{list-style:none;padding:0;margin:0; }    /*重置样式*/
            .carousel{
                position:relative;                       /*盒子的相对定位*/
                height:400px;
                width:600px;                             /*定义DIV盒子的宽高*/
                overflow:hidden;                         /*其他溢出盒子的内容隐藏*/
            }
            .carousel ul{
                position:absolute;                        /*ul的绝对定位，父级需设相对定位*/
                left: 0;                                  /*ul的默认值，通过不断地改变left或top*/
                top:0;                                    /*便可实现轮播*/
            }
            .carousel img{height:400px;width:600px;display: block;}
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                var $carousel = $('.carousel');
                var $ul = $carousel.children('ul');
                var index = 0;

                //定义一个函数，作用于改变图片位置变化
                function autoPlay(){
                    index++;
                    if(index<$ul.children().length){
                        var top = -index*$carousel.height();
                    }else{
                        index = 0;
                        var top = -index*$carousel.height();
                    }
                    $ul.animate({top:top})
                }

                //使用定时器，隔一段时间改变图片的位置
                timer = setInterval(autoPlay,2000)

                //鼠标移入图中暂停定时器,移出继续定时器
                $carousel.on('mouseover',function(){
                    clearInterval(timer);
                }).on('mouseout',function(){
                    timer = setInterval(autoPlay,2000);
                })
            })
        </script>
    </head>
    <body>
        <h1>二哈的世界没人能懂</h1>
        <div class="carousel">
            <ul>
                <li><img src="./img/huskie1.jpg"></li>
                <li><img src="./img/huskie2.jpg"></li>
                <li><img src="./img/huskie3.jpg"></li>
                <li><img src="./img/huskie4.jpg"></li>
                <li><img src="./img/huskie5.jpg"></li>
            </ul>
        </div>    
    </body>
</html>

浏览器结果：
在这里插入图片描述

第五节：ajax

jQuery的ajax方法介绍

$.ajax(settings)
type —— 请求类型，默认GET
url —— 数据请求地址（API地址）
data —— 发送到服务器的数据对象，格式：{Key:value}。
success —— 请求成功时回调函数。
dataType —— 设定返回数据的格式，json, jsonp, text(默认), html, xml, script
async —— 是否为异步请求，默认true
$.get(url,[data],[fn],[dataType]) —— // type:’get’
$.post(url,[data],[fn],[dataType]) —— // type:’post’
$.getJSON(url,[data],[fn]) —— // type:’get’, dataType:’json’
$.getScript(url,[callback]) —— // type:’get’, dataType:’script’
load(url,[data],[callback]) —— 载入远程 HTML 文件代码并插入页面中。

浅淡服务器

什么是WAMP Server

W —— windows
A —— Apache,相当于Flask
M —— MySQL
P —— PHP
如果不是windows系统，刚可以是：XAMP Server
【推荐服务器】
一款集成环境软件WAMPSERVER 3.0.6
【注意事项】
服务器的文件夹不能有中文
修改配置文件，改变服务器路径：Apache-httpd-vhosts.conf
配置内容一览：（XML）
listen 1800 —— 配置端口，最大65536
<virtralHost *:1800>
``ServerName localhost
``DocumentRoot F:\mydoc\xxx\xxx\xxx —— 自定义的服务器目录地址
``<Directory "F:\mdoc\xxx\xxx\xxx">
`` ``Options +Indexes + Includes + FollowSymLinks + MultiViews
`` ``AllowOverride All
`` ``#Require local
`` ``Require all granted
``</Directory>
</VirtualHost>
【保存后重启服务器】
【 打开服务器】
浏览器打开：localhost:1800

ajax请求及返回数据处理过程

例：ajax请求及返回数据处理过程

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>发起Ajax请求</title>
        <style type="text/css">
			/*略*/
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                $.ajax({ 
                    //接口地址    
                    url:'http://localhost:1000/xxx/xxx.php',
                    //请求类型，默认get  
                    type:'get',
                    //设置数据返回格式                              
                    dataType:'json',
                    //请求成功时回调函数                         
                    success:function(data){                  
                        console.log(data),                 
                        var $ul = $('<ul/>')
                        var getStr = data.map(function(){      //根据数据返回HTML结构字符串
                            return `<li data-id="${good.id}">  
                                <img src="${good.imgurl}"/>
                                <h4>${good.title}</h4>
                                <p class="my">${good.name}</p>
                            </li>`
                        }).join('');

                        $ul.html(getStr);                      //往ul中写入li字符串

                        $('.goodlist').append($ul)             //往div内写入$ul
                    }
                })
            })
        </script>
    </head>
    <body>
        <h1>商品列表</h1>
        <div class="goodlist">
            
        </div>
    </body>
</html>

案例：请求天气预报数据接口

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="utf-8">
        <title>请求天气预报数据</title>
        <style type="text/css">
            /*略*/
        </style>
        <script type="text/javascript" src="lib/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            jQuery(function($){
                getWeather('深圳')；          //默认参数为深圳

                //失去焦点时触发事件处理函数
                var $city = $('#city');      
                $city.on('blur',function(){
                    var _city = $city.val();
                    getWeather(_city);
                })


                //封装的ajax请求方法
                function getWeather(_city){
                    $.ajax({ 
                        //接口地址    
                        url:'http://wthrcdn.etouch.cn/weather_mini',
                        //请求类型，默认get  
                        type:'get',
                        //设置请求参数
                        data:{city:_city},
                        //设置数据返回格式                              
                        dataType:'json',
                        //请求成功时回调函数 
                        success:function(data){
                            consloe.log(data);

                            //根据数据返回HTML结构字符串（略）
                            //...
                        }
                    })
                }                       
            })
        </script>
    </head>
    <body>
        <h1>天气预报</h1>
        <input type="text" id="city">
        <div class="weather">
            
        </div>
    </body>
</html>

浏览器结果：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xiangchi7/article/details/84642179
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022