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介绍和使用的更多相关文章
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- 前端——jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
- 前端-jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
- Node.js：NPM 使用介绍
ylbtech-Node.js:NPM 使用介绍 1.返回顶部 1. NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: ...
- python之路-笔录3[BOM&DOM&JQuery]
*** 目录 *** 1. BOM 学习 2. DOM 学习 3. jQuery 学习 *** END *** 1. BOM BOM(Browser Object Model)是指浏览器对象模型,它使 ...
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- 加入大型的js文件如jQuery文件，Eclipse会报错
在使用Eclipse3.7及以后的版本的时候,加入大型的js文件如jQuery文件,会报错(missing semicolon),文件中会显示红色小X,虽然这个错误并不会影响项目的运行,但是这个却会大 ...
随机推荐
- 【案例分享】crontab执行脚本异常问题
很多时候我们会遇见这种情况,我们千辛万苦写了一个脚本,经过测试,一切正常,然后放到了crontab里面执行,结果,不管怎么配置,就是执行不正常. 结果发现环境问题,居然是这个异常的元凶. 我们先在我们 ...
- Python第三天 序列 5种数据类型 数值 字符串 列表 元组 字典 各种数据类型的的xx重写xx表达式
Python第三天 序列 5种数据类型 数值 字符串 列表 元组 字典 各种数据类型的的xx重写xx表达式 目录 Pycharm使用技巧(转载) Python第一天 安装 shell ...
- 【学习】Linux Shell脚本实例之一
1．程序流程控制实例 程序流程控制,实际上就是改变程序的执行顺序.程序在执行过程中若流程被改变,就可能导致输出不同,因此利用这一特性就能够实现程序执行结果的控制.程序流程控制可分为“选择”和“循环”这 ...
- 关于联想笔记本ThinkPad E470 没有外音 插耳机却有声音的解决办法
碰到这种情况,小编和大家一样选择设备管理器,找到声卡驱动卸载重新装,结果很失望,选择驱动精灵/联想驱动重装声卡,结果很绝望.并没有解决问题. 最后小编参考了一篇文章找到了解决办法 到联想官方网站服务界 ...
- 第五节 matplotlib库
一.Matplotlib基础知识 1.1Matplotlib中的基本图表包括的元素 x轴和y轴 axis水平和垂直的轴线 x轴和y轴刻度 tick刻度标示坐标轴的分隔,包括最小刻度和最大刻度 x轴和y ...
- Android 动态设置TextView的drawableLeft等属性
首先,我们在开发过程中,会经常使用到android:drawableLeft="@drawable/ic_launcher"这些类似的属性: 关于这些属性的意思,无非是在你的tex ...
- [LeetCode] 5. 最长回文子串
题目链接:https://leetcode-cn.com/problems/longest-palindromic-substring/ 题目描述: 给定一个字符串 s,找到 s 中最长的回文子串.你 ...
- 在IIS上部署(托管).NET Core站点
部署教程 操作系统要求 Windows 7 或更高版本 Windows Server 2008 R2 或更高版本 依赖的组件 Runtime & Hosting Bundle image. ...
- linux查询日志常用命令，经常更新
1.grep命令 grep -c "查询内容" filename ------c,是小写,可以知道你要查询的内容在这个文件中是否存在 grep -C 10 "查询内 ...
- SpringCloud（7）服务链路追踪Spring Cloud Sleuth
1.简介 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案,并且兼容支持了 zipkin,你只需要在pom文件中引入相应的依赖即可.本文主要讲述服务追踪组件zipki ...