تغییر محتوا در جی کوئری بخش اول

در دو بخش قبل ، درباره تولید و یا ایجاد محتوا (creating) و درج محتوا (inserting) بطور مفصل صحبت کردیم . در این بخش می خواهیم تغییر محتوا در جی کوئری (altering) را بهمراه مثال های کاربردی بررسی کنیم .

برای شروع کار ، فایلی بنام altering.html در فولدر jq_ch_3 بسازید و مانند قبل ، کتابخانه jquery را به head این فایل اضافه کنید .

سپس کدهای زیر را به بدنه صفحه (body) بیافزایید :


    

Altering Document Content

In addition to creating and inserting content, the ability to alter the current content of a page is a key scenario in Web development. jQuery has functions tailored to specific situations where content needs to be altered:

  • wrap(): wrap the matched elements with the specified content
  • wrapAll(): wrap content around the matched elements as a group
  • unWrap(): remove the parents from the matched elements
  • empty(): remove all the child elements from the matched elements
  • remove(): removes elements from the page, including any embedded data and event handlers
  • detach(): removes elements from the page, but maintains embedded data and event handlers
  • replaceAll(): replaces the matched elements with the specified content
  • replaceWith(): replaces matched elements with content or the results of a callback function

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

و کدهای زیر را به بخش head صفحه فوق اضافه کنید :


        $("document").ready(function () {
            $("#example p").wrap("
"); $("#example p").wrapAll("
"); $("#example").empty(); });

لطفا دو دستور دوم و سوم را کامنت کنید تا فقط تابع wrap اجرا شود .

تابع wrap همانطور که از نامش پیداست ، وظیفه اش بسته بندی و در بر گرفتن المان سلکتور با محتوای موردنظر است . بعنوان مثال در دستور زیر ، در اطراف هر پاراگراف در #example ، یک div با رنگ متن قرمز قرار داده می شود :


     $("#example p").wrap("
");

خروجی زیر را خواهیم داشت:

ویرایش محتوای صفحات وب توسط جی کوئری

حال اگر روی صفحه view page source را بزنیم ، مشاهده می کنیم که در اطراف هر تگ p یک div با مشخصات فوق تعریف شده است :

altering-content

در مقاله بعد، توابع wrapAll و remove و detach صحبت خواهیم کرد…


تاریخ انتشار : ۱۹ دی ۱۳۹۵



دیدگاه ها :