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>

秒客网

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

相关文章