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插件库

响应式页面-@media介绍,

 

众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问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>

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

自己可以往里面添加：

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

转载于:https://blog.51cto.com/xiaorenwutest/2150871

5）bootstrcp和ajax技术的使用和介绍相关推荐

  1. ASP.NET 第八季 ajax技术-胡延亮-专题视频课程

    ASP.NET 第八季 ajax技术-2015人已学习 课程介绍         主讲内容: 第一讲 asp.net ajax简介 第二讲 ScriptManager脚本管理控件 第三讲 Script ...

  2. 【AJAX】反向Ajax第1部分:Comet介绍

    英文原文:Reverse Ajax, Part 1: Introduction to Comet 在过去的几年中,web开发已经发生了很大的变化.现如今,我们期望的是能够通过web快速.动态地访问应用 ...

  3. Ajax技术群英会，火热报名中！

    Ajax技术群英会 --说说你最爱的Ajax框架 一.会议介绍 Ajax不仅仅是一种技术,更是Web 2.0时代最具创意的思想之一,它对Web世界的影响极其深远.随着Ajax技术的发展,各种Ajax框 ...

  4. 如何使用Ajax技术开发Web应用程序(2)

    在上一篇文章中,我们讨论了如何通过javascript从一个远程XML文件中取得数据.在这篇文章中,我们将学会怎样对数据作更复杂的处理.作为一个示例,我们会准备一组XML数据,将数据分割成独立的片断并 ...

  5. Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生

      最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...

  6. AJAX技术其实就是多年前我就使用过的XMLHTTP

    AJAX技术其实就是多年前我就使用过的XMLHTTP: 1)<BODY οnlοad='setInterval("getDaytime()",(GetCookie(" ...

  7. php与ajax技术

    web2.0的到来,ajax逐渐成为主流,什么是ajax,ajax的开发模式,优点,使用技术.(ajax概述,ajax使用的技术,需要注意的 问题,在PHP应用ajax技术的应用) 什么是ajax,a ...

  8. ajax技术运用案例,第12篇：Ajax技术与项目案例

    Ajax技术 Ajax是一种技术组合,利用Ajax可以快速实现客户端与服务端的通信,而无需了解通信的底层技术,如XMLHttpReques,XML等技术,Ajax对这些技术进行了封装. jQuery提 ...

  9. Java Web - Ajax技术

    一 为什么会有Ajax技术的出现 想必大家肯定用过百度,当我们在百度的搜索框中输入文字的时候,下面就会自动出现你可能希望搜索的内容,但是页面中的其他内容都没有变化: 可以想象,这些内容都是根据在输入框 ...

最新文章

  1. win32线程学习总结（临界区，互斥体，事件，信号量）
  2. 最短路 Codeforces Round #103 (Div. 2) D. Missile Silos
  3. 官网下载storage manager方法
  4. 低版本VC2010打开高版本VC2012的方法
  5. MATLAB 插值与拟合
  6. GLSL内置数学函数部分解析
  7. Dreamweaver CS6 行为概述
  8. Poisoning Deep Learning based Recommender Model in Federated Learning Scenarios
  9. B. Ordinary Numbers
  10. iOS开发 --- 开发工具
  11. mysql数据表关联_MySQL表关联的常用方式有哪几种
  12. java全景图片生成_如何制作全景图片？
  13. 华为计算机笔记本的配置,怎么看笔记本电脑配置 查询笔记本配置方法【详细步骤】...
  14. 【毕业设计】基于spring的校园二手交易系统
  15. 2022年质量员-装饰方向-通用基础(质量员)免费试题及质量员-装饰方向-通用基础(质量员)复审考试
  16. MAC下 ant 环境搭建
  17. 通信行业专业-行业专业词汇
  18. 常用的 Rapidshare 搜索引擎
  19. 本周直播课-基于车端感知及V2X感知的城市NOA系统开发探讨
  20. APK提取反编译 漏了个大洞下载

热门文章

  1. 找不到全局编录服务器,将 DC 提升至全局编录服务器时出现问题 - Windows Server | Microsoft Docs...
  2. [知识点整理]中科院/国科大 自然语言处理nlp 期末考试知识点整理
  3. 苹果ipad邮箱找不到服务器,iPad收发邮件配置教程
  4. ARM嵌入式linux培训班视频 全集
  5. 数字藏品是怎么赋能的？
  6. Millumin 3 for mac(专业视频编辑软件)
  7. 中国移动5G最新规划：今年5G套餐用户突破1亿 | 附PPT
  8. 修改SpringBoot默认的JSON转换器中的问题
  9. torch.cumsum() 和 torch.cumprod()
  10. Aegisub挂图的两种相对路径写法