Day047--JS BOM介绍, jQuery介绍和使用

内容回顾

DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法面向对象的三大特性:封装继承多态) 为了可扩展性
DOM操作
- 标签属性操作
  - 获取值 getAttribute()
  - 设置值 setAttribute()
- 对象属性操作
  - oDiv.id oDiv.className
  - oDiv.xxx = ooo;
- css样式属性操作
  - oDiv.style.xxx
  - oDiv.style.xxx = ooo;
- 值的操作
  - innerText 只设置或获取文本
  - innerHTML 即设置或获取文本又设置标签
  - value 设置表单控件的内容值
- DOM的创建追加删除
  - ```
  createElement('p')
```
- ```
appendChild()
insertBefore()
```
  - ```
  removeChild()
```

面向对象
//1.字面量方式创建对象
var person = {
name:"张三",
age:18,
fav:function(){

    }
}
//2.构造函数
function Person(){
    
}

//3.原型方式创建对象

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    
}
Person.prototype.showAge = function(){
    
}
//等价于上面
Person.prototype = {
    showName:function(){
        
    },
    showAge:function(){
	}
}

写程序要优先考虑错误优先

补充了es6的内容
//1.模板字符串 `` tab键上面的反引号
let name = '国家'
let str = 符合${name}按规定干哈进口国打卡机的
//2.let 声明局部变量,变量不提升,不允许重复声明 const 声明常量不允许修改

//3.箭头函数 function(a,b){return a+b} === (a,b)=>{return a+b}

//4.对象的单体模式
var person = {
    name:'xxx',
    //es5的函数写法
    showAge:function(){
         console.log(this);//person
    },
     showName:()=>{
        console.log(this);//window  定义person的对象 它的上下文
	},
    //对象的单体模式 es6的写法
    fav(){
        console.log(this);//指的是person对象
	}
   
}
/*
fav(){
	} 等价于
    fav:function(){
        
    }
    */

今日内容

BOM

含义: Brower Object Model 浏览器对象模型

window.open()

window.close()

location对象

window.location.reload() 页面重新加载全局刷新不建议使用

建议刷新页面的时候使用局部作用域刷新使用的是ajax(XMLHttpRequest)技术

打开新网址的三种方式

<a href='http://www.luffycity.com/' target = '_self'>路飞</a>

window.location.open('http://www.luffycity.com/','_blank');

window.location.href = 'http://www.luffycity.com/'; //在当前网页打开网址

pathname
search
href

前后端交互的方式

client,offset,scroll系列的内容

jQuery的介绍

库: 小而精

框架: 大而全

核心:write less do more

jQuery的定义

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

jquery 中 98%的都是方法
只有两个属性:
    索引
    length

为什么要使用jquery?

JavaScript书写代码的不足

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

jQuery的下载

https://jquery.com/ 下载对应的jQuery

https://www.bootcdn.cn/ 通过cdn的方式引入

https://www.npmjs.com/ npm 包管理器下载(未来讲)

jQuery的入口函数

//入口函数 文档加载完成之后 会调用
$(document).ready(function(){
})
//等待图片加载完成之后 才执行
$(window).ready(function(){
})
//简便写法 文档加载完成之后 会调用
$(function(){
})

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。
jQuery的选择器(获取DOM)

主要作用: 选中DOM

注意: 不过获取的是jQuery对象,哪怕是一个元素,jquery对象也会有属性(length:1,0:jsDom对象)和方法

基础选择器

标签选择器 $('div')
id选择器$('#box')
class选择器
后代
子代
组合
交集
兄弟 + ~

基本过滤选择器

eq(index) index从0开始选取匹配的元素
gt(index) 大于index的元素
lt(index) 小于index的元素
odd 奇数
even 偶数
first 第一个
last 最后一个

属性选择器

input[type='text']

筛选的方法(选择器)

find() 查找的是后代
children()查找的是亲儿子
eq() 选择匹配的元素
siblings() 选取兄弟元素(除了自己本身)
parent() 查找的是亲爹

siblings()方法的用途

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: none;
        }
        div.active{
            display: block;
        }
    </style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <div class="active">
        1
    </div>
    <div>
        2
    </div>
    <div>
        3
    </div>
    <div>
        4
    </div>
    <div>
        5
    </div>

    <script src="./libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            $('button').click(function () {
   			 console.log( $(this).css('backgroundColor','red'));
                //获取索引

                let i = $(this).index()
                //返回了jquery对象
                //链式编程
                $(this).css('backgroundColor','red').siblings('button').css('backgroundColor','#666');
                $('div').eq(i).addClass('active').siblings('div').removeClass('active');
            })
        })
    </script>
</body>
</html>

jQuery的动画介绍

显示隐藏效果

//第一个参数和第二个参数是可选的,如果不传入参数,表示元素直接显示隐藏,如果传入参数,表示动画的显示隐藏
show(200,fn);
hide();

toggle();//开关式的显示隐藏

卷帘门效果

//方法中的参数 参考第一个 
slideDown()
silideUp()
slideToggle()

淡入淡出效果

fadeIn()
fadeOut()
//开关式的  淡入淡出效果
fadeToggle()

click事件

注意: 在jQuery中所有的事件都不带on

入口函数:

<script>
    //原生js，入口函数。页面上所有内容加载完毕，会执行。
    //不仅文本加载完毕，而且图片也要加载完毕，在执行函数。
    window.onload = function () {
        alert(1);
    }
    //jquery的入口函数。  1.文档加载完毕，图片不加载的时候就可以执行这个函数。
    $(document).ready(function () {
        alert(1);
    })
    //jquery的入口函数。  2.文档加载完毕，图片不加载的时候就可以执行这个函数。
    $(function () {
        alert(1);
    });
    //jquery的入口函数。  3.文档加载完毕，图片加载完毕的时候在执行这个函数。
    $(window).ready(function () {
        alert(1);
    })
</script>