Loading

jQuery Ajax Bootstrap

jQuery

JavaScript库

为了简化JavaScript开发，第三方厂商开发了JavaScript库

常用的库：jQuery Vue.js Angular React

1.简介

jQuery内部封装了原生的js代码(还额外添加了很多的功能)

能够让你通过书写更少的代码 完成js操作

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

2.使用

在官网jquery.com下载

img

方式1

放入同一文件夹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>

</body>
</html>

方式2

直接引入jquery提供的CDN服务

CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn

img

没有压缩的 压缩的"""你的计算机必须要有网络"""

pycharm或者IDEA默认添加

img

3. jQuery实验室

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <title>jQuery实验室</title>

    <style>
        .myclass {
            font-style: italic;
            color: darkblue;
        }
        /* 高亮css类 */
        .highlight {
            color: red;
            font-size: 30px;
            background: lightblue;
        }
    </style>
</head>
<body>
<div class="section">
    <h2>jQuery选择器实验室</h2>
    <input style="height: 24px" id="txtSelector" />
    <button id="btnSelect" style="height: 30px">选择</button>
    <hr />
    <div>
        <p id="welcome">欢迎来到选择器实验室</p>
        <ul>
            <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                    style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
            </li>
            <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                    style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
            </li>
            <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
            </li>
        </ul>

        <span class="myclass ">我是拥有myclass类的span标签</span>

        <p class="myclass">我是拥有myclass的p标签</p>
        <form id="info" action="#" method="get">
            <div>
                用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                    type="password" name="upsd" value="123456" />
            </div>
            <div>
                婚姻状况： <select id="marital_status">
                <option value="1">未婚</option>
                <option value="2">已婚</option>
                <option value="3">离异</option>
                <option value="4">丧偶</option>
            </select>
            </div>
            <div class="left clear-left">
                <input type="submit" value="提交" /> <input type="reset" value="重置" />
            </div>
        </form>
    </div>
</div>
    <script type="text/javascript">
        document.getElementById("btnSelect").onclick=function () {
            var btnSelect=document.getElementById("txtSelector").value;
            $("*").removeClass("highlight");
            $(btnSelect).addClass("highlight");
        }
    </script>
</body>
</html>

4. 基本语法

jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()

4.1基本选择器

基本选择器(同css)
# id 选择器
$("#id") 

# 标签选择器
$("div")

# class选择器
$(".className")

# 配合使用
$("div.c1")

# 所有元素选择器
$("*")

4.2组合选择器 层级选择器

# 组合选择器
$("#id, .className, tagName")


层级选择器(同css)

 x 和 y 可以为任意选择器
#后代选择器
$("x y") 
# x的所有后代y(子子孙孙)

#子选择器
$("x > y") 
# x的所有儿子y

#毗邻选择器
$("x + y") 
# 找到所有紧挨在x后面的y

#兄弟选择器
$("x - y") 
# x之后所有的兄弟y

4.3属性选择器

属性选择器
#精确匹配
$('a[username="jason"]') 
$("input[type='text']")  只有写了属性的才有效，默认的无效
#匹配开头
$('a[herf="http://www."]')
#匹配结尾
$('a[href="edn.cn"]')
#匹配包含
$('a[href="edu."]')

4.4基本筛选器

基本筛选器
:first 
# 第一个

:last 
# 最后一个

:eq(index)
# 索引等于index的那个元素

:even 
# 匹配所有索引值为偶数的元素，从 0 开始计数

:odd 
# 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)
# 匹配所有大于给定索引值的元素

:lt(index)
# 匹配所有小于给定索引值的元素

:not(元素选择器)
# 移除所有满足not条件的标签

:has(元素选择器)
# 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
 示例:

$("div:has(h1)") 
# 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来

$("div:has(.c1)") 
# 找到所有后代中有c1样式类（类属性class='c1'）的div标签

$("li:not(.c1)") 
# 找到所有不包含c1样式类的li标签

$("li:not(:has(a))") 
# 找到所有后代中不含a标签的li标签

4.5表单选择器

$("input：text")

5.6操作元素属性

操作元素属性
attr(name|properties|key) 获取或设置元素属性，一个参数获取 两个参数修改
remove(name)              移除元素属性

$("a[href*='163']").attr("href" , "http://www.163.com");
多个属性.attr  获取时会第一个属性   设置时会设置所有的
$("a").removeAttr("href");


操作CSS属性
获取或设置元素属性，一个参数获取 两个参数修改
$("a").css("color" , "red");
$("a").css({"color" : "red" , "font-weight" : "bold" , "font-style" : "italic"});   多个属性用JSON对象
添加删除属性
$("li").addClass("highlight");单个
$("li").addClass("highlight myclass");多个
$("p").removeClass("myclass");

设置元素内容
val()获取或设置输入项的值
text()获取或设置元素的纯文本
html()获取或设置元素内部的HTML

$("input[name='uname']").val("administrator");
var v = $("input[name='uname']").val();
alert(v);


//text与html方法最大的区别在于对于文本中的html标签是否进行转义
//$("span.myclass").text("<b>锄禾日当午，汗滴禾下土</b>");
$("span.myclass").html("<b>锄禾日当午，汗滴禾下土</b>");
var vspan = $("span.myclass").text();
alert(vspan);

5.jQuery事件处理

on("clik",function) 为选中的页面元素绑定单击事件click(function)是绑定事件的简写形式$("p.myclass").on("click",function(){　　$(this).css("background-color","yellow"); //this是当前事件产生的对象})；$("span.myclass").click(function(){　　$(this).css("background-color","lightgreen");});$("input[name="uname"]").keypress(function(event){  　　console.log(evevt);　　　　　　event包含了按键细节  key：" "  keyCode：32　　if(event.ketCode==32){   　　判断是否空格按下　　　　$(this).css("background-color","red");　　}});

img

6.jq is两者相互转换

* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)* js -- > jq : $(js对象)// jQuery对象如何变成标签对象$('#d1')[0]<div id="d1">…</div>document.getElementById('d1')<div id="d1">…</div>// 标签对象如何转jQuery对象$(document.getElementById('d1'))w.fn.init [div#d1]

7.小结

7.1选择器

　　1. 基本操作学习：
　　1. 事件绑定
　　//1.获取b1按钮
　　　　　　　　　　　　$("#b1").click(function(){
　　　　　　　　　　　　　　alert("abc");
　　　　　　　　　　　　});
　　　　　　　　　　2. 入口函数
tion () {

　　　　　　});
　　　　　　window.onload 和 $(function) 区别

  • window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
    function)可以定义多次的。

　　　　3. 样式控制：css方法
// $("#div1").css("background-color","red");
　　　　　　　　　　　　　$("#div1").css("backgroundColor","pink");

2. 分类

\1. 基本选择器

　　1. 标签选择器（元素选择器）

  • 语法： $("html标签名") 获得所有匹配标签名称的元素

　　2. id选择器

  • 语法： $("#id的属性值") 获得与指定id属性值匹配的元素

　　3. 类选择器

  • 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

　　4. 并集选择器：

  • 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
    \2. 层级选择器

　　1. 后代选择器

  • 语法： $("A B ") 选择A元素内部的所有B元素

　　2. 子选择器

  • 语法： $("A > B") 选择A元素内部的所有B子元素
    \3. 属性选择器

　　1. 属性名称选择器

  • 语法： $("A[属性名]") 包含指定属性的选择器

　　2. 属性选择器

  • 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器

　　3. 复合属性选择器

  • 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
    \4. 过滤选择器

　　1. 首元素选择器

  • 语法： :first 获得选择的元素中的第一个元素

　　2. 尾元素选择器

  • 语法： :last 获得选择的元素中的最后一个元素

　　3. 非元素选择器

  • 语法： :not(selector) 不包括指定内容的元素

　　4. 偶数选择器

  • 语法： :even 偶数，从 0 开始计数

　　5. 奇数选择器

  • 语法： :odd 奇数，从 0 开始计数

　　6. 等于索引选择器

  • 语法： :eq(index) 指定索引元素

　　7. 大于索引选择器

  • 语法： :gt(index) 大于指定索引元素

　　8. 小于索引选择器

  • 语法： :lt(index) 小于指定索引元素

　　9. 标题选择器

  • 语法： :header 获得标题（h1~h6）元素，固定写法
    \5. 表单过滤选择器

　　1. 可用元素选择器

  • 语法： :enabled 获得可用元素

　　2. 不可用元素选择器

  • 语法： :disabled 获得不可用元素

　　3. 选中选择器

  • 语法： :checked 获得单选/复选框选中的元素

　　4. 选中选择器

  • 语法： :selected 获得下拉框选中的元素

3. DOM操作

\1. 内容操作

　　1. html(): 获取/设置元素的标签体内容 内容 --> 内容
　　2. text(): 获取/设置元素的标签体纯文本内容 内容 --> 内容
　　3. val()： 获取/设置元素的value属性值
\2. 属性操作
　　4. 通用属性操作
　　5. attr(): 获取/设置元素的属性
　　6. removeAttr():删除属性
　　7. prop():获取/设置元素的属性
　　8. removeProp():删除属性

  • attr和prop区别？

　　　　1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr
　　　　2. 对class属性操作
1. addClass():添加class属性值
　　　　2. removeClass():删除class属性值
3. toggleClass():切换class属性

  • toggleClass("one"):
    如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加

　　　　　　4. css():
\3. CRUD操作:
　　　　　　5. append():父元素将子元素追加到末尾

  • 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾

　　2. prepend():父元素将子元素追加到开头

  • 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

　　3. appendTo():

  • 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

　　4. prependTo()：

  • 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

　　5. after():添加元素到元素后边

  • 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系

　　6. before():添加元素到元素前边

  • 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

　　7. insertAfter()

  • 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

　　8. insertBefore()

  • 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

　　9. remove():移除元素

  • 对象.remove():将对象删除掉

　　10. empty():清空元素的所有后代元素。

  • 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

8.JQuery 高级

8.1.动画

　　1. 三种方式显示和隐藏元素
　　1. 默认显示和隐藏方式
　　1. show([speed,[easing],[fn]])
　　1. 参数：
　　1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
　　2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"

  • swing：动画执行时效果是 先慢，中间快，最后又慢
    ：动画执行时速度是匀速的

  1. fn：在动画完成时执行的函数，每个元素执行一次。

    e([speed,[easing],[fn]])

    1. toggle([speed],[easing],[fn])

      滑动显示和隐藏方式

      1. slideDown([speed],[easing],[fn])
        slideUp([speed,[easing],[fn]])

        1. slideToggle([speed],[easing],[fn])

          淡入淡出显示和隐藏方式

          　　　　　　1. fadeIn([speed],[easing],[fn])
          fadeOut([speed],[easing],[fn])
          　　　　　　3. fadeToggle([speed,[easing],[fn]])

8.2 遍历

　　1. js的遍历方式

  • for(初始化值;循环结束条件;步长)

　　2. jq的遍历方式
　　1. jq对象.each(callback)
　　1. 语法：
　　jquery对象.each(function(index,element){});

  • index:就是元素在集合中的索引
    ement：就是集合中的每一个元素对象

    • this：集合中的每一个元素对象

　　　　　　2. 回调函数返回值：

  • true:如果当前function返回为false，则结束循环(break)。
    lse:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

　　　　2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
　　　　for(元素对象 of 容器对象)

8.3事件绑定

\1. jquery标准的绑定方式

  • jq对象.事件方法(回调函数)；

  • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

  • 表单对象.submit();//让表单提交
    \2. on绑定事件/off解除绑定

  • jq对象.on("事件名称",回调函数)

  • jq对象.off("事件名称")

  • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
    \3. 事件切换：toggle

  • jq对象.toggle(fn1,fn2...)

  • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....

  • 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

　　

4. 案例

\1. 广告显示和隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>                    #content {
        width: 100%;
        height: 500px;
        background: #999
    }                </style>                            <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>                  
        /*需求：                 
        1. 当页面加载完，3秒后。自动显示广告                            
        2. 广告显示5秒后，自动消失。                                   
        分析：                            
        1. 使用定时器来完成。setTimeout (执行一次定时器)                          
        2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display                            
        3. 使用  show/hide方法来完成广告的显示                     */   
        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法                   
        $(function () {                 
            //定义定时器，调用adShow方法 3秒后执行一次                       
            setTimeout(adShow,3000);                       
            //定义定时器，调用adHide方法，8秒后执行一次                        
            setTimeout(adHide,8000);                    
        });                    
        //显示广告                   
        function adShow() {                        
            //获取广告div，调用显示方法                        
            $("#ad").show("slow");                    
        }                    
        //隐藏广告                    
        function adHide() {                        
            //获取广告div，调用隐藏方法                        
            $("#ad").hide("slow");                   
        }                            
    </script>
</head>
<body>            <!-- 整体的DIV -->
<div>                <!-- 广告DIV -->
    <div id="ad" style="display: none;"><img style="width:100%" src="../img/adv.jpg"/></div>
    <!-- 下方正文部分 -->
    <div id="content"> 正文部分</div>
</div>
</body>
</html>

\2. 抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script language='javascript'
            type='text/javascript'>                               
        /* 分析：                            
        1. 给开始按钮绑定单击事件                                
        	1.1 定义循环定时器                                
       	 	1.2 切换小相框的src属性                                   
        	* 定义数组，存放图片资源路径                                    
        	* 生成随机数。数组索引                            
        2. 给结束按钮绑定单击事件                                
        	1.1 停止定时器                                
        	1.2 给大相框设置src属性                                 */
    var imgs = ["../img/man00.jpg", "../img/man01.jpg", "../img/man02.jpg", "../img/man03.jpg", "../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg",];
    var startId;
        //开始定时器的id                    
        var index;//随机角标                    
        $(function () {                        
            //处理按钮是否可以使用的效果                        
            $("#startID").prop("disabled",false);                        
            $("#stopID").prop("disabled",true);                       
            //1. 给开始按钮绑定单击事件                        
            $("#startID").click(function () {                            
                // 1.1 定义循环定时器 20毫秒执行一次                            
                startId = setInterval(function () {                               
                    //处理按钮是否可以使用的效果 
                    $("#startID").prop("disabled",true);                                
                    $("#stopID").prop("disabled",false);                                
                    //1.2生成随机角标 0-6                                
                    index = Math.floor(Math.random() * 7);
                    //0.000--0.999 --> * 7 --> 0.0-----6.9999                                
                    //1.3设置小相框的src属性                                
                    $("#img1ID").prop("src",imgs[index]);                                        
                },20);                        });                        
            //2. 给结束按钮绑定单击事件                        
            $("#stopID").click(function () {                            
                //处理按钮是否可以使用的效果                            
                $("#startID").prop("disabled",false);    
                $("#stopID").prop("disabled",true);                           
                // 1.1 停止定时器                            
                clearInterval(startId);                           
                // 1.2 给大相框设置src属性                            
                $("#img2ID").prop("src",imgs[index]).hide();                  
                //显示1秒之后               
                $("#img2ID").show(1000);      
                
            });                 
        });                                
    </script>
</head>
<body>                      
    <!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg"                                                       
         style="width:160px;height:100px"/>
    </div>
<!-- 大像框 -->
<div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px"height="500px"/>
</div>                        
    <!-- 开始按钮 --> 
    <input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px">
    
<!-- 停止按钮 -->
    <input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px">
</body>
</html>

\5. 插件：增强JQuery的功能
\1. 实现方式：
\1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能 $("#id")
\2. $.extend(object)
* 增强JQeury对象自身的功能 $/jQuery

练习

1.事件

// 第一种
$('#d1').click(function () {
    alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
    alert('借我钱买草莓 后面还你')
})

* 克隆事件

<button id="d1">屠龙宝刀，点击就送</button>
<script>$('#d1').on('click',function () {
    // console.log(this) 
    // this指代是当前被操作的标签对象
    // $(this).clone().insertAfter($('body')) 
    // clone默认情况下只克隆html和css 不克隆事件
    $(this).clone(true).insertAfter($('body')) 
    // 括号内加true即可克隆事件
})
</script>

2.自定义模态框

模态框内部本质就是给标签移除或者添加上hide属性

* 左侧菜单
<script>$('.title').click(function () {
    // 先给所有的items加hide
    $('.items').addClass('hide')
    // 然后将被点击标签内部的hide移除
    $(this).children().removeClass('hide')})
</script>
<!--尝试用一行代码搞定上面的操作-->

3.返回顶部

<script>
    $(window).scroll(function () {
    if($(window).scrollTop() > 300){$('#d1').removeClass('hide')}else{$('#d1').addClass('hide')}})
</script>

4. 自定义登陆校验

# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
    <p>username:<input type="text" id="username"><span style="color: red"></span></p>
        <p>password:<input type="text" id="password"><span style="color: red"></span></p><button id="d1">提交</button><script>let $userName = $('#username')let $passWord = $('#password')$('#d1').click(function () {// 获取用户输入的用户名和密码 做校验let userName = $userName.val()let passWord = $passWord.val()if (!userName){$userName.next().text("用户名不能为空")}if (!passWord){$passWord.next().text('密码不能为空')}})$('input').focus(function () {$(this).next().text('')})</script>

5.input实时监控

<input type="text" id="d1"><script>$('#d1').on('input',function () {console.log(this.value)})</script>

6.hover事件

<script>// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开// alert(123)// })$('#d1').hover(function () {alert('我来了') // 悬浮},function () {alert('我溜了') // 移开})</script>

7.键盘按键按下事件.

<script>$(window).keydown(function (event) {console.log(event.keyCode)if (event.keyCode === 16){alert('你按了shift键')}})</script>

8.阻止后续事件执行

<script>$('#d2').click(function (e) {$('#d1').text('宝贝 你能看到我吗?')// 阻止标签后续事件的执行 方式1// return false// 阻止标签后续事件的执行 方式2// e.preventDefault()})</script>

9.阻止事件冒泡

<script>$('#d1').click(function () {alert('div')})$('#d2').click(function () {alert('p')})$('#d3').click(function (e) {alert('span')// 阻止事件冒泡的方式1// return false// 阻止事件冒泡的方式2// e.stopPropagation()})</script>

10.事件委托

<button>是兄弟，就来砍我!!!</button><script>// 给页面上所有的button标签绑定点击事件// $('button').click(function () { // 无法影响到动态创建的标签// alert(123)// })// 事件委托$('body').on('click','button',function () {alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的})</script>

11.页面加载

# 等待页面加载完毕再执行代码window.onload = function(){// js代码}"""jQuery中等待页面加载完毕"""# 第一种$(document).ready(function(){// js代码})# 第二种$(function(){// js代码})# 第三种"""直接写在body内部最下方"""

12.动画效果

$('#d1').hide(5000)w.fn.init [div#d1]$('#d1').show(5000)w.fn.init [div#d1]$('#d1').slideUp(5000)w.fn.init [div#d1]$('#d1').slideDown(5000)w.fn.init [div#d1]$('#d1').fadeOut(5000)w.fn.init [div#d1]$('#d1').fadeIn(5000)w.fn.init [div#d1]$('#d1').fadeTo(5000,0.4)w.fn.init [div#d1]

　　

Ajax

Asynchronous JavaScript And XML（异步的JavaScript和XML）

Ajax可以在不刷新页面的前提下，进行页面局部更新

1. 概念：

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

　　1. 异步和同步：客户端和服务器端相互通信的基础上

  • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

  • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

　　　　Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]
　　　　通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
　　　　传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

　　　　提升用户的体验

2. 实现方式：

//1.创建核心对象 
var XHR=false;
function createXHR(){
     if(window.XMLHttpRequest){
        XHR=new XMLHttpRequest();
    }else{
        XHR=new ActiveXObject("Microsoft.XMLHTTP");
    }
}
//2. 建立连接   
function checkUsername(){
    var username=document.getElementById("check").value;
    createXHR();
    XHR.open("get","checkUsername?username="+username,true);
    /* 1. 请求方式：GET、POST             
         * get方式，请求参数在URL后边拼接。send方法为空参
         * post方式，请求参数在send方法中定义                            
    2. 请求的URL：                  
    3. 同步或异步请求：true（异步）或 false（同步） 
    4.接受并处理来自服务器的响应结果 */
    XHR.onreadystatechange=showMsgCallback;
    XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    XHR.send();
}
function showMsgCallback(){
    if(XHR.readyState==4){
        if(XHR.status==200){
            var text=XHR.responseText.toString(); 
            alert(text=='no');
            console.log(text);
            if(text=="yes"){
                 alert(1);
                document.getElementById("msg").innerHTML="此用户名已注册!";
            }
            else if(text=="no")
            {
                 alert(2);
                document.getElementById("msg").innerHTML="此用户可以注册";
            }
        }
    }
}
  1. JQeury实现方式
$(document).ready(function() {
    $('#button1').click(function() {
        var text = $('#msg1');
        $.ajax({
            type : "POST",
            url : "jquery",
            data : "username=ssss",
            dataType : 'text',
            success : function(result) {
                 
                if (result=="success") {                   
                    text.text("");
                    text.append("成功");
                }else{
                    text.text("");
                    text.append("失败");
                }
            },
            error : function() {
                text.text("");
                text.append("操作出错");
            }
 
        });
    });
});
$(document).ready(function(){
    $('#button2').click(function(){
        var text = $('#msg2');
        $.post('jquery', 'username=xxxx',function(result){
            if (result==="success") {                  
                    text.text("成功");
                }else{
                    text.text("失败");
                }
        },'text');
    });
});
$(document).ready(function(){
    $('#button3').click(function(){
        var text = $('#msg3');
        $.get('jquery','username=zzzzz',function(result){
            if (result==="success") {                  
                    text.text("成功");
                }else{
                    text.text("失败");
                }
        });
    });
});

导入fastjson注意

img

3.Ajax的使用流程

1.创建XmlHttpReqeust对象 用在与后台服务器交换数据，是Ajax核心

var xmlhttp;
if (window.XMLHttpRequest) {　
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码　　
    xmlhttp = new XMLHttpRequest();
}else{　　
    // IE6, IE5 浏览器执行代码　
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

2.发送Ajax请求

//创建请求xmlhttp.open("GET","http://localhost/test?name=admin",true);//请求方法，映射地址，异步同步

//发送到服务器 xmlhttp.send();

3.处理服务器响应

xmlhttp.onreadystatechange()事件用于监听AJAX的执行事件xmlhttp.readyState 属性说明XMLHttpRrquest当前状态
readyState值 说明
0 请求未初始化
1 服务器已被建立
2 请求已被接收
3 请求正在处理
4 响应文本已被接收 
xmlhttp.status 属性服务器响应状态码200成功 404未找到

xmlhttp.onreadystatechange=function(){　
    //响应已被接收且服务器处理成功时才执行　
    if (xmlhttp.readyState==4 && xmlhttp.status==200)　　
    {
        //获取响应体的文本　　
        var responseText = xmlhttp.responseText;　　
        //对服务器结果进行处理　　...　
    }
}

4.jQuery对Ajax的支持

jQuery对AJAX进行封装，提供了$.ajax()方法

语法:$.ajax(options)

img

常用设置项 说明
url 发送请求地址
type 请求参数get post
data 向服务器传递的参数
dadaType 服务器响应的数据类型text|json|xml|jsonp|script
succcess 接收响应时处理的函数
error 请求失败时的处理函数

5.从ajax方法衍生的简化方法

常用项设置 说明
$.get() 发送get方式ajax请求
$.post() 发送post方式ajax请求
$ajaxSetup() 设置全局默认值

img

img

前端框架Bootstrap

1.简介

该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本选择建议使用v3版本：https://v3.bootcss.com/

注意

bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery

img

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

2.CV大法

img

https://v3.bootcss.com/css/#grid-responsive-resets

3.布局容器

<div class="container">左右两侧有留白</div>
<div class="container-fluid">左右两侧没有留白</div># 后续在使用bootstrap做页面的时候 上来先写一个div class="container",之后在div内部书写页面

　

4.栅格系统

<div class="row"></div>写一个row就是将所在的区域划分成12份<div class="col-md-6 "> 获取你所要的份数# 在使用bootstrap的时候 脑子里面一定要做12的加减法

4.1栅格参数

.col-xs- .col-sm- .col-md- .col-lg-# 针对不同的显示器 bootstrap会自动选择对应的参数# 如果你想要兼容所有的显示器 你就全部加上即可# 在一行如何移动位置<div class="col-md-8 c1 col-md-offset-2"></div>  #从左到右移动两个位置

4.2栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-

水平排列 .col-md-8 .col-md-4

列偏移 .col-md-offset-3

4.3排版

bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式

效果一样，但是标签表达的意思不一样（语义）

5组件

5.1 轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <script src="jquery-3.5.1.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-2"></div>
    </div>
</div>
</body>
</html>

5.2表格

    <table class="table table-hover table-striped table-bordered"> 表格 悬浮 层次分明 边框
        <tr class="success">
            <td>1</td>
            <td>jason</td>
            <td>123</td>
            <td>study</td>
        </tr>
        <tr class="active">...</tr>
        <tr class="success">...</tr>
        <tr class="warning">...</tr>
        <tr class="danger">...</tr>
        <tr class="info">...</tr>

　　

状态类 通过这些状态类可以为行或单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

5.3表单

<div class="col-md-8 col-md-offset-2"><h2 class="text-center">登陆页面</h2>
            <form action=""><p>username:<input type="text" class="form-control"></p>
                <p>password:<input type="text" class="form-control"></p>
                <p><select name="" id="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select></p>
                <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea><input type="submit"></form>
        </div>
    </div>
    # 针对表单标签 加样式就用form-controlclass="form-control""""<input type="checkbox">222<input type="radio">333checkbox和radio我们一般不会给它加form-control，多选单选直接使用原生的即可"""#
    针对报错信息 可以加has-error（input的父标签加）<p class="has-error">username:<input type="text" class="form-control"></p>

5.4按钮

        <a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
        <button class="btn btn-danger">按我</button>
        <button class="btn btn-default">按我</button>
        <button class="btn btn-success">按我</button>
        <button class="btn btn-info">按我</button>
        <button class="btn btn-warning">按我</button>
    </div>

        <p>
            <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
            <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
            <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
            <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
            <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
        </p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

5.5图片

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

5.6图标

http://www.fontawesome.com.cn/

<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
<span class="glyphicon glyphicon-th"></span>
<style> span { color: greenyellow; } </style>

　　

5.7导航条

<nav class="navbar navbar-inverse">
<nav class="navbar navbar-default">

　

5.8分页器

<nav aria-label="Page navigation">
<ul class="pagination">
  <li>
    <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
    </a>
  </li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li>
    <a href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
    </a>
  </li>
</ul>
</nav>

5.9弹框

https://lipis.github.io/bootstrap-sweetalert/

https://www.sweetalert.cn/guides.html#advanced-examples



swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined
# 我们在后面的课程中 还会涉及到该部分内容

　　

posted @ 2021-08-01 13:31  丨渍丨  阅读(462)  评论(0)    收藏  举报