javascript - jQuery ডকুমেন্ট। সমীক্ষা সমতুল্য সমতুল্য?




html dom (8)

আমি কিছু পুরানো জাভাস্ক্রিপ্ট কোড refactoring করছি এবং DOM ম্যানিপুলেশন অনেক যাচ্ছে।

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

আমি jQuery ব্যবহার করে এটি করতে একটি ভাল উপায় আছে কিনা জানতে চাই। আমি সঙ্গে পরীক্ষা করা হয়েছে:

var odv = $.create("div");
$.append(odv);
// And many more

কিন্তু আমি নিশ্চিত নই যে এইটা কোনও ভাল।


আমি যে মত করছি:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

আমি শুধু এর জন্য একটি ছোট jQuery প্লাগইন তৈরি করেছি: https://github.com/ern0/jquery.create

এটি আপনার সিনট্যাক্স অনুসরণ করে:

var myDiv = $.create("div");

DOM নোড আইডি দ্বিতীয় পরামিতি হিসাবে নির্দিষ্ট করা যেতে পারে:

var secondItem = $.create("div","item2");

এটা কি গুরুতর? না। কিন্তু এই সিনট্যাক্সটি $ ("<div> </ div>") এর চেয়েও ভাল, এবং এটি সেই অর্থের জন্য খুব ভাল মূল্য।

আমি একটি নতুন jQuery ব্যবহারকারী, DOMAssistant থেকে স্যুইচ করছি, যা একই রকম কাজ করেছে: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

আমার প্লাগইনটি সহজ, আমি শৃঙ্খলা পদ্ধতিগুলির দ্বারা যোগ করার জন্য attrs এবং সামগ্রী ভাল মনে হয়:

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

এছাড়াও, এটি একটি সহজ jQuery প্লাগইন (100 তম এক) জন্য একটি ভাল উদাহরণ।


এটা সব সোজা সোজা এগিয়ে! একটি দম্পতি দ্রুত উদাহরণ heres ...

var $example = $( XMLDocRoot );
var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});
var $example.find('parent > child').append( $element );

কেবলমাত্র একটি jQuery কন্সট্রকটারে যোগ করতে চান এমন উপাদানগুলির HTML সরবরাহ করা $() jQuery এর append() পদ্ধতি ব্যবহার করে DOM এ যোগ করার জন্য উপযুক্ত, নতুন নির্মিত HTML থেকে একটি jQuery অবজেক্ট ফিরিয়ে দেবে।

উদাহরণ স্বরূপ:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

আপনি যদি ইচ্ছা করেন তাহলে আপনি এই টেবিলের প্রোগ্রাম্যাটিকভাবে ভরাট করতে পারেন।

এটি আপনাকে ক্লাসের নামগুলি বা অন্যান্য বৈশিষ্ট্যগুলি সহ আপনার createElement কোনও HTML টি নির্দিষ্ট করার ক্ষমতা দেয়, যা আপনি createElement ব্যবহার করার চেয়ে আরও সংক্ষিপ্ত পেতে createElement এবং তারপরে JS এর ​​মাধ্যমে cellSpacing এবং className মত বৈশিষ্ট্য নির্ধারণ করে।


বক্সের বাইরে jQueryটির একটি createElement এর সমতুল্য নেই। প্রকৃতপক্ষে jQuery এর কাজটি অভ্যন্তরীণভাবে অভ্যন্তরীণভাবে বিশুদ্ধ DOM ম্যানিপুলেশন ব্যবহার করে অভ্যন্তরীণভাবে করা হয়। অ্যাডাম উপরে উল্লিখিত এইভাবে আপনি অনুরূপ ফলাফল অর্জন করতে পারেন।

প্লাগিনগুলি উপলব্ধ রয়েছে যা অভ্যন্তরীণ HTML এর মত DOM ব্যবহার করে appendDOM , DOMEC এবং FlyDOM মতো কয়েকটি নামকরণ করতে পারে। পারফরম্যান্স অনুযায়ী নেটিভ jquery এখনও সবচেয়ে কার্যকরী (প্রধানত becasue এটি অভ্যন্তরীণ HTML ব্যবহার করে)


যদিও এটি একটি পুরানো প্রশ্ন, আমি মনে করি এটি সাম্প্রতিক তথ্যের সাথে আপডেট করা ভাল হবে;

JQuery 1.8 থেকে একটি jQuery.parseHTML ফাংশন রয়েছে যা এখন উপাদান তৈরির একটি পছন্দের উপায়। এছাড়াও, এইচটিএমএল পার্সিংয়ের মাধ্যমে কিছু সমস্যা আছে $('(html code goes here)') , উদাহরণস্বরূপ অফিসিয়াল jQuery ওয়েবসাইটটি তাদের রিলিজ নোটগুলির মধ্যে নিম্নলিখিতগুলির উল্লেখ করে:

এইচটিএমএল প্যারিসিং হ্রাস করা: আপনি আবার $ (htmlString) ট্যাগগুলির আগে ট্যাগগুলির শীর্ষস্থানীয় স্পেস বা নতুন লাইন পেতে পারেন। আমরা এখনও দৃঢ়ভাবে পরামর্শ দিচ্ছি যে আপনি বহিরাগত উত্স থেকে প্রাপ্ত HTML টি বিশ্লেষণ করার সময় $ .parseHTML () ব্যবহার করেন এবং ভবিষ্যতে এইচটিএমএল প্যারিসিংয়ে আরও পরিবর্তন করতে পারেন।

প্রকৃত প্রশ্নের সাথে সম্পর্কিত, উদাহরণ প্রদান করা যেতে পারে:

this.$OuterDiv = $($.parseHTML('<div></div>'))
    .hide()
    .append($($.parseHTML('<table></table>'))
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

যা দুর্ভাগ্যবশত $() ব্যবহার করার চেয়ে কম সুবিধাজনক, তবে এটি আপনাকে আরও নিয়ন্ত্রণ দেয়, উদাহরণস্বরূপ আপনি স্ক্রিপ্ট ট্যাগগুলি বাদ দেওয়ার জন্য চয়ন করতে পারেন (এটি onclick স্ক্রিপ্টগুলিকে onclick লাইক মত ছেড়ে যাবে):

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

এছাড়াও, নতুন বাস্তবতা থেকে সামঞ্জস্যযুক্ত শীর্ষ উত্তর থেকে একটি বেঞ্চমার্ক এখানে:

JSbin লিঙ্ক

jQuery 1.9.1

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

মনে হচ্ছে parseHTML createElement $() চেয়েও বেশি createElement করতে অনেক কাছাকাছি, তবে ফলাফলগুলি একটি নতুন jQuery অবজেক্টে মোড়ানো হওয়ার পরে সর্বস্বান্ত হয়ে গেছে।


হালনাগাদ

JQuery এর সর্বশেষ সংস্করণগুলির হিসাবে, নিম্নোক্ত পদ্ধতিটি দ্বিতীয় বস্তুর মধ্যে প্রেরিত বৈশিষ্ট্যগুলিকে বরাদ্দ করে না

পূর্ববর্তী উত্তর

আমি jQuery সাথে একসঙ্গে document.createElement('div') ব্যবহার করে অনুভব করছি:

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

var div = $('<div/>');
div.append('Hello World!');

JQuery এ একটি DIV উপাদান তৈরি করার সংক্ষিপ্ততম / সহজতম উপায়।





dhtml