JS中所有全局都是window的
window的作用:在封闭空间中声明一个全局的变量
全局变量和函数都属于window
javascript
是由什么东西组成？
ECMAScript 核心解释器(ES5和ES6)
DOM BOM
提供最基本的功能比如:12+5 var a = 12; function show(){}
兼容性：完全兼容。
DOM 文档对象模型 Document Object Model
就是document 操作页面的。
获取元素,修改样式,创建元素
兼容性：很好，有不兼容的，但是可以解决。
BOM 浏览器对象模型 Browser Object Model
就是window 操作浏览器
window.onload
window.alert();
兼容性：基本不兼容，解决不了。
BOM
BOM 跟浏览器有关。
window
打开一个新页面。
window.open(地址)
window.open(地址,打开方式);
打开方式:
_blank 加载到一个新的窗口
_self 替换当前页面
.....
window.location:
alert(window.location);
alert(window.location.href);
window.location = 'http://www.baidu.com';
alert(window.location.hash); //#锚点信息
alert(window.location.host); //域名 localhost:63342
alert(window.location.hostname); //主机名 localhost
alert(window.location.port); //端口
alert(window.location.protocol); //协议 http https
alert(window.location.search); //数据信息
alert(window.location.pathname); //路径名
window.history:
历史
window.history.forward(); //前进
window.history.back(); //后退
window.history.go(数字); //去哪个 前进：1 后退：-1 前进2个：2
confirm:
alert('提示信息') 弹出提示框
confirm('提示信息') ——> 也有返回值：true / false
如果选了确定 -- true
如果选了取消 -- false
var bDel = confirm('真的要删除吗？');
if(bDel){
//说明点了确定，直接删除
}else{
//不要删
}
DOM操作（一）
DOM树:文档的结构
document
标签=元素=节点
obj.tagName 获取节点的名字
(所有的字母都是大写的)
DOM结构
获取父节点(获取他爹)
obj.parentNode 最大的祖宗是document，在往上就是null
获取子节点
childNodes 获取子节点，包括文本节点
节点类型：
文本节点
标签节点
检测节点的类型:nodeType
obj.nodeType
3 文本节点
1 标签节点
children 获取子节点(只包括第一层) 获取的子节点不包括文本节点
只包括它的第一层子节点，不包括它的孙子级
获取到的是一组元素 可以用下标、leng
true&&alert(1);
&&如果两个都是真的，才是真的。如果第一个是假的，后面的不执行。
var a = false||5;
|| 从左往右开始看，有真的取真的，如果都为假，取最后一个
获取上一个兄弟节点
obj.previousElementSibling 兼容：高版本浏览器
obj.previousSibling 兼容：ie6,7,8
兼容写法 obj.previousElementSibling||obj.previousSibling;
获取下一个兄弟节点
obj.nextElementSibling 兼容：高版本浏览器
obj.nextSibling 兼容：ie6,7,8 其他浏览器是文本
兼容写法 obj.nextElementSibling||obj.nextSibling;
获取首尾子节点
首子节点
父级.firstElementChild 兼容高版本浏览器
父级.firstChild 兼容ie6,7,8
兼容写法 父级.firstElementChild||父级.firstChild
尾子节点
父级.lastElementChild 兼容高版本浏览器
父级.lastChild 兼容ie6,7,8
兼容写法 父级.lastElementChild||父级.lastChild
首子节点 obj.children[0];
尾子节点 obj.children[obj.children.length-1];
创建元素
document.createElement('标签名') 什么标签都能创建
你创建出来的标签，跟html中手写的标签一模一样，没有任何区别。
添加元素
父级.appendChild(新创建的对象);
在父级的最后面添加了一个元素
父级.insertBefore(要插入的元素,插入到谁之前);
把一个元素插入到另一个元素之前
**必须有一条才能用 必须有插入谁之前的元素
删除元素
父级.removeChild(要删除的对象)
克隆元素
obj.cloneNode()
obj.cloneNode(true) 深度克隆元素,包括内容一起克隆
*注意:id也会被一起克隆。
*小贴士:以后每次使用克隆的时候都要把id去掉
上移下移:
appendChild和insertBefore有剪切功能
盒子模型:width/height+padding*2+border*2
物体信息：
obj.offsetWidth 盒子模型的宽度
obj.offsetHeight 盒子模型的高度
obj.offsetTop 距离定位父级的距离
offsetHeight Height
盒子模型高度 纯高度
number string
获取html标签
右下角富媒体:
1.position:absolute; right:0; bottom:0;
2.position:fixed; right:0; bottom:0; 不兼容ie6
自己写:
onscroll 当页面滚动时触发。
滚动距离(页面滚了多少它就是多少)
document.documentElement.scrollTop;
不兼容chrome
document.body.scrollTop;
兼容chrome
兼容写法：
document.documentElement.scrollTop||document.body.scrollTop;
改变窗口大小事件 onresize
页面滚动事件 onscroll
滚动距离
document.documentElement.scrollTop||document.body.scrollTop; 获取上下滚动距离
document.documentElement.scrollLeft||document.body.scrollLeft; 获取左右滚动距离
获取可视区的宽高
document.documentElement.clientHeight
获取可视区高度
document.documentElement.clientWidth
onfocus:
事件，获取焦点的事件
onblur：
事件，失去焦点的事件
DOM操作（二）
结构：parentNode document 结构父级
定位：offsetParent body 定位父级
**offsetLeft 物体到有定位父级的一个左边距离
obj.getBoundingClientRect(); 获取绝对位置;
.left 左边距离页面左边的距离
.top 上边距离页面上边的距离
.right 右边距离页面左边的距离
.bottom 下边距离页面上边的距离
操作属性
正常和自定义的都行
获取自定义属性
obj.getAttribute('属性名');
设置自定义属性
obj.setAttribute('属性名','属性值');
删除自定义属性
obj.removeAttribute(名)
成对出现 不能和自定义属性混用
物体高度：
obj.offsetHeight 物体盒子模型高度
obj.scrollHeight 内容高度
如果内容小于offsetHeight,取得offsetHeight
如果内容大于offsetHeight,内容高度
innerHTML的问题:
innerHTML加等于的话:会清空之前身上事件
图片对象:
new Fuction()
new Oject()
new Image() 创建一个图片对象
这个东西跟在html中手写的img标签一模一样。
img.onload 当图片加载成功触发这个事件。
img.onerror 当图片加载失败触发这个事件。
文字提示:
事件
获取焦点事件
onfocus
失去焦点事件
onblur
获取焦点函数
让一个文本框上来就获取焦点
.focus() 让一个元素获取焦点
.blur() 让一个元素失去焦点
事件对象(event) 包含了事件的详细信息。
ev参数 事件对象 兼容chrome FF IE8 9 10 但是得传参
event 事件对象 兼容Chrome和IE系列
var oEvent = ev||event;(他们俩个不能换位置)
平时注意写上window.onload
只能获取到鼠标和键盘的操作。
获取鼠标在可视区中的坐标:
事件对象.clientX; 获取可视区中X轴坐标
事件对象.clientY; 获取可视区中Y轴坐标
**以后只要是操作clientX和clientY就加上滚动距离。
ondblclick 双击事件。
onmousemove 鼠标移动事件
注意：移动事件触发的特别频繁。所以里面别放复杂代码。
事件冒泡:
子级会去找父级相同的事件执行
就算当前元素没什么没有这个事件 也会往上冒
冒泡跟结构有关 (没事不要取消)
取消事件冒泡:
var oEvent=ev||event;
oEvent.cancelBubble=true 取消事件冒泡. IE chrome照顾IE
oEvent.stopPropagation(); 取消事件冒泡. W3C规定
Jq的元素操作及DOM操作
Jq的元素操作
$ - jQuery库 jQuery()
jQuery中所有的东西，都在 $ 身上。
domReady:
$(function(){
});
另一种写法：
$(document).ready(function(){
});
获取元素：
根据id: $('#id')
根据class： $('.class')
根据标签名： $('标签名')
加事件：
$('#id').click(fucntion(){});
用 $ 获取到的元素，都是 jquery的对象，不是原生的对象。
设置样式：
$('div').css('background','red')
获取样式：
$('div').css('display');
设置显示、隐藏:
显示： .show();
隐藏： .hide();
toggle：绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
鼠标移入：
mouseenter mouseover
鼠标移出：
mouseleave mouseout
移入移出切换 ：
$('#btn').hover(function(){}, function(){});
两个函数，分别表示移入和移出（第一个函数->移入，第二个函数->移出）
淡入淡出：
$('#div1').fadeIn();
$('#div1').fadeOut();
*jquery里，涉及动画的东西，先停止，再继续
$('#div1').stop().fadeIn();
*调用jquery的方法时，可以采用 链式 写法。
$('#div1').stop().fadeIn();
替换了：
$('#div1').stop();
$('#div1').fadeIn();
下拉：slideDown
收起：slideUp
自定义动画效果，animate 先加上stop()
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或
表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"
fn:在动画完成时执行的函数，每个元素执行一次。
Params的属性值必须是数字 不是数字没办法运动
改变颜色:https://bitstorm.org/jquery/color-animation/jquery.animate-colors.js
选择器：获取元素
常用三种：
id: $('#id')
标签： $('标签名')
class： $('.class名字')
属性：
$('li[属性名="属性值"]')
伪类：
:first 第一个
:last 最后一个
:even 偶数行
:odd 奇数行
:eq(索引值) 按索引取第几个 -- 从0开始
:lt 小于索引值
:gt 大于索引值
:contains(text) 找内容中包含
li:has(标签名) 标签名是li下的 选中的是li
$('#box input') 嵌套选择
**** .eq(索引值) 获取指定索引值的元素
css的操作：
获取： .css('样式名');
设置： .css('样式名','值');
批量设置：.css({多个样式名和值});
属性操作：
获取属性： .attr('属性名');
设置属性： .attr('属性名','值');
批量设置属性： .attr({多个属性名和值});
class的操作：
增： addClass('class名');
删： removeClass('class名');
内容的操作：
表单元素的内容：
原生： .value
jq:
获取：.val()
设置：.val('设置的值');
标签的内容：
原生： innerHTML
jq:
获取： .html()
设置： .html('设置的内容');
对象：
原生对象，不能用jq的方法的操作
jq对象，不能用原生的方法操作
把jq对象转成原生对象： $('div')[0]
把原生对象转成jq对象： $(oDiv)
jquey里，this，通常情况下(在多数情况下)，指的是原生对象(不是jq对象)。
***链式操作
获取索引值： .index()
Jq的DOM操作:
位置：
原生：
到定位父级：
oDiv.offsetLeft
oDiv.offsetTop
绝对位置：
getPos(oDiv).left
getPos(oDiv).top
jquery:
到定位父级：
$(this).position().left
$(this).position().top
绝对位置：
$(this).offset().left
$(this).offset().top
大小：
原生：
盒模型：
offsetWidth
offsetHeight
jquery:
普通宽：$(this).width() //普通,不包含border和 padding
普通高：$(this).height()
$(this).innerWidth() //包含 普通+ padding
$(this).innerHeight()
$(this).outerWidth() //包含普通+ padding+ border
$(this).outerHeight()
可视区大小：
宽：$(window).width()
高：$(window).height()
滚动条：
原生 ：
document.documentElement.scrollTop || document.body.scrollTop;
jquery:
$(document).scrollTop()
$(document).scrollLeft();
兄弟们：
$(this).siblings() ;
DOM操作：
创建元素： $('<p>fffff</p>')
append:
A.append(B); // 在A里面追加B (后面)
appendTo:
A.appendTo(B); //把A放到B里面（后面）
prepend:
A.prepend(B); // 在A里面追加B （前面）
prependTo:
A.prependTo(B); //把A放到B里面（前面）
after:
A.after(B); //把B放到A后面 （外面）
before:
A.before(B); //把B放到A前面 （外面）
insertAfter:
A.insertAfter(B); //把A放到B后面 （外面）
insertBefore:
A.insertBefore(B); //把A放到B前面（外面）
删除元素：
remove:
$('选中的元素').remove('id/css/tag/嵌套/...');
jq事件：
在jquery里，所有的事件，都是绑定的。
绑定，解绑，委托：
-------------------------------------
1.7 开始，下面的方式，都弃用
bind() unbind() 直接绑定
live() die() 通过冒泡
delegate undelegate 更精确的小范围使用事件委托
--------------------------------------
绑定： on
简单绑定： $(obj).on('事件名',function(){});
传递数据： $(obj).on('事件名','选择器',{数据},function(ev){
ev.data // 就是传过来的数据
});
多个事件： $(obj).on('事件名1 事件名2...',function(){});
***多个事件用空格分开
解绑定： off
$(obj).off(); //全部事件都消失了
$(obj).off('事件名'); //指定的事件消失
委托： on
$(obj).on('事件名','选择器',function(ev){
**函数里面的this是选择器(可以是jq任何选择器)
//var aaa=ev.target||ev.srcElement
//**$(aaa)转成jq对象 才能操作
});
one:
$(obj).one('事件名',function(){}); 一次性事件
模拟:
$(obj).on('事件名',function(){
alert(123)
$(obj).off();
})
右键：
contextmenu
return false:
阻止默认行为 并且 阻止冒泡
单独阻止默认行为：ev.preventDefault()
单独阻止冒泡：ev.stopPropagation()
*jquery里的事件详情 ev ，做了兼容处理，不用 ev||event
循环：两种写法
$('li').each(function(index,element){
//index -- i
//element -- aLi[i]
element 原生对象
$(element) jq 对象
})
$.each(要循环的东西，function(i,v){
//要循环的东西 可以是原生对象
});
小工具：
$.browser.msie 是否是ie false/true
$.trim(str) 去除首尾空格
$.type 测试类型
jquery:
js 库
为什么流行：
1）本身确实有很多封装好的功能
2）可扩展性非常强
---导致很多jquery插件出现了
自定义插件：
$.fn.toRed = function(){
//实现插件的代码
在插件里，this 就 jquery对象。
}
批量写插件：
$.fn.extend({
toRed:function(){
this.css('','')
},
toBlue:function(){
this.css('','')
}
});
//可以单独放在js文件里面
***注意自定义插件放在window.onload($()) 外面
网友评论