内容回顾

  • 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介绍和使用的更多相关文章

  1. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  2. 前端——jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  3. 前端-jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  4. Node.js：NPM 使用介绍

    ylbtech-Node.js:NPM 使用介绍 1.返回顶部 1. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: ...

  5. python之路-笔录3[BOM&DOM&JQuery]

    *** 目录 *** 1. BOM 学习 2. DOM 学习 3. jQuery 学习 *** END *** 1. BOM BOM(Browser Object Model)是指浏览器对象模型,它使 ...

  6. Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果

    Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...

  7. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  8. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  9. 加入大型的js文件如jQuery文件，Eclipse会报错

    在使用Eclipse3.7及以后的版本的时候,加入大型的js文件如jQuery文件,会报错(missing semicolon),文件中会显示红色小X,虽然这个错误并不会影响项目的运行,但是这个却会大 ...

随机推荐

  1. DataReader的使用

    public List<Student> GetList()        {            string sql = "select * from Student&qu ...

  2. c:\windows\system32\config\systemprofile\desktop 打不开

    Question 重启开机后显示桌面打不开: 再次重启后无效 Solution 打开注册表regedit如下路径,复制Desktop值到 同路径下的Desktop中,再重启.

  3. SQLServer之存储过程简介

    存储过程定义 存储的过程 (存储过程(数据库引擎)) 是存储在数据库中的可执行对象. 存储过程分类 系统存储过程   系统存储过程是 SQL Server系统自身提供的存储过程,可以作为命令执行各种操 ...

  4. 伙伴系统之避免碎片--Linux内存管理(十六)

    1 前景提要 1.1 碎片化问题 分页与分段 页是信息的物理单位, 分页是为了实现非连续分配, 以便解决内存碎片问题, 或者说分页是由于系统管理的需要. 段是信息的逻辑单位,它含有一组意义相对完整的信 ...

  5. ansible学习基础知识和模块（一）

    基础知识补充: 常用自动化运维工具 Ansible:使用python来开发的,无需设置Agentless(代理),一般管理几百台.与ssh的方式也不一样,ssh是基于c/s模式(客户端+服务器)来使用 ...

  6. Python开发【前端篇】HTML5+CSS3

    CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 权重的等级 可以把样式的应用方式分为几个等级,按照等 ...

  7. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  8. [转]C#通过委托更新UI(异步加载）

    我们在使用 windowform 编程的时候,我们或许可能会越到,各种在窗体加载的时候,会进行其他的操作: 1.如果是在加载之前进行其它操作,则整个界面出来的很慢,而且若是时间长的话,页面很久才能出来 ...

  9. .NET Core 开源工具 IPTools - 快速查询 IP 地理位置、经纬度信息

    快速查询IP信息,支持国内和国外IP信息查询,支持查询经纬度,地理位置最高支持到城市. 1. IPTools.China 快速查询中国IP地址信息,包含国家.省份.城市.和网络运营商.非中国IP只支持 ...

  10. Django组件 之 分页器（paginator）

    --------------------------------------------------------------------------------路虽远,行则将至.  事虽难,做则必成. ...