Learning jQuery - Chapter VII: Elements scrolling html (Tree Traversal (.

Posted in 26 AD, Persian date Esfand 1388 by Mohsen Mnvryan

Chapter VII:

: ( Tree Traversal ) : Navigation elements html: (Tree Traversal):

از تعدادی تگهای تو در تو تشکیل شده است . As you know, each page of html tags nested number is composed. Each child tags tags tags inside the outer and the father is her. It also tags the next level in a neighborhood also called tags.

To access the page elements in addition to their common characteristics can be selected from the definitions related to the navigation tree, they can be used.

For example, in the face code:

<html>

<head>

<title> test page </ title>

</ Head>

<body>

<div>

<ul>

<li> one </ li>

<li> two </ li>

<li> three </ li>

</ Ul>

</ Div>

</ Body>

</ Html>

In the example above:

· هستند Child html tags all tags are

· پدر تگ title و در نتیجه تگ title فرزند تگ head می باشد . Title tags head tags dad and thus head tags title tag is a child.

· همسایه یا هم نژاد (برادر یا خواهر ) یکدیگر هستند و همگی فرزند ul هستند و همچنین در سطح بالاتر فرزند تگ div و body و html . Tags li neighbor or sibling (brother or sister) are together and all children are ul and div tags in the child level and body and html.

· نیز فرزند div و body و html است . The child div and ul tags and the body is html.

· همسایه تگ head و فرزند html است . Head and body tags neighbor child tag is html.

Considering the above definitions. برای پیمایش درختی عناصر html ایجاد شده که در این فصل آنها را شرح خواهیم داد : JQuery functions for the navigation tree in html elements created in this chapter we will explain them:

$ (Selector). Children ([selector]):

$ (Selector). Parent ([selector]);

فرزندهای عنصر انتخابی را بر میگرداند . Function children () returns the element Frzndhay. For example:

$ ('Ul'). Children (). Css ('background', 'Red');

(فرزند های ul یا همان تگهای li ) قرمز شود . The above command makes the background color of all the tags within tag ul (ul child of the same tags or li) is red.

استفاده نمایید تا فرزند های خاصی از تگها را انتخاب نمایید . You can also use the argument selector to children of certain select tags.

Note the following example:

<div>

<span> Hello </ span>

<p class="selected"> Hello Again </ p>

<div class="selected"> And Again </ div>

<p> And One Last Time </ p>

</ Div>

If this example we run the following code:

$ ("Div"). Children (". Selected"). Css ("color", "blue");

انتخاب میکند که دارای کلاس selected باشد بنابر این نتیجه دستور فوق : This example will select Frzndhayy div tags with class is selected according to the results above command:

Hello
Hello Again

And Again

At One Last Time

پدر عناصر انتخابی را بر میگرداند (اولین پدر ) . Function parent () returns the selected elements of the father (the first father).

$ ('Li'). Parent (). AddClass ('listExpander');

در صفحه کلاس listExpander را اعمال میکند . In this example, the first parent li elements in the page listExpander class exercises.

این تابع نیز میتواند مقدار selector را قبول کند : As a function children () This function can also accept the value selector provides:

<div class="one">

<div class="two">

<span class="text"> click </ span>

</ Div>

<div>

In the example above:

$ ('Span'). Parent ():

با کلاس two اشاره میکند . A div with two classes it refers. If

$ ('Span'). Parent ('. One'):

با کلاس one اشاره میکند . A div with a class refers to one.

فقط یک عنصر را به عنوان پدر بر میگرداند . Note: Please carefully the function parent () only one element as the father returns. استفاده کنید : If you want to return all Valdhay element can function parents () use:

$ ('Span'). Parents ():

(یعنی هم div با کلاس two و هم div با کلاس one ) را بر میگرداند . In this example all of the parent span (ie the div div class two and class one) on returns.

: Function: parentsUntil ():

$ (Selector). ParentsUntil ([parent_selector]);

به معنی “تا اینکه ” می باشد و همانطور که از معنی این عبارت مشخص است تابع فوق تمامی والدهای عنصر selector را تا رسیدن به عنصر parent_selector بر میگرداند . (Until the word means "until" is and as is clear from the meaning of these words all of the above function Valdhay selector element to achieve returns parent_selector element.

For example, if the first example of this chapter to write the following code:

$ ('Li'). ParentsUntil ('body'). AddClass ('test');

تا تگ body (تگهای ul و div ) کلاس test را اضافه میکند . Parent to all li tags to tag body (ul tags and div) adds class to test.

و pv() : Function next () and pv ():

$ (Selector). Next ([selector]);

$ (Selector). Pv ([selector]);

) و عنصر قبلی ( pv ) استفاده میشوند : These two functions also as the name suggests to get the next element (next) and the previous element (pv) are used:

<ul>

<li> list item 1 </ li>

<li> list item 2 </ li>

<li class="third-item"> list item 3 </ li>

<li> list item 4 </ li>

<li class="test"> list item 5 </ li>

</ Ul>

In the above example by running the code:

$ ('Li.third-item'). Next (). Css ('color', 'red');

به رنگ قرمز نمایش داده شود . The above code causes the list item 4 words appear in red.

$ ('Li.third-item'). Next (). Css ('color', 'blue');

را به رنگ آبی نمایش میدهد . This code list item 2 the words in blue displays.

$ ('Li.third-item'). Next ('. Test'). Css ('background-color', 'blue');

را با پیش زمینه آبی نمایش میدهد . The code words list item 5 with the blue background shows.

$ ('Li.third-item'). Next ('. Test'). Pv (). Css ('background-color', 'Red');

را با پیش زمینه قرمز نمایش میدهد . The code words, list item 4 with red background shows.

ایجاد شده اند : Note: the following functions to navigate better in the next and previous elements have been created jquery:

$ (Selector). NextAll ([nextselector])

$ (Selector). PvAll ([pvselector])

و قبل pv از selector را بر میگرداند (مطابق با nextselector یا pvselector ) All elements of the pv after next and before the selector returns (according nextselector or pvselector)

$ (Selector). NextUntil ([nextselector])

$ (Selector). PvUntil ([pvselector])

و قبل pv از selector را تا عنصر nextselector و pvselector بر میگرداند . After all the elements before pv next to the selector element pvselector nextselector and returns.

: Function siblings ():

$ (Selector). Siblings ([sibling_selector])

را بر میگرداند . This function also returns the selector races. مشخص شده باشد مقادیری که با این عناصر مطابق باشند بر می گرداند . And if that is sibling_selector marked values are in accordance with these elements returns.

<! DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"> </ script>

</ Head>

<body>

<ul>

<li> one </ li>

<li class="test"> two </ li>

<li class="test2"> three </ li>

</ Ul>

<script>

$ ("Li.test"). Siblings (). Css ("background", "yellow");

</ Script>

</ Body>

</ Html>

با کلاس test ، رنگ پیش زمینه زرد به سایر li ها اضافه میشود . In the above example except for its li-class test, background color of yellow is added to other li.

هایی انتخاب میشوند که دارای کلاس test۲ باشند : If the above code change the following are selected only those that have li test2 classes are:

$ ('Li.test'). Siblings ('. Test2'). Css ('background', 'yellow');

: Function find ():

$ (Selector). Find (find_selector)

در فرزندهای selector به دنبال find_selector میگردد و آن عنصر را بر میگرداند . Find pan in Frzndhay selector is looking find_selector and returns that element.

عمل میکند و تنها تفاوت آن این است که تابع children فقط یک سطح فرزند را جستجو میکند . This function resembles the function children () works and the only difference is that only one level of function, children will search the child. پارامتر selector الزامی است (میتوان برای انتخاب همه از عبارت '*' استفاده کرد ) : Also, the function find (selector) selector parameter is required (can select all of the words '*' can be used):

$ (Selector). Find ('*')

Example:

<ul class="level-1">

<li class="item-i"> I </ li>

<li class="item-ii"> II

<ul class="level-2">

<li class="item-a"> A </ li>

<li class="item-b"> B

<ul class="level-3">

<li class="item-1"> 1 </ li>

<li class="item-2"> 2 </ li>

<li class="item-3"> 3 </ li>

</ Ul>

</ Li>

<li class="item-c"> C </ li>

</ Ul>

</ Li>

<li class="item-iii"> III </ li>

</ Ul>

If you write the following code example above:

$ ('Li.item-ii'). Find ('li'). Css ('background-color', 'red');

را قرمز میکند . The background color code phrases A, B, 1, 2,3, C is red. تنها بر روی عبارات A,B,C اعمال میشود . But the same operate only on children with function expressions A, B, C applies.

: Function closest ():

$ (Selector). Closest (closest_selector)

عمل میکند . This function, like parents () works. But differences between these two functions are:

· از خود عنصر انتخابی پیمایش را شروع میکند . Pan closest to the element of choice starts scrolling. از اولین والد شروع به پیمایش میکند . If the function of parents is the first parent to start scrolling.

· عملیات پیمایش را تا رسیدن به عنصر انتخابی ( closest_selector ) انجام میدهد در صورتی که در تابع parents ابتدا عملیات تا انتها ( root ) انجام میشود . Operation of the navigation function closest to reaching the selected element (closest_selector) performs the function if the parents first to end the operation (root) is played. ریخته شده و سپس آنهایی که مطابق با شرط (عنصر selector ) می باشد را از بین آنها انتخاب میکند . Then select all elements in a temp variable and then cast in accordance with those conditions (element selector) is selected from among them will. بیشتر است . So quickly run closest subject further.

· میتواند صفر یا یک عنصر بر گرداند در صورتی که تابع parents صفر یا یک یا چند عنصر بر میگرداند . Closest function can be zero or one element if the function returns zero or one or more parents returns element.

In the example above:

$ ('Li.item-a'). Closest ('ul'). Css ('background-color', 'red')

با کلاس level-۲ قرمز شود . Ul background color makes the grade level-2 is red.

Chapter Reference: http://api.jquery.com/category/traversing/tree-traversal





Categories: Education Jquery , Web Design

" Learning jQuery - Chapter VI: Ajax in jQuery (Ayjaks in Jay query) download a few songs and new virgin Hossein Miri (Shirazi country singer) "

Write Reply