今日内容详细

文档处理

# js中创建一个节点
var a = document.createElement('a');

<script>
    let p = $('<p>') //在jQuery中创建一个标签
    p.text("hello") //在标签对象中添加文本
    p.attr("id", "d1") //对标签对象设置id
    $("body").append(p)
</script>

let p = document.createElement('p') //--------->$('<p>')
p.appendChild() //------->append()

$(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的前面

# 移除和清空元素
remove()//从DOM中删除所有匹配的元素
empty()//删除匹配的元素集合中的所有子节点

# 替换
replaceWith()
replaceAll()

常用事件

click(function(){...})
//点击触发事件
hover(function(){...})
//当鼠标到指定的区域后会触发该事件
blur(function(){...})

focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控

绑定事件的方式

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

克隆事件

<script>
    $("#d1").on("click",function (){
    	//clone方法加参数true，克隆标签而且也会克隆事件
        $(this).clone(true).insertAfter(this)
    })
    $("#d2").on("click",function (){
        $(this).clone().insertAfter(this)//this永远指代的是当前被操作对象
        //clone方法不加参数true，克隆标签但不克隆标签所带的事件
    })
</script>

hover事件

<p>你好啊</p>
<script>
  $("p").hover(
          function (){
            alert("点了一次")
          },
          function (){
            alert("点了第二次")
          }
  )
</script>

# "循环"，当鼠标到P标签的位置的时候就会自动弹出hover事件

实时监听input输入值变化

<label for="li"></label>
name:<input type="text" id="li">
<script>
    //触发input监听事件
  $("#li").on("input propertychange",function (){
    console.log($(this).val())
  })
</script>

阻止后续事件执行

// 当我点击按钮的时候会触发两个事件一个是提交表单刷新页面的事件、另一个是在span标签里面添	加文本的事件
如何才可以只触发一个事件呢？
# 两种解决办法

<form action="">
  <button id="d1">点我有惊喜</button>
</form>
<script>
  let span =$("<span>")
  $("#d1").click(function (e){
    span.text("123456")
    $("body").append(span)
    return false //方法一在结尾添加一个return false，这个事件后面的所有事件都不会触发
    e.preventDefault(); //方法二
  })
</script>

阻止事件冒泡

<div>
  <p><span>
    <button>点击</button>
  </span></p>
</div>
<script>
  $("span").click(function (e){
    alert("span")
    e.stopPropagation() //添加到span这个位置以后的时间不再触发，如果添加到p标签的位置只会触发span跟p标签的事件
    // 方法二
    return false
  })
  $("p").click(function (){
    alert("p")
  })
  $("div").click(function (){
    alert("div")
  })
</script>

页面载入

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

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

事件委托

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

补充

# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
//index为索引
//obj为循环的值
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
           
           
data的用法
# $('div').data('username', 'jack');
jQuery.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: jQuery.fn.init(1)]

# $('div').data('username');


# 可以跟某一个标签设置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/在百度中搜索

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

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

如何使用

# 下载bootstrap的类库文件
# 使用CDN

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

布局容器