JQuery

F.ITM202 Вэб зохиомж

Лекц №14

А.Түвшинбаяр (Доктор, Ph.D)

 jQuery - Get Content and Attributes
jQuery нь HTML элементүүд болон шинж чанаруудыг өөрчлөх, удирдах
хүчирхэг аргуудыг агуулдаг.

jQuery DOM Manipulation

jQuery-ийн нэг чухал хэсэг бол DOM-г удирдах боломж юм.
jQuery нь элементүүд болон шинж чанаруудад хандах, удирдахад хялбар
болгодог DOM-тэй холбоотой олон аргуудтайs.
 Get Content - text(), html(), and val()
DOM хувиргах гурван энгийн аргууд:
vtext() - Сонгосон элементүүдийн текстийн агуулгыг тохируулах буюу
буцаана
vhtml() - Сонгосон элементүүдийн агуулгыг тохируулах буюу буцаана (HTML
тэмдэглэгээг оруулаад)
vval() - Маягтын талбаруудын утгыг тохируулах буюу буцаана

Дараах жишээ нь jQuery text() болон html() аргуудын тусламжтайгаар

контентыг хэрхэн авахыг харуулж байна:
Get Content - text(), html(), and val()
 Get Content - text(), html(), and val()
Дараах жишээ нь jQuery val() аргын тусламжтайгаар оролтын талбарын утгыг
хэрхэн авахыг харуулж байна.
 Get Content - text(), html(), and val()
Шинж чанаруудыг авах - attr()
Аттрибутын утгыг авахын тулд jQuery attr() аргыг ашигладаг.
Дараах жишээ нь холбоос дахь href атрибутын утгыг хэрхэн авахыг харуулж
байна.
 jQuery - Set Content and Attributes
Агуулгыг тохируулах - text(), html() болон val()
Өмнөхтэй ижил гурван аргыг ашиглан контент тохируулах болно:
vtext() - Сонгосон элементүүдийн текстийн агуулгыг тохируулах буюу
буцаана
vhtml() - Сонгосон элементүүдийн агуулгыг тохируулах буюу буцаана (HTML
тэмдэглэгээг оруулаад)
vval() - Маягтын талбаруудын утгыг тохируулах буюу буцаана
Дараах жишээ нь jQuery text(), html() болон val() аргуудын тусламжтайгаар
контентыг хэрхэн тохируулахыг харуулж байна:
jQuery - Set Content and Attributes
jQuery - Set Content and Attributes
 jQuery - Add Elements
jQuery-ийн тусламжтайгаар шинэ элемент/агуулга нэмэхэд хялбар байдаг.

Шинэ HTML контент нэмэх

Бид шинэ контент нэмэхэд ашигладаг jQuery дөрвөн аргыг авч үзэх болно.
vappend() - Сонгосон элементийн төгсгөлд агуулгыг оруулна
vprepend() - Сонгосон элементүүдийн эхэнд агуулгыг оруулна
vafter() - Сонгосон элементийн ард контент оруулна
vbefore() - Сонгосон элементийн өмнө агуулгыг оруулна
 jQuery - Set Content and Attributes
Query append() method
jQuery append() арга нь сонгосон HTML элементүүдийн Төгсгөлд агуулгыг
оруулдаг.
jQuery - Set Content and Attributes
 jQuery - Set Content and Attributes
jQuery prepend() Method
jQuery prepend() арга нь сонгосон HTML элементүүдийн ЭХЛЭЛД агуулгыг
оруулдаг.
jQuery - Set Content and Attributes
 jQuery - Set Content and Attributes
append() болон prepend() ашиглан хэд хэдэн шинэ элемент нэмнэ
Дээрх хоёр жишээн дээр бид сонгосон HTML элементүүдийн эхэнд/төгсгөлд
зөвхөн зарим текст/HTML оруулсан болно.
Гэсэн хэдий ч append() болон prepend() аргууд хоёулаа хязгааргүй тооны шинэ
элементийг параметр болгон авч болно. Шинэ элементүүдийг текст/HTML
(дээрх жишээн дээр хийсэн шиг), jQuery эсвэл JavaScript код болон DOM
элементүүдээр үүсгэж болно.
Дараах жишээн дээр бид хэд хэдэн шинэ элемент үүсгэж байна. Элементүүд
нь текст/HTML, jQuery, JavaScript/DOM ашиглан бүтээгдсэн. Дараа нь бид шинэ
элементүүдийг append() аргын тусламжтайгаар текстэнд хавсаргана (энэ нь
prepend()-д бас ажиллах байсан):
jQuery - Set Content and Attributes
 jQuery - Set Content and Attributes
jQuery after() болон before() аргууд
jQuery after() арга нь сонгосон HTML элементүүдийн ДАРАА контент оруулдаг.
jQuery before() арга нь сонгосон HTML элементүүдийн ӨМНӨ агуулгыг
оруулдаг.
jQuery - Set Content and Attributes
 jQuery - Set Content and Attributes
after() ба and before() хэд хэдэн шинэ элемент нэмнэ.
Мөн after() болон before() аргууд нь хязгааргүй олон тооны шинэ элементийг
параметр болгон авч болно. Шинэ элементүүдийг текст/HTML (дээрх жишээнд
хийсэн шиг), jQuery эсвэл JavaScript код болон DOM элементүүдээр үүсгэж
болно.
Дараах жишээн дээр бид хэд хэдэн шинэ элемент үүсгэж байна. Элементүүд
нь текст/HTML, jQuery, JavaScript/DOM ашиглан бүтээгдсэн. Дараа нь бид
after() аргын тусламжтайгаар текстэнд шинэ элементүүдийг оруулна (энэ нь
before()-д ч бас ажиллах байсан):
jQuery - Set Content and Attributes
jQuery - Set Content and Attributes
 jQuery - Remove Elements
jQuery-ийн тусламжтайгаар одоо байгаа HTML элементүүдийг устгахад хялбар
байдаг.

Элементүүд/Агуулга устгах
Элементүүд болон контентыг устгахын тулд jQuery-н үндсэн хоёр арга байдаг:
v remove() - Сонгосон элементийг (болон түүний хүүхэд элементүүдийг)
устгана.
v empty() - Сонгосон элементээс хүүхэд элементүүдийг устгана
 jQuery - Remove Elements
jQuery remove() арга
jQuery remove() арга нь сонгосон элемент(үүд) болон түүний хүүхэд
элементүүдийг устгадаг.
jQuery - Remove Elements
 jQuery - Remove Elements
jQuery empty() арга
jQuery empty() арга нь сонгосон элемент(үүд)-ийн хүүхэд элементүүдийг
устгадаг.
jQuery - Remove Elements
 jQuery - Remove Elements
Устгагдах элементүүдийг шүүнэ
jQuery remove() арга нь мөн нэг параметрийг хүлээн авдаг бөгөөд энэ нь
устгагдах элементүүдийг шүүх боломжийг олгодог.
Параметр нь jQuery сонгогчийн синтаксуудын аль нэг байж болно.
Дараах жишээ нь class="test" бүхий бүх <p> элементүүдийг устгасан:
jQuery - Remove Elements
 jQuery - Remove Elements
Энэ жишээ нь class="test" болон class="demo" бүхий бүх <p> элементүүдийг
устгасан:
jQuery - Remove Elements
 jQuery - Get and Set CSS Classes
jQuery-ийн тусламжтайгаар элементүүдийн хэв маягийг удирдахад хялбар
байдаг.
jQuery CSS-ийг удирдах
jQuery нь CSS-ийг удирдах хэд хэдэн аргуудтай. Бид дараах аргуудыг авч үзэх
болно.
v addClass() - Сонгосон элементүүдэд нэг буюу хэд хэдэн class нэмнэ
v removeClass() - Сонгосон элементүүдээс нэг буюу хэд хэдэн class
устгана
v toggleClass() - Сонгосон элементүүдээс class нэмэх/хасах хооронд
шилжинэ
v css() - Загварын шинж чанарыг тохируулах буюу буцаана
 jQuery - Get and Set CSS Classes
Stylesheet жишээ
Энэ хуудсан дээрх бүх жишээнүүдэд дараах загварын хуудсыг ашиглана.
jQuery - Get and Set CSS Classes
 jQuery - Get and Set CSS Classes
jQuery addClass() арга
Дараах жишээ нь өөр өөр элементүүдэд class шинж чанаруудыг хэрхэн
нэмэхийг харуулж байна. Мэдээжийн хэрэг class нэмэхдээ хэд хэдэн элемент
сонгож болно:
jQuery - Get and Set CSS Classes
 jQuery - Get and Set CSS Classes
Та мөн addClass() аргын дотор олон class зааж өгч болно:
 jQuery - Get and Set CSS Classes
jQuery removeClass() арга
Дараах жишээ нь тодорхой class шинж чанарыг өөр өөр элементүүдээс хэрхэн
устгахыг харуулж байна:
 jQuery - Get and Set CSS Classes
jQuery toggleClass() арга
Дараах жишээ нь jQuery toggleClass() аргыг хэрхэн ашиглахыг харуулах болно.
Энэ арга нь сонгосон элементүүдээс class нэмэх/хасах хооронд шилжинэ.
 jQuery - css() Method
css() арга нь сонгосон элементүүдийн нэг буюу хэд хэдэн загварын шинж
чанарыг тохируулах буюу буцаана.

CSS шинж чанарыг буцаах

Тодорхой CSS шинж чанарын утгыг буцаахын тулд дараах синтаксийг
ашиглана.
css("propertyname");
 jQuery - css() Method
Дараах жишээ нь FIRST тохирсон элементийн дэвсгэр өнгөний утгыг буцаана:
$("p").css("background-color");
 jQuery - css() Method
Олон CSS шинж чанарыг тохируулах
Олон CSS шинж чанарыг тохируулахын тулд дараах синтаксийг ашиглана.
css({"propertyname":"value","propertyname":"value",...});
Дараах жишээнд тохирох БҮХ элементүүдийн дэвсгэр өнгө, үсгийн хэмжээг
тохируулах болно.

$("p").css({"background-color": "yellow", "font-size": "200%"});

jQuery - css() Method
 jQuery - Dimensions
jQuery-ийн тусламжтайгаар элементийн хэмжээсүүд болон хөтчийн цонхтой
ажиллахад хялбар байдаг.
jQuery хэмжээсийн аргууд
jQuery нь хэмжээстэй ажиллах хэд хэдэн чухал аргуудтай:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
 jQuery - Dimensions
jQuery хэмжээсийн аргууд
jQuery нь хэмжээстэй ажиллах хэд хэдэн чухал аргуудтай:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
 jQuery - Dimensions
jQuery width() ба height() аргууд
width() арга нь элементийн өргөнийг тохируулах буюу буцаана (padding, border,
margin).
height() арга нь элементийн өндрийг тохируулах буюу буцаана (padding, border,
margin).
Дараах жишээ нь заасан <div> элементийн өргөн ба өндрийг буцаана:

$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery - Dimensions
 jQuery - Dimensions
jQuery innerWidth() ба innerHeight() аргууд
innerWidth() арга нь элементийн өргөнийг буцаана (includes padding).
innerHeight() арга нь элементийн өндрийг буцаана (includes padding).
Дараах жишээ нь заасан <div> элементийн дотоод өргөн/өндөрийг буцаана:
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery - Dimensions
 jQuery - Dimensions
jQuery outerWidth() ба outerHeight() аргууд
outerWidth() арга нь элементийн өргөнийг буцаана (padding, border).
outerHeight() арга нь элементийн өндрийг буцаана (padding, border).
Дараах жишээ нь заасан <div> элементийн гаднах өргөн/өндөрийг буцаана:
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
jQuery - Dimensions
Анхаарал хандуулсан
та бүхэнд баярлалаа
Асуулт?
Цахим шуудан:
tuvshinbayar@must.edu.mn