【jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解】的更多相关文章

jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解

scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚动条距离 如果没有传入val值则获取滚动条距离,如果有设置val则标识设置滚动条距离,还是举个栗子,以scrollTop为例,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu…

jQuery 源码解析(二十六) 样式操作模块 样式详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数1是一个对象时,表示一次性设置多个css样式 css(name,func)       ;参数2是函数时,设置的是函数返回值 css(name,'')            ;参数2是空字符串时,表示删除该样式(删除style属性上的) css(name)              ;如果忽略第二个…

jQuery 源码解析(二十九) 样式操作模块 尺寸详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.border. margin等,主要有六个API,如下: heihgt(size).width(size)   ;获取第一个匹配元素的高度.宽度,或者通过调用.css(name,value)方法来设置高度.宽度. size可以是字符串或者数值 innerHeight().innerWidth() ;获…

jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,                ;value可选,可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容 text(text)         ;获取匹配元素集合中所有元素合并后的文本内容,或者设置每个元素的文本内容,封装了createTextNo…

jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素                                ;该方法会遍历匹配元素集合,在每个元素上调用.wrapAll()方法        ;不同于wrapAll()的是该方法会在每个匹配元素外面都套一层html元素. wrapAll(html)            ;会将html转化为一个DO…

jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, dataAndEvents, deepDataAndEvents)    ;jQuery底层方法,返回DOM引用    ;elem是要复制的DOM元素,dataAndEvents和deepDataAndEvents分别表示是否复制克隆元素的数据和事件 和 是否复制深度复制数据和事件 $.fn.clo…

jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究

终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…

jQuery 源码解析(二十七) 样式操作模块 坐标详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offsetParent获取最近的定位祖先元素,position用于获取获取第一个匹配元素相对于最近定位祖先元素的坐标,如下: offset(options)              ;返回匹配元素集合中的一个元素的文档坐标,或者设置每个元素的文档坐标,;不能带单位,默认是px,有两种使用方法: offse…

jQuery 源码解析(三十) 动画模块 $.animate()详解

jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如下:animate(prop,speed,easing,callback),参数如下: prop ;对象,               ;包含将要动画的样式 speed ;字符串或数字    ;动画运行持续时间,单位毫秒,可以设置为"slow"."normal".&qu…

Vue.js 源码分析(二十八) 高级应用 transition组件 详解

transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: name         用于自动生成CSS过渡类名        例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等    appear      是否在初始渲染时使用过渡         默认为false    css            是否…