mootools 元素追加

    技术2022-07-11  164

    mootools 元素追加

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax.

    我真的不喜欢jQuery的元素创建语法。 它基本上与输入HTML相同,但在JavaScript字符串中……很丑! 幸运的是,Basil Goldman创建了一个jQuery插件,可让您使用类似MooTools的语法创建元素。

    View Demo 观看演示

    标准jQuery元素创建 (Standard jQuery Element Creation)

    var newDiv = $('<div class="my-class"></div>');

    Looks exactly like writing out the HTML...blah.

    看起来就像写HTML ...等等。

    jQuery .create方法 (The jQuery .create Method)

    /* plugin */ jQuery.create = function() { if (arguments.length == 0) return []; var args = arguments[0] || {}, elem = null, elements = null; var siblings = null; // In case someone passes in a null object, // assume that they want an empty string. if (args == null) args = ""; if (args.constructor == String) { if (arguments.length > 1) { var attributes = arguments[1]; if (attributes.constructor == String) { elem = document.createTextNode(args); elements = []; elements.push(elem); siblings = jQuery.create.apply(null, Array.prototype.slice.call(arguments, 1)); elements = elements.concat(siblings); return elements; } else { elem = document.createElement(args); // Set element attributes. var attributes = arguments[1]; for (var attr in attributes) jQuery(elem).attr(attr, attributes[attr]); // Add children of this element. var children = arguments[2]; children = jQuery.create.apply(null, children); jQuery(elem).append(children); // If there are more siblings, render those too. if (arguments.length > 3) { siblings = jQuery.create.apply(null, Array.prototype.slice.call(arguments, 3)); return [elem].concat(siblings); } return elem; } } else return document.createTextNode(args); } else { elements = []; elements.push(args); siblings = jQuery.create.apply(null, (Array.prototype.slice.call(arguments, 1))); elements = elements.concat(siblings); return elements; } };

    This class was taken from Basil Goldman's blog post. The code isn't beautiful but its functionality is.

    该课程摘自Basil Goldman的博客文章 。 代码虽然不漂亮,但是功能却很不错。

    用法 (The Usage)

    /* usage */ $(document).ready(function() { var element = $.create('li',{ id: 'item', 'class': 'custom-class' },['This is a new LI element']); $(document.body).append(element); }); View Demo 观看演示

    You provide three arguments: the element type, element attributes, and an array containing the text within the element or child elements. OK, so it's not quite as wonderful as MooTools' element creation but it's a step in the right direction!

    您提供了三个参数:元素类型,元素属性以及包含元素或子元素内的文本的数组。 好,所以它不如MooTools的元素创建那么美妙,但这是朝着正确方向迈出的一步!

    翻译自: https://davidwalsh.name/jquery-create-element

    mootools 元素追加

    相关资源:jdk-8u281-windows-x64.exe
    Processed: 0.009, SQL: 9