انتخاب کامپوننت‌ها در DOM با جی کوئری

mgh 
  بازدید : 38
يکشنبه 19 آذر 1402 زمان : 12:50 


1
2
3
4
5

گزینش کامپوننت‌ها در DOM با جی کوئری
زیربنای اکثر نرم‌افزار‌های jQuery گنجایش عبور از پیاده سازی یک ورقه به‌تیتر یک مورد (سبک شی رکورد یا این که DOM) و مقصود قرار دادن اجزای گوناگون در درون HTML میباشد. تعیین یک جزء (یا این که دسته ای از اجزاء) مرحله پیش از اعمال کاری با آن جزء میباشد؛ مانند تغییر و تحول ظواهر آن یا این که نو کردن در حدود خنده رو، انتخابگرهای جی کوئری خصوصیت های DOM را به شیوه‌های متفاوت غرض قرار میدهند. شناخته‌گردیده‌ترین طراحی سایت اختصاصی عبارتند از:

مبتنی بر اسم مؤلفه (برچسب) HTML

بر طبق خصوصیت‌های CSS (شمارش شناسه‌ها و اسم کلاس‌ها)

با جای کلی یک جزء در باطن DOM

گرانبها ماده در مورد‌های ساختاری

با حالت فعلی یک جزء

در اینجا یکسری سبک وجود دارااست:

// Select all HTML paragraph tags in a document

$( “p” );

// Select the element with the ID “myID”

$( “#myID” );

// Select all elements with the CSS class name “myClass”

$( “.myClass” );

// Select all input, textarea, select, and button elements in a form

$( “:input” );

// Select the children of some other element

// (In this case, the entries in an unordered list)

$( “ul > li” );

// Select all anchors with the rel attribute “nofollow”

$( “a[rel=’nofollow’]” );

// Select all checkboxes in a “checked” state

$( “input:checked” )

برای تمرکز بدیهی خیس می توانید به انتخابگرهای jQuery بپیوندید. سبک‌ها:

// HTML paragraph tags with the CSS class “myClass”

$( “p.myClass” );

// HTML paragraphs with the text “Kinsta” anywhere within them

$( “p:contains(‘Kinsta’)” );

// HTML div tags that have at least one paragraph tag as a descendent

$( “div:has(p)” );

// The first entry in any unordered list with the CSS class “myList”

$( “ul.myList li:first” );

در دست گرفتن DOM با جی کوئری
از آنجایی که شیوه گزینش قسمت‌های گوناگون در یک کاغذ بسیار غیر قابل انکار گردیده است، میتوانید با به کار گیری از متدولوژی‌های jQuery آن ها را تغییر تحول دهید. همان گونه که پیش از اینً اشاره شد، می توانید به‌طور منظم این تمرین‌ها را برای کامل شدن بدون نقص کدنویسی مقداری ببندید. چندین سبک:

// Select the element with the ID “alert” and add a red background

$( “#alert” ).css( “background-color”, “red” );

// Select the element with the ID “alert” and add the class “urgent” to its markup

$( “#alert” ).addClass( “urgent” );

// Find any paragraph with the class “myName” and make its content “Kinsta”

$( “p.myName” ).text( “Kinsta” );

// Like the statement above, but with support for HTML markup

$( “p.myName” ).html( “Kinsta” );

// Add the attribute/value rel=”nofollow” to every anchor

$( “a” ).attr( “rel”, “nofollow” );

// Hide the element with the ID “myDiv” (but keep it in the DOM)

$( “#myDiv” ).hide();

// Make the element hidden above visible again

$( “#myDiv” ).show();

// Remove from the DOM everything INSIDE the element with the ID “myDiv”

$( “#myDiv” ).empty();

// Remove from the DOM the entire element with the ID “myDiv”

$( “#myDiv”