5）bootstrcp和ajax技术的使用和介绍

JQ的dom用法：

append：追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.js"></script>

<script>
    $(function () {
        $('.box').append('<p>)
    });
</script>
</body>
</html>

效果：

Js对象设置内容：

<body>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.js"></script>

<script>
    $(function () {
        var op = document.createElement('p');
        op.innerText = 'heihiehie'
        $('.box').append('<p>);
        $('.box').append(op);
    });
</script>
</body>

效果：

<body>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.js"></script>

<script>
    $(function () {
        var op = document.createElement('p');
//        op.innerText = 'heihiehie'
        $(op).text(')
        $('.box').append('<p>);
        $('.box').append(op);
    });
</script>
</body>

效果;

插入操作

知识点1：

语法：

父元素.append(子元素)

知识点2：

语法：

子元素.appendTo(父元素)

知识点3：

语法：

父元素.prepend(子元素)；

解释：前置添加， 添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

知识点4：

语法：

子元素.prependTo(父元素)；

解释：后置添加， 添加到子元素的最后一个位置

$('<a href="#">路飞学诚</a>').prependTo('ul')

修改操作

知识点1：

语法：

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')//将所有h5标题标签替换成id为app的dom元素

$('h5').replaceWith($('#app'));

知识点2：

语法：

$('<p>哈哈哈</p>')replaceAll('h2');

解释：替换所有。将所有的h2标签替换成p标签。

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

删除操作

知识点1：

语法：

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

知识点2：

语法：

$(selector).detach();

解释：删除节点后，事件会保留

var $btn = $('button').detach()

//此时按钮能追加到ul中

$('ul').append($btn)

知识点3：

语法：

$(selector).empty();

解释：清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul$('ul').empty()

总结：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form></form>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
    $(function () {
        formDom();

function formDom(argument) {
            $('form').append(`<label>用户名</label><input type="text"><input type="submit">`)
        }
    })
</script>
</body>
</html>

点击type的submit的按钮 会触发 from表单的submit事件

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form></form>
<a href="http://www.baidu.com" title="">百度</a>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
    $(function () {
        formDom();

function formDom(argument) {
            $('form').append(`<label>用户名</label><input type="text"><input type="submit">`)
        }

$('form').submit(function (event) {

event.preventDefault()
    console.log(event)
            })
    $('a').click(function (event) {
        console.log(event)
    })
    })
</script>
</body>
</html>

效果：

什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>事件流</title>

<script>

window.onload = function(){

var oBtn = document.getElementById('btn');

oBtn.addEventListener('click',function(){

console.log('btn处于事件捕获阶段');

}, true);

oBtn.addEventListener('click',function(){

console.log('btn处于事件冒泡阶段');

}, false);

document.addEventListener('click',function(){

console.log('document处于事件捕获阶段');

}, true);

document.addEventListener('click',function(){

console.log('document处于事件冒泡阶段');

}, false);

document.documentElement.addEventListener('click',function(){

console.log('html处于事件捕获阶段');

}, true);

document.documentElement.addEventListener('click',function(){

console.log('html处于事件冒泡阶段');

}, false);

document.body.addEventListener('click',function(){

console.log('body处于事件捕获阶段');

}, true);

document.body.addEventListener('click',function(){

console.log('body处于事件冒泡阶段');

}, false);

};

</script></head><body>

<a href="javascript:;" id="btn">按钮</a></body></html>

效果：

总结：

绑定事件

语法：

bind(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

参数解释：

type (String) : 事件类型

data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象

fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：

当每个p标签被点击的时候，弹出其文本

$("p").bind("click", function(){

alert( $(this).text() );

});

解绑事件

语法：

unbind(type,fn);

描述：

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数解释：

type (String) : (可选) 事件类型

fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例：

把所有段落的所有事件取消绑定

$("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

var foo = function () {

//绑定事件和解绑事件的事件处理函数};

$("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件

$("p").unbind("click", foo); // 只解绑了p段落标签的click事件

自定义事件

其实事件的绑定和解绑，都是我为了自定义事件做准备（大家把jQuery的提供的事件熟记在心），以后对jquery熟了以后，可以玩一下自定义事件

语法：

trigger(type,data);

描述：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。

参数解释：

type (String) : 要触发的事件类型

data (Array) : (可选)传递给事件处理函数的附加参数

示例：

给一个按钮添加自定义的事件

$('button').bind('myClick',function(ev,a,b){

//给button按钮添加的自定义事件myClick事件        })

jQuery的ajax技术：

什么是ajax

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

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

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery的load()方法

数据驱动视图

jQuery load()方法是简单但强大的AJAX方法。

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

ps:该方法使用不多，了解即可

语法：

$("selector").load(url,data,callback);

第一种情况

$('#btn').click(function(){

//只传一个url，表示在id为#new-projects的元素里加载index.html

$('#new-projects').load('./index.html');

})

第二种情况

$('#btn').click(function(){

//只传一个url，导入的index.html文件含有多个传递参数，类似于：index/html?name='张三'

$('#new-projects').load('./index.html',{"name":'张三',"age":12});

})

第三种情况

//加载文件之后，会有个回调函数，表示加载成功的函数

$('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){

});

2. jquery的getJSON方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中

语法:

$.getJSON(url,[data],[callback])

参数解释：

url参数：为请求加载json格式文件的服务器地址
可选项data参数：为请求时发送的数据
callback参数：为数据请求成功后执行的函数

$.getJSON("./data/getJSON.json", function (data) {

var str = "";//初始化保存内容变量

$.each(data, function(index,ele) {

$('ul').append("<li>"+ele.name+"</li>")

});

})

3.jquery的$.get()方法

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

语法：

$.get(URL,callback);

url参数：规定你请求的路径，是必需参数
callback参数：为数据请求成功后执行的函数

$.get('./data/getJSON.json',function(data,status){

console.log(status);   //success    200状态码 ok的意思

})

4.jquery的post()方法

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面

语法：

$.post(URL,data,callback);

url参数：规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据
可选的callback参数：为数据请求成功后执行的函数

$.post('/index',{name:'张三'},function(data,status){

console.log(status);

})

Get方法：

//get()方式  $.ajax({

url:'./data/index.txt',

type:'get',

dataType:'text',

success:function(data){

$('p').html(data);

},

error:function(error){

console.log(error)

}

Post方法：

//post()方式$.ajax({

url:'/index',

type:'post',

data:{name:'张三',age:12},

success:function(data){

$('p').html(data);

},

error:function(error){

console.log(error)

}

和风天气：

https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=b8ff40d4eb154bf28079dcee3cc00e

<body>
<button type="button">获取天气</button>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
    $(function () {
        $('button').click(function (event) {
            $.ajax({
                url: 'https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=b8ff40d4eb154bf28079dcee3cc00ee1'
                type: 'get',
                success: function (data) {
                    console.log(date.HeWeather6[0],now);
                };
        })
        })
    })
</script>

</body>

总结：ajax

http://www.jq22.com/

jQuery插件库

响应式页面[email protected]介绍,

 

众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，所以聪明的程序员开发了一种自适应写法，即一次开发，处处显示！这到底是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。

CSS3 的 @media 查询

定义和使用

使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。

@media mediaType and|not|only (media feature) {

/*CSS-Code;*/

}

 

 

开始编写响应式页面

准备工作1：设置Meta标签

首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

 

代码示例：

1、如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 1170px) {

body {

background-color:lightblue;

}

}

 

2.如果文档宽度大于等于 992px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 992px) {

body {

background-color:red;

}

}

3、当文档宽度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的时候显示的样式

@media screen and (min-width:768px) and (max-width:992px) {

/* CSS 代码 */

}

需要注意的是：

不要被 min-width 和 max-width 所迷惑，初学者很容易误以为 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度如果小于设置的值，就不会应用这个区块里的CSS样式，所以 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。

 

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        @media screen  and (min-width: 1170px){
            body{
                background-color: red;
            }
        }
        @media screen  and (min-width: 880px)and (max-width: 1170px){
            body{
                background-color: green;
            }
        }
        @media screen  and (max-width: 880px){
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>

</body>
</html>

可以去试试。×××、绿色、红色

 

Bootstrap：

http://www.bootcss.com/

效果：

将导航放到页面中

查看一下效果：

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <div class="container">
            <h1>你好，世界！</h1>
    </div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

进行分类，但是缩小的时候不会乱，移动式响应

自己可以往里面添加：

在一个模板中自行的添加一些东西

原文地址：http://blog.51cto.com/xiaorenwutest/2150871

时间： 2024-10-10 06:07:59

5）bootstrcp和ajax技术的使用和介绍的相关文章

ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动

今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新]的[异步]通讯技术, 说白了就是局部刷新. 二.ajax的原理如下图 附上ajax与服务器之间的几种状态,但 4是所有浏览器都支持的的 三.ajax包含的技术如下图 四.ajax开发步骤 步一:创建ajax对象,例如:ajax = createAjax(); 步二:开启异步对象:例如:ajax.o

jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

Web应用程序开发，基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

在 PHP 中结合 Ajax 技术进行图片上传

前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术. 本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面.由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看).所以使用 Ajax 技术是必须的.但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开

Ajax技术详解

Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpRequest构造函数,它定义了用脚本操纵HTTP的API. XMLHttpRequest构造函数:每new一个XMLHttpRequest构造函数返回的对象都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据.需要注意的是当你重用已存在的XMLHttpRequest,

JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法（让你真正理解ajax）

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象 全部现代浏览器均支持 X

对AJAX技术的理解，创建，与应用

ajax的理解: 1. ajax是介于客户端与服务器端之间的一个机制,但这一机制是在前台的,利用前台的闲置功能,来进行前台与后台的数据交流,以达到增强用户体检,减少服务器压力,更有效的利用带宽的效果. 2. ajax是采用异步交互的机制. 3. ajax使用于页面局部刷新,按需求验证和取数据. 4. ajax缺点便是浏览器的兼容问题麻烦,与嵌入式移动端对ajax的支持不太理想. 5.ajax已经是一种web开发必备的技术,而且其优点远大于缺点. 6.ajax涉及到的主要技术有7种其中Javasc

Ajax技术基础

对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异步访问服务器. 在通常情况下,我们的页面都是静态的,如果想要与服务器交互,我们可以通过一系列的手段来向服务器发送请求,并将返回的信息展示在页面上,但是通常需要刷新页面,如果不停的请求就需要不停的刷新整个页面,这对于客户而言带来很大的麻烦,尤其是网速很慢的情况,本来只需要更改页面一小点地方的信息,却要

JQuery Ajax技术知识

=======================================JQuery Ajax技术知识=========================================== 1.serializeArray()通过序列化表单值来创建对象数组(名称和值). 可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法: $(selector).serializeArray() 返回值: 注意:此方法返回的是 JSON 对象而非 J