jquery监听指定元素高度变化

文章目录

• 一、JQuery的基本概念

• 1、JQuery的封装原理
• 2、jQuery选择器

• id选择器
• 类选择器
• 标签选择器
• 组合选择器

• 二、jQuery基本操作

• 1、操作元素属性

• 查询元素属性
• 修改元素属性

• 2、操作元素内容

• 获取元素内容
• 修改元素内容

• 3、操作元素的样式

• 使用css操作样式
• 通过类选择器操作样式

• 4、操作文档结构

• 内部引入
• 外部引入
• 包裹
• 替换
• 删除
• 克隆

• 5、操作事件

• js操作事件
• jQuery操作事件

• 三、jQuery基本动画效果

• 1、显示和隐藏效果
• 2、滑动效果
• 3、淡入淡出效果
• 4、自定义动画效果

一、JQuery的基本概念

1、JQuery的封装原理

闭包

闭包的解释：有权访问另一个函数作用域中的变量的函数，所以可以认为闭包是一个函数

function f1(){
    var n = 123; // 局部变量
    function f2(){ // f2 是一个闭包
        alert(n);
    }
    return f2;
}

f1() 是 f2() 的父函数，即f2() 被赋给了一个全局变量，f2依赖f1生存，所以在调用结束时，f2并不会被立刻回收。

闭包可以理解为一个函数

• 能够读取其他函数内部变量的函数。
• 或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。

闭包的作用：通过层级作用，将小作用域和生命周期较短的数据向上传递，扩大其作用域和声明周期

重名变量会发生覆盖

js中只有一个全局作用域

当全局作用域或局部作用域中出现同名变量（函数也是变量），会发生变量的覆盖

当一个项目引入多个script文件或框架文件，出现同名变量的可能性很大

避免重名变量：挂载到对象之下

var a = {};
a.me  = "我是a定义的text";
a.fly = function(){
            alert("对不起 我要飞");
        }

但是如果对象名被覆盖就会原地爆炸

避免对象名被覆盖：使用工厂模式封装代码

function gongchang(){
    var b = {};
    b.alert3 = function(){
        alert("我是工厂模式下的text");
    }
    return b;
}

将对象封装到一个函数中

函数名被覆盖照样爆炸

匿名函数：去掉函数名避免被覆盖?

function(){
    var b = {};
    b.alert3 = function(){
        alert("我是匿名工厂模式下的text");
    }
    return b;
}

那你怎么调用呢？

匿名自调用：解决匿名函数无法被调用的问题

(function(){
    obj.alert4 = function(){
        alert("匿名函数下的text");
    }
    return obj;
})();

函数只能页面加载时被调用一次，而且内部数据无法被获取

闭包原理：终极的解决方案

(function(obj){
    obj.alert4 = function(){
        alert("匿名函数下的text");
    }
    return obj;
})(window);

使用window对象作为参数传递的好处

• window 不会被销毁
• 不会发生变量覆盖

---

2、jQuery选择器

id选择器

var object = $('#id') 返回：jQuery对象 通过val() 访问html value

function testID(){
    var id = $('#text1');
    alert(id.val());
}

类选择器

var object = $('.calss') 返回值：一个类数组的jQuery对象

function testClass(){
    var input = $('.text');
    alert(input.val()) // 不可以被遍历
    alert(input.length);
    // 通过下标访问返回 HTML element
    alert(input[0]);
    // for(var i of input){
    // 	alert(i.val())
    // }
} // 返回类数组的JQuery对象，拥有.length属性，但并不是数组，没有数组的API

类数组对象的说明

The jQuery object itself behaves much like an array; it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join().

1. 类数组对象行为类似数组,可以通过length获得长度
   可以下标访问.下标访问获得的值是HTML element
2. 类数组对象不是数组,数组的部分api对类数组对象并不适用
3. 类数组对象可以转换为数组,只是我们一般并不那么干
4. 在浏览器中的返回值和jQuery对象一样:object object

标签选择器

var object = $('input')

返回值:类数组对象

$('button').bind('click',function(){
    alert(1);
});

组合选择器

var object = $('#text1,h3'); 组合选择被包含在一个字符串内

错误用法: $('#text1' , 'h3');

function testAll(){
    var all = $('#text1,h3');
    alert(all.length);
}

二、jQuery基本操作

1、操作元素属性

查询元素属性

jquery.attr('属性')

function getAttr(){
    // 获取jQuery对象
    var user = $('#user');

    // 获取属性
    console.log(user.attr('name'));
    console.log(user.attr('value')); // 只能获取默认值
    console.log(user.val()) // 实时获取
}

修改元素属性

jquery.attr('属性' , '属性值')

function setattr(){
    // 获取jQuery对象
    var user = $("#user");
    // 设置属性
    user.attr('type','button');
}

---

2、操作元素内容

js 中通过node.innerHTML node.innerText 操作元素的内容 , 因为这两个API是属性所以可以直接赋值修改节点的元素内容

jQuery中操作元素内容通过 object.html() object.text() 因为这两个API是方法 , 所以当不传入参数时为获取元素内容 , 传入参数时(一个)为修改元素内容

获取元素内容

// 获取元素内容
function testHtml(){
    // 获取对象
    var html = $('#showidv');
    // 获取内容
    alert(html.html());
}

// 获取元素内容
function testTest(){
    var text = $('#showidv');
    alert(text.text());
}

如果获取对象内包含标签，html()获取内容包含标签，text()获取内容不包含标签

修改元素内容

html() 和 text() 在底层是调用自js 的 node.innerHTML node.innerText , 所以这两个方法的区别与这两个属性的区别相同

html.html('<i>皇军前面八路大大滴有</i>'); // 标签被解析

text.text('<i>皇军前面八路大大滴有</i>'); // 标签并不会被解析

function testHtml2(){
    var html = $('#showidv');
    html.html('<i>皇军前面八路大大滴有</i>'); // 标签被解析
}

function testTest2(){
    var text = $('#showidv');
    text.text('<i>皇军前面八路大大滴有</i>'); // 标签并不会被解析
}

---

3、操作元素的样式

使用css操作样式

css 修改 , 增加 , 获取 样式

object.css('样式'); 获取元素样式值

object.css('样式','样式值');修改元素样式值 or 增加元素样式值

那如何移除一个样式?

可以将某个属性的值设置为none

object.css('样式','none');

// css 操作元素的样式
function testCss(){
    // 获取对象
    var div = $('#showdiv');
    // 增加一个样式
    div.css('font-size','25px');
    // 修改样式
    div.css('width','50px');
    // 获取样式的值
    console.log(div.css('height'));

}

通过类选择器操作样式

1. 设置 .class 的css样式
2. 给某个元素添加 .class 这个类选择器

• addClass( ’ 类选择器名’ )
• 类选择器可以叠加

3. 使用removeClass() 可以移除类选择器( 已有的 或 addClass添加的 )

style
.dd{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
.vv{
    font-size: 25px;
}


// 使用addClass() 添加类选择器 传入类选择器作为参数
function testAddClass(){
    var div = $('#div01');
    div.addClass('dd');
}
// removeClass() 移除类选择器
function testRemoveClass(){
    var div = $('#div01');
    div.removeClass('dd');
    div.removeClass('vv');
}

---

4、操作文档结构

内部引入

向后追加

append(content) content 包含string，jQuery对象，html标签等

// 内部引入: append() appendTo() prepend() prependTo()
function testAppend(){
    // 获取对象
    var showdiv = $('#showdiv');
    // 追加内容
    showdiv.append('<i>我要农药</i>');
}
function testappendTo(){
    var div01 = $('#div01');
    var u1 = $('#u1');
    u1.appendTo(div01);
}

关于object.appendTo()

操作对象和传入参数为对象或选择器，表示将一个文档的内部元素追加到某个元素的内部

u1.appendTo(div01); 表示将u1向后追加至div01中

向前追加

prepend(conteng)

object.prependTo(object) 使用和appendTo() 一致

// 向前加入
function preappend(){
    var showdiv = $('#showdiv');
    showdiv.prepend('<i>我要农药</i>');
}
function preappendTo(){
    var div01 = $('#div01');
    var u1 = $('#u1');
    u1.prependTo(div01);
}

如果 append,prepend 的参数为选择器获取的jQuery对象，则会将页面中形参对象加到某个内部元素中

完全可以达到和 appendTo() prependTo() 一样的效果

外部引入

外部引入是指在标签的外部即标签的前面或后面添加内容

• object.after(content|fn) 在每个匹配的元素之后插入内容。
• object.before(content|fn) 在每个匹配的元素之前插入内容。
• object.insertbefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

// 外部引入
function testAfter(){
    // 声明对象
    var showdiv = $('#showdiv');
    showdiv.after('<b>我是月亮的化身</b>');
}
function testbefore(){
    var showdiv = $('#showdiv');
    showdiv.before('<b>你是电，你是光，你是唯一的神话</b>');
}
function testInsertbafter(){
    var div01 = $('#div01');
    var span = $('span');
    span.insertAfter(div01);
}
function testInsertbefore(){
    var div01 = $('#div01');
    var span = $('span');
    span.insertBefore(div01);
}

如果after，before传入的参数为jQuery对象或选择器就可以达到和insertBefore，insertAfter一样的效果，即将文档中的一个对象插入到某个标签的前面或后面

包裹

wrap(html|ele|fn) :把所有匹配的元素用其他元素的结构化标记包裹起来。

// 包裹 wrap:把所有匹配的元素用其他元素的结构化标记包裹起来。
function testWrap(){
    $('p').wrap('<b></b>');
}
function testWrap2(){
    $('p').wrap($('#div01'));  // 将原有对象复制后包裹
}

替换

替换：object.replaceWith(String, Element, jQuery, Function) 将所有匹配的元素替换成指定的HTML或DOM元素。

// 替换：replaceWith(String, Element, jQuery, Function)  将所有匹配的元素替换成指定的HTML或DOM元素。
function testReplace(){
    $('span').replaceWith($('p'));
}

删除

删除:empty() 删除匹配的元素集合中所有的子节点。 没有参数

// 删除:empty()  删除匹配的元素集合中所有的子节点。 没有参数
function testEmpty(){
    $('#div').empty();
}

克隆

克隆:clone() 克隆匹配的DOM元素并且选中这些克隆的副本。

// 克隆:clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
function testClone(){
    // $('#div01').append($('p').clone());
    $('p').appendTo($('#div01'));  // 两种写法一致
}

---

5、操作事件

js操作事件

对象.onclick = function(){ … }

// js动态添加事件
function testTing(){
    document.getElementById("btn1").onclick = function(){
        alert('我是js添加的事件');
    }
}

jQuery操作事件

bind()

jQuery对象.bind('事件名',fn)

function testJqthing(){
    $('#btn2').bind('click',function(){
        alert('我是jQuery-bind添加的事件');
    })
}

one 添加事件

jQuery对象.one('事件名',fn)

添加的事件只被执行一次，之后事件被销毁

添加的事件可以被unbind() 解绑

function testone(){
    var btn3 = $('#btn3');
    btn3.one('click',function(){
        alert("我是jQuery-one添加的事件");
    })
}

unbind

jQuery对象.bind('事件名')

可以解绑 bind 和 one 添加的事件，不能去除 js 添加的事件

function testUnbind(){
    $('#btn2').unbind('click'); // 但是不能解绑js添加的事件
}

js 和jQuery添加事件的区别

js添加事件是对事件中的监听函数进行覆盖 而 jQuery添加事件是在事件中已有的监听函数后进行追加。

加载事件

js添加加载事件:覆盖原有的监听函数

window.onload = function(){
    alert('我是js添加的onload');
}

jQuery添加加载事件：在原有事件基础上追加监听函数

$(document).ready('事件名')

$(document).ready(function(){
    alert("我是jQuery添加的加载事件");
});

三、jQuery基本动画效果

1、显示和隐藏效果

$('选择器').show() object.hide()

• 显示和隐藏实质是一个动态调节宽高的过程
• 参数可以是 string: “normal”,“solw”,“fast” 或者以毫秒为单位的时间function testSlide(){
  $(‘div’).slideUp(2000);
  $(‘div’).slideDown(2000);
  }

function testdisplay(){
    var div01 = $('#div01');
    // div01.hide('slow');
    div01.hide(2000);
    div01.show(2000);
    $('div').toggle(2000);
}

---

2、滑动效果

slideDown() slideUp()

• 通过高度变化（向上/下增大）来动态地显示所有匹配的元素
• 参数可以是 string: “normal”,“solw”,“fast” 或者以毫秒为单位的时间

function testSlide(){
    $('div').slideUp(2000);
    $('div').slideDown(2000);
}

---

3、淡入淡出效果

fadeIn() fadeOut()

• 通过不透明度的变化来实现所有匹配元素的淡入淡出效果
• 参数可以是 string: “normal”,“solw”,“fast” 或者以毫秒为单位的时间

function testFade(){
    $('#div02').fadeOut(2000);
    $('#div02').fadeIn(2000);
}

---

4、自定义动画效果

animate(params,[speed],[fn])

• params：一个css样式和值的json字符串
• speed：参数可以是 string: “normal”,“solw”,“fast” 或者以毫秒为单位的时间
• fn：animate() 执行结束后自动调用函数fn()

function testAnimate(){
    var div01 = $('#div01');
    div01.animate({
        'left': '200px',
        'top': '200px',
    },2000);
}