آموزش طراحی سایت

آموزش طراحی سایت از صفر تا 100

آموزش طراحی سایت

آموزش طراحی سایت از صفر تا 100

سربرگ HTML

سربرگ HTML‏‏

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag
< html>
< head>
    Document header related tags
< head>
< body>
    Document body related tags
< body>
< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!<p>

</body>

</html>

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.

در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

نمونه دو

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!<p>

</body>

</html>

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد

نمونه سه

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<a href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

</body>

</html>

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

نمونه چهار

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!<p>

</body>

</html>

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

نمونه پنج

<!DOCTYPE html>

<head>

<title>HTML style Tag Example</title>

<style>

.myclass {

background-color: #aaa;

padding: 10px;

}

</style>

</head>

<body>

<p class="myclass">Hello, World!<p>

</body>

</html>

توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.

نمونه شش

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

function Hello() {

alert("Hello, World");

}

</script>

</head>

<body>

</body>

</html>

دوره آموزش طراحی سایت آموزش طراحی سایت آموزش طراحی وب آموزش طراحی سایت با html فیلم آموزش Jquery

افشین سه‌شنبه 15 تیر 1400 ساعت 11:38

0 نظر

آموزش طراحی سایت-JQuery

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

جی کوئری Jquery چیست؟

برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.

آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.

آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.

داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

آموزش استفاده از jQuery در صفحات وب

پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

jQuery test

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت دوره آموزش طراحی سایت فیلم آموزش Jquery آموزش Jquery آموزش طراحی وب آموزش طراحی سایت تحلیل داده

افشین جمعه 4 مهر 1399 ساعت 11:37

0 نظر

آموزش طراحی سایت-افزونه ها در JQuery

با آموزش جدید Jquery از دوره آموزش طراحی سایت همراه ما باشید.

آموزش افزونه sliderbars.js در JQuery

اسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است. Slidebars 2 پر از ویژگی های جذاب میباشد. تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد.

اسلایدهای بالا و پایین.

آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.

سبک انیمیشن شیفت جدید.
مدت زمان بهبود انیمیشن.
سبک های چاپ
سبک وزن تنها 1.69kb gzipped

جهت استفاده از این افزونه لازم است ، ابتدا فایلهای cssو js لازم را در پروژه اضافه میکنیم.

< link href="css/slidebars.css" rel="stylesheet" >

< script src="js/jquery.js" >< /script >

< script src="js/slidebars.js" >< /script >

در بخش body صفحه Html ، صفحه به دو بخش محتوای اصلی و منو تقسیم میکنیم و محتوا دلخواه در آنها قرار میدهیم

< div canvas="container" >

< h1 >welcome to my website< /h1 >

< p > introduction of slidebars.js< /p >

< p >

< button class="js-open-left-slidebar" >open left< /button >

< button class="js-close-left-slidebar" >CLOSE left< /button >

< button class="js-toggle-left-slidebar" >toggle left< /button >

< /p >

< /div >

< div off-canvas="slidebar-1 left shift" >

< p >menu left< /p >

< /div >

جهت و مدل باز و بسته شدن منو ، با استفاده از پارامتر off-canvas مشخص میشود برای فراخوانی افزونه روی این بخش ، قطعه کد جیکوئری زیر را مینویسیم

$ (document).ready(function(){

var controller = new slidebars();

controller.init();

بعد از ایجاد یک نمونه جدید از شی ، برای رویداد کلیک روی دکمه ی منو ، متد باز کردن منو را اجرا میکنیم.

$ ('.js-open-left-slidebar').on('click',function (event) {

event.stopPropagation();

controller.open('slidebar-1');

})

با کلیک روی دکمه با کلاس مشخص ، متد بستن منو را فراخوانی میکنیم.

$('.js-close-left-slidebar').on('click',function (event) {

event.stopPropagation();

controller.close('slidebar-1');

})

متد toggle ، دو متد close و open را با یکدیگر اجرا میکند

$('.js-toggle-left-slidebar').on('click',function (event) {

event.stopPropagation();

controller.toggle('slidebar-1');

})

//event

رویدادها:

رویدادهای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal میباشد. مدل رفتاری منو در زمان باز و بسته شدن را نشان میدهد. رویداد باز و بسته شدن منو نیز از رویدادهای این افزونه میباشد.

$ ( controller.events ).on( 'init', function () {

console.log( 'Init event' );

} );

$ (controller.events).on('css',function () {

console.log('css')

})

$ (controller.events).on('exit',function () {

console.log('exit')

})

$ (controller.events).on('opening',function (event,id) {

console.log('opening'+id);

})

$ (controller.events).on('opened',function (event,id) {

console.log('opened'+id);

})

$ (controller.events).on('closing',function (event,id) {

console.log('closing'+id);

})

$ (controller.events).on('closed',function (event,id) {

console.log('closed'+id);

})

آموزش طراحی سایت : آموزش کار با افزونه Alertify

پلاگین alertify ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد.

آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید

این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.

در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیم

نمایش پیام و یا هشدار:

if(!alertify.myAlert){

//define a new dialog

alertify.dialog('myAlert',function(){

return{

main:function(message){

this.message = message;

setup:function(){

return {

buttons:[{text: "cool!", key:27/*Esc*/}],

focus: { element:0 }

};

prepare:function(){

this.setContent(this.message);

}

}});

}

//launch it.

alertify.myAlert("Browser dialogs made easy!");

آموزش راه اندازی پلاگین alertify

.alert("This is an alert dialog.", function(){

alertify.message('OK');

});

دریافت تاییدیه از کاربر

alertify.confirm("This is a confirm dialog.",

function(){

alertify.success('Ok');

function(){

alertify.error('Cancel');

});

Run Example Documentation

دریافت ورودی از کاربر

alertify.prompt("This is a prompt dialog.", "Default value",

function(evt, value ){

alertify.success('Ok: ' + value);

function(){

alertify.error('Cancel');

})

نمایش پیام موفقیت آمیز

// success notification

// Shorthand for:

// alertify.notify( message, 'success', [wait, callback]);

alertify.success('Success message');

نمایش پیام خطا

// error notification

// Shorthand for:

// alertify.notify( message, 'error', [wait, callback]);

alertify.error('Error message');

نمایش هشدار

// alertify.notify( message, 'warning', [wait, callback]);

alertify.warning('Warning message');

Run Example Documentation

نمایش هشدار به کاربر

// default notification

// Shorthand for:

// alertify.notify( message, [type, wait, callback]);

alertify.message('Normal message');

Run Example Documentation

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت آموزش JQuery دوره آموزش طراحی سایت دوره طراحی سایت آموزش طراحی وب فیلم آموزش jquery آموزش جی کوئری به زبان ساده

افشین چهارشنبه 2 مهر 1399 ساعت 15:10

0 نظر

آموزش طراحی سایت-آموزش جی کوئری

سلام با دوره آموزش طراحی سایت در خدمت شما دوستان هستم

در قسمت قبل با jQuery جی کوئری آشنا شدید و استفاده از jQuery در صفحات وب را یاد گرفتید در ضمن چند مثال هم زدیم و رخداد Ready در Jquery را یا دادیم.حال ادامه دوره :

آموزش فراخوانی متدها به صورت زنجیر وار در Jquery:

زنجیره سازی متدها یا فراخوانی متدها به صورت زنجیر وار (Method chaining):

یکی دیگر از خصوصیت های خارق العاده jQuery، این است که بیشتر متدهای آن یک شی jQuery برمی گردانند. شی بازگشتی خود در فراخوانی متد دیگر بکار شما می آید. این قابلیت به شما اجازه می دهد دستورات را مانند زنجیر به هم متصل کنید که در نهایت زمینه را مهیا می کند تا چندین متد را در بر روی مجموعه یکسان از المان ها اجرا نمایید. همچنین از آنجایی که مرورگر دیگر مجبور نیست همان المان ها را چندین بار پیدا کند، در زمان صرفه جویی می شود.

آموزش طراحی سایت

مثال:

<div id="divTest1" style="color: blue;">Hello, world!</div>

$("#divTest1").text("Hello, world!").css("color", "blue");

</script>

در این مثال، یک شی جدید jQuery نمونه سازی می کنیم و المانی که شناسه ی آن divTest1 می باشد را با کاراکتر $ انتخاب می نماییم. این علامت یک میانبر بوده و جایگزینی برای کلاس jQuery می باشد. در نتیجه یک شی jQuery دریافت می کنیم که به ما این امکان را می دهد تا المان انتخابی را مطابق نیاز ویرایش کنیم. ما از آن شی برای فراخوانی متدtext() استفاده می کنیم. این متد متن المان انتخابی را تنظیم می کند. متد ذکر شده بار دیگر شی jQuery را بازمی گرداند و به ما اجازه می دهد متد یا عملیات دیگری (متد css()) را بر روی مقدار برگشتی، اجرا کنیم. می توانیم بسته به نیاز خود توابع دیگری را به انتهای تابع دیگر متصل کرده و فراخوانی کنیم، اما در کل باید از طولانی کردن بیش از حد کد خودداری نمود. خوشبختانه، جاوا اسکریپت در خصوص دستور نگارشی (syntax) خیلی سخت گیر نیست، بنابراین شما می توانید آن را مطابق میل فرمت دهی کنید. به عنوان مثال، می توان دستور ذکر شده در بالا را به صورت زیر نیز نوشت:

مثال 2:

<div id="divTest2" class="bold" style="color: blue;">Hello, world!</div>

$("#divTest2").text("Hello, world!")

.removeClass("blue")

.addClass("bold")

.css("color", "blue");

</script>

جاوا اسکریپت خود فضای های بی مورد در کد را در زمان تفسیر دور انداخته و آن را به عنوان یک خط طولانی کد با تعداد زیادی فراخوانی تابع (method call) اجرا می کند (کدی که تعداد زیادی تابع در آن صدا زده شده اجرا می کند). توجه داشته باشید که برخی از متدهای به عنوان نتیجه، شی برنمی گردانند. این درحالی است که برخی دیگر از متدها بسته به پارامترهای ارسالی به آن، یا شی برمی گرداند و یا هیچ شی ای برنمی گرداند. به عنوان نمونه، می توان به متد text() اشاره کرد. در صورت عدم ارسال آرگومان به آن، متن جاری المان انتخابی بجای شی بازگردانده می شود، اما اگر فقط یک پارامتر به آن پاس دهید، متن شی jQuery تنظیم شده و یک شی جدید jQuery بازگردانده می شود.

آموزش طراحی سایت

معرفی انتخابگرهای jQuery:

یکی از عملیات رایج که برای انجام آن از جاوا اسکریپت استفاده می شود، خواندن و ویرایش محتویات صفحه می باشد. برای این منظور، ابتدا بایستی المانی که قصد دستکاری آن را دارید پیدا کنید. در اینجا است که انتخابگر (selector) jQuery به کمک شما می آید. با کد خالص جاوا اسکریپت، پیدا کردن المان ها و تغییر آن ها بسیار دشوار می باشد. مگر اینکه قصد یافتن تنها یک المان را داشته باشید که دارای شناسه ی منحصربفرد باشد. jQuery به شما این امکان را می دهد تا المان ها را بر اساس شناسه، کلاس ها، نوع (type)، مقدار attribute ها و غیره گزینش نموده و بازیابی کنید. این روش در واقع مبتنی بر selector های jQuery می باشد. از آنجایی انتخاب المان ها با jQuery یک فعل بسیار رایج است، constructor در اشکال و فرم های مختلف به کار می آید، بدین صورت که سازنده با پذیرفتن یک selector query به عنوان آرگومان، با کم ترین میزان کد، المان مد نظر را یافته و بیشترین کارایی را ارائه می دهد. شما می توانید با نوشتن دستورjQuery() و یا درج میانبر و جایگزین آن $()، یک شی jQuery نمونه سازی نمایید. بنابراین، انتخاب یک مجموعه المان به آسانی نمونه ی زیر می باشد:

$(<query here="">) </query>

با شی بازگشتی، می توانید اقدام به استفاده و ویرایش المان هایی که در کوئری انتخاب کرده بودید، نمایید.

آموزش انتخاب المان ها بر اساس شناسه و کلاس در Jquery:

انتخابگر #id:

یکی از پرکاربردترین انواع selector، انتخابگر #id (گزینش المان ها بر اساس شناسه) می باشد، همان طور که در مثال "Hello, world" نظاره گر آن بودیم. در مثال نام برده، از خصیصه ی ID یک تگ HTML برای یافتن و انتخاب یک المان منحصربفرد استفاده کردیم. جهت مکان یابی یک المان با شناسه ی مشخص، یک کاراکتر هش و به دنبال آن ID المان مورد نظر را درج نمایید:

$("#divTest")

مثال:

$(function () {

$("#divTest").text("Test");

});

</script>

اگرچه تنها یک المان در صفحه وجود دارد که با کوئری ذکر شده در این مثال منطبق می باشد، باید توجه داشته باشید که نتیجه ی برگشتی یک لیست است. بدین معنی که ممکن است نتیجه حاوی چندین المان باشد، البته در صورتی که کوئری با بیش از یک المان منطبق باشد. یک مثال رایج در این زمینه، منطبق شدن کوئری با تمامی المان هایی است که از یک یا چند کلاس CSS استفاده می کنند.

انتخابگر .class (گزینش المان بر اساس کلاس آن)

المان هایی که دارای کلاس مشخص هستند را می توان با نوشتن کاراکتر نقطه " . " و اسم کلاس با کوئری منطبق نموده و انتخاب کرد و در نهایت به صورت شی برگرداند.

مثال:

<ul>

</ul>

$(function () {

$(".bold").css("font-weight", "bold");

});

</script>

انتخاب المان بر اساس اسم آن (element selector)

همچنین می توان المان ها را بر اساس اسم تگ آن ها انتخاب کرد. به عنوان مثال، می توانید تمامی لینک ها یک صفحه را بدین صورت (با ذکر اسم تگ آن ها) انتخاب کرد:

$("a")

و یا تمامی تگ های div را به شکل زیر انتخاب نمود:

$("div")

در صورت استفاده از یک انتخاب گر چند-المانه (مانند انتخابگر کلاس که در مثال قبلی بکار گرفته شد) و همچنین آگاهی از نوع دقیق المان های مورد انتخاب، توصیه می شود نوع المان را پیش از انتخابگر مشخص نمایید. نه تنها این روش دقیق تر است، بلکه پردازش آن برای jQuery آسان تر صورت پذیرفته که به واکنش هر چه سریعتر سایت کمک می کند. در زیر نسخه ی بازنویسی شده ی مثال قبلی را مشاهده می کنید:

$("span.bold").css("font-weight", "bold");

این مثال تمامی المان های span که اسم کلاس آن ها bold می باشد را bold می کند. البته، این روش را می توان با دیگر selector ها نیز پیاده سازی کرد.

پیدا کردن و انتخاب المان ها بر اساس attribute:

در آموزش قبلی، دیدیم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد( به آموزش انتخاب عناصر وب بر اساس کلاس و شناسه با jquery مراجعه کنید). این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند. اما با کتابخانه ی jQuery، می توان المان ها را بر اساس هر نوع خصیصه (attribute) پیدا و انتخاب کرد. در کتابخانه ی jQuery چندین انتخابگر خصیصه (attribute selector) وجود دارد که در مقاله ی حاضر به شرح برخی از آن ها می پردازیم.

آموزش طراحی سایت

انتخاب المان بر اساس خصیصه ی معین

می توان المان ها را بر اساس attribute یکسان انتخاب کرد. دقت داشته باشید که مثال بعدی ایجاب نمی کند که attribute مقدار معینی داشته باشد یا حتی آن attribute اصلا مقداری داشته باشد. دستور نگارش برای نوشتن و استفاده از این selector به صورت زیر می باشد:

$(function () {

$("[title]").css("text-decoration", "underline");

});

</script>

بنابراین، یک [] درج کرده و داخل آن اسم attribute دلخواه را ذکر می کنید. در نمونه ی بالا، با استفاده از یک انتخاب گر خصیصه (attribute selector)، کلیه ی المان هایی که attribute آن ها title می باشد را گزنیش کرده و سپس با استفاده از تابع .css()به المان های مزبور underline اعمال می کنیم. همان طور که پیشتر گفته شد، این کوئری با تمامی المان هایی که خصیصه ی آن ها title می باشد، صرف نظر از مقدارشان، منطبق می شود. اما گاهی لازم است یک المان را که attribute آن دارای مقدار مشخص است، پیدا کنیم.

انتخاب المان هایی که attribute آن ها دارای مقدار مشخص می باشد

در زیر مثالی را مشاهده می کنید که همه ی المان هایی که خصیصه ی آن ها دارای مقدار مشخص است را پیدا می کند:

$(function () {

$("a[target='_blank']").append("[new window]");

});

</script>

سلکتور Selector صرفا به jQuery اعلان می کند تمامی لینک هایی (المان های a) که دارای خصیصه ی target هستند و مقدار آن ها برابر رشته ی "_blank" می باشد را پیدا کرده و سپس متن "[new window]" را به آن ها پیوست (append) نماید. حال اگر بخواهیم المان هایی که مقدار attribute آن ها برابر با مقدار ذکر شده نباشند، انتخاب کنیم، چه اقدامی را بایستی اتخاذ کنیم؟ در پاسخ به این سوال باید گفت که کافی است انتخاب گر را با استفاده از عملگر " ! " نقیض نمایید:

$("a[target!='_blank']").append(" [same window]");

تنها فرق این نمونه با مثال قبلی در استفاده از عملگر " ! " پیش از علامت = می باشد. نمونه های دیگر: پیدا کردن المان های input که مقدار خصیصه ی name آن ها با رشته ی معین (مثلا 'txt') شروع می شود (با استفاده از عملگر ^=):

$("input[name^='txt']").css("color", "blue");

پیدا کردن المان های input که مقدار خصیصه ی name آن با رشته ی معین (مثلا letter) پایان می یابد (با استفاده از عملگر $=):

$("input[name$='letter']").css("color", "red");

پیدا کردن المان های input که مقدار خصیصه ی name آن ها برابر با رشته ی 'txt' می باشد:

$("input[name*='txt']").css("color", "blue");

آموزش انتخاب المان ها بر اساس رابطه ی پدر و فرزندی:

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

$("div > a")

این selector تمامی لینک هایی که فرزند مستقیم المان div هستند را انتخاب می کند. حال اگر عملگر < را با یک جای خالی (space) جایگزین نمایید، تمامی لینک های داخل المان div که حتی فرزند غیرمستقیم آن محسوب می شوند نیز انتخاب می شوند.

$("div a")

در اینجا مثالی را می بینید که در آن تگ bold که فرزند مستقیم المان div با شناسه ی TestArea1 است، آبی رنگ می شود:

<i>Italic text</i>

<i>Italic text 2</i>

<div>

</div>

$("#divTestArea1 > b").css("color", "blue");

</script>

اگر این مثال را اجرا کنید، می بینید که تنها تگ bold اول آبی رنگ می شود. حال، چنانچه این کد را با روش دوم پیاده سازی کنید، هر دو تگ bold آبی رنگ می گردند. همان طور که در نمونه ی زیر مشاهده می کنید، مثال فوق را با اعمال یک تغییر (جایگزین کردن عملگر < با space) بازنویسی کردیم که در آن هر دو تگ bold انتخاب و آبی رنگ می شوند (نوه یا فرزندان غیرمستقیم المان div نیز دستکاری می شوند):

<i>Italic text</i>

<i>Italic text 2</i>

<div>

</div>

$("#divTestArea1 b").css("color", "blue");

</script>

جی کوئری jQuery با ارائه ی تابعی به نام parent() به شما این اجازه را می دهد تا در صورت لزوم به بالای سلسه مراتب (نمودار درختی وراثت) پیمایش کنید. با این تابع می توان پدر یک عنصر فرزند را یافت.

پایان بخش دوم آموزش جی کوئری jQuery

آموزش طراحی سایت ادامه دارد

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش Jquery فیلم آموزش Jquery آموزش جی کوئری آموزش طراحی وب فیلم آموزش طراحی سایت

افشین پنج‌شنبه 19 دی 1398 ساعت 11:46

0 نظر

آموزش طراحی سایت-آموزش jQuery

سلام در ادامه دوره آموزش طراحی سایت با jQuery جی کوئری آشنا میشوید

جی کوئری jQuery چیست؟

آموزش طراحی سایت
با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید.
تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید.
قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.
پس فهمیدیم که jquery چیست( همچنین برخی افراد معادل فارسی آن یعنی جی کوئری را استفاده می کنند)... در مطالب آموزشی بعدی به بررسی سایر خصوصیات و موارد فنی jquery می پردازیم.

انتخاب یک ویرایشگر مناسب برای jQuery:

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند.
بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.
داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید.

آموزش طراحی سایت

در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد:
تصویر پایین توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

آموزش استفاده از jQuery در صفحات وب:

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" .
نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.
پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-3.4.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

<script type="text/javascript" src="jquery-3.4.1.js">

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

<title>jQuery test</title>

<script type="text/javascript" src="jquery-3.4.1.js">

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود.
می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.4.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

آموزش مثال Hello, world در Jquery:

در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:

<div id="divTest1">Hello, world!</div>

<script type="text/javascript">

    $("#divTest1").text("Hello, world!");

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

<div id="divTest2">Hello, world!</div>

<script type="text/javascript">

    document.getElementById("divTest2") = "Hello, world!"

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.
در مبحث بعدی به تشریح انتخابگرها (selector) خواهیم پرداخت.

آموزش رخداد Ready در Jquery:

همان طور که در درس قبلی ذکر شد، توصیه می شود تا اتمام بارگذاری صفحه و آماده شدن آن صبر کنید و سپس اقدام به کار با آن نمایید. این امر همچنین برای شما این امکان را فراهم می کند تا کد جاوا اسکریپت خود را در بخش head صفحه (یا به طور مستقیم و یا از طریق لینک به یک فایل جاوا اسکریپت خارجی) و قبل از تگ body قرار دهید. در jQuery این کار با قرار دادن کد در رخداد document ready امکان پذیر می باشد. در زیر، مثال درس قبلی را بکار می بریم، اما این بار داخل رخداد ready قرار داده شده است.

<div id="divTest1"></div>

<script type="text/javascript">

    function DocumentReady() {

        $("#divTest1").text("Hello, world!");

    $(document).ready(DocumentReady);

در این مثال یک تابع ایجاد کرده و آن را DocumentReady نام گذاری می کنیم که به مجرد آماده شدن صفحه برای کار با DOM و دستکاری المان های آن، فعال می شود. در خط آخر کد، با استفاده از متد ready()، تابع خود را به رخداد ready تخصیص داده و بدین وسیله به jQuery اطلاع می دهیم که با آماده شدن صفحه می خواهیم که تابع را فراخوانی کند.
می توان با بهره گیری از قابلیت تعریف تابع بی نام (anonymous function) در جاوا اسکریپت، کد فوق را کوتاه تر نیز کرد. منظور این است که بجای اعلان تابع و تخصیص اسم به آن، فقط یک تابع ایجاد می کنیم و بلافاصله ارجاع به تابع ready() را به آن پاس می دهیم. اگر چندان آشنایی با زبان جاوا اسکریپت ندارید، در آن صورت استفاده از این روش کمی پیچیده بنظر می رسد. اما با آشنایی بیشتر خواهید دانست که در این روش، کد نویسی کاهش یافته و فضای کمتری نیز اشغال می شود.

<div id="divTest2"></div>

<script type="text/javascript">

    $(document).ready(function () {

        $("#divTest2").text("Hello, world!");

});

با این وجود، تیم طراحان و توسعه دهندگان این کتابخانه احساس کردند که این کد را کوتاه تر هم می توانند بکنند. از اینرو یک نسخه ی overload از سازنده (constructor) ایجاد کردند که تابع ready را به عنوان پارامتر می پذیرد و کد را با این روش به مراتب کوتاه تر کردند.

<div id="divTest3"></div>

<script type="text/javascript">

    $(function () {

       $("#divTest3").text("Hello, world!");

});

در مثال فوق، تابع بی نام مستقیما به سازنده ارسال می شود که آن را به رخداد ready تخصیص می دهد. اگر این کد را تست کنید، متوجه می شوید که به مجرد بارگذاری صفحه، event مربوطه اجرا می گردد. گاهی این رخداد چنین سریع فعال می شود که اصلا متوجه اجرای آن نمی شوید.
همان طور که قبلا گفته شد، توصیه می شود برای استفاده از jQuery در صفحه وب خود کدهای آن را داخل تابع رخداد ready قرار دهید. در بیشتر مثال های این آموزش همین رویه دنبال خواهد شد، مگر برای کوتاه تر شدن مثال که در تعدادی از نمونه ها این کد را لحاظ نمی کنیم.

آموزش جی کوئری از آموزش طراحی سایت ادامه دارد

آموزش طراحی وب آموزش طراحی سایت آموزش Jquery فیلم آموزش Jquery آموزش جی کوئری آموزش برنامه نویسی

افشین پنج‌شنبه 19 دی 1398 ساعت 11:44

0 نظر

پیوندها

دسته‌ها

آموزش طراحی سایت

جدیدترین یادداشت‌ها

بایگانی

جستجو

سربرگ HTML

سربرگ HTML‏‏

برچسب < title> در HTML

نمونه یک

برچسب < meta> در HTML

نمونه دو

برچسب < base> در HTML

نمونه سه

برچسب < link> در HTML

نمونه چهار

برچسب< style>در HTML

نمونه پنج

برچسب< script>در HTML

نمونه شش

انتخاب یک ویرایشگر مناسب برای jQuery:

آموزش استفاده از jQuery در صفحات وب:

آموزش مثال Hello, world در Jquery:

آموزش رخداد Ready در Jquery: