JQuery 获取Dom元素的实例讲解

废话不多说，直接上代码

(function (window) {
var arr = [];
var VP = function (selector, context) {
return new VP.fn.init(selector, context);
}
VP.fn = VP.prototype = {
constructor: VP,
init: function (selector, context) {
var _document = window.document, elem, mark = selector.charAt(0);
if (mark == '#') {
elem = _document.getElementById(selector.substring(1));
if (elem) {
this[0] = elem;
this.length = 1;
}
}
return this;
},
splice: arr.splice,
};
VP.extend = VP.fn.extend = function () {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[i] || {};
i++;
}
if (typeof target !== "object" && !VP.isFunction(target)) {
target = {};
}
if (i === length) {
target = this;
i--;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && (VP.isPlainObject(copy) ||
(copyIsArray = VP.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && VP.isArray(src) ? src : [];
} else {
clone = src && VP.isPlainObject(src) ? src : {};
}
target[name] = VP.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
VP.fn.extend({

get: function () {
return this[0];
},

});
VP.fn.init.prototype = VP.fn;
window.VP = VP;
})(window);

以上这篇JQuery 获取Dom元素的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 读jQuery之五（取DOM元素）

    读jQuery之五（取DOM元素）

    jQuery的$调用后想要获取DOM元素可以使用get方法,如下 复制代码 代码如下: // 方式1 $('div').get(1); // 获取页面中第二个div 当然,也可以使用数组索引方式获取 复制代码 代码如下: // 方式2 $('div')[1]; // 获取页面中第二个div 上面两种方式都可以获取某一个特定的DOM元素,而获取DOM元素集合却要使用toArray方法 复制代码 代码如下: $('div').toArray(); // 返回页面中所有的div,依次放入数组中 看看g

  • Jquery方式获取iframe页面中的 Dom元素

    Jquery方式获取iframe页面中的 Dom元素

    测试页面代码: 复制代码 代码如下: <html> <head> <title>jquery方式,访问iframe页面dom元素</title> <meta name="Author" content="孙勤波"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> &l

  • JQuery 获取Dom元素的实例讲解

    废话不多说,直接上代码 (function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(selector, context); } VP.fn = VP.prototype = { constructor: VP, init: function (selector, context) { var _document = window.document, elem, m

  • 封装获取dom元素的简单实例

    示例如下: <script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.getElementsByTagName(tag); }, id : function(id){ return document.getElementById(id); } }, css : { addStyle : function(){}, removeStyle

  • jquery获取当前元素索引值用法实例

    jquery获取当前元素索引值用法实例

    本文实例讲述了jquery获取当前元素索引值用法.分享给大家供大家参考.具体如下: 今天在做促销页面的图片轮转效果时,下方页码的左边需要对应显示图片的说明信息,效果如下: 思路: 页面部分当为当前状态的时候,会添加"active"样式. 通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来. 解决: 通过jquery的 index() 可以很轻松的实现该效果. 代码如下: HTML: <div id="caro

  • jQuery创建DOM元素实例解析

    本文实例讲述了jQuery创建DOM元素的使用技巧.分享给大家供大家参考.具体分析如下: 利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 复制代码 代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript 复制代码

  • jQuery获取DOM节点实例分析(2种方式)

    本文实例讲述了jQuery获取DOM节点.分享给大家供大家参考,具体如下: jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: 复制代码 代码如下: var dom = $(dom)[0]; 2.使用函数get()访问,例如: 复制代码 代码如下: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • jQuery 实现DOM元素拖拽交换位置的实例代码

    实现步骤 1.html + bootstrap 布局画3个面板. 注:面板样式 position 属性必须是绝对位置或者相对位置. 2.监听面板的的 mousedown事件. 记录当前对应面板的位置target_index,设置面板透明拖动. 3.监听当前被拖动的面板的mousemove事件. 根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置. 4.监听当前被拖动的面板的mouseup事件. 当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchange

  • jquery之基本选择器practice(实例讲解)

    jquery之基本选择器practice(实例讲解)

    一.在输入框中输入数字,点击按钮,实现对应事件的功能. html代码: <input id="txt1" type="text" value="2" /> <input id="Button5" type="button" value="改变大于N的行背景为绿色" /> jQuery代码: //改变大于N的行背景为绿色 $("#Button5"

  • zTree jQuery 树插件的使用(实例讲解)

    zTree jQuery 树插件的使用(实例讲解)

    分享说明: 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去. 效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果. 外部引入资源 <link rel=&qu

  • jQuery之动画ajax事件(实例讲解)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //ajax $.ajax({ url:'json/test.txt?_='+Math.random(), type

随机推荐