内容回顾

  • 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. Spark SQL,如何将 DataFrame 转为 json 格式

    今天主要介绍一下如何将 Spark dataframe 的数据转成 json 数据.用到的是 scala 提供的 json 处理的 api. 用过 Spark SQL 应该知道,Spark dataf ...

  2. Web开发人员学习路线图

    http://www.runoob.com/w3cnote/2018-web-developer.html

  3. chome(谷歌浏览器)上传文件崩溃/上传图片崩溃/打开浏览文件未响应 解决方案

    测试解决方案:关闭搜狗输入法(我用的是搜狗输入法,若使用其他输入法,此方案也可能适用),再测试是否重现浏览器崩溃问题 可选解决方案:升级搜狗输入法(如果想 卸载输入法 也可以) 前面有段时间chome ...

  4. nginx实现新老网站跳转(原URL不变)

    新老网站实现跳转 原URL保持不变 通过手动添加cookie 匹配cookie的方法进行跳转第一步 进行添加if判断条件 if ( $query_string ~* "sr=pro" ...

  5. springboot项目屏蔽mq或者mongodb的监控日志输出

    最近写项目,用的是springboot,其中用到了rabbitmq和mongodb,配置完成 项目启动后,会输出如下日志: mongodb和mq的检测,会一直打印日志,这样会影响开发人员的测试. 如何 ...

  6. Jetson TX2(1)ubutu1604--安装Nvidia Linux驱动

    https://www.jianshu.com/p/c8ebe4aaa708 系统开机首次进入的是以nvidia用户登录的Ubuntu 命令行界面.Nvidia 驱动安装 通过sudo su 输入密码 ...

  7. Jenkins + Ansible + Gitlab之ansible篇

    Ansible介绍 什么是Ansible? Ansible是一个开源部署工具 开发语言:Python 特点:SSH协议通信,全平台,无需要编译,模块化部署管理 作用:推送Playbook进行远程节点快 ...

  8. centos查看系统信息命令

    1.cd - :返回上次所在的目录 2.查看系统版本 cat /etc/redhat-release 3.查看linux内核版本1)cat /proc/version 2) uname -a3) un ...

  9. appium设置会话时间,可以超长时。Open Application

  10. 使用Kernel NetEm和tc模拟复杂网络环境

    关键词:netem(Network Emulator).tc(Traffic Control). 大部分局域网环境良好,但是产品实际网络环境可能千差万别,为了对产品进行各种情况测试就需要模拟网络环境. ...