文档处理

JS中创建一个节点

　　var a = document.createElement（‘a’）；

jQ中创建一个节点

　　var a = $('<a>');

元素添加

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

案例

<body>
<div id="d1"></div>
<script>
    let $pEle = $('<p>')
    $pEle.text('你好啊 草莓要不要来几个?')
    $pEle.attr('id', 'p1')
    $('#d1').append($pEle)  // 把￥pEle添加到div中
</script>
</body>

结果

移出和清空

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

案例

<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div id="d2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div id="d1"></div>
<script>
    // let $pEle = $('<p>')
    // $pEle.text('你好啊 草莓要不要来几个?')
    // $pEle.attr('id', 'p1')
    // $('#d1').append($pEle)  // 把￥pEle添加到div中
    console.log($('.c1').remove())
    console.log($('#d2').empty())
</script>
</body>

结果

替换

replaceWith()//替换匹配元素内容、匹配元素本身
replaceAll()//将选择器匹配的元素替换为指定的元素或内容

案例

<body>
<p id="d1">你好呀</p>
<div id="d2"></div>
<p class="target">Replace this paragraph.</p>

<script>
    var p1 = '你好呀帅哥'
    $('#d1').replaceWith(p1)
    var d1 = $('<p>')
    d1.attr('id', 'd3')
    d1.addClass('d1')
    $("#d2").replaceWith(d1)
    var newContent = "<div>New content here.</div>";
    $("<div>").html(newContent).replaceAll(".target");

</script>
</body>
</html>

结果

克隆

clone()// 参数

案例

<title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.4.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控    
$(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })

绑定事件

绑定方法

<body>
<button id="t1">按键</button>
<script>
    //方法一：
    var btn = $('#t1')
    // btn.click(function () {
    //    alert('123')
    // })
    //方法二：
    // btn.on('click',function () {
    //     alert('123')
    // })
    //方式三
    $("body").on("click", '#t1', function () {
        // clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
        alert(123456);
    });
</script>
</body>

移除事件

off.()方法

案例

<body>
<button id="t1">按键</button>
<script>
    var btn = $('#t1')
    function aler() {
        alert('123')
    }
    btn.on('click', aler)
    btn.off('click', aler)
</script>
</body>
</html>

阻止后续事件执行

return false; // 常见阻止表单提交等
e.preventDefault();

案例

<body>

<form action="">
<!--    <button id="b1">点我</button>-->
   <span class="s1"></span>
    <input type="submit" id="btn">

</form>

<script src="jquery-3.4.1.min.js"></script>
<script>
    var span = $(".s1");
    var btn = $("#btn");
    btn.click(function (e) {
        span.text('你惦记我了');
        // return false; // 这句话就可以组织后续事件的提交
        e.preventDefault();  // 这句话就可以组织后续事件的提交
    })
</script>
</body>

阻止冒泡事件

e.stopPropagation()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

页面载入

页面代码加载完在去执行代码块

在JS中

window.onload=function(){}

在jQ中

# 第一种方式
$(document).ready(function(){
    // 在这里写你的JS代码...
})

# 第二种方式
$(function(){
    // 你在这里写你的JS代码
})

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

案例

<ul id="parentList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

$(document).ready(function() {
  // 使用事件委托，将点击事件绑定到父元素 <ul> 上
  $('#parentList').on('click', 'li', function() {
    var itemText = $(this).text();
    alert('You clicked: ' + itemText);
  });
});

补充

each方法

// 第一种方式：
// $('div').each(function (index, value) {
// console.log(value, index);
// });

// 第二种方式：BBS中要用的
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
console.log(value,index);
});

data方法

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

ps：data添加的属性不会在元素中显示

可以跟某一个标签设置data属性

$('div').first().data('username', 'jack');
$('div').eq(3).data('username', 'jack');
$('#d1').data('username', 'jack');
# 获取
$('div').first().data('username');

Bootstarp简介

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

我们使用bootstrap库可以很方便的写一些好看的样式，他的内部给我们封装了很多很多的css样式和一些非常好的js事件，以后我们只需要把他的类库文件引入到我们的文档中就能使用

我们在使用的过程中，只需要通过增加和删除class属性值就能够达到某种特殊效果

如何使用：https://www.bootcss.com/在百度中搜索

https://v3.bootcss.com/getting-started/#download

bootstrap的版本：v3、v4、v5我们推荐使用v3就行

v3版本依赖 jQuery，v4、v5版本不依赖jQue

如何使用

下载bootstrap的类库文件
使用CDN

要想使用bootstrap有两部分，css部分，js部分
　　# 如果你只想使用css样式，那么，你就只引入css文件即可
　　# 如果你想使用它提供的一些动作，就需要引入外部的js文件
　　# 你在引入js文件的时候，一定要先引入jQuery文件，bootstrap的js文件是依赖于jQuery的js
　　# 在v3版本，在v4、v5版本就不需要了

Normalize.css

为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库

布局容器

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

案例

    <style>
        .c1{
           border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container c1">
    <span>nihao</span>
</div>
<div class="container-fluid c1"></div>
</body>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<body>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</body>

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<body>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
</body>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）