html+css+js+jQuery学习笔记（三）-阿里云开发者社区

3.2 jQuery中的节点操作

3.2.1 append就是往最后添加：

父亲.append(儿子)

$("#box").append("<p>么么哒</p>");

jQuery节点操作非常简单，不用createElement的过程了。实际上内部就是用innerHTML来给你加进去的。

特别的，如果我们想先创建一个孤儿节点，给这个孤儿节点加样式、加监听、加动画，可以的，那么创建孤儿节点，也是用$()函数。 $()不仅仅能够选择页面上的节点，也能够创建新的孤儿节点：

var $obj = $("<p></p>");
$obj.css("background-color","red");   //jQuery对象就可以直接调用css方法
$("#box").append($obj);

3.2.2 appendTo 表示被动，儿子appendTo父亲

$("<p>么么哒</p>").appendTo($("#box"));

prepend 插入为第一个儿子， prependTo表示被动

$("<p>么么哒啊！</p>").prependTo($("#box"));

3.2.3 after 插入兄弟 before 插入兄弟

比如HTML结构：

<div id="box">
<p>哈哈</p>
<p>嘻嘻</p>
</div>

执行代码：

$("p").after("<h3>我是h3</h3>");

HTML将变为：

<div id="box">
<p>哈哈</p>
        <h3>我是h3</h3>
<p>嘻嘻</p>
        <h3>我是h3</h3>
</div>

3.2.4 insertBefore、insertAfter

比如HTML结构：

<div id="box">
<p>000</p>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
</div>

代码：

$("<p>么么哒</p>").insertBefore($("p")[2]);

HTML结构将变为：

<div id="box">
<p>000</p>
<p>111</p>
        <p>么么哒</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>

</div>

3.2.5 wrap、warpAll

在外面包裹

$("a").wrap("<span></span>");  //每个a都用span包裹起来
$("a").wrapAll("<span></span>");  //所有a都用span包裹起来

3.2.6 empty()

$("p").empty();

等价于

$("p").html(“”);

3.2.7 remove()

删除页面上所有p标签：

$("p").remove();

3.2.8 clone()

克隆节点

克隆ul li里面的第1个，然后ul追加：

$(“ul”).append($(“ul li”).eq(0).clone());

反过来：

$(“ul li”).eq(0).clone().appendTo($(“ul”));

延时函数

！！Delay（时间）

● DOM0级的方式，只能监听冒泡阶段。不能有同名的事件，会覆盖。this是触发事件的这个元素。高版本浏览器会冒泡到window，低版本浏览器冒泡到document。

● DOM2级的方法，addEventListener()，可以自由设置冒泡、捕获。第三个参数是use capture ，true就是捕获，false就是冒泡。事件名不加on，可以有同名事件，会顺序执行，不覆盖。this是触发事件的这个元素。会冒泡到window。

● IE6、7、8是自己的方法，attachEvent()，只能监听冒泡阶段。没有第三个参数。事件名写on。可以有同名事件，会反着执行（事件栈）。this很蛋疼，是window而不是触发事件的这个元素。事件仅仅冒泡到document。

三、事件对象

任何的事件处理函数，我们的浏览器、JS引擎会默认往里面传一个实参，就是事件对象。

通常用形参event来接收：

oDiv.onclick = function(event){
console.log(event);
}

所有这次事件的细节，都被封装到了这个event对象里面。

比如clientX、clientY就是这次点击的位置。

1.1通用事件对象属性和方法

oDiv.mouse事件 = function(event){

event = event || window.event;//解决event不兼容问题一定要记住

}

● event.type 返回事件的类型，没有on，比如”click”

● event.target 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它

● event.currentTarget 返回自己，this一定和event.currentTarget是一个元素，都是自己

● event.bubbles 返回一个布尔值，表示这个事件是否冒泡

oDiv.onmouseover = function(event){
console.log(event.bubbles); 
}

比如onmouesover的event.bubbles就是true;

但是onmouseenter的 event.bubbles就是false;

简称onmouseover冒泡，onmouseenter不冒泡。

Onmouseover onmouseout

这两个巨容易出现错误尤其是我做那个京东放大镜一样

小放大镜窗口代码设想不应该出现在盒子外面，也不能移动出来

定义了onouseout以后play none 但是没有消失我丢了淦

后来才发现我定义的是大盒子的onmouseout小盒子也是大盒子的一部分就相当于鼠标没有从小盒子放大镜里面出来的话他会一直不触发onmouseout事件

困扰了1天乱写突然发现问题出在哪里淦

onmouseover、onmouseenter IE6、7、8、9、10全面兼容！反而是chrome30之前不兼容。所以现在可以看做全线兼容，就嗷嗷用就完事儿了。

● stopPropagation() 停止传播事件流

event.stopPropagation();

● preventDefault() 阻止默认事件

event.preventDefault();

3.2 clientX、clientY、screenX、screenY

全线兼容，表示事件触发这一瞬间的鼠标位置。

clientX表示鼠标的位置，距离浏览器窗口左边边的距离

clientY表示鼠标的位置，距离浏览器窗口上边边的距离

screenX表示鼠标的位置，距离屏幕左边边的距离

screenY表示鼠标的位置，距离屏幕上边边的距离

3.3 IE中的event

IE浏览器的event对象是window对象的属性，而不是事件的实参。

$(this).addClass(“cur”).silblings().removeClass(“cur”);

页面滚动窗口滚动

Onscroll

//当窗口卷动的时候发生这个事件
window.onscroll = function(){
}

卷动值：scroll

document.body.scrollTop || document.documentElement.scrollTop
window.onscroll = function(){

高级浏览器认为卷动值是body的属性，

IE6、7、8认为卷动值是html标签的属性

如何得到HTML标签呢，JS中document.documentElement就是html标签

h1.innerHTML=document.body.scrollTop||document.documentElement.scrollTop;
}

卷动值不是可读的，也可以设置。甚至是动画。

元素的尺寸、位置：

oDiv.offsetLeft
oDiv.offsetTop
oDiv.clientWidth //width+padding
oDiv.clientHeight
oDiv.offsetWidth //width+padding+border
oDiv.offsetHeight

event对象的鼠标当前位置

event.clientX //鼠标到视口

document.body.childNodes[a].className.indexOf("jisuan")!=-1 检索标签名字中是否含有“jisuan”// 必须配合前面的判断标签类型使用因为页面里面可能含有未定义的text类型

Unfinde未定义！！！Unfinde的话后面的indexOF就不能使用了并且childNodes是亲儿子节点啊啊啊啊！！！！！！！

这个方法遍历得到亲儿子巨好用

有一个小函数，判断这个东西是不是NaN，

isNaN()

实验证明：

isNaN(NaN)   //true
isNaN(“NaN”)  //true
isNaN(undefined) //true
event.clientY
event.screenX //鼠标到屏幕
event.screenY
event.offsetX //说是不兼容火狐，但现在火狐兼容，到最小盒子的左上角
event.offsetY //这两个事件冒泡触发外层鼠标事件
窗口的
document.body.scrollTop || document.documentElement.scrollTop  //卷动值
document.body.clientWidth || document.documentElement.clientWidth  //视口宽度
if(document.body.childNodes[a].nodeType==1&&document.body.childNodes[a].className.indexOf("jisuan")!=-1)
     {
                  tar.push(bodych[a]);
     }
document.body.childNodes[a].nodeType==1 判断节点类型是否为1 （标签）
原生js animated scrollAnimate运动框架
function scrollAnimate(target,time){
var frameNumber = 0; //帧编号
var start = document.body.scrollTop || document.documentElement.scrollTop;  //起点
var tance = target - start;
var interval = 10;
var maxFrame = time / interval;
clearInterval(timer);
var timer = setInterval(function(){
frameNumber++;
if(frameNumber == maxFrame){
clearInterval(timer);
}
//第一个参数t表示当前帧编号
//第二个参数b表示起始位置
//第三个参数c表示变化量
//第四个参数d表示总帧数
//返回当前帧应该在哪儿
document.body.scrollTop = document.documentElement.scrollTop = CubicEaseInOut(frameNumber,start,tance,maxFrame);
},10);

op.onmousedown = function(event){
var deltaX = event.clientX - op.offsetLeft;
var deltaY = event.clientY - op.offsetTop;
document.onmousemove = function(event){
var x = event.clientX - deltaX;
var y = event.clientY - deltaY;
if(x < 0){
 x= 0;
}else if(x > odiv.clientWidth - op.clientWidth){
x = odiv.clientWidth - op.clientWidth
}
op.style.left = x + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}

拖拽模型，脑子中一下子要想到模型：

如果想要得到鼠标在当前这个盒子中的位置：

event.offsetX;
event.offsetY;

挺好用的，新版本火狐嗷嗷好用。如果为了怕一些版本浏览器不兼容，或者为了防止冒泡干扰：

event.clientY - (getAllTop(oDiv) - scrollTop)

窗口更改尺寸事件onresize

window.onresize = function(){
}

窗口的尺寸

document.documentElement.clientWidth
document.documentElement.clientHeight

二、滚轮事件Onmousewheel

event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：

鼠标往上滚， 120

鼠标往下滚， -120

如果滚动快速，可能出现120的整数倍，正负性是一样的。

onmousewheel事件的触发，是滚轮滚动一“咯噔”触发一次。

火狐浏览器不兼容，火狐使用自己的专用事件DomMouseWheel，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。

oDiv.addEventListener("DOMMouseScroll",function(event){
oDiv.innerHTML = event.detail;
},false);

火狐添加的事件，是它自己的专门事件DOMMouseScroll，表示滚动方向的事件的属性叫做event.detail。

detail就是细节的意思。反着的，滚动方向往上，-3；滚动方向往下，3。

兼容性的解决？

当我们给Chrome或者IE添加一个DOMMouseScroll事件的时候，会静默，不会报错。

添加监听好解决，就写两个监听就行了，事件处理函数，要写判断。

function mousewheelhandler(event){
event = event || window.event;   //→ 解决IE6、7、8和高级浏览器的不兼容
//阻止默认事件
if(event.preventDefault){    //→ 解决IE6、7、8和高级浏览器的不兼容
event.preventDefault();
}else{
event.returnValue = false;
}
//Chrome、IE用的是event.wheelDelta;
if(event.wheelDelta){  //→ 解决火狐和其他浏览器的不兼容
var direction = event.wheelDelta > 0 ? 1 : -1;
}else if(event.detail){
//火狐用的是event.detail;
var direction = event.detail > 0 ? -1 : 1;
}
oDiv.innerHTML = direction;
}

这个事件处理程序中，已经屏蔽了3个事情的不兼容。

//给IE、CHrome添加事件
oDiv.onmousewheel = mousewheelhandler;
//给火狐添加事件
oDiv.addEventListener("DOMMouseScroll",mousewheelhandler,false);

try{……}catch(ex){}

try表示尝试，里面的语句可能有错误，catch(ex)参数ex就是try语句段里面出现的错误。在catch里面进行了一个捕获，可以把错误控制在这个catch语句块里，而不向浏览器抛出。

try{
console.log("123");
var a = b;  //这行语句有错误，b没有被定义
console.log("哈哈");
}catch(err){
throw new error();
}
console.log("456");

123

456

程序的执行逻辑是这样的：运行try语句块里面的语句，如果遇见了错误的语句，不向浏览器抛出错误。而是执行catch语句段里的语句。try语句里面没有执行完的语句，不执行了。catch语句块执行完毕之后，执行后面的语句。

阻止默认事件

event.returnValue=false;//IE678

event.preventDefault();//高级浏览器

Event=event//高级浏览器

event=window.event;//IE678

三、滚滚屏原理

CSS从小到大都是height:100%; 撑高为浏览器屏幕高度

html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
.contanier{
width: 100%;
height: 100%;
position: absolute;
top: -300%;
left: 0;
}
.page{
width: 100%;
height: 100%;
background: yellowgreen;
}

四、jQuery实现

4.1 拖拽

实现拖拽要用的就是jQueryUI这个插件，这是一个官方插件，用来实现：

Draggable ：拖拽

Droppable ：拖放

Resizable ：改变尺寸

Selectable ：可选择

Sortable ：可排序

插件的意思是，我这个插件包依赖你的jQuery：

一条语句能实现拖拽：

$("div").draggable();

重要的参数，参数都以JSON来配置

$("div").draggable(JSON);

文档： jQuery UI API Documentation

axis//约束在哪个轴上
containment:”parent”//在父亲盒子中移动
grid:[x,y]//步长
drag :function(event,ui){console.log(ui.position.left,ui.position.top);
}//拖动以后发生的事件，值是ui.position.top;

$("p").draggable({
axis: "x",  //约束在某个轴上
containment: "parent", //在父盒子中拖拽
grid : [100], //步长
drag : function(event, ui){  //事件，值就是ui.position.top
console.log(ui.position.left,ui.position.top);
}
});

4.2 各种尺寸

$("div").width();  //计算后的内容宽度
$("div").innerWidth();  //计算后的算上padding的宽度
$("div").outerWidth();  //算上padding和border
$("div").outerWidth(true);//算上padding和border和margin

4.3 净位置（到页面顶端的位置）

就是我们昨天封装的getAllTop，jQuery中也替我们封装了。叫做offset()这个方法返回一个带有top、left、bottom、right属性的对象。

var t = $("p").offset().top;

净位置如同我们昨天学习的getAllTop()，但是他比我们牛逼许多，十年磨一剑。

IE8的border问题都解决了。

先打点调用offset()方法，然后是top属性

4.4 鼠标滚轮事件

jQuery天生没有mousewheel事件，必须依靠插件。

event.deltaY属性，鼠标滚轮往下滚-1，往上滚1。

4.5 窗口相关

窗口的卷动事件：

$(window).scroll(function(){
     console.log($(window).scrollTop());
});

还记得么？$()里面只有三个东西不加引号：$(this)、$(window)、$(document)。

原生的：

window.onscroll = function(){
console.log(document.body.scrollTop || document.documentElement.scrollTop)
}

$(window).scrollTop();  //方法！！不是属性

窗口的宽度：

$(window).width();
$(window).height();

窗口冲锋：

$(“html,body”).animate({    //对象变成了$(“html,body”)
   “scrollTop” : 2000    //变成了属性
},1000);

4.6 缓冲

就是我们说动运动公式，就是t、b、c、d

需要用插件， jQuery eaise.js

滚动屏

html,body{
            width: 100%;
            height:100%;
   }

一、object类型

但是，下面的特殊情况，这个k必须加引号：

k是特殊字符

k是数字

k是有空格

k是关键字、保留字

先说一下，上面这些情况，也同时不能使用点语法来访问属性了，比如使用方括号：

var obj = {
name : "考拉"
}
console.log(obj["name"]);

特殊形式的k，必须要加上引号，检索属性的时候，必须用方括号：

var obj = {
"24&*$&#@@)@!" : "哈哈",
"all name" : "考拉",
"++++%%%%" : "嘻嘻",
"var" : "么么哒",
"function" : "嘻嘻"<-----这里没有，，，，，逗号
}
console.log(obj["24&*$&#@@)@!"]);
console.log(obj["all name"]);
console.log(obj["++++%%%%"]);
console.log(obj["var"]);
console.log(obj["function"]);

对象的属性的访问，点语法是有局限的，它不能访问上面的特殊的那些情况。也不能访问以变量保存的k：

var obj = {
name : "考拉",
age : 18,
sex : "男",
"study score" : 100
}
//console.log(obj."study score");//错误的
console.log(obj["study score"]); //正确的
console.log(obj["a" + "ge"]); //正确的
var a = "sex";
console.log(obj[a]); //正确的
</script>

html+css+js+jQuery学习笔记（三）

3.2 jQuery中的节点操作

三、事件对象

四、jQuery实现

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

html+css+js+jQuery学习笔记（三）

3.2 jQuery中的节点操作

三、事件对象

四、jQuery实现

热门文章

最新文章

相关课程

相关电子书

相关实验场景