linkedin facebook linkedin facebook nod32

jQueryning asosiy tushunchasi va qobiliyati

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-04-10

jQueryning asosiy tushunchasi va qobiliyati

  jQuery - bir JavaScript-kutubxona JavaScript, HTML va CSS o'zaro ajratilgan.
Nima jQuery mumkin
1. Har qanday elementni DOM (hujjat ob'ekt model) kiring va faqat davolash emas balki ularni manipulyatsiya qilish.
2. Voqealar bilan ishlash.
3. Boshqa ko'rgazmali ta'sir amalga oshirish oson.
4. AJAX bilan ishlash (sahifa qayta yuklamasdan server bilan muloqot qilish imkonini beradi texnologiyasi  juda foydali).
5. JavaScript foydalanuvchi interfeysi elementlari yaratish uchun Plug-ins katta raqami bor.
U qanday ishlaydi
Birinchidan ishlab chiquvchilarining saytida kutubxona o'zi yuklab uni hal qilish va bizning html-sahifalarda.
Endi  jQuery html-sahifasiga ulanish kerak bo'ladi. U yerda HTML teg tashqi yozuv fayllar ulanish uchun mas'ul bo'lgan <script>, html. Html-sahifa, bu yorlig'i qo'shish (bir xil sahifa script.js  vazifalari oyna bilan bog'liq)
<html>
  <head>
    <title>jQuery</title>
     <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script >
jQuery:
</script>   
  </head>
<style>
Css:
</style>

  <body>
  </body>
</html>

* Fayl nomi e'tibor bering. Bu kutubxona jquery-1.2.6.js foydalanadi, lekin siz bir yangi versiyasini yuklab olishingiz mumkin, lekin jihozlar, biroq sizda farq qilishi mumkin. *
Keling, bu narsa qanday amalga oshirilishi ko'rib chiqaylik. Html-sahifada, biz uch quti (div-ni), va uch tugmalar bo'lishi kerak:
<html>
  <head>
    <title>jQuery</title>
       <script type="text/javascript" src="jquery-1.2.6.js"></script>
      <script >
jQuery:
</script>   
  </head>
<style>
Css:
</style>
  <body>
    <h2> jQuery da effektlar</h2>
    <div id="kv1" >1</div>
    <div id="kv2" >2</div>
    <div id="kv3" >3</div>
    <button  onclick="addEffect1()">Show() Ko`rinishi</button>
    <button  onclick="addEffect2()">SlideDown()Ko`rinishi </button>
    <button  onclick="addEffect3()">Animate() Ko`rinishi </button>
  </body>
</html>
Ko'z chizilgan va CSS bilan bir to'rtburchaklar ko'rinmas qiling. Kod  css:
#kv1, #kv2, #kv3{
    width:80px;
    height:100px;
    float:left;
    background:red;
    margin:5px;
    color:white;
    display:none;
}
Siz tugmani bosganingizda sahifada script da yozish kodi vazifalari haqida qiziqarli qism:
function addEffect1(){
  $("#kv1:hidden").show();
}
function addEffect2(){
  $("#kv2:hidden").slideDown("slow");
}
function addEffect3(){
  $("#kv3:hidden").show().animate( {
                fontSize:"36px"
                } , 3000 );
}
Bu vazifalar nima qilishim?
Funktsiya addEffect1 () ko'rguvchi $ (dollar belgisi) va bu jQuery ekanligini tushunadi va keyin u (" #kv1:hidden ")  hidden (ko'rinmas) yashirin mulkga ega va  id = "kv1"  element topish kerak, deb tushunadi. Keyin .show()-ko'rish  bu element paydo qilish uchun ishlatiladi.
Funktsiya addEffect2 () ko'rguvchi $ (dollar belgisi) va bu jQuery ekanligini tushunadi va keyin u (" #kv2:hidden ")  hidden (ko'rinmas) yashirin mulkga ega va  id = "kv2"  element topish kerak, deb tushunadi.  Keyin .slideDown-ko'radi ("slow")  ("sekin") top-pastga (slideDown) ko'rsatiladi  bu elementni sekin paydo qilish uchun ishlatiladi.
Funktsiya addEffect3 () ko'rguvchi $ (dollar belgisi) va bu jQuery ekanligini tushunadi va keyin u (" #kv3:hidden ")  hidden (ko'rinmas) yashirin mulkga ega va  id = "kv3"  element topish kerak, deb tushunadi.
Keyin .animate( {fontSize:"36px"} , 3000 shrift hajmi 36 piksel (Shrift: "36px") ga 3 soniya (3000) uchun )  animatsiya  ko'rishda ishlatiladi.
Misolni Index.html sifatida saqlab olib ishlatishingiz mumkin:

<html>
  <head>
    <title>jQuery</title>
     <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script >
function addEffect1(){
  $("#kv1:hidden").show();
}
function addEffect2(){
  $("#kv2:hidden").slideDown("slow");
}
function addEffect3(){
  $("#kv3:hidden").show().animate( {
                fontSize:"36px"
                } , 3000 );
}
</script>   
  </head>
<style>
#kv1, #kv2, #kv3{
    width:80px;
    height:100px;
    float:left;
    background:red;
    margin:5px;
    color:white;
    display:none;
}
</style>

   <body>
    <h2> jQuery da effektlar</h2>
    <div id="kv1" >1</div>
    <div id="kv2" >2</div>
    <div id="kv3" >3</div>
    <button  onclick="addEffect1()">Show() Ko`rinishi</button>
    <button  onclick="addEffect2()">SlideDown()Ko`rinishi </button>
    <button  onclick="addEffect3()">Animate() Ko`rinishi </button>

  </body>
</html>

628 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama

testing

masalalar.zn.uz/

Turli xil mavzuda, internet mavzular, faqat masalalar.zn.uz saytda.


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений