‫ﺍﻟﻤﺮﺟﻊ ﺍﻟﻌﺮﺑﻲ ﻟﻤﻜﺘﺒﺔ‬

‫‪jQuery‬‬

‫ﺇﻋﺪﺍﺩ‪ :‬ﺍﳌﻬﻨﺪﺱ ﺇﲰﺎﻋﻴﻞ ﻋﻨﺠﺮﻳﲏ‬

‫ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ‪ismaeel.enjreny@gmail.com :‬‬

‫ﺁﺧﺮ ﺗﻌﺪﻳﻞ ﻋﻠﻰ ﺍﻟﻮﺛﻴﻘﺔ‪ :‬ﺍﳋﻤﻴﺲ‪ 26 ،‬ﺁﺫﺍﺭ‪2009 ،‬‬

‫ﺍﻹﺻﺪﺍﺭ‪1.0 :‬‬
 ‫الفھرس‬
11 ........................................................................................ (jQuery Core) jQuery ‫أساسيات‬
11 ....................................................................................... $(…) ً‫ أو اختصارا‬jQuery ‫التابع‬
11 ............................................................................... jQuery(expression, [context])
12 ........................................................................... jQuery(html, [ownerDocument])
12 ................................................................................................ jQuery(elements)
13 ...................................................................................................... jQyery(callback)
13 ................................................................................. jQuery ‫أمثلة على التوابع األساسية في‬
15 ....................................................................................................... jQuery ‫المحددات في‬
15 .............................................................................................. Basics ‫المحددات األساسية‬
15 ..................................................................................................................... #id
16 ..................................................................................................... element ‫المحدد‬
17 ......................................................................................................... .class ‫المحدد‬
18 ............................................................................................................... * ‫المحدد‬
19 ..................................................................... selector1, selector2, selectorN ‫المحدد‬
20 ..................................................................................Hierarchy ‫محددات التسلسل الھرمي‬
20 ................................................................................... ancestor descendant ‫المحدد‬
22 ............................................................................................. parent > child ‫المحدد‬
23 ................................................................................................. prev + next ‫المحدد‬
24 ............................................................................................. prev ~ siblings ‫المحدد‬
26 ..................................................................................... Basic Filters ‫المرشحات األساسية‬
26 ......................................................................................................... :first ‫المرشح‬
27 .......................................................................................................... :last ‫المرشح‬
27 ............................................................................................ :not(selector) ‫المرشح‬
29 ........................................................................................................ :even ‫المرشح‬
30 ......................................................................................................... :odd ‫المرشح‬
31 ................................................................................................. :eq(index) ‫المرشح‬
31 .................................................................................................. :gt(index) ‫المرشح‬
32 .................................................................................................. :gt(index) ‫المرشح‬
33 ..................................................................................................... :header ‫المرشح‬
34 ................................................................................................. :animated ‫المرشح‬
35 .................................................................................. Content Filters ‫مرشحات المحتوى‬
35 ........................................................................................... :contains(text) ‫المرشح‬
36 ...................................................................................................... :empty ‫المرشح‬

2 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

37 ............................................................................................ :has(selector) ‫المرشح‬
38 ..................................................................................................... :parent ‫المرشح‬
39 ........................................................................ Visibility Filters ‫مرشحات الرؤية أو الظھور‬
39 ..................................................................................................... :hidden ‫المرشح‬
40 ...................................................................................................... :visible ‫المرشح‬
42 .................................................................................. Attribute Filters ‫مرشحات السمات‬
42 ................................................................................................. [attribute] ‫المرشح‬
43 ........................................................................................[attribute=value] ‫المرشح‬
44 ...................................................................................... [attribute!=value] ‫المرشح‬
45 ...................................................................................... [attribute^=value] ‫المرشح‬
45 ...................................................................................... [attribute$=value] ‫المرشح‬
46 ...................................................................................... [attribute*=value] ‫المرشح‬
47 ....................................... [attributeFilter1][attributeFilter2][attributeFilterN] ‫المرشح‬
48 ............................................................................. Child Filters ‫مرشحات العناصر الفرعية‬
48 ........................................................... :nth-child(index/even/odd/equation) ‫المرشح‬
49 ................................................................................................. :first-child ‫المرشح‬
51 .................................................................................................. :last-child ‫المرشح‬
53 ................................................................................................. :only-child ‫المرشح‬
55 ........................................................................................................... Forms ‫النماذج‬
55 ................................................................................................................. :input
56 ...................................................................................................................:text
58 .......................................................................................................... :password
60 ................................................................................................................. :radio
60 ........................................................................................................... :checkbox
60 .............................................................................................................. :submit
61 ............................................................................................................... :image
61 ................................................................................................................. :reset
61 .............................................................................................................. :button
61 .................................................................................................................... :file
61 .............................................................................................................. :hidden
61 ........................................................................................ Form Filters ‫مرشحات النماذج‬
61 ................................................................................................... :enabled ‫المرشح‬
62 ................................................................................................... :disabled ‫المرشح‬
63 ................................................................................................... :checked ‫المرشح‬

3 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

64 ................................................................................................... :selected ‫المرشح‬
66 .................................................................................................................... ‫مالحظة‬
66 ......................................................................................................... Attributes ‫السمات‬
66 ............................................................................................................. attr(name)
67 ...................................................................................................... attr(properties)
69 ....................................................................................................... attr(key, value)
70 ............................................................................................................ attr(key, fn)
71 .................................................................................................. removeAttr(name)
72 ............................................................................................... Class (‫الصفوف )كالسات‬
72 .................................................................................................... addClass(class)
73 .................................................................................................... hasClass(class)
74 .............................................................................................. removeClass(class)
75 ................................................................................................ toggleClass(class)
76 ..................................................................................... toggleClass(class, switch)
77 ...........................................................................................................HTML ‫توابع الـ‬
77 ................................................................................................................ html()
79 ............................................................................................................ html(val)
79 ...................................................................................................... Text ‫التوابع النصية‬
79 ................................................................................................................. text()
80 ............................................................................................................. text(val)
81 ....................................................................................................... Value ‫توابع القيمة‬
81 ................................................................................................................... val()
83 ............................................................................................................... val(val)
84 ............................................................................................................... val(val)
86 ................................................................................................................... ‫توابع العبور‬
86 ............................................................................................................. ‫توابع الترشيح‬
86 ............................................................................................................ eq(index)
87 .................................................................................................... hasClass(class)
89 .......................................................................................................... filter(expr)
90 ............................................................................................................. filter(fn)
92 .............................................................................................................. is(expr)
94 ..................................................................................................... map(callback)
95 ............................................................................................................ not(expr)
96 ................................................................................................. slice(start, [end])

4 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

99 ............................................................................................................... ‫توابع البحث‬
99 ........................................................................................................... add(expr)
100 ................................................................................................. children([expr])
103 ................................................................................................... closest([expr])
104 ......................................................................................................... find(expr)
105 ...................................................................................................... next([expr])
106 .................................................................................................. nextAll([expr])
107 ................................................................................................... offsetParent()
107 ................................................................................................... parent([expr])
108 ...................................................................................................... prev([expr])
110 .................................................................................................. prevAll([expr])
111 .................................................................................................. siblings([expr])
113 .............................................................................. Chaining Functions ‫توابع التسلسلية‬
113 .......................................................................................................... andSelf()
114 ................................................................................................................end()
117 ............................................................... Manipulation Functions ‫توابع التعامل مع المحتوى‬
117 ........................................................................ Changing Contents ‫توابع تغيير المحتوى‬
117 .............................................................................................................. html()
118 .......................................................................................................... html(val)
119 ............................................................................................................... text()
120 ........................................................................................................... text(val)
121 ...................................................... Inserting Inside ‫توابع إدراج المعلومات في داخل العناصر‬
121 ............................................................................................... append(content)
122 ........................................................................................... appendTo(selector)
123 .............................................................................................. prepend(content)
124 .......................................................................................... prependTo(selector)
125 ...................................................... Inserting Outside ‫توابع إدراج المعلومات خارج العناصر‬
125 ................................................................................................... after(content)
126 ................................................................................................ before(content)
127 .......................................................................................... insertAfter(selector)
128 ........................................................................................ insertBefore(selector)
129 ...................................................................... Inserting Around (‫توابع اإلحاطة )التطويق‬
129 ....................................................................................................... wrap(html)
130 .......................................................................................................wrap(elem)

5 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

131 ................................................................................................... wrapAll(html)
132 ................................................................................................... wrapAll(elem)
133 ............................................................................................... wrapInner(html)
134 ............................................................................................... wrapInner(elem)
135 .......................................................................................................... ‫توابع االستبدال‬
135 ........................................................................................ replaceWith(content)
136 ........................................................................................... replaceAll(selector)
137 ...................................................................................... Removing ‫توابع إدالة العناصر‬
137 ............................................................................................................ empty()
138 ................................................................................................. remove([expr])
139 ..................................................................................................Copying ‫توابع النسخ‬
139 ............................................................................................................. clone()
140 ....................................................................................................... clone(bool)
141 ..............................................................................CSS Functions ‫توابع األنماط المتعاقبة‬
141 ......................................................................................................................CSS
141 ......................................................................................................... css(name)
142 .................................................................................................. css(properties)
144 ............................................................................................... css(name, value)
145 ........................................................................... Positioning Functions ‫توابع التموضع‬
145 ............................................................................................................. offset()
146 ......................................................................................................... position()
147 ........................................................................................................ scrollTop()
148 .................................................................................................... scrollTop(val)
149 ........................................................................................................ scrollLeft()
150 .................................................................................................... scrollLeft(val)
151 ....................................................... Height and Width Functions ‫توابع العرض واالرتفاع‬
151 ............................................................................................................ height()
153 ........................................................................................................ height(val)
154 ............................................................................................................. width()
156 ......................................................................................................... width(val)
157 .................................................................................................... innerHeight()
158 ..................................................................................................... innerWidth()
159 .......................................................................................... outerHeight(margin)
160 .......................................................................................... outerWidth(margin)

6 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

161 ......................................................................................Events Functions ‫توابع األحداث‬
161 ......................................................................Page Load Functions ‫توابع تحميل الصفحة‬
161 .......................................................................................................... ready(fn)
162 ........................................................... Event Handling Functions ‫توابع التعامل مع الحدث‬
162 ............................................................................................bind(type, data, fn)
165 .......................................................................................... one(type, [data], fn)
167 ......................................................................................... trigger(event, [data])
170 .............................................................................. triggerHandler(event, [data])
172 ............................................................................................ unbind([type], [fn])
174 ................................................................. Live Events Functions ‫توابع األحداث المباشرة‬
174 ..................................................................................................... live(type, fn)
176 ...................................................................................................... die(type, fn)
178 ................................................... Interaction Helpers Functions ‫توابع التفاعل مع العناصر‬
178 ................................................................................................ hover(over, out)
180 ............................................................................ toggle(fn1, fn2, [fn3], [fn4], …)
181 ........................................................................ Event Helpers Functions ‫توابع األحداث‬
181 ............................................................................................................... blur()
182 ............................................................................................................ blur(fn)
183 ........................................................................................................... change()
183 ........................................................................................................ change(fn)
184 ............................................................................................................... click()
185 ............................................................................................................ click(fn)
186 ........................................................................................................... dbclick()
186 ........................................................................................................ dbclick(fn)
188 .............................................................................................................. error()
188 ........................................................................................................... error(fn)
188 ............................................................................................................. focus()
188 .......................................................................................................... focus(fn)
189 ........................................................................................................ keydown()
190 ..................................................................................................... keydown(fn)
190 ........................................................................................................ keypress()
190 ......................................................................................................keypress(fn)
192 ............................................................................................................ keyup()
193 ......................................................................................................... keyup(fn)

7 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

193 ............................................................................................................ load(fn)
194 ................................................................................................ mousedown(fn)
195 ................................................................................................. mouseenter(fn)
197 ...................................................................................................mouseleav(fn)
199 ................................................................................................ mousemove(fn)
200 ....................................................................................................mouseout(fn)
203 .................................................................................................. mouseover(fn)
203 ..................................................................................................... mouseup(fn)
204 .......................................................................................................... resize(fn)
204 .......................................................................................................... scroll(fn)
206 ............................................................................................................. select()
206 .......................................................................................................... select(fn)
207 ........................................................................................................... submit()
207 ........................................................................................................ submit(fn)
209 ........................................................................................................ unload(fn)
210 ................................................................. Effects Functions ‫توابع التأثيرات الحركية والشكلية‬
210 ................................................................................. Basics Functions ‫التوابع األساسية‬
210 ............................................................................................................. show()
210 ......................................................................................show(speed, [callback])
211 ............................................................................................................... hide()
212 ....................................................................................... hide(speed, [callback])
213 ............................................................................................................ toggle()
214 ................................................................................................... toggle(switch)
215 .................................................................................... toggle(speed, [callback])
217 .................................................................................. Sliding Functions ‫توابع االنزالق‬
217 .............................................................................. slideDown(speed, [callback])
218 .................................................................................. slideUp(speed, [callback])
220 ............................................................................. slideToggle(speed, [callback])
221 ...................................................................................Fading Functions ‫توابع التالشي‬
221 .................................................................................... fadeIn(speed, [callback])
222 .................................................................................. fadeout(speed, [callback])
225 ....................................................................... fadeTo(speed, opacity, [callback])
229 .................................................................................Animate Functions ‫توابع الحركة‬
229 .................................................. animate(params, [duration], [easing], [callback])

8 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

233 .................................................................................. animate(params, options)
235 .................................................................................stop(clearQueue, gotoEnd)
236 ..................................................................................................... jQuery.fx.off
238 ........................................................................ AJAX Functions ‫توابع العمليات الغير متزامنة‬
238 ............................................................................. AJAX Requests ‫الطلبات الغير متزامنة‬
238 .......................................................................................... jQuery.ajax(options)
240 .......................................................................................................... dataType
241 ................................................................................................................ error
241 .............................................................................................................. global
241 ........................................................................................................ ifModified
241 ............................................................................................................... jsonp
242 ......................................................................................................... password
242 ..................................................................................................... processData
242 .................................................................................................... scriptCharset
242 ............................................................................................................ success
242 ............................................................................................................ timeout
242 ................................................................................................................. type
242 ................................................................................................................... url
242 ......................................................................................................... username
243 ...................................................................................................................xhr
244 ................................................................................. load(url, [data], [callback])
246 .............................................................. jQuery.get(url, [data], [callback], [type])
246 ................................................................. jQuery.getJSON(url, [data], [callback])
247 ...........................................................................jQuery.getScript(url, [callback])
248 .............................................................jQuery.post(url, [data], [callback], [type])
249 ........................................................................ Ajax Events ‫أحداث العمليات الغير متزامنة‬
249 ...................................................................................... ajaxComplete(callback)
249 .............................................................................................ajaxError(callback)
250 ............................................................................................. ajaxSend(callback)
250 ............................................................................................. ajaxStart(callback)
250 ............................................................................................. ajaxStop(callback)
251 ......................................................................................... ajaxSuccess(callback)
251 ................................................................................................................. ‫متنوعات‬
251 .................................................................................. jQuery.ajaxSetup(options)

9 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

251 ......................................................................................................... serialize()
254 ................................................................................................... srializeArray()
255 ....................................................................................................................... ‫أدوات‬
255 ............................. Browser and Feature Detection ‫توابع التفاعل مع المتصفح وفحص الميزات‬
255 ................................................................................................. jQuery.support
257 ................................................................................................. jQuery.browser
258 ..................................................................................... jQuery.browser.version
260 .............................................................................................. jQuery.boxModel

10 jQuery ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ‬

 ‫أساسيات ‪(jQuery Core) jQuery‬‬

‫التابع ‪ jQuery‬أو اختصاراً )…(‪$‬‬

‫)]‪jQuery(expression, [context‬‬
‫ﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ ﻣﻦ ﺍﳌﻤﻜﻦ ﺃﻥ ﲢﺘﻮﻱ ﻋﻠﻰ ﳏﺪﺩ ‪ CSS‬ﺣﻴﺚ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻪ ﳌﻄﺎﺑﻘﺔ‬
‫ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ‪.‬‬
‫ﺍﻟﻮﻇﺎﺋﻒ ﺍﻷﺳﺎﺳﻴﺔ ﳌﻜﺘﺒﺔ ‪ jQuery‬ﺗﻌﺘﻤﺪ ﻋﻠﻰ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺣﻴﺚ ﺃﻥ ﻛﻞ ﺷﻲﺀ ﻓﻴﻬﺎ ﻳﻌﺘﻤﺪ ﻋﻠﻰ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ‬
‫ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﻻﺳﺘﺨﺪﺍﻡ ﺍﻷﺳﺎﺳﻲ ﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﻜﻮﻥ ﰲ ﲤﺮﻳﺮ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ ﻗﺪ ﲢﺘﻮﻱ ﻋﻠﻰ ﳏﺪﺩ ‪ CSS‬ﻋﻨﺪﻫﺎ ﻳﻌﻴﺪ ﻫﺬﺍ‬
‫ﺍﻟﺘﺎﺑﻊ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ HTML‬ﺍﻟﱵ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺍﻟﺴﻠﺴﻠﺔ ﺍﻟﻨﺼﻴﺔ ﺍﻟﱵ ﰎ ﲤﺮﻳﺮﻫﺎ‬
‫ﺑﺸﻜﻞ ﺍﻓﺘﺮﺍﺿﻲ ﺇﺫﺍ ﱂ ﻳﺘﻢ ﲢﺪﻳﺪ ﺳﻴﺎﻕ ‪ context‬ﻟﻠﺘﺎﺑﻊ ﻓﺈﻥ ﺍﻟﺘﺎﺑﻊ )(‪ $‬ﻳﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻄﺎﺑﻖ‬
‫ﺷﺮﻭﻁ ﺍﻟﺒﺤﺚ ﺿﻤﻦ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ‪ HTML‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﻮﺛﻴﻘﺔ ﺍﳊﺎﻟﻴﺔ‪.‬‬

‫أمثلة‬
‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺎﺑﻖ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ﺍﻻﺩﺧﺎﻝ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ radio‬ﰲ ﺍﻟﻨﻤﻮﺫﺝ ‪ form‬ﺍﻷﻭﻝ ﺿﻤﻦ ﺍﻟﻮﺛﻴﻘﺔ‬
‫ﺍﳊﺎﻟﻴﺔ‪:‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺎﺑﻖ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺿﻤﻦ ﺑﻴﺎﻧﺎﺕ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XML‬ﻫﻲ ﻋﺒﺎﺭﺓ ﻋﻦ ﺑﻴﺎﻧﺎﺕ ﻧﺎﲡﺔ ﻋﻦ‬
‫ﺍﺳﺘﺪﻋﺎﺀ ﺗﻮﺍﺑﻊ ‪:AJAX‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻊ ﺇﻃﺎﺭ ﺣﻮﻝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﺿﻤﻦ ﺍﻟﻌﻨﺼﺮ ‪:div‬‬

‫‪11‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺣﻴﺚ ﺃﻥ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻫﻲ‪:‬‬

‫)]‪jQuery(html, [ownerDocument‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺒﻨﺎﺀ ﺻﻴﻐﺔ ‪ HTML‬ﻣﺒﺎﺷﺮﺓ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ ﲢﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺸﻜﻠﺔ‬
‫ﻟﻌﻨﺎﺻﺮ ﺍﻟـ ‪ .HTML‬ﺣﻴﺚ ﳝﻜﻦ ﺑﻨﺎﺀ ﻋﻨﺎﺻﺮ ﺑﺴﻴﻄﺔ ﺑﺪﻭﻥ ﺃﻱ ﺣﻮﺍﺹ ﺇﺿﺎﻓﻴﺔ ﻣﺜﻞ ">‪ "<div /‬ﺣﻴﺚ‬
‫ﻳﺴﺘﺨﺪﻡ ﺍﻟﺘﺎﺑﻊ ‪ .document.createElement‬ﺃﻣﺎ ﰲ ﺣﺎﻟﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﻌﻘﺪﺓ ﻓﻴﺘﻢ ﻣﻌﺎﳉﺘﻬﺎ ﺑﺈﺳﻨﺎﺩ ﺍﻟﺴﻠﺴﻠﺔ‬
‫ﺍﻟﻨﺼﻴﺔ ﺇﱃ ﺍﳋﺎﺻﻴﺔ ‪ innerHTML‬ﻟﻌﻨﺼﺮ ‪ .div‬ﻟﺬﻟﻚ ﻻ ﳝﻜﻦ ﺃﻥ ﲢﺘﻮﻱ ﺍﻟﺴﻠﺴﻠﺔ ﺍﻟﻨﺼﻴﺔ ‪ html‬ﻋﻠﻰ ﻋﻨﺎﺻﺮ‬
‫ﻻ ﳝﻜﻦ ﺃﻥ ﺗ‪‬ﻀﻤﻦ ﺿﻤﻦ ﻋﻨﺼﺮ ‪ div‬ﻣﺜﻞ ‪.html, head, body, title‬‬

‫أمثلة‬
‫ﺇﻧﺸﺎﺀ ﻋﻨﺼﺮ ‪ div‬ﻭﲨﻴﻊ ﻋﻨﺎﺻﺮﻩ ﺩﻳﻨﺎﻣﻴﻜﻴﹰﺎ ﻭﺇﳊﺎﻗﻬﺎ ﲟﺤﺘﻮﻯ ﺍﻟﻌﻨﺼﺮ ‪ ,body‬ﻭﻣﺎﻳﺘﻢ ﺗﻘﻨﻴﹰﺎ ﻫﻮ ﺃﻧﻪ ﻳﺘﻢ‬
‫ﺇﻧﺸﺎﺀ ﻋﻨﺼﺮ ‪ div‬ﻭﺇﺳﻨﺎﺩ ﺍﻟﻘﻴﻤﺔ ‪) html‬ﻗﻴﻤﺔ ﺍﻟﺴﻠﺴﻠﺔ ﺍﻟﻨﺼﻴﺔ( ﺇﱃ ﺧﺎﺻﻴﺘﻪ ‪ innerHTML‬ﻭﻫﺬﺍ ﻣﺎﻳﻮﻓﺮ ﻣﺮﻭﻧﺔ‬
‫ﻋﺎﻟﻴﺔ ﻭﺑﻌﺾ ﺍﶈﺪﻭﺩﻳﺔ‪:‬‬

‫)‪jQuery(elements‬‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻌﺎﻣﻞ ﻣﻊ ﻋﻨﺼﺮ ﺃﻭ ﻣﺼﻔﻮﻓﺔ ﻋﻨﺎﺻﺮ ﻛﻤﺎ ﳝﻜﻦ ﲤﺮﻳﺮ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XML‬ﻭﺧﺎﺻﺔ ﻋﻨﺪ‬
‫ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺗﻮﺍﺑﻊ ‪ AJAX‬ﺍﻟﱵ ﺗﻌﻴﺪ ﻧﺘﺎﺋﺞ ﻋﻠﻰ ﺷﻜﻞ ‪.XML‬‬

‫‪12‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫أمثلة‬
‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﲔ ﺍﻟﻠﻮﻥ ﺍﻷﺳﻮﺩ ﳐﻠﻔﻴﺔ ﻟﻠﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺨﻔﻲ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺿﻤﻦ ﳕﻮﺫﺝ ﺇﺩﺧﺎﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ‪:‬‬

‫)‪jQyery(callback‬‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻫﻮ ﺍﺧﺘﺼﺎﺭ ﻟﻠﻌﺒﺎﺭﺓ )(‪ $(document).ready‬ﻭﻳﺴﻤﺢ ﺍﻟﺘﺎﺑﻊ ﺑﺘﻨﻔﻴﺬ ﺗﺎﺑﻊ ﺃﻭ ﺃﻛﺜﺮ ﻋﻨﺪﻣﺎ‬
‫ﻳﺼﺒﺢ ﻣﻦ ﺍﳌﻤﻜﻦ ﺗﻨﻔﻴﺬ ﺗﻌﻠﻴﻤﺎﺕ ‪ JavaScript‬ﰲ ﺍﻟﻮﺛﻴﻘﺔ‪ .‬ﻭﳝﻜﻦ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺃﻛﺜﺮ ﻣﻦ ﻣﺮﺓ ﰲ ﻧﻔﺲ‬
‫ﺍﻟﻮﺛﻴﻘﺔ‪ ,‬ﻭﻛﻤﺜﺎﻝ ﻋﻠﻰ ﺫﻟﻚ‪:‬‬

‫أمثلة على التوابع األساسية في ‪jQuery‬‬

‫ﻛﻮﺩ ﺍﻟـ ‪ HTML‬ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﻮﺍﺑﻊ ﻋﻠﻴﻪ‬

‫ﺃﻣﺎ ﺍﳍﺪﻑ ﻣﻦ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ javaScript‬ﻓﻬﻮ ﻭﺿﻊ ﺇﻃﺎﺭ ﺣﻮﻝ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺫﻭ ﺍﻻﺳﻢ ‪ box‬ﻭﻣﻦ ﰒ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ‬
‫‪ p‬ﺫﻭ ﺍﻻﺳﻢ ‪ ,par‬ﻭﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﻋﻠﻰ ﺍﻟﺮﺍﺑﻂ ‪ a‬ﺳﻴﺘﻢ ﺇﻧﺸﺎﺀ ﻧﺺ ﺩﻳﻨﺎﻣﻴﻜﻲ ﻭﺇﺩﺭﺍﺟﻪ ﺿﻤﻦ ﺍﻟﻌﻨﺼﺮ ‪.div‬‬
‫ﻭﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﺘﺎﻟﻴﺔ ﺗﻨﻔﺬ ﻛﻞ ﻣﺎﻭﺭﺩ ﺃﻋﻼﻩ‪ ,‬ﺣﻴﺚ ﻧﻼﺣﻆ ﻭﺟﻮﺩ ﺗﻌﻠﻴﻖ ﻗﺒﻞ ﻛﻞ ﻧﻮﻉ ﻣﻦ ﺃﻧﻮﺍﻉ ﺗﻮﺍﺑﻊ ‪ ,jQuery‬ﺍﻟﺴﻄﺮ‬
‫ﺍﻟﺘﺎﱄ ﻳﻌﱪ ﻋﻦ ﺗﻨﻔﻴﺬ ﺗﺎﺑﻊ ﻣﻦ ﺍﻟﻨﻮﻉ )‪:jQuery(callback‬‬

‫ﺣﻴﺚ ﻭﻛﻤﺎ ﺫﻛﺮﻧﺎ ﺃﻋﻼﻩ ﺑﺄﻥ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﱵ ﺿﻤﻦ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻫﺎ ﰲ ﺣﺎﻝ ﺃﺻﺒﺢ ﻣﻦ ﺍﳌﻤﻜﻦ ﺗﻨﻔﻴﺬ ﺗﻌﻠﻴﻤﺎﺕ‬
‫‪ DOM‬ﺿﻤﻦ ﺍﻟﻮﺛﻴﻘﺔ‪.‬‬

‫ﺃﻣﺎ ﺍﻟﺴﻄﺮ ﺍﻟﺘﺎﱄ ﻓﻴﻌﱪ ﻋﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ )‪:jQuery(expression‬‬

‫‪13‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺣﻴﺚ ﻳﻌﱪ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﻋﻦ ﻗﻴﻤﺔ ﺍﻟـ ‪ expression‬ﻟﻠﺘﺎﺑﻊ ‪ jQuery‬ﻭﺗﻔﻴﺪ ﺑﺄﻥ ﻛﻞ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ div‬ﺍﳌﻮﺟﻮﺩﺓ‬
‫ﰲ ﺍﻟﻮﺛﻴﻘﺔ ﺳﻴﺘﻢ ﲢﺪﻳﺪﻫﺎ ﺑﺈﻃﺎﺭ ﺃﺳﻮﺩ‪.‬‬

‫ﺃﻣﺎ ﺍﻟﺴﻄﺮ ﺍﻟﺘﺎﱄ ﻓﻴﻌﱪ ﻋﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﻣﻦ ﺍﻟﺸﻜﻞ )‪: jQuery(html‬‬

‫ﺣﻴﺚ ﻳﺘﻢ ﺇﻧﺸﺎﺀ ﻋﻨﺼﺮ ‪ p‬ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻴﻜﻲ ﻭﻣﻦ ﰒ ﻳﺘﻢ ﺇﺩﺭﺍﺟﻪ ﲢﺖ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺫﻭ ﺍﻻﺳﻢ ‪.box‬‬

‫ﻭﺃﺧﲑﹰﺍ ﻓﺈﻥ ﺍﻟﺴﻄﺮ ﺍﻟﺘﺎﱄ ﻳﻌﱪ ﻋﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﻣﻦ ﺍﻟﺸﻜﻞ )‪: jQuery(elements‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺑﺸﻜﻞ ﻛﺎﻣﻞ ﻓﻬﻲ‪:‬‬

‫‪14‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المحددات في ‪jQuery‬‬
‫المحددات األساسية ‪Basics‬‬
‫‪#id‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﻟﻠﺒﺤﺚ ﻋﻦ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻓﻘﻂ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺴﻤﺔ ‪ id‬ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻭﰲ ﺣﺎﻝ ﺃﻥ ﻗﻴﻤﺔ ﺍﻟـ‬
‫‪ id‬ﲢﺘﻮﻱ ﻋﻠﻰ ﳏﺎﺭﻑ ﻏﲑ ﺍﻷﺣﺮﻑ ﻣﺜﻞ ﺍﻟﻨﻘﻄﺔ ﺃﻭ ﺍﻟﺮﻣﺰ [ ﻓﻴﺠﺐ ﻣﻌﺎﳉﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺮﻣﺰ \‪ ,‬ﻭﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ‬
‫ﺍﶈﺪﺩ ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻳﺒﺤﺚ ﻋﻦ ﻋﻨﺼﺮ ﻗﻴﻤﺔ ﺍﻟﺴﻤﺔ ‪ id‬ﻟﻪ ﻫﻲ ]‪ ,myID.entry[1‬ﻭﺍﻟﻔﻘﺮﺓ ﺍﻟﺘﺎﻟﻴﺔ ﲢﺘﻮﻱ ﻋﻠﻰ ﻛﺎﻣﻞ‬
‫ﺍﻟﺸﻴﻔﺮﺓ‪ ,‬ﺣﻴﺚ ﻳﺘﻢ ﺍﻟﺒﺤﺚ ﻋﻦ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﲰﺘﻪ ﻫﻲ ]‪ myID.entry[1‬ﻭﻳﻀﻊ ﻟﻪ ﺇﻃﺎﺭ ﲰﻜﻪ ‪ 3‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ‬
‫ﺃﲪﺮ‪ .‬ﻭﳚﺐ ﺍﻻﻧﺘﺒﺎﻩ ﺇﱃ ﺍﺳﺘﺨﺪﺍﻡ ﺭﻣﺰﻱ \\ ﻟﺘﺠﺎﻭﺯ ﺍﶈﺎﺭﻑ ﺍﳋﺎﺻﺔ ﻭﻫﻲ ﺍﻟﻨﻘﻄﺔ )‪ (.‬ﻭﺍﻟﺮﻣﺰ [ ﻭﺍﻟﺮﻣﺰ ﺍﻵﺧﺮ ]‪:‬‬

‫‪15‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المحدد ‪element‬‬
‫ﻼ ‪ div‬ﺃﻭ ‪ a‬ﻭﻏﲑﻫﺎ ﻣﻦ ﻋﻨﺎﺻﺮ ﺍﻟـ‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﻟﻠﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﳍﺎ ﻧﻔﺲ ﺍﻻﺳﻢ ﻣﺜ ﹰ‬
‫‪ .HTML‬ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﺣﻴﺚ ﻳﺘﻢ ﺍﻟﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺿﻤﻦ ﺍﻟﻮﺛﻴﻘﺔ ﻭﺇﺣﺎﻃﺔ ﻛﻞ ﻋﻨﺼﺮ ‪div‬‬
‫ﺑﺈﻃﺎﺭ ﲰﻜﻪ ‪ 9‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ ﺃﲪﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺼﺪﺭ ﺍﻟﻜﺎﻣﻞ ﻟﻠﺸﻴﻔﺮﺓ ﺍﻟﺴﺎﺑﻘﺔ ﻓﻬﻲ‪:‬‬

‫‪16‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المحدد ‪.class‬‬
‫ﻳﺴﺘﺨﺪﻡ ﺍﶈﺪﺩ ‪ .class‬ﻟﻠﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻳﻄﺒﻖ ﻫﺬﺍ ﺍﶈﺪﺩ ﻣﻦ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ ,HTML‬ﻓﻔﻲ‬
‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻳﻄﺒﻖ ﻋﻠﻴﻬﺎ ﺍﶈﺪﺩ ‪ myClass‬ﻭﻣﻦ ﰒ ﲢﺎﻁ ﺑﺈﻃﺎﺭ ﻋﺮﺿﻪ ‪ 3‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ‬
‫ﺃﲪﺮ‪ ,‬ﻭﰲ ﺣﺎﻝ ﺃﻥ ﺃﺣﺪ ﺍﻟﻌﻨﺎﺻﺮ ﻃﺒﻖ ﻋﻠﻴﻪ ﳎﻤﻮﻋﺔ ﻛﻼﺳﺎﺕ )‪ (CSS Class‬ﻓﻴﺠﺐ ﺃﻥ ﻳﺘﻄﺎﺑﻖ ﺃﺣﺪﻫﺎ ﻋﻠﻰ ﺍﻷﻗﻞ‬
‫ﻣﻊ ﺍﶈﺪﺩ ‪ .class‬ﻟﻴﻈﻬﺮ ﻣﻊ ﺗﺎﺋﺞ ﺍﳌﻄﺎﺑﻘﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪17‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المحدد *‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﰲ ﺍﻟﻮﺛﻴﻘﺔ ﺑﻐﺾ ﺍﻟﻨﻈﺮ ﻋﻦ ﺃﻱ ﻋﻤﻠﻴﺔ ﺃﻭ ﳏﺪﺩ ﺁﺧﺮ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﳛﻴﻂ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ﺍﻟﻮﺛﻴﻘﺔ ﺑﺈﻃﺎﺭ ﻋﺮﺿﻪ ‪ 3‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ ﺃﲪﺮ‪:‬‬

‫ﻭﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻫﻲ‪:‬‬

‫‪18‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المحدد ‪selector1, selector2, selectorN‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﺃﻭ ﺇﻥ ﺻﺢ ﺍﻟﻘﻮﻝ ﳎﻤﻮﻋﺔ ﺍﶈﺪﺩﺍﺕ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺃﺣﺪ‬
‫ﺍﶈﺪﺩﺍﺕ‪ ,‬ﺣﻴﺚ ﻳﺘﻢ ﺍﻟﻔﺼﻞ ﺑﲔ ﻛﻞ ﳏﺪﺩ ﻭﺍﻟﺬﻱ ﻳﻠﻴﻠﻪ ﺑﻔﺎﺻﻠﺔ )‪ ,(,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﳛﺪﺩ ﺍﻟﻌﻨﺎﺻﺮ ‪div, span‬‬
‫ﻭﺍﻟﻌﻨﺼﺮ ‪ p‬ﺍﳌﻄﺒﻖ ﻋﻠﻴﻪ ﺍﻟﻜﻼﺱ ‪ myClass‬ﻭﻳﻀﻊ ﺇﻃﺎﺭ ﻋﺮﺿﻪ ‪ 3‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ ﺃﲪﺮ ﺣﻮﻝ ﻫﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪19‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫محددات التسلسل الھرمي ‪Hierarchy‬‬
‫المحدد ‪ancestor descendant‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺣﻔﺎﺩ )‪ (descendant‬ﻟﻠﻌﻨﺼﺮ ﺍﻷﺏ )‪ ,(ancestor‬ﻓﻔﻲ‬
‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﳌﻮﺟﻮﺩﺓ ﺩﺍﺧﻞ ﺃﻱ ﻋﻨﺼﺮ ‪ form‬ﰲ ﺍﻟﻮﺛﻴﻘﺔ ﻭﻳﺘﻢ ﺇﺣﺎﻃﺔ ﻛﻞ ﻋﻨﺼﺮ‬
‫‪ input‬ﺑﺈﻃﺎﺭ ﻣﻨﻘﻂ ﻋﺮﺿﻪ ‪ 2‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ ﺃﺯﺭﻕ‪ ,‬ﻭﻗﻴﻤﺔ ‪ ancestor‬ﳑﻜﻦ ﺃﻥ ﺗﻜﻮﻥ ﺃﻱ ﳏﺪﺩ ﺻﺤﻴﺢ ﻣﻦ‬
‫ﺍﶈﺪﺩﺍﺕ ﺍﳌﺬﻛﻮﺭﺓ ﺳﺎﺑﻘﹰﺎ ﺃﻭ ﻻﺣﻘﹰﺎ ﺿﻤﻦ ﳏﺪﺩﺍﺕ ‪:jQuery‬‬

‫‪20‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪21‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المحدد ‪parent > child‬‬
‫ﻳﺴﺘﺨﺪﻡ ﺍﶈﺪﺩ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺼﺮ ‪ child‬ﻓﻘﻂ ﺍﻟﺘﺎﺑﻊ ﻟﻠﻌﻨﺼﺮ ‪ parent‬ﻭﳝﻜﻦ ﲢﺪﻳﺪ ﺃﻛﺜﺮ ﻣﻦ ﻣﺴﺘﻮﻯ‬
‫ﻟﻠﻮﺻﻮﻝ ﺇﱃ ﺍﻟﻌﻨﺼﺮ ‪ ,child‬ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﺣﻴﺚ ﻳﺘﻢ ﲢﺪﻳﺪ ﺍﻟﻘﺎﺋﻤﺔ ‪ ul‬ﺍﻟﺜﺎﻧﻴﺔ ﺿﻤﻦ ﺍﻟﻌﻨﺼﺮ ‪ li‬ﻓﻘﻂ ﻭﲢﺎﻁ‬
‫ﺑﺈﻃﺎﺭ ﻋﺮﺿﻪ ‪ 1‬ﺑﻴﻜﺴﻞ ﻭﻟﻮﻧﻪ ﺃﲪﺮ‬

‫ﺃﻣﺎ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﻓﻬﻲ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬

‫ﻭﺗﻜﻮﻥ ﺍﻟﻨﺘﻴﺠﺔ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺇﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻨﺪﺭﺝ ﲢﺖ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﺴﻤﺔ ‪ id‬ﻟﻪ ﻫﻲ ‪ main‬ﺑﺈﻃﺎﺭ ﺃﲪﺮ‬
‫ﻣﻀﺎﻋﻒ ﺑﻐﺾ ﺍﻟﻨﻈﺮ ﻋﻦ ﺍﻟﻌﻨﺼﺮ ﻋﺮﺿﻪ ‪ 4‬ﺑﻴﻜﺴﻞ‪ ,‬ﻃﺒﻌﹰﺎ ﺍﶈﺪﺩ * ﰲ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﻳﺮﻣﺰ ﺇﱃ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻨﺪﺭﺝ ﻣﺒﺎﺷﺮﺓ‬
‫ﲢﺖ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﺴﻤﺔ ‪ id‬ﺗﺴﺎﻭﻱ ‪ main‬ﺃﻱ ﺍﻷﺣﻔﺎﺩ ﰲ ﺍﳌﺴﺘﻮﻯ ﺍﻷﻭﻝ ﻟﻠﻌﻨﺼﺮ‪:‬‬

‫‪22‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المحدد ‪prev + next‬‬

‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﶈﺪﺩﺓ ﺑﺎﻟﻘﻴﻤﺔ ‪ next‬ﻭﺍﻟﱵ ﺗﺄﰐ ﻣﺒﺎﺷﺮﺓ ﺧﻠﻒ ﺍﶈﺪﺩ ‪ prev‬ﰲ‬
‫ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ ,HTML‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﺗﺘﻢ ﻣﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﺗﺄﰐ ﻣﺒﺎﺷﺮﺓ ﺧﻠﻒ ﺍﻟﻌﻨﺼﺮ ‪label‬‬
‫‪23‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫ﻭﻳﺘﻢ ﲢﺪﻳﺪ ﻟﻮﻥ ﺍﳋﻂ ﰲ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ input‬ﺇﱃ ﺍﻷﺯﺭﻕ ﻣﻊ ﺇﻋﻄﺎﺀ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ input‬ﻗﻴﻤﺔ ﺍﻓﺘﺮﺍﺿﻴﺔ ﻫﻲ ‪,‬‬
‫!‪ ,Labeled‬ﻃﺒﻌﹰﺎ ﻧﻼﺣﻆ ﻭﺟﻮﺩ ﻋﻨﺼﺮ ‪ input‬ﱂ ﻳﺘﺄﺛﺮ ﻭﺫﻟﻚ ﻷﻧﻪ ﻏﲑ ﻣﺴﺒﻮﻕ ﺑﻌﻨﺼﺮ ‪:label‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المحدد ‪prev ~ siblings‬‬

‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﶈﺪﺩ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻄﺎﺑﻖ ﺍﶈﺪﺩ ﰲ ‪ siblings‬ﻭﺍﻟﱵ ﺗﻈﻬﺮ ﺑﻌﺪ ﺍﻟﻌﻨﺼﺮ ﺍﳌﻄﺎﺑﻖ‬
‫ﰲ ﺍﶈﺪﺩ ‪ prev‬ﻭﳚﺐ ﺃﻥ ﺗﻜﻮﻥ ﺍﻟﻌﻨﺎﺻﺮ ‪ siblings‬ﺧﺎﺭﺝ ﺍﻟﻌﻨﺼﺮ ﺍﳌﻄﺎﺑﻖ ﺑﺎﶈﺪﺩ ‪ ,prev‬ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪,‬‬
‫ﺣﻴﺚ ﻳﺘﻢ ﲢﺪﻳﺪ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﻟﱵ ﺗﻈﻬﺮ ﺑﻌﺪ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﺴﻤﺔ ‪ id‬ﻫﻲ ‪:prev‬‬

‫‪24‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪25‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشحات األساسية ‪Basic Filters‬‬
‫المرشح ‪:first‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺃﻭﻝ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺍﶈﺪﺩﺍﺕ ﺍﻟﱵ ﺗﺪﻋﻤﻬﺎ‬
‫ﻣﻜﺘﺒﺔ ‪ ,jQuery‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﺃﻭﻝ ﻋﻨﺼﺮ ‪ tr‬ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ‪ tr‬ﺍﻟﱵ ﺗﻈﻬﺮ ﰲ ﺍﻟﻮﺛﻴﻘﺔ ﺍﳊﺎﻟﻴﺔ ﻭﳛﻮﻝ‬
‫ﺍﳋﻂ ﺍﻟﺬﻱ ﻳ‪‬ﻜﺘﺐ ﺩﺍﺧﻞ ﻫﺬﺍ ﺍﻟﺴﻄﺮ ﻣﺎﺋﻞ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪26‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:last‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺁﺧﺮ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺍﶈﺪﺩﺍﺕ ﺍﻟﱵ ﺗﺪﻋﻤﻬﺎ‬
‫ﻣﻜﺘﺒﺔ ‪ ,jQuery‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﺁﺧﺮ ﻋﻨﺼﺮ ‪ tr‬ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ‪ tr‬ﺍﻟﱵ ﺗﻈﻬﺮ ﰲ ﺍﻟﻮﺛﻴﻘﺔ ﺍﳊﺎﻟﻴﺔ ﻭﻳﻠﻮﻥ‬
‫ﺍﳋﻠﻔﻴﺔ ﺑﺎﻟﻠﻮﻥ ﺍﻷﺻﻔﺮ ﻭﻳﺼﺒﺢ ﺍﳋﻂ ﺍﻟﺬﻱ ﻳ‪‬ﻜﺘﺐ ﻓﻴﻪ ﺩﺍﺧﻞ ﺍﻟﺴﻄﺮ ﻏﺎﻣﻖ ‪:bold‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح )‪:not(selector‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﻻﺳﺘﺜﻨﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺻﻴﻐﺔ ‪ selector‬ﻣﻦ ﻧﺘﻴﺠﺔ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﻳﺴﺒﻖ‬
‫ﺍﺳﺘﺨﺪﺍﻡ ﺍﳌﺮﺷﺢ )‪ ,:not(selector‬ﻭﻳﺪﻋﻢ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﺍﶈﺪﺩﺍﺕ ﻣﻦ ﺍﻟﻨﻮﻉ ‪selector1, selectorN‬‬
‫ﻭﺣﱴ ﻳﺪﻋﻢ ﺍﶈﺪﺩﺍﺕ ﺍﳌﻌﻘﺪﺓ ﻣﺜﻞ ﺍﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ #id‬ﻭﻏﲑﻩ ﻣﻦ ﺍﶈﺪﺩﺍﺕ ﺍﻷﺧﺮﻯ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺴﻨﺪ ﻟﻠﻮﻥ‬

‫‪27‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺍﻷﺻﻔﺮ ﺇﱃ ﺧﻠﻔﻴﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ input
checkbox‬ﺍﻟﻐﲑ ﳏﺪﺩﺓ ﻭﻳﻠﻐﻲ ﺗﻔﻌﻴﻞ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ‬
‫ﺍﻟﻨﻮﻉ ‪ input‬ﺑﺪﻭﻥ ﺍﺳﺘﺜﻨﺎﺀ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪28‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:even‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﺰﻭﺟﻲ ﻟﻠﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﶈﺪﺩ ﺍﳌﺴﺘﺨﺪﻡ‬
‫ﻗﺒﻞ ﺍﳌﺮﺷﺢ ‪ :even‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﺍﻟﻌﺪ ﻳﺒﺪﺃ ﺑﺎﻟﻌﺪﺩ ﺻﻔﺮ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﺴﻨﺪ ﻟﻮﻥ ﳐﺘﻠﻒ ﳋﻠﻔﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪tr‬‬
‫ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﺰﻭﺟﻲ ﻓﻘﻂ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪29‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:odd‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﻔﺮﺩﻱ ﻟﻠﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﶈﺪﺩ ﺍﳌﺴﺘﺨﺪﻡ‬
‫ﻗﺒﻞ ﺍﳌﺮﺷﺢ ‪ :odd‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﺍﻟﻌﺪ ﻳﺒﺪﺃ ﺑﺎﻟﻌﺪﺩ ﺻﻔﺮ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﺴﻨﺪ ﻟﻮﻥ ﳐﺘﻠﻒ ﳋﻠﻔﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ tr‬ﺫﺍﺕ‬
‫ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﻔﺮﺩﻱ ﻓﻘﻂ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪30‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح )‪:eq(index‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻓﻘﻂ ﺑﺘﺤﺪﻳﺪ ﺗﺮﺗﻴﺒﻪ ﺿﻤﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﶈﺪﺩ‬
‫ﺍﳌﺴﺘﺨﺪﻡ ﻗﺒﻞ ﺍﳌﺮﺷﺢ )‪ ,eq(index‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻠﻮﻥ ﺍﳋﻂ ﰲ ﺍﳋﻠﻴﺔ ﺍﻟﺜﺎﻟﺜﺔ )ﺗﺮﺗﻴﺒﻬﺎ ﻫﻮ ‪ 2‬ﻷﻥ ﺍﻟﻌﺪ ﻳﺒﺪﺃ ﻣﻦ ﺍﻟﺮﻗﻢ‬
‫‪ ,(0‬ﺑﺎﻟﻠﻮﻥ ﺍﻷﲪﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح )‪:gt(index‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺮﺗﻴﺒﻬﺎ ﺃﻛﱪ ﲤﺎﻣﹰﺎ ﻣﻦ ﺍﻟﺘﺮﺗﻴﺐ ﺍﶈﺪﺩ ‪ index‬ﻟﻠﻤﺮﺷﺢ ‪gt‬‬
‫ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﺍﻟﻌﺪ ﻳﺒﺪﺃ ﻣﻦ ﺍﻟﻌﺪﺩ ‪ ,0‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﻣﻮﺍﺻﻔﺎﺕ ﺧﻂ ﲨﻴﻊ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﺗﺮﺗﻴﺒﻬﺎ ﺃﻛﱪ ﻣﻦ ﺍﻟﺘﺮﺗﻴﺐ ‪4‬‬
‫ﺃﻱ ﻳﺒﺪﺃ ﺍﻟﺘﻌﺪﻳﻞ ﻣﻦ ﺑﻌﺪ ﺍﳋﻠﻴﺔ ﺍﳋﺎﻣﺴﺔ‪:‬‬

‫‪31‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح )‪:gt(index‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺮﺗﻴﺒﻬﺎ ﺃﺻﻐﺮ ﲤﺎﻣﹰﺎ ﻣﻦ ﺍﻟﺘﺮﺗﻴﺐ ﺍﶈﺪﺩ ‪ index‬ﻟﻠﻤﺮﺷﺢ ‪lt‬‬
‫ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﺍﻟﻌﺪ ﻳﺒﺪﺃ ﻣﻦ ﺍﻟﻌﺪﺩ ‪ ,0‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﻣﻮﺍﺻﻔﺎﺕ ﺧﻂ ﲨﻴﻊ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﺗﺮﺗﻴﺒﻬﺎ ﺃﺻﻐﺮ ﻣﻦ ﺍﻟﺘﺮﺗﻴﺐ ‪4‬‬
‫ﻓﻘﻂ‪:‬‬ ‫ﺍﻷﻭﱃ‬ ‫ﺍﻷﺭﺑﻌﺔ‬ ‫ﺍﳋﻼﻳﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺘﻌﺪﻳﻞ‬ ‫ﻳﺘﻢ‬ ‫ﺃﻱ‬

‫‪32‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻴﻪ‪:‬‬

‫المرشح ‪:header‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ ,h1, h2, h3, h4, h5, h6‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﻟﻮﻥ‬
‫ﺧﻂ ﻭﺧﻠﻔﻴﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻨﺘﻤﻲ ﺇﱃ ﺍ‪‬ﻤﻮﻋﺔ ﺍﻟﺴﺎﺑﻘﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪33‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:animated‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻳﺘﻢ ﲢﺮﻳﻜﻬﺎ ﺃﻭ ﺗﻐﻴﲑ ﺃﺑﻌﺎﺩﻫﺎ ﺃﻭ ﰎ ﺍﻟﺘﺄﺛﲑ ﻋﻠﻴﻬﺎ ﺑﺄﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻟﱵ‬
‫ﲡﻌﻞ ﺍﻟﻌﻨﺼﺮ ﻳﺒﺪﻭ ﻭﻛﺄﻧﻪ ﻳﺘﺤﺮﻙ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﲔ ﺍﻟﻜﻼﺱ ‪ colored‬ﺇﱃ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻷﻭﺳﻂ ﺍﻟﺬﻱ ﻳﺘﺤﺮﻙ ﺃﻭ‬
‫ﳛﺬﻓﻪ ﻣﻨﻪ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪34‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫مرشحات المحتوى ‪Content Filters‬‬
‫المرشح )‪:contains(text‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻨﺺ ﺍﳌﻤﺜﻞ ﺑﺎﻟﻘﻴﻤﺔ ‪ ,text‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ div‬ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﻛﻠﻤﺔ ‪ John‬ﻳﻮﻏﲑ ﺧﺼﺎﺋﺺ ﺍﳋﻂ ﳍﺎ‪:‬‬

‫‪35‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح ‪:empty‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻟﻴﺲ ﳍﺎ ﻋﻨﺎﺻﺮ ﺃﺑﻨﺎﺀ ﺃﻱ ﺍﻟﱵ ﻻ ﲢﺘﻮﻱ ﻋﻨﺎﺻﺮ ﺃﺧﺮﻯ‬
‫ﺩﺍﺧﻠﻬﺎ‪ ,‬ﻭﻫﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻨﺘﺞ ﻋﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﻳﺴﺒﻖ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﺃﻭ ﲨﻴﻊ‬
‫ﻋﻨﺎﺻﺮ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ‪ td‬ﺍﻟﱵ ﻻ ﲢﺘﻮﻱ ﻋﻠﻰ ﻋﻨﺎﺻﺮ ﺃﺑﻨﺎﺀ ﺃﻭ ﺣﱴ ﻧﺼﻮﺹ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪36‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح )‪:has(selector‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻋﻠﻰ ﺍﻷﻗﻞ ﻳﺘﻄﺎﺑﻖ ﻣﻊ ﺍﶈﺪ‪‬ﺩ‬
‫‪ selector‬ﺍﳌﻤﺮﺭ ﻛﻮﺳﻴﻂ ﻟﻠﻤﺮﺷﺢ ‪ ,has‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺎﺑﻖ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﻋﻨﺼﺮ ‪ p‬ﻭﺍﺣﺪ‬
‫ﻋﻠﻰ ﺍﻷﻗﻞ ﻭﻳﻀﻴﻒ ﺇﻟﻴﻬﺎ ﺍﻟﻜﻼﺱ ‪:test‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪37‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:parent‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻌﺘﱪ ﺁﺑﺎﺀ ﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﺃﻱ ﻳﻄﺎﺑﻖ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﳍﺎ ﺃﺑﻨﺎﺀ‬
‫ﺩﺍﺧﻠﻬﺎ ﺃﻭ ﻧﺼﻮﺹ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺎﺑﻖ ﲨﻴﻊ ﺍﳋﻼﻳﺎ ‪ td‬ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﺃﺑﻨﺎﺀ ﻭﰲ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﺍﻷﺑﻨﺎﺀ ﻫﻲ ﻋﺒﺎﺭﺓ ﻋﻦ‬
‫ﻧﺼﻮﺹ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪38‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫مرشحات الرؤية أو الظھور ‪Visibility Filters‬‬
‫المرشح ‪:hidden‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﻔﻴﺔ ﻭﻫﺬﺍ ﺍﳌﺮﺷﺢ ﻳﻌﺘﱪ ﺃﻥ ﺍﻟﻌﻨﺼﺮ ﳐﻔﻲ ﰲ ﺣﺎﻝ ﺃﻥ ﺍﳋﺎﺻﻴﺔ‬
‫‪ display‬ﻟﻠـ ‪ CSS‬ﺍﻟﺘﺎﺑﻊ ﻟﻠﻌﻨﺼﺮ ﺗﺴﺎﻭﻱ ‪ none‬ﺃﻭ ﺇﻥ ﻛﺎﻥ ﻋﺮﺿﻪ ﻭﺍﺭﺗﻔﺎﻋﻪ ﻣﺴﺎﻭﻳﺎﻥ ﻟﻠﺼﻔﺮ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳ‪‬ﻈﻬﺮ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﳌﺨﻔﻴﺔ ﻣﻊ ﺇﻇﻬﺎﺭ ﻋﺪﺩ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻣﺎﺯﺍﻟﺖ ﳐﻔﻴﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪39‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:visible‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻋﻠﻰ ﺍﻟﺸﺎﺷﺸﺔ ﻭﻫﺬﺍ ﺍﳌﺮﺷﺢ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﳛﻮﻝ ﻟﻮﻥ‬
‫ﺧﻠﻔﻴﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺇﱃ ﺍﻷﺻﻔﺮ ﰲ ﺣﺎﻝ ﺍﻟﻨﻘﺮ ﻋﻠﻴﻬﺎ ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻭﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ﺗﻈﻬﺮ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﻔﻴﺔ ﻣﻊ‬
‫ﻣﻼﺣﻈﺔ ﺃ‪‬ﺎ ﻏﲑ ﻣﺘﺄﺛﺮﺓ ﺑﻌﻤﻠﻴﺔ ﺍﻟﻨﻘﺮ ﺑﺎﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ‪:div‬‬

‫‪40‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪41‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫مرشحات السمات ‪Attribute Filters‬‬
‫المرشح ]‪[attribute‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻟﺪﻳﻬﺎ ﺍﻟﺴﻤﺔ ]‪ [attribute‬ﻣﺜﻞ ﺍﻟﺴﻤﺔ ‪ id‬ﺃﻭ ‪,value‬‬
‫ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﻈﻬﺮ ﻋﻨﺪ ﺍﻟﻨﻘﺮ ﻋﻠﻰ ﺃﺣﺪ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﻗﻴﻤﺔ ﺍﻟﺴﻤﺔ ‪ id‬ﲜﺎﻧﺐ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ div‬ﰲ ﺣﺎﻝ ﺃﻥ‬
‫ﺍﻟﻌﻨﺼﺮ ‪ div‬ﻟﺪﻳﻪ ﺍﻟﺴﻤﺔ ‪:id‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪42‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ]‪[attribute=value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻟﺪﻳﻬﺎ ﺍﻟﺴﻤﺔ ﺍﶈﺪﺩﺓ ﻣﻊ ﻗﻴﻤﺔ ﳏﺪﺩﺓ ﺃﻳﻀﹰﺎ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﻟﺪﻳﻬﺎ ﺍﻟﺴﻤﺔ ‪ id‬ﻭﻗﻴﻤﺘﻬﺎ ‪ newsletter‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﻧﺼﻬﺎ ﺇﱃ ‪is‬‬
‫‪:newsletter‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪43‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ]‪[attribute!=value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻟﺪﻳﻬﺎ ﺍﻟﺴﻤﺔ ‪ attribute‬ﻭﻗﻴﻤﺘﻬﺎ ﻻ ﺗﺴﺎﻭﻱ ﺍﻟﻘﻴﻤﺔ‬
‫‪ value‬ﺃﻭ ﻟﻴﺲ ﻟﺪﻳﻬﺎ ﺍﻟﺴﻤﺔ ‪ attribute‬ﺑﺎﻷﺻﻞ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻴﻒ ﻛﻠﻤﺔ ‪ not newsletter‬ﺇﱃ ﲨﻴﻊ‬
‫ﻼ‪:‬‬
‫ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﻗﻴﻤﺔ ﺍﻟﺴﻤﺔ ‪ id‬ﳍﺎ ﻻ ﺗﺴﺎﻭﻱ ‪ newsletter‬ﺃﻭ ﻟﻴﺲ ﳍﺎ ﺍﻟﺴﻤﺔ ‪ id‬ﺃﺻ ﹰ‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪44‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ]‪[attribute^=value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﳍﺎ ﺍﻟﺴﻤﺔ ‪ attribute‬ﻭﻗﻴﻤﺔ ﻫﺬﻩ ﺍﻟﺴﻤﺔ ﺗﺒﺪﺃ ﺑﺎﻟﻘﻴﻤﺔ‬
‫‪ ,value‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻜﺘﺐ ﺍﻟﻘﻴﻤﺔ !‪ news here‬ﰲ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﳍﺎ ﺍﻟﺴﻤﺔ ‪ name‬ﻭﻗﻴﻤﺘﻬﺎ ﺗﺒﺪﺃ‬
‫ﺑﺎﻟﻘﻴﻤﺔ ‪:news‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح ]‪[attribute$=value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﳍﺎ ﺍﻟﺴﻤﺔ ‪ attribute‬ﻭﻗﻴﻤﺔ ﻫﺬﻩ ﺍﻟﺴﻤﺔ ﺗﻨﺘﻬﻲ ﺑﺎﻟﻘﻴﻤﺔ‬
‫‪ ,value‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻜﺘﺐ ﺍﻟﻘﻴﻤﺔ ‪ a letter‬ﰲ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﳍﺎ ﺍﻟﺴﻤﺔ ‪ name‬ﻭﻗﻴﻤﺘﻬﺎ ﺗﻨﺘﻬﻲ ﺑﺎﻟﻘﻴﻤﺔ‬
‫‪:letter‬‬

‫‪45‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح ]‪[attribute*=value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﳍﺎ ﺍﻟﺴﻤﺔ ‪ attribute‬ﻭﻗﻴﻤﺔ ﻫﺬﻩ ﺍﻟﺴﻤﺔ ﲢﺘﻮﻱ ﻋﻠﻰ‬
‫ﺍﻟﻘﻴﻤﺔ ‪ ,value‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻜﺘﺐ ﺍﻟﻘﻴﻤﺔ !‪ has man in it‬ﰲ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﳍﺎ ﺍﻟﺴﻤﺔ ‪name‬‬
‫ﻭﻗﻴﻤﺘﻬﺎ ﺗﻨﺘﻬﻲ ﺑﺎﻟﻘﻴﻤﺔ ‪:man‬‬

‫‪46‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫المرشح ]‪[attributeFilter1][attributeFilter2][attributeFilterN‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﻣﺮﺷﺤﺎﺕ ﺍﻟﺴﻤﺎﺕ ﺍﶈﺪﺩﺓ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻜﺘﺐ ﺍﺍﻟﻘﻴﻤﺔ ‪only thin‬‬
‫‪ one‬ﰲ ﺍﻟﻌﻨﺼﺮ ‪ input‬ﺍﻟﺬﻱ ﳝﺘﻠﻚ ﺍﻟﺴﻤﺔ ‪ id‬ﻭﺍﻟﺴﻤﺔ ‪ name‬ﻭﺗﻨﺘﻬﻲ ﺍﻟﺴﻤﺔ ‪ name‬ﺑﺎﻟﻘﻴﻤﺔ ‪:man‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪47‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫مرشحات العناصر الفرعية ‪Child Filters‬‬
‫المرشح )‪:nth-child(index/even/odd/equation‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﶈﺪﺩ ﺑﺎﻟﻘﻴﻤﺔ ‪ ,index‬ﺃﻣﺎ ﰲ ﺣﺎﻝ ﲢﺪﻳﺪ ﺍﻟﻘﻴﻤﺔ‬
‫‪ even‬ﻓﺴﺘﺘﻢ ﻣﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﺰﻭﺟﻲ ﻭﺍﻟﻘﻴﻤﺔ ‪ odd‬ﺗﻄﺎﺑﻖ ﺍﻟﻌﻨﺎﺻﺮ ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﻔﺮﺩﻱ ﻣﻊ ﺍﻟﻌﻠﻢ‬
‫ﺑﺄﻥ ﺍﻟﻌﺪ ﻳﺒﺪﹰﺍ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ‪ .1‬ﺃﻣﺎ ﻋﻦ ﺍﳌﻌﺎﺩﻟﺔ ‪ equation‬ﻓﻴﻤﻜﻦ ﺍﻟﺘﻌﺒﲑ ﻋﻨﻬﺎ ﻛﻤﺎ ﻳﻠﻲ‪ an+b :‬ﺃﻱ ﻣﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺼﺮ‬
‫‪ b‬ﺑﻌﺪ ﺗﻘﺴﻴﻢ ﺍﻟﻌﻨﺎﺻﺮ ﺇﱃ ﳎﻤﻮﻋﺎﺕ ﺗﺘﺄﻟﻒ ﻣﻦ ‪ a‬ﻋﻨﺼﺮ‪ .‬ﻭﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳝﻜﻦ ﺃﻥ ﻳﻄﺎﺑﻖ ﺃﻛﺜﺮ ﻣﻦ ﻋﻨﺼﺮ ﻋﻠﻰ ﻋﻜﺲ‬
‫ﺍﳌﺮﺷﺢ )‪ eq(index‬ﺍﻟﺬﻱ ﻳ‪‬ﺴﺘﺨﺪﻡ ﳌﻄﺎﺑﻘﺔ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻓﻘﻂ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻘﻴﻤﺔ ‪ index‬ﺍﻟﱵ ﺗﻌﱪ ﻋﻦ ﺗﺮﺗﻴﺐ‬
‫ﺍﻟﻌﻨﺼﺮ ﻭﻫﻲ ﺗﺒﺪﺃ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ‪ 0‬ﺑﻴﻨﻤﺎ ﺍﳌﺮﺷﺢ ‪ nth-child‬ﻓﺈﻥ ﻗﻴﻤﺔ ﺍﻟﺘﺮﺗﻴﺐ ﺗﺒﺪﺃ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ‪ ,1‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳﻀﻴﻒ ﺍﻟﻨﺺ !‪ - 2nd‬ﺇﱃ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺜﺎﱐ ﻣﻦ ﻋﻨﺎﺻﺮ ﻛﻞ ﺍﻟﻘﻮﺍﺋﻢ ﻏﲑ ﺍﳌﺮﺗﺒﺔ ‪:ul‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪48‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:first-child‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺼﺮ ﺍﻷﻭﻝ ﻟﻜﻞ ﻋﻨﺼﺮ ﺃﺏ ﺃﻱ ﻳﻄﺎﺑﻖ ﺍﻻﺑﻦ ﺍﻷﻭﻝ ﻟﻜﻞ ﻋﻨﺼﺮ ﳛﺘﻮﻱ ﻋﻠﻰ‬
‫ﻋﻨﺎﺻﺮ ﺃﺑﻨﺎﺀ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻬﻮ ﻳﻐﲑ ﺧﺼﺎﺋﺺ ﺃﻭﻝ ﻋﻨﺼﺮ ‪ span‬ﻣﻮﺟﻮﺩ ﺩﺍﺧﻞ ﻋﻨﺼﺮ ‪:div‬‬

‫‪49‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪50‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:last-child‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺼﺮ ﺍﻷﺧﲑ ﻟﻜﻞ ﻋﻨﺼﺮ ﺃﺏ ﺃﻱ ﻳﻄﺎﺑﻖ ﺍﻻﺑﻦ ﺍﻷﺧﲑ ﻟﻜﻞ ﻋﻨﺼﺮ ﳛﺘﻮﻱ‬
‫ﻋﻠﻰ ﻋﻨﺎﺻﺮ ﺃﺑﻨﺎﺀ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻬﻮ ﻳﻐﲑ ﺧﺼﺎﺋﺺ ﺁﺧﺮ ﻋﻨﺼﺮ ‪ span‬ﻣﻮﺟﻮﺩ ﺩﺍﺧﻞ ﻋﻨﺼﺮ ‪:div‬‬

‫‪51‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪52‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:only-child‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻳﻌﺘﱪ ﺍﻻﺑﻦ ﺍﻟﻮﺣﻴﺪ ﻟﻠﻌﻨﺼﺮ ﺍﻷﺏ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﻧﺺ‬
‫ﺧﻀﺎﺋﺺ ﺍﻹﻃﺎﺭ ﻟﻠﺰﺭ ﺍﻟﺬﻱ ﻫﻮ ﺍﻻﺑﻦ ﺍﻟﻮﺣﻴﺪ ﻟﻠﻌﻨﺼﺮ ‪ div‬ﺍﻟﺜﺎﱐ ﰲ ﺍﻟﺸﻴﻔﺮﺓ‪:‬‬

‫‪53‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪54‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫النماذج ‪Forms‬‬
‫‪:input‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪) textarea ,input‬ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﺍﻟﺬﻱ ﻳﻘﺒﻞ ﺃﻛﺜﺮ ﻣﻦ ﺳﻄﺮ(‪,‬‬
‫‪) button‬ﺍﻟﺰﺭ( ﻭ ‪) select‬ﺍﻟﻘﺎﺋﻤﺔ ﺍﳌﻨﺴﺪﻟﺔ(‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻈﻬﺮ ﻋﺪﺩ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﻭﻋﺪﺩ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﰲ‬
‫ﺍﻟﻨﻤﻮﺫﺝ ‪:form‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﻜﺎﻣﻞ ﻟﻠﺸﻴﻔﺮﺓ ﺍﻟﺴﺎﺑﻘﺔ ﻓﻬﻮ‪:‬‬

‫‪55‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪:text‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﻫﻲ ﻣﻦ ﺍﻟﻨﻮﻉ ‪) text‬ﺣﻘﻞ ﻧﺼﻲ ﺑﺴﻄﺮ ﻭﺍﺣﺪ ﻓﻘﻂ(‪,‬‬
‫ﻭﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﺎﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﺎﻟﻴﺔ )'‪ $(':text‬ﻳﻜﺎﻓﺊ ﻛﺘﺎﺑﺔ )'‪ $('*:text‬ﻭﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﺑﻄﻴﺌﺔ ﰲ ﺍﻟﺘﻨﻔﻴﺬ ﻭﻳﻔﻀﻞ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﺎﻟﻴﺔ )'‪ ,$('input:text‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺧﺼﺎﺋﺺ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ‪:text‬‬

‫‪56‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺼﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪57‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪:password‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﺍﻟﱵ ﻫﻲ ﻣﻦ ﺍﻟﻨﻮﻉ ‪) text‬ﺣﻘﻞ ﻧﺼﻲ ﺑﺴﻄﺮ ﻭﺍﺣﺪ ﻓﻘﻂ(‪,‬‬
‫ﻭﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﺎﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﺎﻟﻴﺔ )' ‪ $(': password‬ﻳﻜﺎﻓﺊ ﻛﺘﺎﺑﺔ )'‪ $('*:password‬ﻭﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﺑﻄﻴﺌﺔ ﰲ ﺍﻟﺘﻨﻔﻴﺬ‬
‫ﻭﻳﻔﻀﻞ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﺎﻟﻴﺔ )' ‪ ,$('input: password‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺧﺼﺎﺋﺺ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ‪:text‬‬

‫‪58‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪59‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪:radio‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:radio') :‬‬

‫‪:checkbox‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪:‬‬
‫)'‪$('input:checkbox‬‬

‫‪:submit‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:submit') :‬‬
‫‪60‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫‪:image‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:image') :‬‬

‫‪:reset‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:reset') :‬‬

‫‪:button‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:button') :‬‬

‫‪:file‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:file') :‬‬

‫‪:hidden‬‬
‫ﻳﻄﺎﺑﻖ ﲤﺎﻣﹰﺎ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺃﺧﺮﻯ ﰲ ﻗﺴﻢ ﺍﻟﻨﻤﺎﺫﺝ ﻭﻟﻜﻦ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﺑﻜﺘﺎﺑﺔ‪$('input:hidden') :‬‬

‫مرشحات النماذج ‪Form Filters‬‬

‫المرشح ‪:enabled‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﻔﻌﻠﺔ )ﺍﳌﻤﻜﻨﺔ(‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻜﺘﺐ ﺍﻟﻨﺺ ‪ this is it‬ﰲ‬
‫ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﺍﳌﻔﻌﻞ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪61‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:disabled‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻐﲑ ﺍﳌﻔﻌﻠﺔ ) ﺍﻟﻐﲑ ﺍﳌﻤﻜﻨﺔ(‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻜﺘﺐ ﺍﻟﻨﺺ ‪this‬‬
‫‪ is it‬ﰲ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﺍﻟﻐﲑ ﺍﳌﻔﻌﻞ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪62‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:checked‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﺘﺎﺭﺓ ﻭﻳﻨﻄﺒﻖ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮﻳﻦ ‪,radio, checkbox‬‬
‫ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻈﻬﺮ ﻋﺪﺩ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﰎ ﺍﺧﺘﻴﺎﺭﻫﺎ‪ ,‬ﻭﻋﻨﺪ ﺗﻐﻴﲑ ﺍﺧﺘﻴﺎﺭ ﺃﺣﺪ ﺍﻟﻌﻨﺎﺻﺮ ‪ checkbox‬ﻳﺘﻢ ﲢﺪﻳﺚ ﺍﻟﻌﺪﺩ‬
‫ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪63‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫المرشح ‪:selected‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳌﺮﺷﺢ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﶈﺪﺩﺓ ﻭﻳﻨﻄﺒﻖ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ‪) select‬ﺍﻟﻘﺎﺋﻤﺔ ﺍﳌﻨﺴﺪﻟﺔ(‪ ,‬ﻭﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﻈﻬﺮ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪﻫﺎ ﺑﺎﻟﻠﻮﻥ ﺍﻷﲪﺮ ﻭﻳﺘﻐﲑ ﺑﺘﻐﲑ ﺍﻟﺘﺤﺪﻳﺪ ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ‪:‬‬

‫‪64‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪65‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫مالحظة‪ :‬ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺮﻣﺰﻳﻦ \\ ﻟﺘﺠﺎﻭﺯ ﺍﶈﺎﺭﻑ ﺍﳋﺎﺻﺔ ﺍﻟﱵ ﻣﻦ ﺍﳌﻤﻜﻦ ﺃﻥ ﺗﺴﺘﺨﺪﻡ ﰲ ﺃﲰﺎﺀ ﺍﻟﻌﻨﺎﺻﺮ‪.‬‬

‫السمات ‪Attributes‬‬
‫)‪attr(name‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﻗﻴﻤﺔ ﺇﺣﺪﻯ ﺻﻔﺎﺕ ﺃﻭﻝ ﻋﻨﺼﺮ ﺗﺘﻢ ﻣﻄﺎﺑﻘﺘﻪ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﳏﺪﺩﺍﺕ ﺍﻟـ‬
‫‪ ,jQuery‬ﻭﰲ ﺣﺎﻝ ﺃﻥ ﺍﻟﻌﻨﺼﺮ ﻻ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﺼﻔﺔ ﺍﶈﺪﺩﺓ ﺑﺎﻟﻘﻴﻤﺔ ‪ name‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺇﺭﺟﺎﻉ ﺍﻟﻘﻴﻤﺔ‬
‫‪ ,undefined‬ﻭﻣﻦ ﻫﺬﻩ ﺍﻟﺼﻔﺎﺕ ‪ title, alt, src, href, width, style‬ﻭﻏﲑﻫﺎ ﺃﺧﺮﻯ ﻛﻤﺎ ﳝﻜﻦ‬
‫‪66‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫ﻼ ﳝﻜﻦ ﺍﳊﺼﻮﻝ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ ‪ NewsId‬ﻣﻊ‬
‫ﺍﳊﺼﻮﻝ ﻋﻠﻰ ﻗﻴﻤﺔ ﺻﻔﺔ ﻏﲑ ﻣﻮﺟﻮﺩﺓ ﰲ ﺍﻟـ ‪ HTML‬ﻣﺜ ﹰ‬
‫ﺍﻟﻌﻠﻢ ﺃﻥ ﻫﺬﻩ ﺍﻟﺼﻔﺔ ﻏﲑ ﻣﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺎﺕ ﺍﻟﻘﻴﺎﺳﻴﺔ ﻷﻱ ﻭﺍﲰﺔ ‪ ,HTML‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﺮﺽ ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ‬
‫‪ title‬ﻟﻠﻮﺍﲰﺔ )‪ (tag‬ﺍﻟﱵ ﺍﲰﻬﺎ ‪ em‬ﻭﻳﻌﺮﺿﻪ ﺑﺎﻟﻠﻮﻥ ﺍﻷﲪﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ‪:‬‬

‫)‪attr(properties‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﺳﻨﺎﺩ ﻗﻴﻢ ﻟﺼﻔﺎﺕ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﻳﺴﺒﻖ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ‬
‫‪ attr‬ﺣﻴﺚ ﻳ‪‬ﻌﺘﻤﺪ ﻃﺮﻳﻘﺔ ﻣﻔﺘﺎﺡ‪/‬ﻗﻴﻤﺔ ﻟﺘﺤﺪﻳﺪ ﺍﻟﺼﻔﺔ ﻭﻗﻴﻤﺘﻬﺎ ﺣﻴﺚ ﺗﺄﺧﺬ ﺍﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪:‬‬

‫‪67‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫}‪{attr1: value1, attr2: value2, attrN: valueN‬‬

‫ﻣﻊ ﻣﻼﺣﻈﺔ ﺃﻧﻪ ﻟﺘﺤﺪﻳﺪ ﻗﻴﻤﺔ ﺍﻟﻜﻼﺱ ‪ CSS‬ﻟﻠﻌﻨﺎﺻﺮ ﺍﳌﻄﺎﺑﻘﺔ ﻓﻴﺠﺐ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺼﻔﺔ ‪ className‬ﻛﻤﻔﺘﺎﺡ ﺃﻭ‬
‫ﺍﺳﺘﺨﺪﻡ ﺍﻟﺘﺎﺑﻊ )‪ .addClass(class‬ﺃﻭ ﺍﻟﺘﺎﺑﻊ )‪ .removeClass(class‬ﻣﻊ ﺍﻻﻧﺘﺒﺎﻩ ﺇﱃ ﺃﻧﻪ ﰲ ﺣﺎﻝ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﺗﺎﺑﻊ ﻣﻜﺎﻥ ﺍﻟﻘﻴﻤﺔ ‪ value‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﻭﻟﻦ ﻳﺘﻢ ﺇﺳﻨﺎﺩﻩ ﻛﻘﻴﻤﺔ ﻟﻠﻤﻔﺘﺎﺡ )ﺍﻟﺼﻔﺔ(‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﳛﺪﺩ‬
‫ﺑﻌﺾ ﺻﻔﺎﺕ ﲨﻴﻊ ﺍﻟﻮﺍﲰﺎﺕ ‪ img‬ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪68‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪attr(key, value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﻗﻴﻤﺔ ﻟﻮﺍﺻﻔﺔ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ‪ ,attr‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﻄﻲ ﺍﻟﻮﺍﺻﻔﺔ ‪ disabled‬ﺍﻟﻘﻴﻤﺔ ‪ disabled‬ﳉﻤﻴﻊ ﺍﻷﺯﺭﺍﺭ ﺍﻟﱵ ﺗﺮﺗﻴﺒﻬﺎ ﺃﻛﱪ ﻣﻦ ‪1‬‬
‫ﻭﰲ ﻣﺜﺎﻟﻨﺎ ﻳﻮﺟﺪ ﺯﺭ ﻭﺍﺣﺪ ﻣﻄﺎﺑﻖ ﳍﺬﺍ ﺍﻟﺸﺮﻁ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪69‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪attr(key, fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﻗﻴﻤﺔ ﳏﺴﻮﺑﺔ ﻟﻮﺍﺻﻔﺔ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ‪ ,attr‬ﻭﻫﻨﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺗﺎﺑﻊ ﻣﻜﺎﻥ ﺍﻟﻮﺳﻴﻂ ‪ fn‬ﻹﺗﺎﺣﺔ ﺇﻣﻜﺎﻧﻴﺔ ﺣﺴﺎﺏ ﺍﻟﻘﻴﻤﺔ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﺗﻐﲑ ﻧﺺ ﺍﻟﻮﺍﲰﺎﺕ ‪ span‬ﺍﳌﻮﺟﻮﺩﺓ ﺿﻤﻦ ﺍﻟﻮﺍﲰﺎﺕ ‪ div‬ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ ‪ id‬ﻟﻜﻞ ﻋﻨﺼﺮ ‪:div‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪70‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪removeAttr(name‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﺯﺍﻟﺔ ﺻﻔﺔ ﻣﻦ ﺻﻔﺎﺕ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫‪ removeAttr‬ﻭﲢﺪﺩ ﺍﻟﺼﻔﺔ ﺍﻟﱵ ﺳﺘﺘﻢ ﺇﺯﺍﻟﺘﻬﺎ ﺑﺎﻟﻘﻴﻤﺔ ‪ ,name‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺯﺍﻟﺔ ﺍﻟﺼﻔﺔ ‪ disabled‬ﻣﻦ‬
‫ﺍﳋﻘﻞ ﺍﻟﻨﺼﻲ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪ Enable‬ﻭﺑﻌﺪﻫﺎ ﻳﺘﻢ ﺗﻐﻴﲑ ﻧﺺ ﺍﳊﺼﻖ ﺍﻟﻨﺼﻲ ﺇﱃ ‪:editable now‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪71‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫الصفوف )كالسات( ‪Class‬‬
‫)‪addClass(class‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺿﺎﻓﺔ ﻛﻼﺱ ‪ CSS Class‬ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﳝﻜﻦ ﲤﺮﻳﺮ ﺃﻛﺜﺮ ﻣﻦ ﺍﺳﻢ ﻛﻼﺱ ﻭﺫﻟﻚ ﺑﻮﺿﻊ ﻓﺮﺍﻍ ﺑﲔ ﻛﻞ ﻛﻼﺱ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻴﻒ‬
‫ﺍﻟﻜﻼﺱ ‪ selected‬ﺇﱃ ﺁﺧﺮ ﻋﻨﺼﺮ ‪ p‬ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﺣﻴﺚ ﻳﻌﻄﻴﻪ ﺍﻟﻠﻮﻥ ﺍﻷﺯﺭﻕ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪72‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪hasClass(class‬‬
‫ﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻟﻘﻴﻤﺔ ‪ true‬ﰲ ﺣﺎﻝ ﺃﻥ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻜﻼﺱ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪ ﺍﲰﻪ ﺑﺎﻟﻘﻴﻤﺔ ‪ class‬ﻭﺇﻻ ﻓﺈﻥ ﺍﻟﺘﺎﺑﻊ ﻳﻌﻴﺪ ‪ false‬ﻭﺍﻟﻘﻴﻤﺔ‬
‫‪ class‬ﺗﻘﺒﻞ ﺍﺳﻢ ﻛﻼﺱ ﻭﺍﺣﺪ ﻓﻘﻂ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻴﻒ ﺍﻟﻘﻴﻤﺔ ‪ true‬ﺃﻭ ‪ false‬ﺇﱃ ﺍﻟﻌﻨﺼﺮ ‪:div‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪73‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪removeClass(class‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻟﻜﻼﺳﺎﺕ ﺍﶈﺪﺩﺓ ﺑﺎﻟﻘﻴﻤﺔ ‪ class‬ﻣﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ‬
‫ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺣﻴﺚ ﳝﻜﻦ ﲤﺮﻳﺮ ﺍﺳﻢ ﺃﻛﺜﺮ ﻣﻦ ﻛﻼﺱ ﻭﺫﻟﻚ ﺑﻮﺿﻊ ﻓﺮﺍﻍ ﺑﻴﻨﻬﺎ‪ ,‬ﻭﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﺰﻳﻞ ﺍﻟﻜﻼﺱ ‪ blue‬ﻣﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺫﺍﺕ ﺍﻟﺘﺮﺗﻴﺐ ﺍﻟﺰﻭﺟﻲ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪﻫﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪:even‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪74‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪toggleClass(class‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺿﺎﻓﺔ ﺍﻟﻜﻼﺱ ﺍﶈﺪﺩ ﺑﺎﻟﻘﻴﻤﺔ ‪ class‬ﺇﱃ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺇﻥ ﻛﺎﻥ ﻏﲑ ﻣﻮﺟﻮﺩ ﺃﻭ ﳛﺬﻓﻪ ﰲ ﺣﺎﻝ ﺃﻧﻪ ﻛﺎﻥ ﻣﻮﺟﻮﺩ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻴﻒ ﺃﻭ ﳛﺬﻑ‬
‫ﺍﻟﻜﻼﺱ ‪ highlight‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺃﻱ ﻋﻨﺼﺮ ‪ p‬ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪75‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪toggleClass(class, switch‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺿﺎﻓﺔ ﺍﻟﻜﻼﺱ ﺍﶈﺪﺩ ﺑﺎﻟﻘﻴﻤﺔ ‪ class‬ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ‬
‫ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﰲ ﺣﺎﻝ ﺃﻥ ﻗﻴﻤﺔ ‪ switch‬ﻛﺎﻧﺖ ﻣﺴﺎﻭﻳﺔ ﺇﱃ ‪ true‬ﺃﻭ ﻳﺰﻳﻠﻪ ﰲ ﺣﺎﻝ ﻛﺎﻧﺖ ﻗﻴﻤﺔ‬
‫‪ switch‬ﻣﺴﺎﻭﻳﺔ ﺇﱃ ‪false‬ﻭ ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺒﻖ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﻠﻰ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻋﻨﺪ ﺍﻟﻨﻘﺮ‬
‫ﻋﻠﻰ ﺃﺣﺪﻫﺎ‪:‬‬

‫‪76‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫توابع الـ ‪HTML‬‬

‫)(‪html‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻋﺎﺩﺓ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ html‬ﻷﻭﻝ ﻋﻨﺼﺮ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻪ ﻭﻻ ﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﻠﻰ ﻭﺛﻴﻘﺔ‬
‫‪ XML‬ﺑﺎﻟﺮﻏﻢ ﻣﻦ ﺃﻧﻪ ﻳﻌﻤﻞ ﻋﻠﻰ ﻭﺛﻴﻘﺔ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ ,XHTML‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﺮﺽ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪HTML‬‬
‫ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻭﺫﻟﻚ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻬﺎ‪:‬‬

‫‪77‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪78‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪html(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻐﻴﲑ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﳉﻤﻴﻊ ﻋﻨﺎﺻﺮ ‪ div‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫التوابع النصية ‪Text‬‬

‫)(‪text‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﻋﺎﺩﺓ ﺍﻟﻘﻴﻢ ﺍﻟﻨﺼﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‬
‫ﺣﻴﺚ ﻳﺘﻢ ﺩﻣﺞ ﻛﻞ ﺍﻟﻘﻴﻢ ﺍﻟﻨﺼﻴﺔ ﰲ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ ﻭﺍﺣﺪﺓ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﻷﻭﻝ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ ﻭﻳ‪‬ﺴﻨﺪﻩ ﺇﱃ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﻵﺧﺮ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪79‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪text(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻐﻴﲑ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪80‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع القيمة ‪Value‬‬
‫)(‪val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ ‪ value‬ﻷﻭﻝ ﻋﻨﺼﺮ ﺗﺘﻢ ﻣﻄﺎﺑﻘﺘﻪ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻣﻊ‬
‫ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺣﱴ ﺍﻟﻌﻨﺼﺮ ‪) checkbox‬ﺯﺭ ﺍﻻﺧﺘﻴﺎﺭ( ﻭﺍﻟﻌﻨﺼﺮ ‪) select‬ﺍﻟﻘﺎﺋﻤﺔ ﺍﳌﻨﺴﺪﻟﺔ ﺃﻭ ﺍﻟﻘﺎﺋﻤﺔ ﺍﻟﱵ ﺗﺴﻤﺢ‬
‫ﺑﺎﺧﺘﻴﺎﺭ ﺃﻛﺜﺮ ﻣﻦ ﻋﻨﺼﺮ(‪ ,‬ﻓﻤﻦ ﺃﺟﻞ ﺍﻟﻌﻨﺼﺮ ‪ checkbox‬ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ :checked‬ﻟﺘﺤﺪﻳﺪ ﺍﻟﻌﻨﺼﺮ‬
‫ﺍﶈﺪﺩ ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﻣﻦ ﺃﺟﻞ ﺍﻟﻌﻨﺼﺮ ‪ select‬ﻓﻴﺠﺐ ﺍﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ :selected‬ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﻣﻦ ﺃﺟﻞ ﺍﻟﻌﻨﺼﺮ ‪ radio‬ﻓﻴﺠﺐ ﺃﻳﻀﹰﺎ ﺍﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ :checked‬ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﻌﻴﺪ ﻗﻴﻤﺔ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﻣﻦ ﺍﻟﻌﻨﺼﺮ ‪ select‬ﺍﻟﺬﻱ ﻳﺴﻤﺢ ﺑﺘﺤﺪﻳﺪ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻓﻘﻂ ﻭﻣﺼﻔﻮﻓﺔ ﻗﻴﻢ‬
‫ﻣﻦ ﺍﻟﻌﻨﺼﺮ ‪ select‬ﺍﻟﺬﻱ ﻳﺴﻤﺢ ﺑﺎﺧﺘﻴﺎﺭﺍﺕ ﻣﺘﻌﺪﺩﺓ‪:‬‬

‫‪81‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪82‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪val(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺘﻐﻴﲑ ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ ‪ value‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ ‪ value‬ﻟﻠﺤﻘﻞ ﺍﻟﻨﺼﻲ ﺃﻱ ﻳﻐﲑ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻈﻬﺮ ﰲ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﻭﺫﻟﻚ‬
‫ﻋﻨﺪ ﺍﻟﺼﻐﻂ ﻋﻠﻰ ﺃﻱ ﺯﺭ ﻣﻦ ﺍﻷﺯﺭﺍﺭ ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪83‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪val(val‬‬
‫ﳜﺘﻠﻒ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﻦ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺴﺎﺑﻖ ﰲ ﺃﻧﻪ ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻠﻌﻨﺎﺻﺮ ‪ select, checkbox, radio‬ﺣﻴﺚ‬
‫ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻟﺘﺤﺪﻳﺪ ﻗﻴﻤﺔ ﻭﺍﺣﺪﺓ ﻟﻠﻌﻨﺼﺮ ‪ select‬ﺃﻭ ﺃﻛﺜﺮ ﻣﻦ ﻗﻴﻤﺔ‪ ,‬ﻭﺍﺧﺘﻴﺎﺭ ﻋﻨﺼﺮ ‪ checkbox‬ﻭﺍﺣﺪ ﺃﻭ‬
‫ﺃﻛﺜﺮ‪ ,‬ﻛﻤﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻟﺘﺤﺪﻳﺪ ﻋﻨﺼﺮ ‪ radio‬ﻛﻤﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬
‫‪84‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺒﻖ ﻓﻬﻲ‪:‬‬

‫‪85‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع العبور‬
‫توابع الترشيح‬
‫)‪eq(index‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳌﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺼﺮ ﺫﻭ ﺍﻟﺘﺮﺗﻴﺐ ‪ index‬ﻣﻦ ﺑﲔ ﻛﻞ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ‬
‫ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ ﺍﻟﻌﻠﻢ ﺑﺄﻥ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ index‬ﺗﺒﺪﺃ ﺑﺎﻟﻘﻴﻤﺔ ‪ 0‬ﺃﻱ ﺃﻥ ﺍﻟﻌﻨﺼﺮ ﺍﳋﺎﻣﺲ ﺗﻜﻮﻥ‬
‫ﻗﻴﻤﺔ ‪ index‬ﺍﳌﻮﺍﻓﻘﺔ ﻟﻪ ﻫﻲ ‪ 4‬ﻭﰲ ﺣﺎﻝ ﲤﺮﻳﺮ ﻟﻠﻮﺳﻴﻂ ‪ index‬ﻻ ﺗﻮﺍﻓﻖ ﻭﺟﻮﺩ ﺃﻱ ﻋﻨﺼﺮ ﻋﻨﺪﻫﺎ ﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‬
‫ﻣﺼﻔﻮﻓﺔ ﻻﻳﻮﺟﺪ ﻓﻴﻬﺎ ﺃﻱ ﻋﻨﺼﺮ ﺑﺪ ﹰﻻ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ‪ ,null‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻴﻒ ﺍﻟﻜﻼﺱ ‪ blue‬ﺇﱃ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺫﻭ‬
‫ﺍﻟﺘﺮﺗﻴﺐ ‪ 2‬ﺃﻱ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺜﺎﻟﺚ ﻣﻦ ﻋﻨﺎﺻﺮ ‪ div‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪86‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪hasClass(class‬‬
‫ﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻟﻘﻴﻤﺔ ‪ true‬ﰲ ﺣﺎﻝ ﺃﻥ ﻋﻨﺼﺮ ﻭﺍﺣﺪ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻜﻼﺱ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪ ﺍﲰﻪ ﺑﺎﻟﻘﻴﻤﺔ ‪ class‬ﻭﺇﻻ ﻓﺈﻥ ﺍﻟﺘﺎﺑﻊ ﻳﻌﻴﺪ ‪ false‬ﻭﺍﻟﻘﻴﻤﺔ‬
‫‪ class‬ﺗﻘﺒﻞ ﺍﺳﻢ ﻛﻼﺱ ﻭﺍﺣﺪ ﻓﻘﻂ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺬﻱ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻜﻼﺱ‬
‫‪:protected‬‬

‫‪87‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪88‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪filter(expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻻﺳﺘﺒﻌﺎﺩ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺍﻟﱵ ﻻ ﲢﻘﻖ ﺍﻟﺘﻌﺒﲑ ﺃﻭ ﺍﻟﺘﻌﺎﺑﲑ ﺍﶈﺪﺩﺓ ﺑﺎﻟﻮﺳﻴﻂ ‪ expr‬ﺣﻴﺚ ﳝﻜﻦ ﲤﺮﻳﺮ ﺃﻛﺜﺮ ﻣﻦ ﺗﻌﺒﲑ ﻳﻔﺼﻞ ﺑﲔ ﻛﻞ‬
‫ﻣﻨﻬﺎ ﺍﶈﺮﻑ ﻓﺎﺻﻠﺔ )‪ ,(,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻊ ﺇﻃﺎﺭ ﺃﲪﺮ ﺣﻮﻝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻜﻼﺱ‬
‫‪:middle‬‬

‫‪89‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪filter(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻻﺳﺘﺒﻌﺎﺩ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺍﻟﱵ ﻻ ﲢﻘﻖ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﺣﻴﺚ ﻳﺘﻢ ﺍﺳﺘﺒﻌﺎﺩ ﺍﻟﻌﻨﺼﺮ ﰲ ﺣﺎﻝ ﺃﻥ ﻋﻤﻠﻴﺔ ﺗﻘﻴﻴﻢ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﺃﻋﺎﺩﺓ ‪ ,false‬ﻭﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﻀﻊ ﺇﻃﺎﺭ ﺃﲪﺮ ﺣﻮﻝ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺜﺎﱐ ﺍﳌﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﺃﻱ ﺗﺮﺗﻴﺒﻪ ﻳﺴﺎﻭﻱ ﺍﻟﻘﻴﻤﺔ ‪ 1‬ﺃﻭ ﺍﻟﻌﻨﺼﺮ ‪div‬‬
‫ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﺼﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:fourth‬‬
‫‪90‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪91‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪is(expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻔﺤﺺ ﺍﻟﺘﻌﺒﲑ ﺍﳌﻤﺮﺭ ﻛﻘﻴﻤﺔ ﻟﻠﻮﺳﻴﻂ ‪ expr‬ﻓﻔﻲ ﺣﺎﻝ ﺃﻧﻪ ﻳﺘﻄﺎﺑﻖ ﻣﻊ ﺃﺣﺪ ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻓﺈﻧﻪ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ‪ true‬ﻭﺇﻻ ﻓﺈﻧﻪ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ‪,false‬‬
‫ﻭﳝﻜﻦ ﲤﺮﻳﺮ ﺃﻛﺜﺮ ﻣﻦ ﺗﻌﺒﲑ ﻟﻠﻘﻴﻤﺔ ‪ expr‬ﻳ‪‬ﻔﺼﻞ ﺑﻴﻨﻬﺎ ﺑﻔﺎﺻﻠﺔ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﻃﺮﻳﻘﺔ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪,‬‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩﺍﺕ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ﺍﶈﺪﺩ ‪ :first-child‬ﻳﻔﺤﺺ ﻫﻞ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺬﻱ ﰎ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﺑﺎﻟﻔﺄﺭﺓ ﻫﻮ ﺃﻭﻝ ﻋﻨﺼﺮ ﰲ ﺍﻟﺼﻔﺤﺔ‬
‫ﺑﻌﺪ ﺍﻟﻮﺍﲰﺔ ‪ body‬ﺃﻡ ﻻ‪.‬‬
‫• ﺍﶈﺪﺩﻳﻦ ‪ :.red, .blue‬ﻫﺬﻳﻦ ﺍﶈﺪﺩﻳﻦ ﳘﺎ ﻣﻦ ﺍﶈﺪﺩ ‪ .class‬ﺣﻴﺚ ﻳﺘﻢ ﻓﺤﺺ ﻫﻞ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﳛﺘﻮﻱ‬
‫ﻋﻠﻰ ﺃﺣﺪ ﻫﺬﻳﻦ ﺍﻟﻜﻼﺳﲔ ‪ CSS classes‬ﺃﻡ ﻻ‪.‬‬
‫• ﺍﶈﺪﺩ )'‪ :contains('Peter‬ﻳﻔﺤﺺ ﻫﻞ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ‪ Peter‬ﺃﻡ ﻻ‪.‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﻓﻬﻲ‪:‬‬

‫‪92‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪93‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫)‪map(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﺤﻮﻳﻞ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﰲ ﻛﺎﺋﻦ ‪ jQuery‬ﺇﱃ ﳎﻤﻮﻋﺔ ﺃﺧﺮﻯ ﻣﻦ ﺍﻟﻘﻴﻢ ﰲ‬
‫ﻣﺼﻔﻮﻓﺔ ‪ jQuery‬ﻭﻫﺬﻩ ﺍﳌﺼﻔﻮﻓﺔ ﻗﺪ ﲢﺘﻮﻱ ﺃﻭ ﻻ ﲢﺘﻮﻱ ﻋﻠﻰ ﻗﻴﻢ ﻭﺍﻟﻮﺳﻴﻂ ‪ callback‬ﻫﻮ ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻠﻰ‬
‫ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ‪ .‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺑﻨﺎﺀ ﻗﺎﺋﻤﺔ ﺑﻜﻞ ﺍﻟﻘﻴﻢ ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﺍﳌﻮﺟﻮﺩ‬
‫ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪94‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪not(expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺍﻟﱵ ﲢﻘﻖ ﺍﶈﺪﺩﺍﺕ ﺍﻟﱵ ﻳﻌﱪ ﻋﻨﻬﺎ ﺑﺎﻟﻮﺳﻴﻂ ‪ expr‬ﻭﳝﻜﻦ ﲤﺮﻳﺮ ﺃﻛﺜﺮ ﻣﻦ ﳏﺪﺩ ﻣﻔﺼﻮﻝ ﺑﻴﻨﻬﺎ ﺑﻔﺎﺻﻠﺔ‪,‬‬
‫ﻭﻛﺄﻣﺜﻠﺔ ﻋﻠﻰ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪:‬‬

‫• ﺍﺳﺘﺜﻨﺎﺀ ﺍﻟﻌﻨﺼﺮ ‪ p‬ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:selected‬‬

‫• ﺍﺳﺘﺜﻨﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﺩﺍﺧﻞ ﻋﻨﺼﺮ ‪ div‬ﻭﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻜﻼﺱ ‪:selected‬‬

‫ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻭﺿﻊ ﺇﻃﺎﺭ ﺃﲪﺮ ﺣﻮﻝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻣﺎﻋﺪﺍ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﻟﱵ ﲢﺘﻮﻱ‬
‫ﻋﻠﻰ ﺍﻟﻜﻼﺱ ‪ green‬ﺃﻭ ﺍﻟﱵ ﺗﻜﻮﻥ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﳍﺎ ﻣﺴﺎﻭﻱ ﺍﻟﻘﻴﻤﺔ ‪:blueone‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪95‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪slice(start, [end‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻻﺧﺘﻴﺎﺭ ﳎﻤﻮﻋﺔ ﻓﺮﻋﻴﺔ ﻣﻦ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﻟﻮﺳﻴﻂ ‪ start‬ﻫﻮ ﻗﻴﻤﺔ ﻋﺪﺩﻳﺔ ﺻﺤﻴﺤﺔ ﻭﺃﻗﻞ ﻗﻴﻤﺔ ﳑﻜﻨﺔ ﳍﺎ ﻫﻲ ﺍﻟﻘﻴﻤﺔ ‪ ,0‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ‬
‫‪ end‬ﻓﻬﻮ ﺍﺧﺘﻴﺎﺭﻱ ﺃﻱ ﻻ ﳚﺐ ﲤﺮﻳﺮﻩ ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺍﺧﺘﻴﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺑﺪﺀﹰﺍ ﻣﻦ ﺍﻟﺘﺮﺗﻴﺐ ‪ ,start‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ‬
‫ﺍﺧﺘﻴﺎﺭ ﻋﺪﺩ ﻋﺸﻮﺍﺋﻲ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻭﻳﺘﻢ ﺗﻠﻮﻳﻨﻬﺎ ﺑﺎﻟﻠﻮﻥ ﺍﻷﺻﻔﺮ‪:‬‬

‫‪96‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪97‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪98‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫توابع البحث‬
‫)‪add(expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺿﺎﻓﺔ ﻋﻨﺎﺻﺮ ﺃﺧﺮﻯ ﺇﱃ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﻟﻜﻦ ﻓﻘﻂ ﺇﺿﺎﻓﺔ ﻋﻨﺎﺻﺮ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺍﻟﺸﺮﻭﻁ ﺍﶈﺪﺩﺓ ﰲ ﺍﻟﺘﻌﺒﲑ ‪ ,expr‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ‬
‫ﺇﺿﺎﻓﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺑﻌﺪ ﺗﻐﻴﲑ ﺧﺼﺎﺋﺺ ﺍﻹﻃﺎﺭ ﻟﻌﻨﺎﺻﺮ ‪ div‬ﻭﺑﻌﺪﻫﺎ‬
‫ﻳﺘﻢ ﺗﻐﻴﲑ ﻟﻮﻥ ﺍﳋﻠﻔﻴﺔ ﻟﻠﻌﻨﺎﺻﺮ ‪p:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪99‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪children([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻷﺑﻨﺎﺀ ﺍﳌﺒﺎﺷﺮﻳﻦ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ‬
‫ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ﺍﻻﻓﺘﺮﺍﺿﻲ ‪ expr‬ﻟﺘﺮﺷﻴﺢ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﺍﻟﱵ ﳚﺐ ﺃﻥ ﺗﻈﻬﺮ‬
‫ﺣﻴﺚ ﻓﻘﻂ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﺍﻷﺑﻨﺎﺀ ﺍﻟﱵ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺍﻟﺸﺮﻁ ﰲ ﺍﻟﺘﻌﺒﲑ ‪ ,expr‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻈﻬﺮ ﻋﺪﺩ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﰲ‬
‫ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﻣﻊ ﺍﺳﻢ ﺍﻟﻌﻨﺼﺮ‪:‬‬

‫‪100‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪101‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪102‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫)]‪closest([expr‬‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺟﺪﻳﺪ ﰲ ﺍﻹﺻﺪﺍﺭ ‪ 1.3‬ﻭﻳ‪‬ﺴﺘﺨﺪﻡ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﳍﺎ ﻋﻨﺎﺻﺮ ﺃﺑﻨﺎﺀ ﺗﻄﺎﺑﻖ ﺍﶈﺪﺩ‬
‫ﺍﳌﺴﺘﺨﺪﻡ ﺑﺎﻟﺘﻌﺒﲑ ‪ expr‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﺍﻟﺘﻌﺒﲑ ‪ expr‬ﻫﻮ ﻭﺳﻴﻂ ﺍﺧﺘﻴﺎﺭﻱ‪ .‬ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺒﺤﺚ ﺃﻭ ﹰﻻ ﺑﺎﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻓﺈﻥ‬
‫ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺍﻟﺘﻌﺒﲑ ﺍﶈﺪﺩ ﺳﻴﺘﻢ ﺇﻋﺎﺩﺓ ﺍﻟﻌﻨﺼﺮ ﻧﻔﺴﻪ‪ ,‬ﻭﰲ ﺣﺎﻝ ﺃﻧﻪ ﻻ ﻳﺘﻄﺎﺑﻖ ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺍﻟﺒﺤﺚ ﺑﺎﻟﻌﻨﺎﺻﺮ ﺍﻷﻋﻠﻰ‬
‫ﻓﺎﻷﻋﻠﻰ ﺣﱴ ﻳﺘﻢ ﺇﳚﺎﺩ ﻛﻞ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﺍﻟﺘﻌﺒﲑ ﺍﶈﺪﺩ‪ .‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﻋﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪103‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪find(expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻠﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲢﻘﻖ ﺍﻟﺸﺮﻭﻁ ﰲ ﺍﻟﺘﻌﺒﲑ ‪ expr‬ﻭﻳﺘﻢ ﺍﻟﺒﺤﺚ ﺿﻤﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ‬
‫ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺍﻟﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪span‬‬
‫ﺩﺍﺧﻞ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪104‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪next([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻘﺮﻳﺒﺔ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﳝﻜﻦ ﺃﻥ ﺗﻄﺒﻖ ﻋﻠﻴﻬﺎ ﺍﻟﺸﺮﻭﻁ ﺍﶈﺪﺩﺓ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻌﺒﲑ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ ,expr‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺿﺎﻓﺔ ﺍﻟﻨﺺ ‪ this button is disabled‬ﺇﱃ ﺃﻗﺮﺏ‬
‫ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﺰﺭ ﺍﻟﻐﲑ ﻣﻔﻌﻞ ﻭﻫﻮ ﻫﻨﺎ ﰲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﺍﻟﻌﻨﺼﺮ ‪ span‬ﺃﻱ ﻟﻴﺲ ﻣﻦ ﺍﻟﻀﺮﻭﺭﻱ ﺃﻥ ﻳﻄﺎﺑﻖ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﻨﺎﺻﺮ‬
‫ﻣﻦ ﻧﻔﺲ ﻧﻮﻉ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﻟﻜﻦ ﳝﻜﻦ ﲢﺪﻳﺪ ﻧﻮﻉ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺮﻳﺪ ﻣﻦ ﺍﻟﺘﺎﺑﻊ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻋﻨﺪﻫﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﺍﻟﺘﻌﺒﲑ ‪ expr‬ﻟﻔﻌﻞ ﺫﻟﻚ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪105‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪nextAll([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻘﺮﻳﺒﺔ )ﺍﻟﱵ ﻋﻠﻰ ﻧﻔﺲ ﺍﳌﺴﺘﻮﻯ( ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﳝﻜﻦ ﲢﺪﻳﺪ‬
‫ﺷﺮﻭﻁ ﻣﻄﺎﺑﻘﺔ ﻫﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻌﺒﲑ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ ,expr‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺎﺑﻖ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺧﺮﻯ ﺍﻟﱵ ﺗﺄﰐ‬
‫ﺑﻌﺪ ﺍﻟﻌﻨﺼﺮ ﺍﻷﻭﻝ ‪ div‬ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﻐﺾ ﺍﻟﻨﻈﺮ ﻋﻦ ﻧﻮﻋﻬﺎ ﻣﻊ ﻣﻼﺣﻈﺔ ﺃﻧﻪ ﻳﺘﻢ ﻣﻄﺎﺑﻘﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻋﻠﻰ ﻧﻔﺲ‬
‫ﺍﳌﺴﺘﻮﻯ ﻓﻘﻂ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪106‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪offsetParent‬‬
‫‪-‬‬

‫)]‪parent([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳌﻄﺎﺑﻘﺔ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﲢﺘﻮﻱ ﻋﻠﻰ ﺍﻵﺑﺎﺀ ﺍﳌﺒﺎﺷﺮﻳﻦ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ‬
‫ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻌﺒﲑ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ expr‬ﻟﺘﺮﺷﻴﺢ ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻵﺑﺎﺀ ﺍﻟﱵ ﳝﻜﻦ ﻣﻄﺎﺑﻘﺘﻬﺎ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺍﺳﻢ ﺍﻟﻌﻨﺼﺮ ﺍﻷﺏ ﲜﺎﻧﺐ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪107‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪prev([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻘﺮﻳﺒﺔ ﺍﻟﺴﺎﺑﻘﺔ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﳝﻜﻦ ﺃﻥ ﺗﻄﺒﻖ ﻋﻠﻴﻬﺎ ﺍﻟﺸﺮﻭﻁ‬
‫ﺍﶈﺪﺩﺓ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻌﺒﲑ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ ,expr‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﺑﻌﺾ ﺧﺼﺎﺋﺺ ﺍﻟﻌﻨﺼﺮ ﺍﻟﻘﺮﻳﺐ ﺍﻟﺴﺎﺑﻖ‬
‫ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻋﻨﺪ ﺍﻟﻨﻘﺮ ﻋﻠﻰ ﺍﻟﺰﺭ‪:‬‬

‫‪108‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪109‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪prevAll([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻘﺮﻳﺒﺔ ﺍﻟﺴﺎﺑﻘﺔ )ﺍﻟﱵ ﻋﻠﻰ ﻧﻔﺲ ﺍﳌﺴﺘﻮﻯ( ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﳝﻜﻦ‬
‫ﲢﺪﻳﺪ ﺷﺮﻭﻁ ﻣﻄﺎﺑﻘﺔ ﻫﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻌﺒﲑ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ ,expr‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺧﺼﺎﺋﺺ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻟﱵ ﺗﺴﺒﻖ ﺁﺧﺮ ﻋﻨﺼﺮ ‪ div‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪110‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)]‪siblings([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳌﻄﺎﺑﻘﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﻋﻠﻰ ﻧﻔﺲ ﺍﳌﺴﺘﻮﻯ ﺍﻟﺴﺎﺑﻘﺔ ﺃﻭ ﺍﻟﻼﺣﻘﺔ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﳝﻜﻦ‬
‫ﲢﺪﻳﺪ ﺷﺮﻭﻁ ﺍﳌﻄﺎﺑﻘﺔ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻌﺒﲑ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ ,expr‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﻟﻮﻥ ﺧﻂ ﻛﻞ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺄﰐ ﻗﺒﻞ‬
‫ﻭﺑﻌﺪ ﺍﻟﻌﻨﺎﺻﺮ ﺍﶈﺪﺩﺓ ﺑﺎﻟﻜﻼﺱ ‪:hilite‬‬

‫‪111‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪112‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع التسلسلية ‪Chaining Functions‬‬
‫)(‪andSelf‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺇﺿﺎﻓﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﶈﺪﺩﺓ ﺍﳌﺨﺘﺎﺭﺓ ﻣﺴﺒﻘﹰﺎ ﺇﱃ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﺘﺎﺭﺓ ﺣﺎﻟﻴﹰﺎ ﻭﻳﻔﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﰲ‬
‫ﺍﻟﻌﺒﻮﺭ ﻋﱪ ﺍﻟﻌﻨﺎﺻﺮ ﻭﺇﺿﺎﻓﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻗﺒﻞ ﺁﺧﺮ ﺍﺳﺘﺨﺪﺍﻡ ﻟﺘﺎﺑﻊ ﻋﺒﻮﺭ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺍﻟﺒﺤﺚ‬
‫ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﻭﺑﻌﺪﻫﺎ ﺍﻟﺒﺤﺚ ﻋﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﻟﱵ ﺩﺍﺧﻞ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﻭﻳﺘﻢ ﺇﺿﺎﻓﺔ ﻧﺘﻴﺠﺔ ﺍﻟﺒﺤﺚ ﻋﻦ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺇﱃ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﻭﺃﺧﲑﹰﺍ ﺇﺿﺎﻓﺔ ﺍﻟﻜﻼﺱ ‪ border‬ﺇﱃ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﻭ ‪ p‬ﺃﻣﺎ ﺍﻟﺴﻄﺮ ﺍﻟﺬﺍﱐ‬
‫ﻓﻴﻀﻴﻒ ﺧﻠﻔﻴﺔ ﺻﻔﺮﺍﺀ ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﺩﺍﺧﻞ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺑﺪﻭﻥ ﲢﺪﻳﺪ ﺧﻠﻔﻴﺔ ﺻﻔﺮﺍﺀ ﻟﻠﻌﻨﺎﺻﺮ ‪div‬‬
‫ﻭﺫﻟﻚ ﺑﺴﺒﺐ ﻋﺪﻡ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪:adnSelf‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪113‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪end‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻋﺎﺩﺓ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﰲ ﺁﺧﺮ ﻋﻤﻠﻴﺔ ﺍﺳﺘﺪﻋﺎﺀ ﻟﺘﺎﺑﻊ ﻋﺒﻮﺭ ‪Traversing‬‬
‫‪ Function‬ﻳﻌﻴﺪ ﻗﻴﻤﺔ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ jQuery‬ﻭﻗﺪ ﰎ ﺷﺮﺡ ﻫﺬﻩ ﺍﻟﺘﻮﺍﺑﻊ ﰲ ﻗﺴﻢ ﺗﻮﺍﺑﻊ ﺍﻟﻌﺒﻮﺭ ﺇﺿﺎﻓﺔ ﺇﱃ ﺑﻌﺾ‬
‫‪clone, appendTo, prependTo, insertBefore, insertAfter,‬‬ ‫ﺍﻟﺘﻮﺍﺑﻊ ﺍﻷﺧﺮﻯ ﻣﺜﻞ‬
‫‪ ,replaceAll‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺎﺑﻖ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻭﻣﻦ ﰒ ﻳﺘﻢ ﺗﻌﺪﻳﻞ ﺧﺼﺎﺋﺺ ﺍﻟﻌﻨﺎﺻﺮ‬
‫‪ span‬ﺍﳌﻮﺟﻮﺩﺓ ﺩﺍﺧﻠﻬﺎ ﻭﺑﻌﺪ ﺫﻟﻚ ﻳﺘﻢ ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ ‪ end‬ﻟﻠﻌﻮﺩﺓ ﺇﱃ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﻟﺘﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﺃﺧﺮﻯ‬
‫ﻋﻠﻴﻬﺎ‪:‬‬

‫‪114‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪115‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪116‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫توابع التعامل مع المحتوى ‪Manipulation Functions‬‬

‫توابع تغيير المحتوى ‪Changing Contents‬‬

‫)(‪html‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻋﺎﺩﺓ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ html‬ﻷﻭﻝ ﻋﻨﺼﺮ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻪ ﻭﻻ ﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﻠﻰ ﻭﺛﻴﻘﺔ‬
‫‪ XML‬ﺑﺎﻟﺮﻏﻢ ﻣﻦ ﺃﻧﻪ ﻳﻌﻤﻞ ﻋﻠﻰ ﻭﺛﻴﻘﺔ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ ,XHTML‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺷﻴﻔﺮﺓ ﺍﻟـ‬
‫‪ HTML‬ﻟﻠﻌﻨﺼﺮ ‪ p‬ﻋﻦ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺃﻱ ﻋﻨﺼﺮ ‪ p‬ﺃﻭ ﺃﻱ ﻋﻨﺼﺮ ﺩﺍﺧﻞ ﺃﻱ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻨﻮﻉ ‪:p‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪117‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪html(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻐﻴﲑ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪:div‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪118‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪text‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﻋﺎﺩﺓ ﺍﻟﻘﻴﻢ ﺍﻟﻨﺼﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‬
‫ﺣﻴﺚ ﻳﺘﻢ ﺩﻣﺞ ﻛﻞ ﺍﻟﻘﻴﻢ ﺍﻟﻨﺼﻴﺔ ﰲ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ ﻭﺍﺣﺪﺓ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﻷﻭﻝ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ ﻭﻳ‪‬ﺴﻨﺪﻩ ﺇﱃ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﻵﺧﺮ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪119‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪text(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻐﻴﲑ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﻣﻊ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻐﲑ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪120‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع إدراج المعلومات في داخل العناصر ‪Inserting Inside‬‬
‫)‪append(content‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﳊﺎﻕ ﻣﻌﻠﻮﻣﺎﺕ ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻠﺤﻖ ﺷﻴﻔﺮﺓ ‪ HTML‬ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪121‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪appendTo(selector‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﳊﺎﻕ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺎﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ ,selector‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻠﺤﻖ ﲨﻴﻊ ﺑﻴﺎﻧﺎﺕ ﺍﻟﻌﻨﺎﺻﺮ ‪ span‬ﺑﺎﻟﻌﻨﺼﺮ ‪div‬‬
‫ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:foo‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪122‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪prepend(content‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺩﺭﺍﺝ ﺑﻴﺎﻧﺎﺕ ﰲ ﺑﺪﺍﻳﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻀﻴﻒ ﺍﻟﻘﻴﻤﺔ ‪ Hello‬ﺇﱃ ﺑﺪﺍﻳﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪123‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪prependTo(selector‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺩﺭﺍﺝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺇﱃ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺘﻢ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ ,selector‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺪﺭﺝ ﻗﻴﻤﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪span‬‬
‫ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﰲ ﺑﺪﺍﻳﺔ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:foo‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪124‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع إدراج المعلومات خارج العناصر ‪Inserting Outside‬‬
‫)‪after(content‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺩﺭﺍﺝ ﺑﻴﺎﻧﺎﺕ ﺑﻌﺪ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﺍﻟﻮﺳﻴﻂ ‪ content‬ﳑﻜﻦ ﺃﻥ ﻳﻜﻮﻥ ﺷﻴﻔﺮﺓ ‪ HTML‬ﺃﻭ ﻧﺺ ﻋﺎﺩﻱ ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﻌﻴﺪ ﲨﻴﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﺪﺭﺝ ﺍﻟﻜﻠﻤﺔ ‪Hello‬‬
‫ﺑﻌﺪ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻭﻳﻌﻴﺪ ﺍﻟﺘﺎﺑﻊ ‪ after‬ﰲ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ‬
‫ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪125‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪before(content‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺩﺭﺍﺝ ﺑﻴﺎﻧﺎﺕ ﻗﺒﻞ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﺍﻟﻮﺳﻴﻂ ‪ content‬ﳑﻜﻦ ﺃﻥ ﻳﻜﻮﻥ ﺷﻴﻔﺮﺓ ‪ HTML‬ﺃﻭ ﻧﺺ ﻋﺎﺩﻱ ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﻌﻴﺪ ﲨﻴﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﺪﺭﺝ ﺍﻟﻜﻠﻤﺔ ‪Hello‬‬
‫ﻗﺒﻞ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻭﻳﻌﻴﺪ ﺍﻟﺘﺎﺑﻊ ‪ before‬ﰲ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪p‬‬
‫ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪126‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪insertAfter(selector‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺩﺭﺍﺝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﻌﺪ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺘﻢ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ ,selector‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺪﺭﺝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﻣﻊ‬
‫ﳏﺘﻮﺍﻫﺎ ﺑﻌﺪ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:foo‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬ﺍﻟﺸﺮﺡ ﺍﳌﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﻣﻮﻗﻊ ‪ jQuery‬ﺍﻟﺮﲰﻲ ﺍﳋﺎﺹ ‪‬ﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻏﲑ ﺩﻗﻴﻖ‪ ,‬ﻭﺍﻟﺮﺍﺑﻂ ﺍﻟﺘﺎﱄ ﻫﻮ‬
‫ﺍﻟﺸﺮﺡ ﺣﻮﻝ ‪:insertAfter‬‬

‫‪http://docs.jquery.com/Manipulation/insertAfter#content‬‬

‫‪127‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪insertBefore(selector‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺩﺭﺍﺝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻗﺒﻞ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺘﻢ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ‪ ,selector‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺪﺭﺝ ﲨﻴﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﻣﻊ ﳏﺘﻮﺍﻫﺎ ﻗﺒﻞ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:foo‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬ﺍﻟﺸﺮﺡ ﺍﳌﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﻣﻮﻗﻊ ‪ jQuery‬ﺍﻟﺮﲰﻲ ﺍﳋﺎﺹ ‪‬ﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻏﲑ ﺩﻗﻴﻖ‪ ,‬ﻭﺍﻟﺮﺍﺑﻂ ﺍﻟﺘﺎﱄ ﻫﻮ‬
‫ﺍﻟﺸﺮﺡ ﺣﻮﻝ ‪:insertBefore‬‬

‫‪http://docs.jquery.com/Manipulation/insertBefore#content‬‬

‫‪128‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع اإلحاطة )التطويق( ‪Inserting Around‬‬
‫)‪wrap(html‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺸﻴﻔﺮﺓ ﺍﻟﻮﺳﻴﻂ ‪ html‬ﺍﻟﱵ ﳝﻜﻦ ﺃﻥ ﺗﻜﻮﻥ ﺃﻱ ﺻﻴﻐﺔ ‪ html‬ﺻﺤﻴﺤﺔ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﺎﻟﻌﻨﺼﺮ ‪:div‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪129‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪wrap(elem‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺎﻟﻌﻨﺼﺮ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ ,elem‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‬
‫ﺑﺎﻟﻌﻨﺼﺮ ‪:div‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪130‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪wrapAll(html‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺸﻴﻔﺮﺓ ‪ HTML‬ﺍﶈﺪﺩﺓ ﺑﺎﻟﻮﺳﻴﻂ ‪ html‬ﻭﰲ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺑﻌﻨﺼﺮ ﻭﺍﺣﺪ ﻓﻘﻂ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﻮ ﺑﻌﻨﺼﺮ ‪ div‬ﻭﺍﺣﺪ ﻓﻘﻂ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪131‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪wrapAll(elem‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺎﻟﻌﻨﺼﺮ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ ,div‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﺎﻟﻌﻨﺼﺮ ‪:elem‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪132‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪wrapInner(html‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺣﺎﻃﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺼﻴﻐﺔ ﺍﻟـ ‪ HTML‬ﺍﻟﱵ ﰎ ﲢﺪﻳﺪﻫﺎ ﺑﺎﻟﻮﺳﻴﻂ ‪ ,html‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﲨﻴﻊ ﺃﺑﻨﺎﺀ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﺎﻟﻌﻨﺼﺮ >‪:<b‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪133‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪wrapInner(elem‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺣﺎﻃﺔ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺎﻟﻌﻨﺼﺮ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ ,elem‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺣﺎﻃﺔ ﲨﻴﻊ ﺃﺑﻨﺎﺀ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ ﺑﺎﻟﻌﻨﺼﺮ >‪:<b‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪134‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع االستبدال‬
‫)‪replaceWith(content‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻻﺳﺘﺒﺪﺍﻝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﺍﻟﺘﺎﺑﻊ ﺑﺎﶈﺘﻮﻯ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ content‬ﺳﻮﺍﺀ ﻛﺎﻥ ﺷﻴﻔﺮﺓ ‪ HTML‬ﺃﻭ ﻋﻨﺎﺻﺮ ‪ ,DOM‬ﻭﻳﻌﻴﺪ ﺍﻟﺘﺎﺑﻊ ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻟﱵ ﰎ ﺍﺳﺘﺒﺪﺍﻫﻞ ﻋﻠﻰ ﺻﻴﻐﺔ ﻋﻨﺼﺮ ‪ ,jQuery‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺍﺳﺘﺒﺪﺍﻝ ﺃﻱ ﺯﺭ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﺑﻌﻨﺼﺮ ‪:div‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪135‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪replaceAll(selector‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻻﺳﺘﺒﺪﺍﻝ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ‪selector‬‬
‫ﲜﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﻃﺒﻌﹰﺎ ﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻟﱵ ﰎ ﺇﺩﺭﺍﺟﻬﺎ ﺑﺪ ﹰﻻ ﻣﻦ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻘﺪﳝﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺍﺳﺘﺒﺪﺍﻝ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﻭﻣﺎ ﲢﺘﻮﻳﻪ ﺑﺎﻟﻘﻴﻤﺔ‬
‫‪:Paragraph‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪136‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع إدالة العناصر ‪Removing‬‬
‫)(‪empty‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﻣﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ‬
‫ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺑﻨﺎﺀ ﻟﻜﻞ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﻋﻨﺪ‬
‫ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪137‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪remove([expr‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳛﺬﻑ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ‪ expr‬ﺍﻻﺧﺘﻴﺎﺭﻱ ﻟﺘﺮﺷﻴﺢ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﺮﻳﺪ ﺣﺬﻓﻬﺎ‪ ,‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺑﺄﻥ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻻ ﳛﺬﻑ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﻣﻦ ﺍﻟﻜﺎﺋﻦ ‪ jQuery‬ﻭﻟﻜﻦ ﳛﺬﻑ ﲨﻴﻊ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺘﺼﻠﺔ ‪‬ﺬﻩ ﺍﻟﻌﻨﺎﺻﺮ ﻟﺬﻟﻚ ﻓﺈﻥ‪:‬‬

‫ﳚﺐ ﻛﺘﺎﺑﺘﻪ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ ﻟﺘﻔﺎﺩﻱ ﻋﺪﻡ ﺧﺴﺎﺭﺓ ﺍﻷﺣﺪﺍﺙ‪:‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺣﺬﻑ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ‪:‬‬

‫‪138‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫توابع النسخ ‪Copying‬‬

‫)(‪clone‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻨﺴﺦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﻭﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳉﺪﻳﺪﺓ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻧﺴﺦ ﺍﻟﻌﻨﺼﺮ ‪ b‬ﻣﻊ ﳏﺘﻮﺍﻩ ﻭﺇﺩﺭﺍﺟﻪ ﻗﺒﻞ ﺍﻟﻌﻨﺼﺮ ‪:p‬‬

‫‪139‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪clone(bool‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻨﺴﺦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻣﻊ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺘﺼﻠﺔ ‪‬ﺎ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ‬
‫ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳉﺪﻳﺪﺓ ﻭﺍﻟﻮﺳﻴﻂ ‪ bool‬ﻳﺄﺧﺬ ﺍﻟﻘﻴﻤﺔ ‪ true‬ﻟﻠﺴﻤﺎﺡ ﺑﻨﺴﺦ‬
‫ﺍﻷﺣﺪﺍﺙ ﺃﻳﻀﹰﺎ ﺃﻭ ‪ false‬ﻟﻌﺪﻡ ﻧﺴﺦ ﺍﻷﺣﺪﺍﺙ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻧﺴﺦ ﺍﻟﺰﺭ ﻭﺇﺩﺭﺍﺟﻪ ﺑﻌﺪ ﺍﻟﺰﺭ ﺍﳊﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪140‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع األنماط المتعاقبة ‪CSS Functions‬‬

‫‪CSS‬‬
‫)‪css(name‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ﳋﺎﺻﻴﺔ ﳕﻂ ‪ style property‬ﻣﻦ ﺃﻭﻝ ﻋﻨﺼﺮ ﻣﻦ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﺫﻟﻚ ﺑﺘﺤﺪﻳﺪ ﺍﺳﻢ ﺍﳋﺎﺻﻴﺔ ﺑﺎﻟﻮﺳﻴﻂ‬
‫‪ ,name‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺍﳊﺼﻮﻝ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ‪ background-color‬ﻷﻱ ﻋﻨﺼﺮ ‪ div‬ﻣﻮﺟﻮﺩ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ ﻭﺫﻟﻚ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﺑﺎﻟﻔﺄﺭﺓ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪141‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪css(properties‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﻗﻴﻢ ﺧﺼﺎﺋﺺ ﺍﻟﻨﻤﻂ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﺫﻟﻚ ﺑﺘﺤﺪﻳﺪ ﺃﺯﻭﺍﺝ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ ﻣﻦ ﺍﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪:‬‬

‫}‪{key1 : value1, key2 : value2, keyN : valueN‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﻟﻮﻥ ﺍﳋﻠﻔﻴﺔ ﻭﲰﺎﻛﺔ ﺍﳋﻂ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ‬
‫ﻓﻮﻗﻬﺎ ﻭﺗﻐﻴﲑﻩ ﻣﺮﺓ ﺃﺧﺮﻯ ﻋﻨﺪ ﺇﺯﺍﻟﺔ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻣﻦ ﻓﻮﻗﻪ‪:‬‬

‫‪142‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪143‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪css(name, value‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﻗﻴﻤﺔ ﳕﻂ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ‬
‫ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﻭﺫﻟﻚ ﺑﺘﺤﺪﻳﺪ ﺍﲰﻬﺎ ﺑﺎﻟﻮﺳﻴﻂ ‪ name‬ﻭﻗﻴﻤﺘﻬﺎ ﺑﺎﻟﻮﺳﻴﻂ ‪ value‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ‬
‫ﻟﻮﻥ ﺧﻂ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﻋﻨﺪ ﻣﺎﺩﺍﻡ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻗﻬﺎ‪:‬‬

‫‪144‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫توابع التموضع ‪Positioning Functions‬‬

‫)(‪offset‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﺇﺣﺪﺍﺛﻴﺎﺕ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻪ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺗﻮﺍﺑﻊ ﺍﻟﺘﺤﺪﻳﺪ‬
‫ﻭﻫﺬﻩ ﺍﻹﺣﺪﺍﺛﻴﺎﺕ ﺗﻜﻮﻥ ﺑﺎﻟﺒﻴﻜﺴﻞ ﻭﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻛﺎﺋﻦ ﳛﺘﻮﻱ ﻋﻠﻰ ﻗﻴﻤﺘﲔ ‪ ,left, top‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ‬
‫ﻋﺮﺽ ﻗﻴﻤﺔ ‪ left‬ﻭ ‪ top‬ﻵﺧﺮ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪145‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪position‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺤﺼﻮﻝ ﻋﻠﻰ ﻗﻴﻤﺔ ‪ top‬ﻭ ‪ left‬ﻟﻠﻌﻨﺼﺮ ﺍﶈﺪﺩ ﻧﺴﺒﺔ ﺇﱃ ﺇﺣﺪﺍﺛﻴﺎﺕ ﺍﻟﻌﻨﺼﺮ ﺍﻷﺏ‬
‫ﻟﻠﻌﻨﺼﺮ‪ ,‬ﺍﻟﻘﻴﻤﺔ ﺍﻟﱵ ﻳﻌﻴﺪﻫﺎ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻫﻲ ﻛﺎﺋﻦ ﳛﺘﻮﻱ ﻋﻠﻰ ﻗﻴﻤﺘﲔ ﻋﺪﺩﻳﲔ ﺻﺤﻴﺤﲔ‪ ,‬ﻭﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﺗﻈﻬﺮ ﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ ﻓﻘﻂ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﻱ ﻳﺘﻢ ﻋﺮﺽ ﻗﻴﻢ ﻣﻮﻗﻊ ﺃﻭﻝ ﻋﻨﺼﺮ ‪ p‬ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪146‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪scrollTop‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻋﺎﺩﺓ ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ top‬ﺷﺮﻳﻂ ﺍﻟﺘﻨﻘﻞ ﺍﳉﺎﻧﱯ ﻷﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﻭﺗﻜﻮﻥ ﻗﻴﻤﺔ‬
‫ﻋﺪﺩﻳﺔ ﺻﺤﻴﺤﺔﺯﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﻗﻴﻤﺔ‬
‫ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ top‬ﻟﺸﺮﻳﻂ ﺍﻟﺘﻤﺮﻳﺮ ﻷﻭﻝ ﻋﻨﺼﺮ ‪ p‬ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪147‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪scrollTop(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ top‬ﻟﺸﺮﻳﻂ ﺍﻟﺘﻤﺮﻳﺮ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ‬
‫ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺴﺎﺑﻖ ﻳﺘﻢ ﺗﻌﻴﲔ ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ top‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﻟﱵ ﺗﻄﺒﻖ ﺍﻟﻜﻼﺱ ‪ demo‬ﺇﱃ ﺍﻟﻘﻴﻤﻮ ‪:300‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪148‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪scrollLeft‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻋﺎﺩﺓ ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ left‬ﺷﺮﻳﻂ ﺍﻟﺘﻨﻘﻞ ﺍﳉﺎﻧﱯ ﻷﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﻭﺗﻜﻮﻥ ﻗﻴﻤﺔ‬
‫ﻋﺪﺩﻳﺔ ﺻﺤﻴﺤﺔ‪ ,‬ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ‬
‫ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ left‬ﻟﺸﺮﻳﻂ ﺍﻟﺘﻤﺮﻳﺮ ﻷﻭﻝ ﻋﻨﺼﺮ ‪ p‬ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪149‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪scrollLeft(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ left‬ﻟﺸﺮﻳﻂ ﺍﻟﺘﻤﺮﻳﺮ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ‬
‫ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺴﺎﺑﻖ ﻳﺘﻢ ﺗﻌﻴﲔ ﻗﻴﻤﺔ ﺍﻹﺣﺪﺍﺛﻴﺔ ‪ left‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﻟﱵ ﺗﻄﺒﻖ ﺍﻟﻜﻼﺱ ‪ demo‬ﺇﱃ ﺍﻟﻘﻴﻤﻮ ‪:300‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪150‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع العرض واالرتفاع ‪Height and Width Functions‬‬
‫)(‪height‬‬
‫ﻳ‪‬ﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﺭﺗﻔﺎﻉ ﺃﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﺑﺄﺣﺪ ﺗﻮﺍﺑﻊ ﺍﻟﺘﺤﺪﻳﺪ ﻭﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﻌﱪ ﻋﻦ ﻋﺪﺩ ﺻﺤﻴﺢ‬
‫ﻭﻭﺣﺪﺓ ﺍﻟﻘﻴﺎﺱ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻫﻲ ﺍﻟﺒﻴﻜﺴﻞ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺟﺪ ﺛﻼﺛﺔ ﺃﺯﺍﺭ ﻟﻄﺒﺎﻋﺔ ﺍﺭﺗﻔﺎﻉ ﺍﻟﻌﻨﺼﺮ ‪ p‬ﻭﺍﻟﻮﺛﻴﻘﺔ‬
‫‪ document‬ﻭﺍﻟﻨﺎﻓﺬﺓ‪:‬‬

‫‪151‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪152‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪height(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﺍﻻﺭﺗﻔﺎﻉ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ‪ val‬ﻭﻭﺣﺪﺓ ﺍﻟﻘﻴﺎﺱ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻫﻲ ﺍﻟﺒﻴﻜﺴﻞ ﺇﻻ ﺇﻥ ﰎ ﲢﺪﻳﺪ ﻭﺣﺪﺓ ﻗﻴﺎﺱ‬
‫ﳐﺘﻠﻔﺔ ﻣﺜﻞ ‪ %‬ﺃﻭ ‪ ,em‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﺍﺭﺗﻔﺎﻉ ﺃﻱ ﻋﻨﺼﺮ ‪ div‬ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﺑﺎﻟﻔﺄﺭﺓ ﳌﺮﺓ ﻭﺍﺣﺪﺓ ﻓﻘﻂ‪:‬‬

‫‪153‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪width‬‬
‫ﻳ‪‬ﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﺮﺽ ﺃﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﺑﺄﺣﺪ ﺗﻮﺍﺑﻊ ﺍﻟﺘﺤﺪﻳﺪ ﻭﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﻌﱪ ﻋﻦ ﻋﺪﺩ ﺻﺤﻴﺢ‬
‫ﻭﻭﺣﺪﺓ ﺍﻟﻘﻴﺎﺱ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻫﻲ ﺍﻟﺒﻴﻜﺴﻞ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺟﺪ ﺛﻼﺛﺔ ﺃﺯﺍﺭ ﻟﻄﺒﺎﻋﺔ ﻋﺮﺽ ﺍﻟﻌﻨﺼﺮ ‪ p‬ﻭﺍﻟﻮﺛﻴﻘﺔ‬
‫‪ document‬ﻭﺍﻟﻨﺎﻓﺬﺓ‪:‬‬
‫‪154‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪155‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪width(val‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﺍﻟﻌﺮﺽ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ‪ val‬ﻭﻭﺣﺪﺓ ﺍﻟﻘﻴﺎﺱ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻫﻲ ﺍﻟﺒﻴﻜﺴﻞ ﺇﻻ ﺇﻥ ﰎ ﲢﺪﻳﺪ ﻭﺣﺪﺓ ﻗﻴﺎﺱ‬
‫ﳐﺘﻠﻔﺔ ﻣﺜﻞ ‪ %‬ﺃﻭ ‪ ,em‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﻋﺮﺽ ﺃﻱ ﻋﻨﺼﺮ ‪ div‬ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﺑﺎﻟﻔﺄﺭﺓ ﳌﺮﺓ ﻭﺍﺣﺪﺓ ﻓﻘﻂ‪:‬‬

‫‪156‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪innerHeight‬‬
‫ﻳ‪‬ﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﺪﺩ ﺻﺤﻴﺢ ﻳﻌﱪ ﻋﻦ ﻗﻴﻤﺔ ﺍﻻﺭﺗﻔﺎﻉ ﺍﻟﺪﺍﺧﻠﻲ ﻷﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺗﻮﺍﺑﻊ‬
‫ﺍﻟﺘﺤﺪﻳﺪ ﻭﻳﺴﺘﺜﲏ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻹﻃﺎﺭ ‪ Border‬ﻋﻨﺪ ﺣﺴﺎﺏ ﺍﻻﺭﺗﻔﺎﻉ ﺍﻟﺪﺍﺧﻠﻲ ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻭﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ‬

‫‪157‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﻗﻴﻤﺔ ﺍﻻﺭﺗﻔﺎﻉ ﺍﻟﺪﺍﺧﻠﻲ ﻷﻭﻝ ﻋﻨﺼﺮ ‪p‬‬
‫ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪innerWidth‬‬
‫ﻳ‪‬ﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﺪﺩ ﺻﺤﻴﺢ ﻳﻌﱪ ﻋﻦ ﻗﻴﻤﺔ ﺍﻟﻌﺮﺽ ﺍﻟﺪﺍﺧﻠﻲ ﻷﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺗﻮﺍﺑﻊ‬
‫ﺍﻟﺘﺤﺪﻳﺪ ﻭﻳﺴﺘﺜﲏ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻹﻃﺎﺭ ‪ Border‬ﻋﻨﺪ ﺣﺴﺎﺏ ﺍﻟﻌﺮﺽ ﺍﻟﺪﺍﺧﻠﻲ ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻭﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ ﺍﻟﻌﻨﺎﺻﺮ‬
‫ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﻗﻴﻤﺔ ﺍﻟﻌﺮﺽ ﺍﻟﺪﺍﺧﻠﻲ ﻷﻭﻝ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪158‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪outerHeight(margin‬‬
‫ﻳ‪‬ﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﺪﺩ ﺻﺤﻴﺢ ﻳﻌﱪ ﻋﻦ ﻗﻴﻤﺔ ﺍﻻﺭﺗﻔﺎﻉ ﺍﳋﺎﺭﺟﻲ ﻷﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺗﻮﺍﺑﻊ‬
‫ﺍﻟﺘﺤﺪﻳﺪ ﻭﻳﺘﻤﻀﻦ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻹﻃﺎﺭ ‪ Border‬ﻋﻨﺪ ﺣﺴﺎﺏ ﺍﻻﺭﺗﻔﺎﻉ ﺍﳋﺎﺭﺟﻲ ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻭﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ margin‬ﻓﻌﻨﺪ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ‪ true‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ‬
‫ﺇﺩﺧﺎﻝ ﻫﻮﺍﻣﺶ ﺍﻟﻌﻨﺼﺮ ﰲ ﻋﻤﻠﻴﺔ ﺣﺴﺎﺏ ﺍﻻﺭﺗﻔﺎﻉ ﺍﳋﺎﺭﺟﻲ ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﻗﻴﻤﺔ ﺍﻟﻌﺮﺽ ﺍﳋﺎﺭﺟﻲ ﻷﻭﻝ‬
‫ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪159‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪outerWidth(margin‬‬
‫ﻳ‪‬ﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﺪﺩ ﺻﺤﻴﺢ ﻳﻌﱪ ﻋﻦ ﻗﻴﻤﺔ ﺍﻟﻌﺮﺽ ﺍﳋﺎﺭﺟﻲ ﻷﻭﻝ ﻋﻨﺼﺮ ﻳﺘﻢ ﲢﺪﻳﺪﻩ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺗﻮﺍﺑﻊ‬
‫ﺍﻟﺘﺤﺪﻳﺪ ﻭﻳﺘﻤﻀﻦ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺍﻹﻃﺎﺭ ‪ Border‬ﻋﻨﺪ ﺣﺴﺎﺏ ﺍﻟﻌﺮﺽ ﺍﳋﺎﺭﺟﻲ ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻭﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻈﺎﻫﺮﺓ ﻭﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ margin‬ﻓﻌﻨﺪ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ‪ true‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ‬
‫ﺇﺩﺧﺎﻝ ﻫﻮﺍﻣﺶ ﺍﻟﻌﻨﺼﺮ ﰲ ﻋﻤﻠﻴﺔ ﺣﺴﺎﺏ ﺍﻟﻌﺮﺽ ﺍﳋﺎﺭﺟﻲ ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﻗﻴﻤﺔ ﺍﻟﻌﺮﺽ ﺍﳋﺎﺭﺟﻲ ﻷﻭﻝ‬
‫ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪160‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫توابع األحداث ‪Events Functions‬‬

‫توابع تحميل الصفحة ‪Page Load Functions‬‬

‫)‪ready(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻬﻴﺌﺔ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪﻣﺎ ﺗﺼﺒﺢ ﻋﻨﺎﺻﺮ ﺍﻟﺼﻔﺤﺔ ﺟﺎﻫﺰﺓ ﻟﺘﻨﻔﻴﺬ ﺗﻌﻠﻴﻤﺎﺕ‬
‫ﺍﻟـ ‪ JavaScript‬ﻋﻠﻴﻬﺎ‪ ,‬ﻭﻳﻌﺘﱪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻣﻦ ﺃﻫﻢ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻟﱵ ﳚﺐ ﺃﻥ ﺗﺴﺘﺨﺪﻣﻬﺎ ﺣﻴﺚ ﲢﺴﻦ ﻣﻦ ﺃﺩﺍﺀ ﺗﻄﺒﻴﻘﺎﺕ‬
‫ﻼ ﻋﻦ ﺍﳊﺪﺙ ‪ window.onload‬ﻭﺭﺑﻂ‬
‫ﺍﻟﻮﻳﺐ ﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﻣﻜﺘﺒﺔ ﺍﻟـ ‪ .jQuery‬ﻭﻳﻌﺘﱪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺑﺪﻳ ﹰ‬
‫ﺍﻟﺘﻮﺍﺑﻊ ﻣﻌﻪ‪ ,‬ﻭﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ ready‬ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺬﻱ ﲢﺪﺩﻩ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﻣﺒﺎﺷﺮﺓ ﻋﻨﺪﻣﺎ ﻳﺼﺒﺢ ﺑﺎﻹﻣﻜﺎﻥ‬
‫ﻗﺮﺍﺀﺓ ﻋﻨﺎﺻﺮ ﺍﻟﻮﺛﻴﻘﺔ ﻭ ‪ %99.99‬ﻣﻦ ﺷﻴﻔﺮﺍﺕ ﺍﻟـ ‪ JavaScript‬ﺗﺒﺪﺃ ﻋﻤﻠﻬﺎ ﺑﻌﺪ ﲢﻤﻴﻞ ﺍﻟﺼﻔﺤﺔ ﻣﺒﺎﺷﺮﺓ‪.‬‬

‫‪161‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﻭﳝﻜﻦ ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ ‪ ready‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺼﻴﻐﺔ ‪ $(document).ready‬ﺃﻛﺜﺮ ﻣﻦ ﻣﺮﺓ ﺩﺍﺧﻞ ﺻﻔﺤﺘﻚ ﻋﻨﺪﻫﺎ‬
‫ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺘﺼﻠﺔ ﻣﻌﻬﺎ ﺑﺎﻟﺘﺮﺗﻴﺐ ﺍﻟﺬﻱ ﺫﻛﺮﺕ ﻓﻴﻪ‪.‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬ﳚﺐ ﺍﻟﺘﺄﻛﺪ ﻣﻦ ﺃﻥ ﲨﻴﻊ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪ CSS‬ﻳﺘﻢ ﺗﻀﻤﻴﻨﻬﺎ ﰲ ﺍﻟﺼﻔﺤﺔ ﻗﺒﻞ ﺍﺳﺘﺪﻋﺎﺀ ﺗﻮﺍﺑﻊ ﺍﻟـ ‪jQuery‬‬
‫ﻟﺘﻀﻤﻦ ﺑﺄﻥ ﲨﻴﻊ ﺧﺼﺎﺋﺺ ﺍﻟﻌﻨﺎﺻﺮ ﰎ ﺗﻌﺮﻳﻔﻬﺎ ﺑﺸﻜﻞ ﺻﺤﻴﺢ ﻗﺒﻞ ﺍﻟﺒﺪﺀ ﺑﺘﻨﻔﻴﺬ ﺷﻴﻔﺮﺓ ‪ jQuery‬ﻭﺇﻻ ﺳﺘﻈﻬﺮ‬
‫ﻣﺸﺎﻛﻞ ﻣﺘﻌﺪﺩﺓ ﻧﺘﻴﺠﺔ ﻟﺬﻟﻚ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻄﺒﻊ ﺭﺳﺎﻟﺔ ﻋﻨﺪﻣﺎ ﺗﺼﺒﺢ ﻋﻨﺎﺻﺮ ﺍﻟﻮﺛﻴﻘﺔ ﺟﺎﻫﺰﺓ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻌﻬﺎ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫توابع التعامل مع الحدث ‪Event Handling Functions‬‬

‫)‪bind(type, data, fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺗﺎﺑﻊ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻊ ﺣﺪﺙ ﺃﻭ ﺃﻛﺜﺮ ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ‬
‫ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻛﻤﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ bind‬ﻟﺮﺑﻂ ﺗﺎﺑﻊ ﻣﻊ ﺃﺣﺪﺍﺙ ﳐﺼﺼﺔ‪ ,‬ﻭﺍﻟﻘﻴﻢ‬
‫ﺍﳌﻤﻜﻨﺔ ﻟﻠﻮﺳﻴﻂ ‪ type‬ﺍﻟﺬﻱ ﻳﻌﱪ ﻋﻦ ﺣﺪﺙ ﻣﻌﲔ ﻫﻲ‪:‬‬

‫‪162‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick,‬‬
‫‪mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,‬‬
‫‪.mouseleave, change, select, submit, keydown, keypress, keyup, error‬‬

‫ﻭﺍﻟﺘﺎﺑﻊ ﺍﳌﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﻟﻪ ﻭﺳﻴﻂ ‪ e‬ﳛﺘﻮﻱ ﻣﻌﻠﻮﻣﺎﺕ ﻋﻦ ﺍﳊﺪﺙ ﻭﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺃﻃﻠﻖ ﺍﳊﺪﺙ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﻫﺬﺍ ﺍﻟﻜﺎﺋﻦ ﻹﻟﻐﺎﺀ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ﻭﻣﻨﻊ ﺃﻳﻀﹰﺎ ﻋﻤﻠﻴﺔ ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺃﻭ ﻣﺎ ﻳﺴﻤﻰ ﺑـ ‪Event‬‬
‫‪ ,Bubbling‬ﻭﻃﺒﻌﹰﺎ ﻟﺘﻨﻔﻴﺬ ﺫﻟﻚ ﻓﺈﻥ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﳚﺐ ﺃﻥ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ‪ ,false‬ﻭﻃﺒﻌﹰﺎ ﻫﺬﺍ ﺳﻴﻤﻨﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻷﺧﺮﻯ‬
‫ﺍﳌﺘﺼﻠﺔ ﺑﻨﻔﺲ ﺍﳊﺪﺙ ﰲ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻣﻦ ﺍﻟﻌﻤﻞ ﻭﻟﻜﻦ ﻻ ﻳﺆﺛﺮ ﻋﻠﻰ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻷﺧﺮﻯ ﰲ ﻧﻔﺲ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﻭﰲ ﻣﻌﻈﻢ ﺍﳊﺎﻻﺕ ﺗﺴﺘﻄﻴﻊ ﺗﻌﺮﻳﻒ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﻋﻠﻰ ﺃﻧﻪ ﺗﺎﺑﻊ ﳎﻬﻮﻝ ﺃﻭ ﻣﺎ ﻳﺴﻤﻰ ‪ anonymous function‬ﻭﰲ‬
‫ﺣﺎﻝ ﻋﺪﻡ ﻣﻘﺪﺭﺗﻚ ﻋﻠﻰ ﺫﻟﻚ ﳝﻜﻦ ﲤﺮﻳﺮ ﻣﻌﻠﻮﻣﺎﺕ ﺇﺿﺎﻓﻴﺔ ﺗﺘﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ﺍﻟﺜﺎﱐ ‪.data‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﻈﻬﺮ ﻃﺮﻳﻘﺔ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺑﺘﺎﺑﻊ ﻳ‪‬ﻈﻬﺮ ﺭﺳﺎﻟﺔ ﲢﺘﻮﻱ ﻋﻠﻰ ﻧﺺ ﺍﻟﻌﻨﺼﺮ ‪:p‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺜﺎﱐ ﻓﻬﻮ ﻳ‪‬ﻈﻬﺮ ﻃﺮﻳﻘﺔ ﲤﺮﻳﺮ ﻣﻌﻠﻮﻣﺎﺕ ﺇﺿﺎﻓﻴﺔ ﻟﻠﺘﺎﺑﻊ ‪:fn‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺜﺎﻟﺚ ﻳ‪‬ﻈﻬﺮ ﻃﺮﻳﻘﺔ ﻣﻨﻊ ﺍﳊﺪﺙ ‪ submit‬ﰲ ﺍﻟﻨﻤﻮﺫﺝ ‪ form‬ﻣﻦ ﺍﻟﻌﻤﻞ ﻭﻣﻨﻊ ﻋﻤﻠﻴﺔ ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺇﱃ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﻭﺫﻟﻚ ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪:false‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺮﺍﺑﻊ ﻓﻴﻈﻬﺮ ﻛﻴﻒ ﳝﻜﻦ ﻣﻨﻊ ﻋﻤﻞ ﺍﳊﺪﺙ ﺍﻻﻓﺘﺮﺍﺿﻲ ﻓﻘﻂ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ )(‪:preventDefault‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻷﺧﲑ ﻓﻴﻈﻬﺮ ﻛﻴﻔﻴﺔ ﻣﻨﻊ ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺇﱃ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ‬
‫‪:stopPropagation‬‬
‫‪163‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﻈﻬﺮ ﻛﻴﻔﻴﺔ ﺭﺑﻂ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﲝﺪﺙ ﳐﺼﺺ ﻏﲑ ﻣﻮﺟﻮﺩ ﺍﲰﻪ ‪ myCustomEvent‬ﺯﻳﻨﻄﻠﻖ ﻫﺬﺍ‬
‫ﺍﳊﺪﺙ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪164‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪one(type, [data], fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﻟﺘﺎﺑﻊ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﻣﻊ ﺍﳊﺪﺙ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ type‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ‬
‫ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻣﺮﺓ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﻟﻜﻞ ﻋﻨﺼﺮ‬
‫ﺍﺳﺘﺠﺎﺑﺔ ﻟﻠﺤﺪﺙ ‪.type‬‬

‫ﻭﺍﻟﺘﺎﺑﻊ ﺍﳌﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﻟﻪ ﻭﺳﻴﻂ ‪ e‬ﳛﺘﻮﻱ ﻣﻌﻠﻮﻣﺎﺕ ﻋﻦ ﺍﳊﺪﺙ ﻭﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺃﻃﻠﻖ ﺍﳊﺪﺙ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﻫﺬﺍ ﺍﻟﻜﺎﺋﻦ ﻹﻟﻐﺎﺀ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ﻭﻣﻨﻊ ﺃﻳﻀﹰﺎ ﻋﻤﻠﻴﺔ ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺃﻭ ﻣﺎ ﻳﺴﻤﻰ ﺑـ ‪Event‬‬
‫‪ ,Bubbling‬ﻭﻃﺒﻌﹰﺎ ﻟﺘﻨﻔﻴﺬ ﺫﻟﻚ ﻓﺈﻥ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﳚﺐ ﺃﻥ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ‪ ,false‬ﻭﻃﺒﻌﹰﺎ ﻫﺬﺍ ﺳﻴﻤﻨﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻷﺧﺮﻯ‬
‫ﺍﳌﺘﺼﻠﺔ ﺑﻨﻔﺲ ﺍﳊﺪﺙ ﰲ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻣﻦ ﺍﻟﻌﻤﻞ ﻭﻟﻜﻦ ﻻ ﻳﺆﺛﺮ ﻋﻠﻰ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻷﺧﺮﻯ ﰲ ﻧﻔﺲ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫‪165‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﻭﰲ ﻣﻌﻈﻢ ﺍﳊﺎﻻﺕ ﺗﺴﺘﻄﻴﻊ ﺗﻌﺮﻳﻒ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﻋﻠﻰ ﺃﻧﻪ ﺗﺎﺑﻊ ﳎﻬﻮﻝ ﺃﻭ ﻣﺎ ﻳﺴﻤﻰ ‪ anonymous function‬ﻭﰲ‬
‫ﺣﺎﻝ ﻋﺪﻡ ﻣﻘﺪﺭﺗﻚ ﻋﻠﻰ ﺫﻟﻚ ﳝﻜﻦ ﲤﺮﻳﺮ ﻣﻌﻠﻮﻣﺎﺕ ﺇﺿﺎﻓﻴﺔ ﺗﺘﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ﺍﻟﺜﺎﱐ ‪.data‬‬

‫ﻭﺍﻟﻘﻴﻢ ﺍﳌﻤﻜﻨﺔ ﻟﻠﻮﺳﻴﻂ ‪ type‬ﻫﻲ‪:‬‬

‫‪blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick,‬‬

‫‪mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,‬‬
‫‪.mouseleave, change, select, submit, keydown, keypress, keyup, error‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺗﺎﺑﻊ ﻣﻊ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪166‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪trigger(event, [data‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺣﺪﺙ ﻣﻦ ﺃﺣﺪﺙ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﳑﺎ ﻳﺆﺩﻱ ﺇﱃ ﺃﻥ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﰲ ﺣﺎﻝ ﺃ‪‬ﺎ ﻣﻮﺟﻮﺩﺓ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻫﺎ ﻣﻦ ﻗﺒﻞ ﺍﳌﺘﺼﻔﺢ‪ .‬ﻋﻠﻰ‬
‫ﺳﺒﻴﻞ ﺍﳌﺜﺎﻝ ﲤﺮﻳﺮ ﺍﻟﻘﻴﻤﺔ ‪ submit‬ﺇﱃ ﺍﻟﺘﺎﺑﻊ ‪ trigger‬ﺳﻴﺆﺩﻱ ﺇﱃ ﺇﺭﺳﺎﻝ ﻣﻌﻠﻮﻣﺎﺕ ﺍﻟﻨﻤﻮﺫﺝ ‪ form‬ﺃﻭ ﻣﺎ ﻳﻄﻠﻖ‬
‫ﻋﻠﻴﻪ ‪ submit‬ﻭﳝﻜﻦ ﻣﻨﻊ ﻫﺬﺍ ﺍﳊﺪﺙ ﻣﻦ ﺗﻨﻔﻴﺬ ﻭﻇﻴﻔﺘﻪ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ‬
‫ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺃﺣﺪ ﺗﻮﺍﺑﻊ ﺍﻟﺮﺑﻂ ﻣﺜﻞ ‪ bind‬ﻭ ‪ .one‬ﻛﻤﺎ ﳝﻜﻦ ﻟﻠﺘﺎﺑﻊ ‪ trigger‬ﻗﺪﺡ ﺃﺣﺪﺍﺙ ﺧﺎﺻﺔ‬
‫ﻼ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪.bind‬‬
‫ﻏﲑ ﻣﻮﺟﻮﺩﺓ ﺑﺸﻜﻞ ﺍﻓﺘﺮﺍﺿﻲ ﻭﻟﻜﻦ ﻫﺬﺍ ﺍﳊﺪﺙ ﳚﺐ ﺃﻥ ﻳﻜﻮﻥ ﻣﺴﺠ ﹰ‬

‫‪167‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺍﻟﺘﺎﺑﻊ ﺍﳌﺘﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﻟﻪ ﻭﺳﻴﻂ ‪ e‬ﳛﺘﻮﻱ ﻋﻠﻰ ﻣﻌﻠﻮﻣﺎﺕ ﻣﻔﻴﺪﺓ ﻣﺜﻞ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﻗﺪﺡ ﺍﳊﺪﺙ‪ .‬ﻭﺍﳉﺪﻳﺪ ﰲ‬
‫‪ jQuery 1.3‬ﻫﻮ ﺃﻥ ﲨﻴﻊ ﺍﻷﺣﺪﺍﺙ ﺍﻟﱵ ﻳﺘﻢ ﻗﺪﺣﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ trigger‬ﺗﻮﺭﺙ ﺍﳊﺪﺙ ﺍﳌﻘﺪﻭﺡ ﺇﱃ ﲨﻴﻊ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ‪ .‬ﻓﻌﻠﻰ ﺳﺒﻴﻞ ﺍﳌﺜﺎﻝ ﰲ ﺣﺎﻝ ﻗﺪﺡ ﺣﺪﺙ ﻋﻠﻰ ﻣﺴﺘﻮﻯ ﺍﻟﻌﻨﺼﺮ ‪ p‬ﻓﺈﻥ ﻫﺬﺍ ﺍﳊﺪﺙ ﺳﻴﺘﻢ‬
‫ﻗﺪﺣﻪ ﻟﻠﻌﻨﺼﺮ ﺍﻷﺏ ﻟﻠﻌﻨﺼﺮ ‪ p‬ﻭﻫﻜﺬﺍ ﺣﱴ ﻳﺼﻞ ﺍﳊﺪﺙ ﺇﱃ ﻣﺴﺘﻮﻯ ﺍﻟﻜﺎﺋﻦ ‪ .document‬ﻭﺍﻟﻜﺎﺋﻦ ‪ e‬ﺍﻟﺬﻱ ﻫﻮ‬
‫ﻭﺳﻴﻂ ‪ fn‬ﺳﻴﺤﺘﻮﻱ ﻋﻠﻰ ﺍﳋﺎﺻﻴﺔ ‪ target‬ﺍﻟﺬﻱ ﳝﺜﻞ ﺍﻟﻌﻨﺼﺮ ﺍﻷﻭﻝ ﻋﻠﻰ ﻗﹸﺪﺡ ﺍﳊﺪﺙ ﻟﻪ‪ .‬ﻭﳝﻜﻦ ﺇﻳﻘﺎﻑ ﻋﻤﻠﻴﺔ‬
‫ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺑﺎﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ ‪ stopPropagation‬ﺃﻭ ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ ﺍﻟﺘﺎﺑﻊ ‪.fn‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺮﺳﻞ ﻣﻌﻠﻮﻣﺎﺕ ﺃﻭﻝ ﳕﻮﺫﺝ ﰲ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﺍﳋﺎﺩﻡ ﺑﺪﻭﻥ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ‪:submit‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴ‪‬ﻈﻬﺮ ﻛﻴﻔﻴﺔ ﺇﺭﺳﺎﻝ ﻣﻌﻠﻮﻣﺎﺕ ﺍﻟﻨﻤﻮﺫﺝ ﺍﻷﻭﻝ ﰲ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﺍﳋﺎﺩﻡ ﺑﺘﻤﺮﻳﺮ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ‬
‫‪ jQuery.Event‬ﺑﺪ ﹰﻻ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ ‪:submit‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴ‪‬ﻈﻬﺮ ﻛﻴﻔﻴﺔ ﲤﺮﻳﺮ ﺑﻴﺎﻧﺎﺕ ﻋﻨﺪ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ click‬ﻷﻱ ﻋﻨﺼﺮ ‪ p‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳ‪‬ﻈﻬﺮ ﻛﻴﻔﻴﺔ ﲤﺮﻳﺮ ﺑﻴﺎﻧﺎﺕ ﻋﻨﺪ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ logged‬ﻟﻠﻌﻨﺼﺮ ‪ body‬ﻭﻟﻜﻦ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻜﺎﺋﻦ‬
‫‪:jQuery.Event‬‬

‫ﻭﻫﺬﻩ ﻃﺮﻳﻘﺔ ﺃﺧﺮﻯ ﻟﺘﻤﺮﻳﺮ ﺑﻴﺎﻧﺎﺕ ﻋﻨﺪ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ logged‬ﻟﻠﻌﻨﺼﺮ ‪ body‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻜﺎﺋﻦ‬
‫‪:jQuery.Event‬‬

‫‪168‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻔﻴﻪ ﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ click‬ﻟﻠﺰﺭ ‪ button 1‬ﻣﻦ ﺧﻼﻝ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪:button 2‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪169‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪triggerHandler(event, [data‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺄﺣﺪ ﺃﺣﺪﺍﺙ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ‪ ,‬ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺸﺎﺑﻪ ﲤﺎﻣﹰﺎ ﺍﻟﺘﺎﺑﻊ‬
‫‪ trigger‬ﺑﻮﺟﻮﺩ ﻓﺎﺭﻗﲔ ﻓﻘﻂ‪:‬‬

‫• ﺍﻷﻭﻝ ﻫﻮ ﺃﻥ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ﺍﳌﺪﻋﻮﻣﺔ ﻣﻦ ﻗﺒﻞ ﺍﳌﺘﺼﻔﺢ ﻻ ﺗﻌﻤﻞ ﻭﻻ ﻳﺘﻢ ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺇﱃ‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﻭﺍﻷﺣﺪﺍﺙ ‪ Live Events‬ﻻ ﻳﺘﻢ ﻗﺪﺣﻬﺎ ﺃﻳﻀﹰﺎ‪.‬‬

‫‪170‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫• ﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ﻓﻘﻂ ﻷﻭﻝ ﻋﻨﺼﺮ ﻣﻦ ﳎﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ ,jQuery‬ﻭﻳﻌﻴﺪ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻧﻔﺲ ﺍﻟﻘﻴﻤﺔ ﺍﻟﱵ‬
‫ﻳﻌﻴﺪﻫﺎ ﺍﻟﺘﺎﺑﻊ ﺍﳌﺮﺗﺒﻂ ﺑﺎﳊﺪﺙ ‪ event‬ﻟﻠﻌﻨﺼﺮ ﺍﻷﻭﻝ ﻭﰲ ﺣﺎﻝ ﺃﻥ ﳏﻤﻮﻋﺔ ﺍﻟﻌﻨﺎﺻﺮ ‪ jQuery‬ﻻ ﲢﺘﻮﻱ‬
‫ﻋﻠﻰ ﻋﻨﺎﺻﺮ ﻓﺈﻥ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﻌﻴﺪ ﺍﻟﻘﻴﻤﺔ ‪ ,undefined‬ﻭﺍﻟﻮﺳﻴﻂ ‪ event‬ﻳﻘﺒﻞ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﺃﻭ ﻣﺜﻴﻞ ﻋﻦ‬
‫ﺍﻟﻜﺎﺋﻦ ‪ .jQuery.Event‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺗﺎﺑﻌﻲ ﺍﻟﻘﺪﺡ ‪ trigger‬ﻭ‬
‫‪ triggerHandler‬ﻭﻻ ﺣﻆ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ﺍﻟﺜﺎﱐ ﺑﺄﻧﻪ ﺳﻴﺘﻢ ﺗﺸﻐﻴﻞ ﺍﻟﺘﺎﺑﻊ ﺍﳌﺮﺗﺒﻂ ﺑﺎﳊﺪﺙ‬
‫‪ focus‬ﺑﺪﻭﻥ ﺃﻥ ﻳﺘﻢ ﺗﺸﻐﻴﻞ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ focus‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ‬
‫‪ focus‬ﻫﻲ ﺃﻥ ﻳﺼﺒﺢ ﻣﺆﺷﺮ ﺍﻟﻜﺘﺎﺑﺔ ﺩﺍﺧﻞ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪171‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪unbind([type], [fn‬‬
‫ﻭﻇﻴﻔﺔ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻫﻲ ﻋﻜﺲ ﻭﻇﻴﻔﺔ ﺍﻟﺘﺎﺑﻊ ‪ bind‬ﺣﻴﺚ ﻳﺘﻢ ﻓﻚ ﺍﺭﺗﺒﺎﻁ ﺃﺣﺪﺍﺙ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ‬
‫ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺎﻟﺘﻮﺍﺑﻊ ﺍﻟﱵ ﺗﺮﺗﺒﻂ ﻣﻌﻬﺎ‪ ,‬ﻭﻋﻨﺪ ﻋﺪﻡ ﲤﺮﻳﺮ ﺃﻱ ﻭﺳﻴﻂ ﻓﻌﻨﺪﻫﺎ‬
‫ﺳﻴﻄﺒﻖ ﺍﻟﺘﺎﺑﻊ ﻋﻠﻰ ﲨﻴﻊ ﺍﻷﺣﺪﺍﺙ‪ ,‬ﺃﻣﺎ ﰲ ﺣﺎﻝ ﲤﺮﻳﺮ ﻗﻴﻤﺔ ﻟﻠﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ type‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﻓﻚ ﺍﺭﺗﺒﺎﻁ ﲨﻴﻊ‬
‫ﺍﻷﺣﺪﺍﺙ ﺍﻟﱵ ﺗﻮﺍﻓﻖ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,type‬ﺃﻣﺎ ﰲ ﺣﺎﻟﺔ ﲤﺮﻳﺮ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ fn‬ﺃﻳﻀﹰﺎ ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﻓﻚ ﺍﺭﺗﺒﺎﻁ ﺍﻟﺘﻮﺍﺑﻊ‬
‫ﺍﻟﱵ ﺗﺘﻮﺍﻓﻖ ﻣﻊ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,fn‬ﻛﻤﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻔﻚ ﺍﺭﺗﺒﺎﻁ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺨﺼﺼﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳﺘﻢ ﻓﻚ ﺍﺭﺗﺒﺎﻁ ﺍﻟﺘﺎﺑﻊ ‪ aClick‬ﻣﻦ ﺍﻟﺰﺭ ﺍﻷﺻﻔﺮ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪:Unbind Click‬‬

‫‪172‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪173‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع األحداث المباشرة ‪Live Events Functions‬‬
‫)‪live(type, fn‬‬
‫ﰎ ﺇﺿﺎﻓﺔ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﰲ ‪ jQuery 1.3‬ﻭﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ﺍﳌﺘﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ‪ type‬ﺍﻟﺬﻱ ﻳﻘﺒﻞ ﻗﻴﻤﺔ‬
‫ﻧﺼﻴﺔ ﺗﻌﱪ ﻋﻦ ﺍﳊﺪﺙ ﺑﺎﻟﺘﺎﺑﻊ ﺍﳌﺘﻤﺜﻞ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﻭﺗﺘﻢ ﻋﻤﻠﻴﺔ ﺍﻟﺮﺑﻂ ﻋﻠﻰ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ‬
‫ﻼ‪ ,‬ﻭﺍﻟﻘﻴﻢ ﺍﳌﻤﻜﻨﺔ ﻟﻠﻮﺳﻴﻂ‬
‫ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺍﳊﺎﻟﻴﺔ ﻭﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﻤﺎﺛﻠﺔ ﺍﻟﱵ ﺳﻴﺘﻢ ﺇﺿﺎﻓﺘﻬﺎ ﻣﺴﺘﻘﺒ ﹰ‬
‫‪click, dblclick, mousedown, mouseup, mousemove, mouseover, :type‬‬
‫‪mouseout, keydown, keypress, keyup‬‬

‫‪174‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﻋﻠﻰ ﻋﻜﺲ ﺍﻟﺘﺎﺑﻊ ‪ bind‬ﻓﺈﻧﻪ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ live‬ﻟﺮﺑﻂ ﺣﺪﺙ ﻭﺍﺣﺪ ‪ type‬ﻣﻊ ﺍﻟﺘﺎﺑﻊ ‪ fn‬ﰲ ﻛﻞ ﻣﺮﺓ ﻳﺘﻢ‬
‫ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ ‪ .live‬ﻭﺍﻟﺘﺎﺑﻊ ‪ live‬ﻳﻌﻤﻞ ﺑﺸﻜﻞ ﻣﺸﺎﺑﻪ ﻟﻠﺘﺎﺑﻊ ‪ bind‬ﻣﻊ ﺑﻌﺾ ﺍﻟﻔﺮﻭﻕ ﺍﳍﺎﻣﺔ‪:‬‬

‫• ﻋﻨﺪﻣﺎ ﺗﺴﺘﺨﺪﻡ ﺍﻟﺘﺎﺑﻊ ‪ live‬ﻟﺮﺑﻂ ﺣﺪﺙ ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺗﻄﺒﻴﻖ ﻋﻤﻠﻴﺔ ﺍﻟﺮﺑﻂ ﻋﻠﻰ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳊﺎﻟﻴﺔ‬
‫ﻭﺍﻟﻌﻨﺎﺻﺮ ﺍﳉﺪﻳﺪﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻋﻠﻰ ﺳﺒﻴﻞ ﺍﳌﺜﺎﻝ ﻋﻨﺪ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ li‬ﺍﳊﺎﻟﻴﺔ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ ﻓﺈﻥ ﻋﻤﻠﻴﺔ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ click‬ﺳﺘﺘﺄﺛﺮ ‪‬ﺎ ﺍﻟﻌﻨﺎﺻﺮ ‪ li‬ﺍﻟﱵ ﻳﺘﻢ ﺇﺿﺎﻓﺘﻬﺎ ﺇﱃ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﻫﺬﻩ ﺍﳊﺎﻟﺔ‬
‫ﻏﲑ ﻣﻮﺟﻮﺩﺓ ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪.bind‬‬
‫• ﺍﻷﺣﺪﺍﺙ ﺍﳌﺒﺎﺷﺮﺓ ﻻ ﻳﺘﻢ ﺗﻮﺭﻳﺜﻬﺎ ﻟﻠﻌﻨﺎﺻﺮ ﺍﻵﺑﺎﺀ ﺑﺎﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﻘﻠﻴﺪﻳﺔ ﻭﻻ ﳝﻜﻦ ﺇﻳﻘﺎﻑ ﻫﺬﻩ ﺍﻷﺣﺪﺍﺙ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ stopPropagation‬ﺃﻭ ﺍﻟﺘﺎﺑﻊ ‪ ,stopImmediatePropagtion‬ﻓﻌﻠﻰ ﺳﺒﻴﻞ‬
‫ﺍﳌﺜﺎﻝ ﻋﻨﺪ ﺭﺑﻂ ﺣﺪﺛﻲ ‪ click‬ﻭﺍﺣﺪ ﻟﻠﻌﻨﺼﺮ ‪ li‬ﻭﺍﻵﺧﺮ ﻟﻠﻌﻨﺼﺮ ‪ li a‬ﻓﻌﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ‪li a‬‬
‫ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﺈﻥ ﺍﳊﺪﺛﲔ ﻋﻠﻰ ‪ li a‬ﻭﺍﻟﻌﻨﺼﺮ ‪ li‬ﺳﻴﺘﻢ ﻗﺪﺣﻬﻤﺎ ﻷﻧﻪ ﰲ ﺣﺎﻝ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ bind‬ﻟﺮﺑﻂ‬
‫ﺍﻷﺣﺪﺍﺙ ﻓﺈﻥ ﺍﳊﺪﺙ ﺍﻟﺬﻱ ﳛﺪﺙ ﺿﻤﻦ ﻋﻨﺼﺮ ﺩﺍﺧﻠﻲ ﻳﺆﺩﻱ ﺇﱃ ﺗﻮﺭﻳﺚ ﺍﳊﺪﺙ ﺇﱃ ﺍﻟﻌﻨﺼﺮ ﺍﻷﺏ ﻛﻤﺎ‬
‫ﺣﺪﺙ ﰲ ﻣﺜﺎﻟﻨﺎ ﺍﻟﺴﺎﺑﻖ‪.‬‬
‫ﻼ )…(‪ $('li a').live‬ﺳﻴﻌﻤﻞ ﺃﻣﺎ ﺍﺳﺘﺨﺪﺍﻡ‬
‫• ﺍﻟﺘﺎﺑﻊ ‪ live‬ﻳﻌﻤﻞ ﻓﻘﻂ ﺑﻌﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺗﻮﺍﺑﻊ ﺍﻟﺘﺤﺪﻳﺪ‪ ,‬ﻓﻤﺜ ﹰ‬
‫ﺍﻟﺘﺎﺑﻊ )…(‪ $('a', someElem).live‬ﻟﻦ ﻳﻌﻤﻞ ﺃﻳﻀﹰﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻟﻦ ﻳﻌﻤﻞ‬
‫)…(‪.$('a').parent().live‬‬

‫ﻭﻹﺯﺍﻟﺔ ﺍﻟﺮﺑﻂ ﻣﻊ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺒﺎﺷﺮﺓ ﳚﺐ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ ,die‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﻋﻤﻞ ﺍﻟﺘﺎﺑﻊ ‪ ,live‬ﺣﻴﺚ‬
‫ﺃﻥ ﺍﻟﻌﻨﺼﺮ ﺍﳉﺪﻳﺪ ‪ p‬ﺍﻟﺬﻱ ﺗﺘﻢ ﺇﺿﺎﻓﺘﻪ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ‪ p‬ﺍﻷﻭﻝ ﻓﺈﻥ ﺍﳊﺪﺙ ‪ click‬ﺳﻴﻜﻮﻥ ﻓﻌﺎ ﹰﻻ ﻋﻨﺪ‬
‫ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪175‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪die(type, fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺘﻮﺍﺑﻊ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ live‬ﻭﺑﺪﻭﻥ ﲢﺪﻳﺪ ﺃﻱ ﻗﻴﻤﺔ‬
‫ﻟﻠﻮﺳﻴﻄﲔ ‪ type‬ﻭ ‪ fn‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺇﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺮﺗﺒﻄﺔ‪ ,‬ﺃﻣﺎ ﰲ ﺣﺎﻝ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ type‬ﻋﻨﺪﻫﺎ‬
‫ﺳﻴﺘﻢ ﺇﺯﺍﻟﺔ ﺍﻷﺣﺪﺍﺙ ﺍﻟﱵ ﺗﻄﺎﺑﻖ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,type‬ﻭﺑﺘﺤﺪﻳﺪ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ fn‬ﺳﻴﺘﻢ ﺇﺯﺍﻟﺔ ﲨﻴﻊ ﺍﻷﺣﺪﺍﺙ ﺍﳌﺮﺗﺒﻄﺔ‬
‫ﺍﻟﱵ ﺗﺘﻄﺎﺑﻖ ﻣﻊ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ type‬ﻭﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪.fn‬‬

‫‪176‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪177‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع التفاعل مع العناصر ‪Interaction Helpers Functions‬‬
‫)‪hover(over, out‬‬
‫ﳛﺎﻛﻲ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺣﺮﻛﺔ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ‪ ,‬ﺣﻴﺚ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪over‬‬
‫ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﺑﻴﻨﻤﺎ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ out‬ﻋﻨﺪ ﺧﺮﻭﺝ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻣﻦ ﻓﻮﻕ‬
‫ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ ﻭﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ over‬ﻣﺮﺓ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺿﺎﻓﺔ ﺍﻟﻜﻼﺱ ‪ hover‬ﺇﱃ ﺃﻱ ﻋﻨﺼﺮ ‪ td‬ﻳﺘﻢ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻗﻬﺎ‪ ,‬ﻭﻋﻨﺪ ﺇﺧﺮﺍﺝ ﻣﺆﺷﺮ‬
‫ﺍﻟﻔﺄﺭﺓ ﻣﻦ ﺍﻟﻌﻨﺼﺮ ‪ td‬ﻳﺘﻢ ﺇﺯﺍﻟﺔ ﺍﻟﻜﻼﺱ ‪ hover‬ﻣﻦ ﻫﺬﺍ ﺍﻟﻌﻨﺼﺮ‪:‬‬

‫‪178‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﺘﺎﻟﻴﺔ ﻓﺘﻤﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ hover‬ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﺍﻟﻌﻨﺼﺮ ‪ td‬ﻭﺫﻟﻚ ﺑﻔﻚ ﺍﺭﺗﺒﺎﻁ ﺍﳊﺪﺛﲔ‬
‫‪ mouseenter‬ﻭﺍﳊﺪﺙ ‪ mouseleave‬ﻣﻦ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ td‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺗﺎﺑﻊ ﻓﻚ ﺍﻻﺭﺗﺒﺎﻁ ‪:unbind‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺗﻐﻴﲑ ﺑﻌﺾ ﺧﺼﺎﺋﺺ ﺍﻟﻌﻨﺎﺻﺮ ‪ li‬ﻋﻨﺪ ﻭﺿﻊ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻗﻬﺎ ﻭﺇﻋﺎﺩ‪‬ﺎ ﺇﱃ ﺣﺎﻟﺘﻬﺎ ﺍﻟﺴﺎﺑﻘﺔ‬
‫ﺑﻌﺪ ﺧﺮﻭﺝ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪179‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)… ‪toggle(fn1, fn2, [fn3], [fn4],‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻨﻔﻴﺬ ﺗﺎﺑﻊ ﻭﺍﺣﺪ ﰲ ﻛﻞ ﻣﺮﺓ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﺍﶈﺪﺩ‪ ,‬ﺣﻴﺚ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ‬
‫‪ fn1‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻷﻭﻝ ﻣﺮﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻭﻣﻦ ﰒ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ fn2‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻟﻠﻤﺮﺓ ﺍﻟﺜﺎﻧﻴﺔ ﲟﺆﺷﺮ‬
‫ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﻭﻫﻜﺬﺍ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﺍﻟﻜﻼﺱ ﻟﻜﻞ ﺧﻠﻴﺔ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻬﺎ ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ‪ ,‬ﺣﻴﺚ ﻳﺘﻢ‬
‫ﰲ ﺍﳌﺮﺓ ﺍﻷﻭﱃ ﺇﺿﺎﻓﺔ ﺍﻟﻜﻼﺱ ‪ selected‬ﻭﰲ ﺍﳌﺮﺓ ﺍﻟﺜﺎﻧﻴﺔ ﻳﺘﻢ ﺇﺯﺍﻟﺔ ﺍﻟﻜﻼﺱ ‪:selected‬‬

‫‪180‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫توابع األحداث ‪Event Helpers Functions‬‬

‫)(‪blur‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ blur‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ blur‬ﻟﻠﻌﻨﺼﺮ ﻛﻤﺎ ﻳﺘﻢ ﺗﻨﻔﻴﺬ‬
‫ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ blur‬ﻛﻤﺎ ﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ blur‬ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ‬
‫ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ .blur‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ blur‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﻔﻘﺪ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺘﺮﻛﻴﺰ ﺇﻣﺎ‬
‫‪181‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺰﺭ ‪ Tab‬ﺃﻭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ‪ .‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ blur‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪p‬‬
‫ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫)‪blur(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﻟﺘﺎﺑﻊ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﺑﺎﳊﺪﺙ ‪ blur‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ blur‬ﻟﻜﻞ ﻋﻨﺎﺻﺮ ﺍﻟـ ‪input‬‬
‫ﻭﻫﻨﺎ ﺗﺘﻤﺜﻞ ﺑﺎﳊﻘﻠﲔ ﺍﻟﻨﺼﻴﲔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪182‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪change‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ change‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ change‬ﻟﻠﻌﻨﺼﺮ ﻛﻤﺎ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ change‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ change‬ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ‬
‫‪ false‬ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ .change‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ change‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﻔﻘﺪ‬
‫ﺍﻟﻌﻨﺼﺮ ﺍﻟﺘﺮﻛﻴﺰ ﺇﻣﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺰﺭ ‪ Tab‬ﺃﻭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻭﻗﺪ ﰎ ﺗﻐﻴﲑ ﻗﻴﻤﺘﻪ‪.‬‬

‫)‪change(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﻟﺘﺎﺑﻊ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ fn‬ﺑﺎﳊﺪﺙ ‪ change‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ change‬ﻟﻜﻞ ﻋﻨﺼﺮ ‪select‬‬
‫ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﻣﻊ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺬﻱ ﻳﻌﺮﺽ ﺍﻟﻘﻴﻢ ﺍﻟﱵ ﰎ ﲢﺪﻳﺪﻫﺎ ﰲ ﺍﻟﻌﻨﺼﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪183‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪click‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ click‬ﻟﻠﻌﻨﺼﺮ‪ .‬ﻭﰲ ﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪184‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪click(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ click‬ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﻋﻨﺼﺮ ﻣﺎ‪ ,‬ﻭﻳﺘﻢ ﺗﻌﺮﻳﻒ‬
‫ﻋﻤﻠﻴﺔ ﺍﻟﻨﻘﺮ ‪ click‬ﺑﺄ‪‬ﺎ ﺍﳊﺪﺛﲔ ‪ mousedown‬ﻭ ‪ mouseup‬ﰲ ﻧﻔﺲ ﺍﳌﻜﺎﻥ ﻣﻦ ﺍﻟﺸﺎﺷﺔ ﻭﺗﺴﻠﺴﻞ‬
‫ﺍﻷﺣﺪﺍﺙ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬

‫• ‪mousedown‬‬
‫• ‪mouseup‬‬
‫• ‪click‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﺘﺎﺑﻊ ﻳﺆﺩﻱ ﺇﱃ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ‪p‬‬
‫ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪185‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪dbclick‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ dbclick‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ dbclick‬ﻟﻠﻌﻨﺼﺮ ﻛﻤﺎ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ ,dbclick‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ dbclick‬ﺑﺈﻋﺎﺩﺓ‬
‫ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ .dbclick‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ dbclick‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ‬
‫ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﻋﻨﺼﺮ ﻣﺎ ﻣﺮﺗﲔ ﻣﺘﺘﺎﻟﻴﺘﲔ‪.‬‬

‫)‪dbclick(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ click‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ click‬ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﻋﻨﺼﺮ ﻣﺎ ﻣﺮﺗﲔ‬
‫ﻣﺘﺘﺎﻟﻴﺘﲔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ dbclick‬ﻷﻭﻝ ﻋﻨﺼﺮ ‪ div‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﺘﺎﺑﻊ ﻳﻐﲑ ﺑﻌﺾ‬
‫ﺧﺼﺎﺋﺺ ﺍﻟﻌﻨﺼﺮ‪:‬‬
‫‪186‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪187‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪error‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ error‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ error‬ﻟﻠﻌﻨﺼﺮ ﻛﻤﺎ ﻳﺘﻢ ﺗﻨﻔﻴﺬ‬
‫ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ error‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ error‬ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ‬
‫ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪.error‬‬

‫)‪error(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ error‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﺑﺸﻜﻞ ﻋﺎﻡ ﻻ ﻳﻮﺟﺪ ﻣﻘﻴﺎﺱ ﻋﺎﳌﻲ ﻟﻠﺤﺪﺙ ‪ ,error‬ﻭﻟﻜﻦ ﰲ ﻣﻌﻈﻢ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻳﺘﻢ ﻗﺪﺡ‬
‫ﺍﳊﺪﺙ ‪ error‬ﻋﻨﺪﻣﺎ ﳛﺪﺙ ﺧﻄﺄ ‪ JavaScript‬ﰲ ﺍﻟﺼﻔﺤﺔ ﻣﺜﻞ ﺇﺳﻨﺎﺩ ﻣﺴﺎﺭ ﺻﻮﺭﺓ ﻏﲑ ﻣﻮﺟﻮﺩﺓ ﻟﻠﺼﻔﺔ ‪src‬‬
‫ﻟﻠﻌﻨﺼﺮ ‪.img‬‬

‫ﺇﻥ ﰎ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ error‬ﻣﻦ ﻗﺒﻞ ﺍﻟﻜﺎﺋﻦ ‪ window‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﲤﺮﻳﺮ ﺛﻼﺛﺔ ﻗﻴﻢ ﻛﻮﺳﻄﺎﺀ ﻟﻠﺘﺎﺑﻊ ﺍﳌﺮﺗﺒﻂ ﺑﺎﳊﺪﺙ‬
‫‪:error‬‬

‫• ﺭﺳﺎﻟﺔ ﺗﺸﺮﺡ ﺍﳋﻄﺄ )ﻣﺜﻞ‪ :‬ﺍﳌﺘﺤﻮﻝ ﻏﲑ ﻣﻌﺮﻑ‪ ,‬ﻳﻮﺟﺪ ﻣﻌﺎﻣﻞ ﻣﻔﻘﻮﺩ ﰲ ﺍﻟﺘﻌﺒﲑ ‪.(...‬‬
‫• ﺍﳌﺴﺎﺭ ﺍﻟﻜﺎﻣﻞ ﻟﻠﺼﻔﺤﺔ ﺍﻟﱵ ﺣﺪﺙ ﻓﻴﻬﺎ ﺍﳋﻄﺄ‪.‬‬
‫• ﺭﻗﻢ ﺍﻟﺴﻄﺮ ﺍﻟﺬﻱ ﺣﺪﺙ ﻓﻴﻪ ﺍﳋﻄﺄ‪.‬‬

‫)(‪focus‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ focus‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ focus‬ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻋﻄﺎﺀ ﺍﻟﺘﺮﻛﻴﺰ ﻟﻠﺤﻘﻞ ﺍﻟﻨﺼﻲ ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ ﺗﺴﺎﻭﻱ ‪:login‬‬

‫)‪focus(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ focus‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ focus‬ﻋﻨﺪﻣﺎ ﻳﺴﺘﻘﺒﻞ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺘﺮﻛﻴﺰ ﺇﻣﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﻨﻘﻞ ﻋﱪ ﺍﻟـ ‪Tab‬‬
‫ﺃﻭ ﺑﻨﻘﻞ ﺍﻟﺘﺮﻛﻴﺰ ﺑﺎﺳﺘﺨﺪﺍﻡ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻨﻊ ﺍﳌﺴﺘﺨﺪﻡ ﻣﻦ ﺍﻟﻜﺘﺎﺑﺔ ﰲ ﺃﻱ ﺣﻘﻞ ﻧﺼﻲ ﻭﺫﻟﻚ‬
‫ﺑﻘﺪﺡ ﺍﳊﺪﺙ ‪ blur‬ﻟﻠﺤﻘﻞ ﺍﻟﻨﺼﻲ ﻋﻨﺪﻣﺎ ﻳﺼﺒﺢ ﺍﻟﺘﺮﻛﻴﺰ ﻋﻠﻴﻪ‪:‬‬

‫‪188‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﻧﺺ ﲜﺎﻧﺐ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﺍﻟﺬﻱ ﻳﺴﺘﻘﺒﻞ ﺍﻟﺘﺮﻛﻴﺰ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪keydown‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ keydown‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ‬
‫ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ keydown‬ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻛﻤﺎ‬
‫ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ keydown‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪keydown‬‬

‫‪189‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ .keydown‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ keydown‬ﻳﺘﻢ‬
‫ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﰲ ﻟﻮﺣﺔ ﺍﳌﻔﺎﺗﻴﺢ‪.‬‬

‫)‪keydown(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ keydown‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ‬
‫ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ keydown‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﰲ ﻟﻮﺣﺔ‬
‫ﺍﳌﻔﺎﺗﻴﺢ‪ .‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ keydown‬ﻟﻠﻜﺎﺋﻦ ‪ window‬ﺑﺘﺎﺑﻊ‪:‬‬

‫)(‪keypress‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ keypress‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ keypress‬ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻛﻤﺎ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ keypress‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ keypress‬ﺑﺈﻋﺎﺩﺓ‬
‫ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ .keypress‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ keypress‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ‬
‫ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﰲ ﻟﻮﺣﺔ ﺍﳌﻔﺎﺗﻴﺢ‪.‬‬

‫)‪keypress(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ keypress‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ keypress‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﰲ ﻟﻮﺣﺔ‬
‫ﺍﳌﻔﺎﺗﻴﺢ‪ ,‬ﻭﻳﻌﺮﻑ ﺍﳊﺪﺙ ‪ keypress‬ﻋﻠﻰ ﺃﻧﻪ ﺍﳊﺪﺛﲔ ‪ keydown‬ﻭ ‪ keypress‬ﻋﻠﻰ ﻧﻔﺲ ﺍﳌﻔﺘﺎﺡ‪ ,‬ﻭﺗﺴﻠﺴﻞ‬
‫ﻫﺬﻩ ﺍﻷﺣﺪﺍﺙ ﻫﻮ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬

‫• ‪keydown‬‬
‫• ‪keypress‬‬
‫• ‪keyup‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﺍﻷﺣﺮﻑ ﻭﺍﻟﻔﺮﺍﻏﺎﺕ ﺍﻟﱵ ﺗﺘﻢ ﻃﺒﺎﻋﺘﻬﺎ ﰲ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ‪:‬‬

‫‪190‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪191‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪keyup‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ keyup‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ keyup‬ﻟﻠﻌﻨﺼﺮ‪ ,‬ﻛﻤﺎ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ keyup‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ keyup‬ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ‬
‫‪ false‬ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ .keyup‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ keydown‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﺘﻢ‬
‫ﲢﺮﻳﺮ ﺍﻟﺰﺭ ﰲ ﻟﻮﺣﺔ ﺍﳌﻔﺎﺗﻴﺢ ﺑﻌﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ‪.‬‬

‫‪192‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪keyup(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ keyup‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻣﻦ ﺍﳌﻌﻠﻮﻡ ﺃﻥ ﺍﳊﺪﺙ ‪ keydown‬ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﰲ ﻟﻮﺣﺔ ﺍﳌﻔﺎﺗﻴﺢ‪.‬‬
‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ keyup‬ﺑﺘﺎﺑﻊ ﻳﺴﺘﺠﻴﺐ ﻓﻘﻂ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﺍﳍﺮﻭﺏ ‪:escape key‬‬

‫)‪load(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ load‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﺍﻟﺘﺎﺑﻊ ﺑﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﲢﻤﻴﻞ ﺍﻟﻌﻨﺼﺮ ﺍﶈﺪﺩ‪ .‬ﻭﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺮﺑﻂ ﻣﻊ ﺍﳊﺪﺙ ‪load‬‬
‫ﻟﻠﻜﺎﺋﻦ ‪ window‬ﻓﺈﻥ ﻫﺬﺍ ﺍﳊﺪﺙ ﺳﻴﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﲢﻤﻴﻞ ﻛﺎﻣﻞ ﳏﺘﻮﻳﺎﺕ ﺍﻟﻮﺛﻴﻘﺔ ﲟﺎ ﻓﻴﻬﺎ ﺍﻹﻃﺎﺭﺍﺕ‬
‫‪ Frames‬ﻭﺍﻟﺼﻮﺭ ﻭﻋﻨﺎﺻﺮ ﺍﻟﺼﻔﺤﺔ ﺑﺸﻜﻞ ﻛﺎﻣﻞ‪ .‬ﺃﻣﺎ ﰲ ﺣﺎﻝ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ﻟﻠﺮﺑﻂ ﻣﻊ ﺍﳊﺪﺙ ‪ load‬ﻟﻌﻨﺼﺮ ﻣﺎ‬
‫ﻓﺈﻥ ﻫﺬﺍ ﺍﳊﺪﺙ ﻳﺘﻢ ﻗﺪﺣﻪ ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﲢﻤﻴﻞ ﻛﺎﻣﻞ ﳏﺘﻮﻳﺎﺕ ﺍﻟﻌﻨﺼﺮ ﻭﺍﻟﻌﻨﺼﺮ ﻧﻔﺴﻪ‪.‬‬

‫ﺳﻴﻌﻤﻞ ﺍﳊﺪﺙ ‪ load‬ﰲ ﺣﺎﻝ ﺭﺑﻄﻪ ﻣﻊ ﺗﺎﺑﻊ ﻣﺎ ﻗﺒﻞ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﲢﻤﻴﻞ ﺍﻟﻌﻨﺼﺮ ﻭﺇﻻ ﻓﺈﻥ ﺷﻴﺌﹰﺎ ﻟﻦ ﳛﺪﺙ‪ ,‬ﻃﺒﻌﹰﺎ ﻫﺬﻩ‬
‫ﺍﳊﺎﻟﺔ ﻟﻦ ﲢﺪﺙ ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺼﻴﻐﺔ )(‪ $(document).ready‬ﻷ‪‬ﺎ ﲢﻞ ﻫﺬﻩ ﺍﳌﺸﻜﻠﺔ ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ‪ .‬ﻭﰲ‬
‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺷﻴﻔﺮﺓ ﻣﺎ ﻋﻨﺪ ﲢﻤﻴﻞ ﻛﺎﻣﻞ ﺍﻟﺼﻔﺤﺔ ﻣﻊ ﻛﺎﻣﻞ ﺍﻟﺼﻮﺭ ﻭﻋﻨﺎﺻﺮ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺿﺎﻓﺔ ﺍﻟﻜﻼﺱ ‪ bigImg‬ﺇﱃ ﻛﻞ ﺻﻮﺭﺓ ﺍﺭﺗﻔﺎﻋﻬﺎ ﺃﻛﱪ ﻣﻦ ‪ 100‬ﺑﻌﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﲢﻤﻴﻠﻬﺎ‬
‫ﻣﺒﺎﺷﺮﺓ‪:‬‬

‫‪193‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪mousedown(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mousedown‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mousedown‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﻋﻨﺼﺮ ﻣﺎ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺭﺑﻂ ﺍﳊﺪﺙ ‪ mousedown‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪194‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪mouseenter(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mouseenter‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mouseenter‬ﻋﻨﺪ ﲢﺮﻳﻚ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﻋﻨﺼﺮ ﻣﺎ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳﻮﺿﺢ ﺍﻟﻔﺮﻕ ﺑﲔ ﺍﳊﺪﺛﲔ ‪ mouseenter‬ﻭ ‪:mouseover‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪195‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪196‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫)‪mouseleav(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mouseleave‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mouseleave‬ﻣﺮﺓ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﻋﻨﺪ ﲢﺮﻳﻚ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﺧﺎﺭﺝ ﺍﻟﻌﻨﺼﺮ‬
‫ﺍﳊﺎﱄ‪ ,‬ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﺍﻟﻔﺮﻕ ﺑﲔ ﺍﳊﺪﺛﲔ ‪ mouseenter‬ﻭ ‪:mouseover‬‬

‫‪197‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪198‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪mousemove(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mousemove‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mousemove‬ﻋﻨﺪ ﲢﺮﻳﻚ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻓﻮﻕ ﻃﺎﳌﺎ ﺃﻧﻪ ﻓﻮﻕ ﺍﻟﻌﻨﺼﺮ‪,‬‬
‫ﻭﺍﻟﺘﺎﺑﻊ ﺍﳌﺮﺗﺒﻂ ﺑﺎﳊﺪﺙ ﻟﻪ ﻭﺳﻴﻂ ‪ e‬ﻓﻴﻪ ﺧﺎﺻﻴﺘﲔ ﳘﺎ ‪ .clientX‬ﻭ ‪ .clientY‬ﻳﻌﱪﺍﻥ ﻋﻦ ﺇﺣﺪﺍﺛﻴﺎﺕ ﻣﺆﺷﺮ‬
‫ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ‪ .‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺇﺣﺪﺍﺛﻴﺎﺕ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻨﺪ ﲢﺮﻳﻜﻪ ﻓﻮﻕ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻷﺻﻔﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪199‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪mouseout(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mouseout‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ‬
‫ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mouseout‬ﻋﻨﺪ ﲢﺮﻳﻚ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﺧﺎﺭﺝ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ‪ ,‬ﻭﺍﳌﺜﺎﻝ‬
‫ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﺍﻟﻔﺮﻕ ﺑﲔ ﺍﳊﺪﺛﲔ ‪ mouseenter‬ﻭ ‪:mouseover‬‬

‫‪200‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪201‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪202‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫)‪mouseover(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mouseover‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mouseover‬ﻋﻨﺪ ﲢﺮﻳﻚ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﺩﺍﺧﻞ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ‪.‬‬

‫)‪mouseup(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ mouseup‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ mouseup‬ﻋﻨﺪ ﲢﺮﻳﺮ ﻣﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﺑﻌﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪203‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪resize(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ resize‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ resize‬ﻋﻨﺪ ﺗﻐﻴﲑ ﺃﺑﻌﺎﺩ ﺍﻟﻌﻨﺼﺮ‪:‬‬

‫)‪scroll(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ scroll‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ scroll‬ﻋﻨﺪ ﺗﻐﻴﲑ ﺣﺎﻟﺔ ﺷﺮﻳﻂ ﺍﻟﺘﻤﺮﻳﺮ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺍﻻﺳﺘﺠﺎﺑﺔ ﻟﺘﻐﲑ ﻣﻜﺎﻥ ﺷﺮﻳﻂ‬
‫ﺍﻟﺘﻤﺮﻳﺮ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫‪204‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪205‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪select‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ select‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ select‬ﻟﻠﻌﻨﺼﺮ ﻛﻤﺎ ﻳﺘﻢ ﺗﻨﻔﻴﺬ‬
‫ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ select‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ select‬ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ‬
‫ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ ,select‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ select‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ input‬ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫)‪select(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ select‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ‬
‫ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ select‬ﻋﻨﺪ ﲢﺪﻳﺪ ﻧﺺ ﰲ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﺃﻭ ﺣﱴ ﰲ ﺍﳊﻘﻞ ﺍﻟﻨﺼﻲ ﺍﳌﺘﻌﺪﺩ ﺍﻷﺳﻄﺮ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪206‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)(‪submit‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻘﺪﺡ ﺍﳊﺪﺙ ‪ submit‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ‬
‫ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﲨﻴﻊ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ submit‬ﻟﻠﻌﻨﺼﺮ ﻛﻤﺎ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ submit‬ﻭﳝﻜﻦ ﻣﻨﻊ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﺪﺙ ‪ submit‬ﺑﺈﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ‬
‫‪ false‬ﻣﻦ ﺃﺣﺪ ﺍﻟﺘﻮﺍﺑﻊ ﺍﳌﺮﺗﺒﻄﺔ ﺑﺎﳊﺪﺙ ‪ ,submit‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ submit‬ﻷﻭﻝ ﳕﻮﺫﺝ‬
‫‪ form‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫)‪submit(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ submit‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﻳﺘﻢ ﻗﺪﺡ ﺍﳊﺪﺙ ‪ submit‬ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺇﺭﺳﺎﻝ ﻣﻌﻠﻮﻣﺎﺕ ﺍﻟﻨﻤﻮﺫﺝ ‪ form‬ﺇﱃ ﺍﳋﺎﺩﻡ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﻳﺘﻢ ﻣﻨﻊ ﺍﳊﺪﺙ ‪ submit‬ﻣﻦ ﺍﻟﺘﻨﻔﻴﺬ ﻣﺎﱂ ﻳﺘﻢ ﻛﺘﺎﺑﺔ ﺍﻟﻜﻠﻤﺔ ‪ correct‬ﰲ ﺍﳊﺼﻞ ﺍﻟﻨﺼﻲ‪:‬‬

‫‪207‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪208‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪unload(fn‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﺮﺑﻂ ﺍﳊﺪﺙ ‪ unload‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ‬
‫ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪.‬‬

‫‪209‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع التأثيرات الحركية والشكلية ‪Effects Functions‬‬
‫التوابع األساسية ‪Basics Functions‬‬
‫)(‪show‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺃﻭ ﺑﻌﻀﻬﺎ‬
‫ﰲ ﺣﺎﻝ ﺃ‪‬ﺎ ﳐﻔﻴﺔ ﺃﻱ ﻏﲑ ﻇﺎﻫﺮﺓ ﰲ ﺍﻟﺼﺤﻔﺔ‪ ,‬ﻭﻻ ﻳﻬﻢ ﻛﻴﻒ ﰎ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﺳﻮﺍﺀ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ )(‪ hide‬ﺃﻭ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ‪ display:none‬ﰲ ﺍﻟـ ‪ ,CSS‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﺨﻔﻴﺔ ﰲ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)]‪show(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺸﻜﻞ‬
‫ﺗﺪﺭﳚﻲ ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ ‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ‬
‫ﻋﺮﺽ ﻭﺍﺭﺗﻔﺎﻉ ﻭﺷﻔﺎﻓﻴﺔ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ‬
‫ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﺨﻔﻴﺔ ﺑﺸﻜﻞ ﺑﻄﻴﺊ ﺑﻌﺪ ‪ 600‬ﻣﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ‪:‬‬

‫‪210‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪hide‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺃﻭ ﺑﻌﻀﻬﺎ‬
‫ﰲ ﺣﺎﻝ ﺃ‪‬ﺎ ﻇﺎﻫﺮﺓ ﰲ ﺍﻟﺼﺤﻔﺔ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﻌﺪ ﲢﻤﻴﻞ‬
‫ﺍﻟﺼﻔﺤﺔ ﻭﳝﻜﻦ ﺇﺧﻔﺎﺀ ﺃﻱ ﻋﻨﺼﺮ ﺭﺍﺑﻂ ‪ a‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ‪:‬‬

‫‪211‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)]‪hide(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ ﺑﺸﻜﻞ‬
‫ﺗﺪﺭﳚﻲ ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ ‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ‬
‫ﻋﺮﺽ ﻭﺍﺭﺗﻔﺎﻉ ﻭﺷﻔﺎﻓﻴﺔ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ‬
‫ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬
‫‪212‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﰲ ﺍﻟﺼﻔﺤﺔ ﲟﺠﺮﺩ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ﺣﻼﻝ ‪ 600‬ﻣﻴﻠﻠﻲ‬
‫ﺛﺎﻧﻴﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)(‪toggle‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻺﻇﻬﺎﺭ ﺃﻭ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﺣﺎﻟﺔ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﻟﻴﺔ ﻓﺈﻥ ﻛﺎﻥ ﻇﺎﻫﺮﹰﺍ ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺇﺧﻔﺎﺅﻩ ﻭﺇﻥ ﻛﺎﻥ ﳐﻔﻴﹰﺎ ﺳﻴﺘﻢ ﺇﻇﻬﺎﺭﻩ‪:‬‬

‫‪213‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)‪toggle(switch‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻺﻇﻬﺎﺭ ﺃﻭ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ switch‬ﺣﻴﺚ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﻋﻨﺪﻣﺎ ﺗﻜﻮﻥ ﻗﻴﻤﺔ ‪ switch‬ﺗﺴﺎﻭﻱ ‪ false‬ﻭﻳﺘﻢ‬
‫ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﰲ ﺣﺎﻟﺔ ﻛﺎﻧﺖ ﻗﻴﻤﺔ ‪ switch‬ﺗﺴﺎﻭﻱ ‪:true‬‬

‫‪214‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)]‪toggle(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻟﻺﻇﻬﺎﺭ ﺃﻭ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﺣﺎﻟﺔ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﻟﻴﺔ ﻓﺈﻥ ﻛﺎﻥ ﻇﺎﻫﺮﹰﺍ ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺇﺧﻔﺎﺅﻩ ﻭﺇﻥ ﻛﺎﻥ ﳐﻔﻴﹰﺎ ﺳﻴﺘﻢ ﺇﻇﻬﺎﺭﻩ‪ ,‬ﻭﺗﺘﻢ ﺍﻟﻌﻤﻠﻴﺔ ﺑﺸﻜﻞ‬
‫ﺗﺪﺭﳚﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ‪ speed‬ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ‬
‫‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﻋﺮﺽ ﻭﺍﺭﺗﻔﺎﻉ ﻭﺷﻔﺎﻓﻴﺔ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ‬
‫‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫‪215‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬
‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪216‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع االنزالق ‪Sliding Functions‬‬
‫)]‪slideDown(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺘﻐﻴﲑ ﻗﻴﻤﺔ ﺧﺎﺻﻴﺔ ﺍﻻﺭﺗﻔﺎﻉ ‪ height‬ﻟﻠﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ‬
‫ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ ‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﺍﺭﺗﻔﺎﻉ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﺳﻴﺘﻢ ﺇﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﻋﻨﺪ ﺍﻟﻨﻘﺮ ﻟﻠﻤﺮﺓ ﺍﻷﻭﱃ ﻋﻠﻰ ﺍﻟﻜﻠﻤﺔ !‪,Click me‬‬
‫ﻭﺇﺧﻔﺎﺅﻫﺎ ﲨﻴﻌﻬﺎ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻣﺮﺓ ﺛﺎﻧﻴﺔ ﻋﻠﻰ ﺍﻟﻜﻠﻤﺔ !‪:Click me‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪217‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪slideUp(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺘﻐﻴﲑ ﻗﻴﻤﺔ ﺧﺎﺻﻴﺔ ﺍﻻﺭﺗﻔﺎﻉ ‪ height‬ﻟﻠﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ‬
‫ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ ‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﺍﺭﺗﻔﺎﻉ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ div‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﻋﻠﻰ !‪ Click me‬ﻭﻳﺘﻢ ﺇﻇﻬﺎﺭﻫﺎ ﻣﺮﺓ‬
‫ﺃﺧﺮﻯ ﻋﻨﺪ ﺍﻟﻨﻘﺮ ﻋﻠﻰ !‪ Click me‬ﻣﺮﺓ ﺃﺧﺮﻯ‪:‬‬

‫‪218‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪219‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪slideToggle(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻹﻇﻬﺎﺭ ﺃﻭ ﺇﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﺣﺎﻟﺔ ﺍﻟﻌﻨﺼﺮ ﺍﳊﺎﻟﻴﺔ ﻓﺈﻥ ﻛﺎﻥ ﻇﺎﻫﺮﹰﺍ ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺇﺧﻔﺎﺅﻩ ﻭﺇﻥ ﻛﺎﻥ ﳐﻔﻴﹰﺎ ﺳﻴﺘﻢ ﺇﻇﻬﺎﺭﻩ‪ ,‬ﻭﺗﺘﻢ ﺍﻟﻌﻤﻠﻴﺔ ﺑﺸﻜﻞ‬
‫ﺗﺪﺭﳚﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ‪ speed‬ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ‬
‫‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﻋﺮﺽ ﻭﺍﺭﺗﻔﺎﻉ ﻭﺷﻔﺎﻓﻴﺔ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ‬
‫‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪220‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع التالشي ‪Fading Functions‬‬
‫)]‪fadeIn(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻇﻬﺎﺭ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺘﻐﻴﲑ ﻗﻴﻤﺔ ﺧﺎﺻﻴﺔ ﺍﻟﺸﻔﺎﻓﻴﺔ ‪ opacity‬ﻟﻠﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ‬
‫ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ ‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﺷﻔﺎﻓﻴﺔ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﺃﻭﻝ ﻋﻨﺼﺮ ‪ div‬ﳐﻔﻲ ﻋﻨﺪ ﺍﻟﻨﻘﺮ ﻋﻠﻰ ‪:Click here‬‬

‫‪221‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)]‪fadeout(speed, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﺧﻔﺎﺀ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺘﻐﻴﲑ ﻗﻴﻤﺔ ﺧﺎﺻﻴﺔ ﺍﻟﺸﻔﺎﻓﻴﺔ ‪ opacity‬ﻟﻠﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻭﺑﻌﺪﻫﺎ ﻳﻨﻔﺬ ﺗﺎﺑﻊ‬
‫‪222‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫ﺍﺧﺘﻴﺎﺭﻱ ﻋﻨﺪ ﺍﻧﺘﻬﺎﺀ ﻋﻤﻠﻴﺔ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻳﺘﻢ ﲤﺮﻳﺮﻩ ﻛﻮﺳﻴﻂ ‪ ,callback‬ﻭﻳﺘﻢ ﺗﻐﻴﲑ ﺷﻔﺎﻓﻴﺔ ﺍﻟﻌﻨﺼﺮ ﺑﺸﻜﻞ ﺩﻳﻨﺎﻣﻜﻲ‬
‫ﺑﻨﺎﺀ ﻋﻠﻰ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ ,speed‬ﻭﺍﻟﻮﺳﻴﻂ ‪ speed‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ‪ span‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﳌﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪223‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ‪ p‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ‪:‬‬

‫‪224‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫)]‪fadeTo(speed, opacity, [callback‬‬

‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻐﻴﲑ ﻗﻴﻤﺔ ﺍﻟﺸﻔﺎﻓﻴﺔ ‪ opacity‬ﳉﻤﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﶈﺪﺩ‬
‫ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ‪ opacity‬ﻷﻱ ﻋﻨﺼﺮ ‪ div‬ﻣﻮﺟﻮﺩ ﰲ‬
‫ﺍﻟﺼﻔﺤﺔ ﻳﺘﻢ ﺍﻟﻀﻐﻂ ﻋﻠﻴﻪ ﲟﺆﺷﺮ ﺍﻟﻔﺄﺭﺓ ﺇﱃ ﻗﻴﻤﺔ ﻋﺸﻮﺍﺋﻴﺔ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪225‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺃﻳﻀﹰﺎ ﺗﻐﻴﲑ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ‪ opacity‬ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺃﻱ ﻋﻨﺼﺮ ‪ div‬ﻣﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ‬
‫ﺇﱃ ﺍﻟﻘﻴﻤﺔ ‪:0.25‬‬

‫‪226‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪227‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪228‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫توابع الحركة ‪Animate Functions‬‬
‫)]‪animate(params, [duration], [easing], [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻨﻔﻴﺬ ﺑﻌﺾ ﺍﻟﺘﺄﺛﲑﺍﺕ ﺍﳊﺮﻛﻴﺔ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﺍﳌﻔﻬﻮﻡ ﺍﻟﺮﺋﻴﺴﻲ‬
‫ﻟﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻤﺤﻮﺭ ﺣﻮﻝ ﻗﻴﻢ ﺍﻟﻮﺳﻴﻂ ‪ params‬ﺍﻟﺬﻱ ﻫﻮ ﻋﺒﺎﺭﺓ ﻋﻦ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ ﺣﻴﺚ ﺗﻌﱪ‬
‫ﺍﳌﻔﺎﺗﻴﺢ ﻋﻦ ﺧﺼﺎﺋﺺ ‪ CSS‬ﺃﻣﺎ ﺍﻟﻘﻴﻢ ﻓﻬﻲ ﺍﻟﻘﻴﻢ ﺍﳉﺪﻳﺪﺓ ﻟﻜﻞ ﺧﺎﺻﻴﺔ ﻣﺜﻞ … ‪ height, top, opacity‬ﻣﻊ‬
‫ﻼ ﳚﺐ ﻛﺘﺎﺑﺔ ‪ marginLeft‬ﺑﺪ ﹰﻻ ﻋﻦ‬
‫ﻣﻼﺣﻈﺔ ﺃﻥ ﻫﺬﻩ ﺍﳋﺼﺎﺋﺺ ﳚﺐ ﻛﺘﺎﺑﺘﻬﺎ ﺑﺎﻟﺸﻜﻞ ‪ camel case‬ﺃﻱ ﻣﺜ ﹰ‬
‫‪ margin-left‬ﺃﻱ ﻫﻲ ﻧﻔﺲ ﺍﻟﻜﻠﻤﺔ ﻭﻟﻜﻦ ﰎ ﺣﺬﻑ ﺍﶈﺮﻑ "‪ "-‬ﻭﺃﻭﻝ ﺣﺮﻑ ﻣﻦ ﺍﻟﻜﻠﻤﺔ ﺍﻟﺜﺎﻧﻴﺔ ﻳﻜﻮﻥ ﻛﺒﲑﹰﺍ‪.‬‬

‫ﻭﺍﻟﻘﻴﻢ ﺍﳌﺮﺗﺒﻄﺔ ﻣﻊ ﺍﳌﻔﺎﺗﻴﺢ ﺗﻌﱪ ﻋﻦ ﺍﻟﻘﻴﻢ ﺍﻟﱵ ﺳﺘﻨﺘﻬﻲ ﺇﻟﻴﻬﺎ ﻗﻴﻤﺔ ﻛﻞ ﺧﺎﺻﻴﺔ‪ ,‬ﻓﻌﻨﺪﻣﺎ ﻳﺘﻢ ﲤﺮﻳﺮ ﻗﻴﻤﺔ ﺭﻗﻤﻴﺔ ﻛﻘﻴﻤﺔ‬
‫ﺟﺪﻳﺪﺓ ﻟﻠﺨﺎﺻﻴﺔ ﻋﻨﺪﻫﺎ ﻓﺈﻥ ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺳﺘﺘﺪﺭﺝ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ﺍﳊﺎﻟﻴﺔ ﺇﱃ ﺍﻟﻘﻴﻤﺔ ﺍﳉﺪﻳﺪﺓ‪ ,‬ﺃﻣﺎ ﺇﻥ ﰎ ﲢﺪﻳﺪ ﻗﻴﻢ‬
‫ﻧﺼﻴﺔ ﻣﺜﻞ ‪ hid, show‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﳍﺬﻩ ﺍﻟﻘﻴﻢ‪ .‬ﺃﻳﻀﹰﺎ ﳝﻜﻦ ﺗﻐﻴﲑ ﻗﻴﻢ ﺍﳋﺼﺎﺋﺺ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﻭﺣﺪﺍﺕ ﻗﻴﺎﺱ ﳐﺘﻠﻔﺔ ‪ em, %‬ﰲ ﺣﺎﻝ ﺃ‪‬ﺎ ﻣﺪﻋﻮﻣﺔ ﻣﻦ ﻗﺒﻞ ﺍﳋﺎﺻﻴﺔ ﻧﻔﺴﻬﺎ‪ ,‬ﻛﻤﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ =‪ +‬ﺃﻭ‬
‫=‪ -‬ﻗﺒﻞ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ﻟﻜﻲ ﻳﺘﻢ ﺗﻐﻴﲑ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ﺑﺸﻜﻞ ﻣﺘﺰﺍﻳﺪ ﺃﻡ ﻣﺘﻨﺎﻗﺺ‪.‬‬

‫ﺃﻣﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻮﺳﻴﻂ ‪ duration‬ﻓﻔﻲ ﺣﺎﻝ ﺃﻥ ﻗﻴﻤﺘﻪ ﻣﺴﺎﻭﻳﺔ ﺍﻟﻘﻴﻤﺔ ‪ 0‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺗﻐﻴﲑ ﲨﻴﻊ ﻗﻴﻢ ﺍﳋﺼﺎﺋﺺ ﺍﶈﺪﺩﺓ‬
‫ﺑﺎﻟﻮﺳﻴﻂ ‪ params‬ﺑﺪﻭﻥ ﺃﻳﺔ ﺗﺄﺧﲑ‪.‬‬

‫ﻭﺍﻟﻮﺳﻴﻂ ‪ duration‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪ ,‬ﺍﻟﱵ ﺗﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺗﻨﻔﻴﺬ ﺍﻟﺘﻐﻴﲑ‪:‬‬

‫• ‪ slow, normal, fast‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬

‫• ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬

‫ﺃﻣﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻮﺳﻴﻂ ‪ easing‬ﻓﻴﻘﺒﻞ ﺍﻟﻘﻴﻤﺘﲔ ‪ linear‬ﺃﻭ ‪ ,swing‬ﻭﻣﻦ ﺃﺟﻞ ﺍﺳﺘﺨﺪﺍﻣﻪ ﳚﺐ ﺍﺳﺘﺨﺪﺍﻡ ‪,plugin‬‬
‫ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ‪ callback‬ﺍﻻﺧﺘﻴﺎﺭﻱ ﻓﻬﻮ ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﺑﻌﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪.animate‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﳌﻮﺟﻮﺩ ﰲ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﺍﻟﻴﻤﲔ ﺃﻭ ﺇﱃ ﺍﻟﻴﺴﺎﺭ ﺣﺴﺐ ﺍﻟﺰﺭ ﺍﻟﺬﻱ ﻳﺘﻢ ﺍﻟﻀﻐﻂ‬
‫ﻋﻠﻴﻪ‪ ,‬ﻭﻻﺣﻆ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺮﻣﺰﻳﻦ =‪ +‬ﻭ =‪ -‬ﻗﺒﻞ ﺍﻟﻘﻴﻢ ﺍﳉﺪﻳﺪﺓ‪:‬‬

‫‪229‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪230‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺗﺄﺛﲑ ﺣﺮﻛﻲ ﻋﻠﻰ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺑﺘﻐﻴﲑ ﺑﻌﺾ ﺧﺼﺎﺋﺼﻪ ﻋﻨﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪:Run‬‬

‫‪231‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪232‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪animate(params, options‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻨﻔﻴﺬ ﺑﻌﺾ ﺍﻟﺘﺄﺛﲑﺍﺕ ﺍﳊﺮﻛﻴﺔ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ‪ ,‬ﻭﺍﳌﻔﻬﻮﻡ ﺍﻟﺮﺋﻴﺴﻲ‬
‫ﻟﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻳﺘﻤﺤﻮﺭ ﺣﻮﻝ ﻗﻴﻢ ﺍﻟﻮﺳﻴﻂ ‪ params‬ﺍﻟﺬﻱ ﻫﻮ ﻋﺒﺎﺭﺓ ﻋﻦ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ ﺣﻴﺚ ﺗﻌﱪ‬
‫ﺍﳌﻔﺎﺗﻴﺢ ﻋﻦ ﺧﺼﺎﺋﺺ ‪ CSS‬ﺃﻣﺎ ﺍﻟﻘﻴﻢ ﻓﻬﻲ ﺍﻟﻘﻴﻢ ﺍﳉﺪﻳﺪﺓ ﻟﻜﻞ ﺧﺎﺻﻴﺔ ﻣﺜﻞ … ‪ height, top, opacity‬ﻣﻊ‬
‫ﻼ ﳚﺐ ﻛﺘﺎﺑﺔ ‪ marginLeft‬ﺑﺪ ﹰﻻ ﻋﻦ‬
‫ﻣﻼﺣﻈﺔ ﺃﻥ ﻫﺬﻩ ﺍﳋﺼﺎﺋﺺ ﳚﺐ ﻛﺘﺎﺑﺘﻬﺎ ﺑﺎﻟﺸﻜﻞ ‪ camel case‬ﺃﻱ ﻣﺜ ﹰ‬
‫‪ margin-left‬ﺃﻱ ﻫﻲ ﻧﻔﺲ ﺍﻟﻜﻠﻤﺔ ﻭﻟﻜﻦ ﰎ ﺣﺬﻑ ﺍﶈﺮﻑ "‪ "-‬ﻭﺃﻭﻝ ﺣﺮﻑ ﻣﻦ ﺍﻟﻜﻠﻤﺔ ﺍﻟﺜﺎﻧﻴﺔ ﻳﻜﻮﻥ ﻛﺒﲑﹰﺍ‪.‬‬

‫ﻭﺍﻟﻘﻴﻢ ﺍﳌﺮﺗﺒﻄﺔ ﻣﻊ ﺍﳌﻔﺎﺗﻴﺢ ﺗﻌﱪ ﻋﻦ ﺍﻟﻘﻴﻢ ﺍﻟﱵ ﺳﺘﻨﺘﻬﻲ ﺇﻟﻴﻬﺎ ﻗﻴﻤﺔ ﻛﻞ ﺧﺎﺻﻴﺔ‪ ,‬ﻓﻌﻨﺪﻣﺎ ﻳﺘﻢ ﲤﺮﻳﺮ ﻗﻴﻤﺔ ﺭﻗﻤﻴﺔ ﻛﻘﻴﻤﺔ‬
‫ﺟﺪﻳﺪﺓ ﻟﻠﺨﺎﺻﻴﺔ ﻋﻨﺪﻫﺎ ﻓﺈﻥ ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺳﺘﺘﺪﺭﺝ ﻣﻦ ﺍﻟﻘﻴﻤﺔ ﺍﳊﺎﻟﻴﺔ ﺇﱃ ﺍﻟﻘﻴﻤﺔ ﺍﳉﺪﻳﺪﺓ‪ ,‬ﺃﻣﺎ ﺇﻥ ﰎ ﲢﺪﻳﺪ ﻗﻴﻢ‬

‫‪233‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﻧﺼﻴﺔ ﻣﺜﻞ ‪ hid, show‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﻮﻇﻴﻔﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﳍﺬﻩ ﺍﻟﻘﻴﻢ‪ .‬ﺃﻳﻀﹰﺎ ﳝﻜﻦ ﺗﻐﻴﲑ ﻗﻴﻢ ﺍﳋﺼﺎﺋﺺ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﻭﺣﺪﺍﺕ ﻗﻴﺎﺱ ﳐﺘﻠﻔﺔ ‪ em, %‬ﰲ ﺣﺎﻝ ﺃ‪‬ﺎ ﻣﺪﻋﻮﻣﺔ ﻣﻦ ﻗﺒﻞ ﺍﳋﺎﺻﻴﺔ ﻧﻔﺴﻬﺎ‪ ,‬ﻛﻤﺎ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ =‪ +‬ﺃﻭ‬
‫=‪ -‬ﻗﺒﻞ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ﻟﻜﻲ ﻳﺘﻢ ﺗﻐﻴﲑ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺔ ﺑﺸﻜﻞ ﻣﺘﺰﺍﻳﺪ ﺃﻡ ﻣﺘﻨﺎﻗﺺ‪.‬‬

‫ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ‪ options‬ﻓﻠﻪ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ﺍﻟﻮﺳﻴﻂ ‪ duration‬ﻳﻘﺒﻞ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪ ,‬ﺍﻟﱵ ﺗﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺗﻨﻔﻴﺬ ﺍﻟﺘﻐﻴﲑ‪:‬‬
‫‪ slow, normal, fast o‬ﻛﻘﻴﻢ ﻧﺼﻴﺔ‪.‬‬
‫‪ o‬ﺃﻭ ﺭﻗﻢ ﻳﻌﱪ ﺑﺎﳌﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻳﻌﱪ ﻋﻦ ﺳﺮﻋﺔ ﺇﻇﻬﺎﺭ ﺍﻟﻌﻨﺼﺮ‪.‬‬
‫• ﺍﻟﻮﺳﻴﻂ ‪ easing‬ﻓﻴﻘﺒﻞ ﺍﻟﻘﻴﻤﺘﲔ ‪ linear‬ﺃﻭ ‪ ,swing‬ﻭﻣﻦ ﺃﺟﻞ ﺍﺳﺘﺨﺪﺍﻣﻪ ﳚﺐ ﺍﺳﺘﺨﺪﺍﻡ ‪.plugin‬‬
‫• ‪ ,complete‬ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪.animate‬‬
‫• ‪ ,queue‬ﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﻮﺳﻴﻂ ﻗﻴﻤﺘﲔ ﺇﻣﺎ ‪ true‬ﺃﻭ ‪ false‬ﻭﰲ ﺣﺎﻝ ﲢﺪﻳﺪ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ‬
‫ﺍﻟﺘﺎﺑﻊ ‪ animate‬ﻣﺒﺎﺷﺮﺓ ﺑﺪﻭﻥ ﺍﻧﺘﻈﺎﺭ ﺩﻭﺭﻩ‪.‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺗﻐﻴﲑ ﻗﻴﻤﺔ ﺍﳋﺎﺻﻴﺘﲔ ‪ height‬ﻭ ‪ opacity‬ﻟﻜﻞ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﰲ ﺍﻟﺼﻔﺤﺔ ﺑﺎﺳﺘﺨﺪﺍﻡ ﻗﻴﻤﺔ ‪slow‬‬
‫ﻟﻠﻮﺳﻴﻂ ‪:duration‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﲢﺮﻳﻚ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ‪ p‬ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﺍﻟﻴﺎﺳﺮ ﲟﻘﺪﺍﺭ ‪ 50‬ﺑﻴﻜﺴﻞ ﻭﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ‬
‫ﺧﻼﻝ ‪ 500‬ﻣﻴﻠﻠﻲ ﺛﺎﻧﻴﺔ ﻭﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪ queue‬ﻫﻲ ‪ false‬ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﻣﺒﺎﺷﺮﺓ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﻈﻬﺮ ﻛﻴﻔﻴﺔ ﺍﺗﺴﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ‪ easing‬ﺍﻟﺬﻱ ﻟﻦ ﻳﻌﻤﻞ ﺇﻻ ﺑﻮﺟﻮﺩ ﺍﻟـ ‪ plugin‬ﺍﻟﺬﻱ ﻳﻔﻌﻞ ﻫﺬﻩ‬
‫ﺍﳋﺎﺻﻴﺔ‪:‬‬

‫‪234‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)‪stop(clearQueue, gotoEnd‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻳﻘﺎﻑ ﻛﻞ ﺍﻟﺘﺄﺛﲑﺍﺕ ﺍﳊﺮﻛﻴﺔ ﺍﳌﻄﺒﻘﺔ ﻋﻠﻰ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﱵ ﲤﺖ ﻣﻄﺎﺑﻘﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ‬
‫ﺍﶈﺪﺩ ﺍﻟﺬﻱ ﰎ ﺍﺳﺘﺪﻋﺎﺅﻩ ﻗﺒﻞ ﺍﻟﺘﺎﺑﻊ‪ ,‬ﻭﺑﻌﺪ ﺗﻨﻔﻴﺬ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﰲ ﺣﺎﻝ ﻭﺟﻮﺩ ﺍﺳﺘﺪﻋﺎﺀ ﺍﺳﺘﺪﻋﺎﺀ ﻟﺘﺎﺑﻊ ‪animate‬‬
‫ﻳﻨﺘﻈﺮ ﺍﻟﺘﻨﻔﻴﺬ ﻭﻛﺎﻧﺖ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ clearQueue‬ﻣﺴﺎﻭﻳﺔ ‪ false‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺘﺎﱄ ﰲ ﺍﻟـ‬
‫‪ ,Queue‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ‪ gotoEnd‬ﻓﻴﻘﺒﻞ ﻗﻴﻤﺔ ﻣﻨﻄﻘﻴﺔ )‪ (true/false‬ﻭﰲ ﺣﺎﻝ ﻛﺎﻧﺖ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ‬
‫‪ gotoEnd‬ﺗﺴﺎﻭﻱ ‪ true‬ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﺇﻛﻤﺎﻝ ﻋﻤﻠﻴﺔ ﲢﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ‪ ,‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﻋﻨﺪ‬
‫ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪ Go‬ﻭﺇﺫﺍ ﺃﺭﺩﺕ ﺇﻳﻘﺎﻑ ﺍﳊﺮﻛﺔ ﺍﺿﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪ ,STOP‬ﻭﰲ ﺣﺎﻝ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺍﻟﺰﺭ ‪Go‬‬
‫ﺃﻛﺜﺮ ﻣﻦ ﻣﺮﺓ ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﲢﺮﻳﻚ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺑﻌﺪ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ‪ STOP‬ﻭﺫﻟﻚ ﻷﻥ ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ‬
‫‪ clearQueue‬ﺍﳌﺴﺘﺨﺪﻣﺔ ﺗﺴﺎﻭﻱ ‪:false‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪235‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪jQuery.fx.off‬‬
‫ﻣﺘﺤﻮﻝ ﻋﺎﻡ ﻋﻠﻰ ﻣﺴﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ﳝﻨﻊ ﺍﻟﺘﺄﺛﲑﺍﺕ ﺍﳊﺮﻛﻴﺔ ﻣﺜﻞ ﺗﻨﻔﻴﺬ ﺍﻟﺘﻮﺍﺑﻊ ‪Fading, Animation‬‬
‫ﻭﻏﲑﻫﺎ ﻣﻦ ﺍﻟﱵ ﺗﻌﻄﻲ ﺗﺄﺛﲑﺍﺕ ﺣﺮﻛﻴﺔ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﰲ ﺣﺎﻝ ﺗﻌﲔ ﺍﻟﻘﻴﻤﺔ ﺇﱃ ‪ ,true‬ﻓﻔﻲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻣﻨﻊ‬

‫‪236‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺍﻟﺘﺄﺛﲑﺍﺕ ﺍﳊﺮﻛﻴﺔ ﺣﻴﺚ ﻣﻦ ﺍﳌﻔﺘﺮﺿﺄﻥ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺑﺸﻜﻞ ﺗﺪﺭﳚﻲ ﻭﻟﻜﻦ ﲟﺎ ﺃﻥ ﻗﻴﻤﺔ ﺍﳌﺘﺤﻮﻝ‬
‫‪ jQuery.fc.off‬ﺗﺴﺎﻭﻱ ‪ true‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺇﺧﻔﺎﺀ ﺍﻟﻌﻨﺼﺮ ﻣﺒﺎﺷﺮﺓ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﻜﺎﻣﻞ ﻟﻠﺸﻴﻔﺮﺓ ﺍﻟﺴﺎﺑﻘﺔ ﻓﻬﻲ‪:‬‬

‫‪237‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫توابع العمليات الغير متزامنة ‪AJAX Functions‬‬
‫الطلبات الغير متزامنة ‪AJAX Requests‬‬
‫)‪jQuery.ajax(options‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻨﻔﻴﺬ ﺻﻔﺤﺔ ﺃﺧﺮﻯ ﺑﺘﻨﻔﻴﺬ ‪ ,HTTP Request‬ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻫﻮ ﺗﻄﺒﻴﻖ ﻟﺘﻘﻨﻴﺔ ﺍﻟـ‬
‫‪ AJAX‬ﰲ ﺑﺸﻜﻞ ﳎﺮﺩ ﰲ ﻣﻜﺘﺒﺔ ‪ ,jQuery‬ﻭﳝﻜﻦ ﺍﻹﻃﻼﻉ ﻋﻠﻰ ﺍﻟﺘﺎﺑﻌﲔ ‪ $.get, $.post‬ﻟﺘﻨﻔﻴﺬ ﻋﻤﻠﻴﺎﺕ‬
‫ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪ AJAX‬ﺑﺸﻜﻞ ﺃﻛﺜﺮ ﺳﻬﻮﻟﺔ ﰲ ﺍﻟﻔﻬﻢ ﻭﺍﻻﺳﺘﺨﺪﺍﻡ‪ ,‬ﻭﻟﻜﻦ ﻻ ﺗﻘﺪﻡ ﻭﻇﺎﺋﻒ ﺇﺿﺎﻓﻴﺔ ﻣﺜﻞ ﺗﻨﻔﻴﺬ ﺍﺳﺘﺪﻋﺎﺀ‬
‫ﻋﻜﺴﻲ ﻋﻨﺪ ﺣﺪﻭﺙ ﺧﻄﺄ ‪.error callbacks‬‬

‫ﺍﻟﺘﺎﺑﻊ ‪ $.ajax‬ﻳﻌﻴﺪ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ ,XMLHTTPRequest‬ﻭﻟﻜﻦ ﰲ ﻣﻌﻈﻢ ﺍﳊﺎﻻﺕ ﻻ ﲢﺘﺎﺝ ﺍﺳﺘﺨﺪﺍﻣﻪ‬

‫ﻣﺒﺎﺷﺮﺓ ﻭﻟﻜﻨﻪ ﻣﺘﻮﻓﺮ ﰲ ﺣﺎﻝ ﻭﺟﻮﺩ ﺿﺮﻭﺭﺓ ﳌﺘﺎﺑﻌﺔ ﻋﻤﻠﻴﺔ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ ﺑﺸﻜﻞ ﻣﺒﺎﺷﺮ‪ ,‬ﻭﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻄﺎﺀ ﻋﻠﻰ‬
‫ﺷﻜﻞ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ ﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﻟﺘﻬﻴﺌﺔ ﻭﺗﻨﻔﻴﺬ ﻭﻣﺘﺎﺑﻌﺔ ﻋﻤﻠﻴﺔ ﺍﻟﺘﻨﻔﻴﺬ‪.‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬ﰲ ﺣﺎﻝ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳋﻴﺎﺭ ‪ dataType‬ﰲ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﻓﻴﺠﺐ ﺍﻟﺘﺄﻛﺪ ﻣﻦ ﺃﻥ ﺍﳋﺎﺩﻡ ﻳﺮﺳﻞ ﻧﻮﻉ ﺻﺤﻴﺢ ﻣﻦ‬
‫ﺍﻟﺒﻴﺎﻧﺎﺕ ﺗﺘﻮﺍﻓﻖ ﻣﻊ ﻗﻴﻤﺔ ﺍﳋﻴﺎﺭ ‪ dataType‬ﻭﰲ ﺣﺎﻝ ﺃﻥ ﻧﻮﻉ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﳌﺮﺳﻠﺔ ﻣﻦ ﺍﳋﺎﺩﻡ ﻻ ﺗﺘﻮﺍﻓﻖ ﻣﻊ ﻗﻴﻤﺔ‬
‫‪ dataType‬ﻫﺬﺍ ﺳﻴﺆﺩﻱ ﺇﱃ ﺃﺧﻄﺎﺀ ﰲ ﻋﻤﻠﻴﺔ ﺍﻟﺘﻨﻔﻴﺬ‪.‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬ﺃﻱ ﻋﻤﻠﻴﺔ ﺗﻨﻔﻴﺬ ﻟﺼﻔﺤﺔ ﺧﺎﺭﺟﻴﺔ )ﺻﻔﺤﺔ ﺧﺎﺭﺝ ﺍﻟﻨﻄﺎﻕ ﺍﳊﺎﱄ( ﳚﺐ ﺗﻨﻔﻴﺬﻫﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ‪ GET‬ﰲ ﺣﺎﻝ‬
‫ﺃﻥ ﻗﻴﻤﺔ ﺍﳋﻴﺎﺭ ‪ dataType‬ﻳﺴﺎﻭﻱ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻤﺘﲔ ‪ script‬ﺃﻭ ‪ .jsonp‬ﻭﺃﻳﻀﹰﺎ ﻓﺈﻥ ﺍﳋﻴﺎﺭﺍﺕ ﺍﻟﱵ ﺗﺘﻄﻠﺐ ﻛﺎﺋﻦ‬
‫‪ XMLHTTPRequest‬ﻻ ﺗﻜﻮﻥ ﳑﻜﻨﺔ ﻋﻨﺪ ﺗﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﻋﻠﻰ ﺻﻔﺤﺔ ﺧﺎﺭﺝ ﺍﻟﻨﻄﺎﻕ ﺍﳊﺎﱄ‪ ,‬ﻭﺃﻳﻀﹰﺎ ﻳﺘﻢ ﻳﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻴﻌﻦ ‪ complete‬ﻭ ‪ success‬ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ ﻭﻟﻜﻦ ﺑﺪﻭﻥ ﺍﳊﺼﻮﻝ ﻋﻠﻰ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ‬
‫‪ ,XHR‬ﺃﻣﺎ ﺍﻟﺘﺎﺑﻌﲔ ‪ beforeSend‬ﻭ ‪ dataFilter‬ﻓﻼ ﻳﺘﻢ ﺗﻨﻔﻴﺬﳘﺎ‪.‬‬

‫ﺍﻟﺘﺎﺑﻊ ‪ ajax‬ﰲ ﺍﻹﺻﺪﺍﺭ ‪ 1.3‬ﻛﻤﺎ ﰲ ﺍﻹﺻﺪﺍﺭ ‪ 1.2‬ﳝﻜﻦ ﺃﻥ ﳛﻤﻞ ﺑﻴﺎﻧﺎﺕ ‪ JSON‬ﻣﻮﺟﻮﺩﺓ ﻋﻠﻰ ﻧﻄﺎﻕ ﺁﺧﺮ ﰲ‬
‫ﺣﺎﻝ ﲢﺪﻳﺪ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ ﻟـ ‪ ,JSONP‬ﻭﺍﻟﺬﻱ ﳝﻜﻦ ﺗﻨﻔﻴﺬﻫﺎ ﺑﺈﺣﺪﻯ ﺍﻟﻄﺮﻳﻘﺘﲔ‪:‬‬

‫• ﻛﺘﺎﺑﺔ ﻋﻨﻮﺍﻥ ﺍﻟـ ‪ URL‬ﺍﻟﺬﻱ ﺗﺮﻳﺪ ﺗﻨﻔﻴﺬﻩ ﺑﺎﻟﺼﻴﻐﺔ ?=‪ myurl?callback‬ﻋﻨﺪﻫﺎ ﻓﺈﻥ ‪jQuery‬‬
‫ﺗﺴﺘﺒﺪﻝ ﺍﻹﺷﺎﺭﺓ ? ﺍﻟﺜﺎﻧﻴﺔ ﻭﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ ﺑﺎﺳﻢ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺼﺤﻴﺢ ﻟﺘﻨﻔﻴﺬﻩ‪.‬‬
‫• ﺃﻭ ﰲ ﺣﺎﻝ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ‪ dataType‬ﺇﱃ ‪ jsonp‬ﻓﻌﻨﺪﻫﺎ ﻳﺘﻢ ﻳﺘﻨﻔﻴﺬ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ ﺍﳌﻨﺎﺳﺐ ﺑﺸﻜﻞ‬
‫ﺗﻠﻘﺎﺋﻲ ﰲ ﻋﻤﻠﻴﺔ ﺍﻟﺘﻨﻔﻴﺬ‪.‬‬

‫ﺃﻣﺎ ﻗﻴﻢ ﺍﻟﻮﺳﻴﻂ ‪ options‬ﻓﻬﻲ ﻋﺒﺎﺭﺓ ﻋﻦ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ‪ ,‬ﻭﻛﻠﻬﺎ ﻋﺒﺎﺭﺓ ﻋﻦ ﻗﻴﻤﺔ ﺍﺧﺘﻴﺎﺭﻳﺔ ﳝﻜﻦ ﺗﻌﻴﲔ‬
‫ﺍﻟﻘﻴﻢ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﳍﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ )(‪.$.ajaxSetup‬‬

‫‪238‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪async‬‬
‫ﻳﻘﺒﻞ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﻗﻴﻤﺔ ﻣﻨﻄﻘﻴﺔ ‪ true‬ﺃﻭ ‪ false‬ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺣﻴﺚ ﺃﻥ ﻛﻞ ﺍﻟﻄﻠﺒﺎﺕ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ ajax‬ﻳﺘﻢ ﺗﻨﻔﻴﺬﻫﺎ ﺑﺸﻜﻞ ﻏﲑ ﻣﺘﺰﺍﻣﻦ‪ ,‬ﻭﻋﻨﺪ ﺗﻌﻴﲔ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻟﻠﺨﻴﺎﺭ ‪ async‬ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ‬
‫ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ ﺑﺸﻜﻞ ﻣﺘﺰﺍﻣﻦ‪ ,‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ ﻋﻤﻠﻴﺔ ﺍﻟﺘﻨﻔﻴﺬ ﺍﳌﺘﺰﺍﻣﻨﺔ ﳝﻜﻦ ﺃﻥ ﺗﺆﺩﻱ ﺇﱃ ﺇﻳﻘﺎﻑ ﺍﺳﺘﺠﺎﺑﺔ ﺍﳌﺘﺼﻔﺢ ﺇﱃ ﺣﲔ‬
‫ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪.ajax‬‬

‫‪beforeSend‬‬
‫ﺗﺎﺑﻊ ﺍﺳﺘﺪﻋﺎﺀ ﻋﻜﺴﻲ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻗﺒﻞ ﻋﻤﻠﻴﺔ ﺇﺭﺳﺎﻝ ﺍﻟﻄﻠﺐ ﳝﻜﻦ ﻣﻦ ﺧﻼﻟﻪ ﺗﻌﺪﻳﻞ ﻗﻴﻢ ﺍﻟﻜﺎﺋﻦ‬
‫‪ XMLHTTPRequest‬ﻗﺒﻞ ﺇﺭﺳﺎﻟﻪ‪ ,‬ﻭﰲ ﺣﺎﻝ ﺇﻋﺎﺩﺓ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﻣﻦ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺇﻳﻘﺎﻑ ﺗﻨﻔﻴﺬ‬
‫ﺍﻟﺘﺎﺑﻊ ‪ ,ajax‬ﻭﻟﻠﺘﺎﺑﻊ ‪ BeforeSend‬ﺍﻟﺼﻴﻐﺔ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫‪cache‬‬
‫ﻳﻘﺒﻞ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﻗﻴﻤﺔ ﻣﻨﻄﻘﻴﺔ ‪ true‬ﺃﻭ ‪ false‬ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺃﻣﺎ ﰲ ﺣﺎﻝ ﺃﻥ ﻗﻴﻤﺔ‬
‫‪ dataType‬ﺗﺴﺎﻭﻱ ‪ script‬ﺃﻭ ‪ jsonp‬ﻓﺈﻥ ﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﳍﺬﺍ ﺍﳋﻴﺎﺭ ﻫﻲ ‪ ,false‬ﻭﰲ ﺣﲔ ﺃﻥ ﻗﻴﻤﺘﻬﺎ‬
‫ﺗﺴﺎﻭﻱ ‪ false‬ﻓﻬﺬﺍ ﺳﻴﻤﻨﻊ ﺍﳌﺘﺼﻔﺢ ﻣﻦ ﲣﺰﻳﻦ ﺍﻟﺼﻔﺤﺔ ﺍﻟﱵ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻫﺎ ﰲ ﺍﻟﺬﺍﻛﺮﺓ ﺍﳌﺆﻗﺘﺔ ﻟﻠﻤﺘﺼﻔﺢ‪.‬‬

‫‪complete‬‬
‫ﺗﺎﺑﻊ ﺍﺳﺘﺪﻋﺎﺀ ﻋﻜﺴﻲ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﺑﻌﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ ﺑﺸﻜﻞ ﻛﺎﻣﻞ )ﺑﻌﺪ ﺗﻨﻔﻴﺬ ﺗﻮﺍﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ‬
‫‪ success‬ﻭﺗﻮﺍﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﳋﺎﺻﺔ ﺑﺎﻷﺧﻄﺎﺀ ‪ ,(error callbacks‬ﻭﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ ﺍﻷﻭﻝ ﻫﻮ ﻛﺎﺋﻦ ﻣﻦ‬
‫ﺍﻟﻨﻮﻉ ‪ XMLHTTPRequest‬ﻭﺍﻟﺜﺎﱐ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﲢﺪﺩ ﻣﻌﻠﻮﻣﺎﺕ ﻋﻦ ﳒﺎﺡ ﺍﻟﻄﻠﺐ‪ ,‬ﻭﻳﺘﻢ ﺗﻨﻔﻴﺬ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‬
‫ﺩﺍﺋﻤﹰﺎ ﺳﻮﺍﺀ ﳒﺤﺖ ﺃﻭ ﻓﺸﻠﺖ ﻋﻤﻠﻴﺔ ﺍﻟﺘﻨﻔﻴﺬ ﻭﰲ ﻋﻤﻠﻴﺎﺕ ﺍﻟﺘﻨﻔﻴﺬ ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ ﻭﺍﳌﺘﺰﺍﻣﻨﺔ‪:‬‬

‫‪contentType‬‬
‫ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﲢﺪﺩ ﻧﻮﻉ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺍﻟﱵ ﺗﺮﺳﻞ ﺇﱃ ﺍﳋﺎﺩﻡ ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻫﻲ ‪application/x-‬‬
‫‪ www-form-urlencoded‬ﻭﻫﺬﺍ ﺍﻟﻘﻴﻤﺔ ﻣﻨﺎﺳﺒﺔ ﰲ ﻣﻌﻈﻢ ﺍﳊﺎﻻﺕ‪.‬‬

‫‪data‬‬
‫ﻳﺘﻤﻀﻦ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺍﻟﱵ ﺳﻴﺘﻢ ﺇﺭﺳﺎﳍﺎ ﺇﱃ ﺍﳋﺎﺩﻡ‪ ,‬ﺣﻴﺚ ﻳﺘﻢ ﲢﻮﻳﻠﻬﺎ ﺇﱃ ﻗﻴﻢ ﺗﺮﺳﻞ ﺑﻮﺍﺳﻄﺔ ﺍﻟـ‬
‫‪ query string‬ﺃﻱ ﲢﻮﻝ ﺇﱃ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﻳﺘﻢ ﺇﳊﺎﻗﻬﺎ ﺑﻌﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﺍﶈﺪﺩ‪ ,‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺎﺩﻡ ﺍﳋﻴﺎﺭ‬
‫‪239‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
‫‪ processData‬ﳌﻨﻊ ﻋﻤﻠﻴﺔ ﺍﳌﻌﺎﳉﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻫﺬﻩ‪ .‬ﻭﻗﻴﻢ ﺍﳋﻴﺎﺭ ‪ data‬ﳚﺐ ﺃﻥ ﺗﻜﻮﻥ ﻋﻠﻰ ﺷﻜﻞ ﺃﺯﻭﺍﺝ ﻣﻦ‬
‫ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ ‪ ,key/value‬ﻭﰲ ﺣﺎﻝ ﺃﻥ ﺍﻟﻘﻴﻤﺔ ﻋﺒﺎﺭﺓ ﻋﻦ ﻣﺼﻔﻮﻓﺔ ﻋﻨﺪﻫﺎ ﻳﺘﻢ ﲢﻮﻳﻠﻬﺎ ﺇﱃ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻘﻴﻢ ﳍﺎ‬
‫ﺍﳌﻔﺘﺎﺡ ﻧﻔﺴﻪ )ﻣﺜﺎﻝ‪ {foo:['bar1', 'bar2']} :‬ﺗﺼﺒﺢ ‪.&foo=bar1&foo=bar2‬‬

‫‪dataFilter‬‬
‫ﺗﺎﺑﻊ ﺍﺳﺘﺪﻋﺎﺀ ﻋﻜﺴﻲ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻪ ﳌﻌﺎﳉﺔ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻷﺻﻠﻴﺔ ﺍﳌﻌﺎﺩﺓ ﻣﻦ ﻗﺒﻞ ﺍﳋﺎﺩﻡ ﰲ ﺍﻟﻜﺎﺋﻦ‬
‫‪ ,XMLHTTPRequest‬ﻫﻮ ﺗﺎﺑﻊ ﻳﻨﻔﺬ ﻗﺒﻞ ﻋﻤﻠﻴﺔ ﺗﺮﺷﻴﺢ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻟﺘﺠﻬﻴﺰ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺑﺎﻟﺸﻜﻞ ﺍﳌﻄﻠﻮﺏ‬
‫ﻹﻋﺎﺩ‪‬ﺎ ﻛﻘﻴﻤﺔ ﻣﺮﲡﻌﺔ ﻣﻦ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻮ ﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ‪:‬‬

‫• ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻷﺻﻠﻴﺔ ﺍﳌﻌﺎﺩﺓ ﻣﻦ ﻗﺒﻞ ﺍﳋﺎﺩﻡ‪.‬‬

‫• ﻗﻴﻤﺔ ﺍﻟﻮﺳﻴﻂ ‪.dataType‬‬

‫‪dataType‬‬
‫ﻫﺬﺍ ﺍﻟﻮﺳﻴﻂ ﳛﺪﺩ ﻧﻮﻉ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﱵ ﺳﻴﺘﻢ ﺇﺭﺟﺎﻋﻬﺎ ﻣﻦ ﺍﳌﺨﺪﻡ‪ ,‬ﻭﰲ ﺣﺎﻝ ﱂ ﻳﺘﻢ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ﳍﺬﺍ ﺍﻟﻮﺳﻴﻂ‬
‫ﻓﺈﻥ ‪ jQuery‬ﺳﺘﻤﺮﺭ ﺇﻣﺎ ‪ responseXML‬ﺃﻭ ‪ responseText‬ﺇﱃ ﺗﺎﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ ﺍﻟﺬﻱ ﻳﻌﱪ‬
‫ﻋﻨﻪ ﺑﺎﻟﻮﺳﻴﻂ ‪ success‬ﺍﻋﺘﻤﺎﺩﹰﺍ ﻋﻠﻰ ﻧﻮﻉ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﱵ ﺃﻋﺎﺩﻫﺎ ﺍﳋﺎﺩﻡ ﻭﺍﻷﻧﻮﺍﻉ ﺍﳌﻤﻜﻨﺔ ﻫﻲ‪:‬‬

‫• ‪ :xml‬ﻭﺛﻴﻘﺔ ‪ XML‬ﳝﻜﻦ ﻣﻌﺎﳉﺘﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ‪.jQuery‬‬

‫• ‪ :html‬ﻳﻌﻴﺪ ﺷﻴﻔﺮﺓ ‪ HTML‬ﺑﺸﻜﻞ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﻣﻊ ﺍﻟﻮﺍﲰﺎﺕ ‪ scripts‬ﺍﻟﱵ ﻳﺘﻢ ﺗﻘﻴﻴﻤﻬﺎ ﻋﻨﺪ ﺇﺩﺭﺍﺟﻬﺎ‬
‫ﰲ ﺍﻟﺼﻔﺤﺔ‪.‬‬
‫• ‪ :script‬ﻳﺘﻢ ﺗﻘﻴﻴﻢ ﺍﻟﻨﺘﻴﺠﺔ ﻋﻠﻰ ﺃ‪‬ﺎ ﺷﻴﻔﺮﺓ ‪ JavaScript‬ﻭﺇﻋﺎﺩ‪‬ﺎ ﻋﻠﻰ ﺷﻜﻞ ﻗﻴﻤﺔ ﻧﺼﻴﺔ‪ ,‬ﻭﻋﻨﺪ‬
‫ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﻨﻮﻉ ﺳﻴﺘﻢ ﺇﻟﻐﺎﺀ ﺗﻔﻌﻴﻞ ﻋﻤﻠﻴﺔ ﺍﻟﺘﺨﺰﻳﻦ ﺍﳌﺆﻗﺖ ‪ Cache‬ﺇﻻ ﰲ ﺣﺎﻝ ﺍﺳﺘﺨﺪﺍﻡ ﻗﻴﻤﺔ ﳐﺘﻠﻔﺔ‬
‫ﻳﺘﻢ ﲤﺮﻳﺮﻫﺎ ﻟﻠﻮﺳﻴﻂ ‪ ,cache‬ﻭﰲ ﺣﺎﻝ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﻨﻮﻉ ﻋﻨﺪ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻋﻨﻮﺍﻥ ﻧﻄﺎﻕ ﺁﺧﺮ ﻋﻨﺪﻫﺎ‬
‫ﺳﻴﺘﻢ ﲢﻮﻳﻞ ﺍﻟﻌﻤﻠﻴﺔ ‪ POST‬ﺇﱃ ﺍﻟﻌﻤﻠﻴﺔ ‪.GET‬‬
‫• ‪ :json‬ﺳﻴﺘﻢ ﺗﻘﻴﻴﻢ ﺍﻟﻘﻴﻤﺔ ﺍﳌﻌﺎﺩﺓ ﻋﻠﻰ ﺷﻜﻞ ‪ JSON‬ﻭﻳﻌﻴﺪ ﻛﺎﺋﻦ ‪.JavaScript‬‬
‫• ‪ :jsonp‬ﺳﻴﺘﻢ ﲢﻤﻴﻞ ﺍﻟﻘﻴﻤﺔ ﺍﳌﻌﺎﺩﺓ ﻣﻦ ﺍﳋﺎﺩﻡ ﺿﻤﻦ ﻛﺘﻠﺔ ‪ json‬ﺑﺎﺳﺘﺨﺪﺍﻡ ‪ JSONP‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻥ‬
‫ﺳﻴﺘﻢ ﺇﺿﺎﻓﺔ "?=‪ "?callback‬ﺇﱃ ‪‬ﺎﻳﺔ ﺍﻟـ ‪ URL‬ﺍﳌﻄﻠﻮﺏ ﻟﺘﺤﺪﻳﺪ ﺗﺎﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ‪.‬‬
‫• ‪ :text‬ﺍﻟﻘﻴﻤﺔ ﺍﳌﻌﺎﺩﺓ ﻣﻦ ﺍﳋﺎﺩﻡ ﺳﺘﻜﻮﻥ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﻓﻘﻂ‪.‬‬

‫‪240‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪error‬‬
‫ﺍﻟﺘﺎﺑﻊ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻩ ﰲ ﺣﺎﻝ ﻓﺸﻞ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ ,ajax‬ﻭﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺛﻼﺛﺔ ﻭﺳﻄﺎﺀ ﻫﻲ‪:‬‬

‫• ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪.XMLHttpRequest‬‬

‫• ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﺗﺼﻒ ﻧﻮﻉ ﺍﳋﻄﺄ ﺍﻟﺬﻱ ﺣﺪﺙ‪ ,‬ﻭﺍﻟﻘﻴﻢ ﺍﶈﺘﻤﻠﺔ ﳍﺬﺍ ﺍﻟﻮﺳﻴﻂ ﻫﻲ‪:‬‬
‫‪null o‬‬
‫‪timeout o‬‬
‫‪error o‬‬
‫‪notmodified o‬‬
‫‪parsererror o‬‬
‫• ﻭﻛﺎﺋﻦ ﺍﺳﺘﺜﻨﺎﺀ ﺍﺧﺘﻴﺎﺭﻱ ‪.exception object‬‬

‫ﻭﺷﻜﻞ ﺍﻟﺘﺎﺑﻊ ‪ error‬ﻫﻮ‪:‬‬

‫‪global‬‬
‫ﻗﻴﻤﺔ ﻫﺬﺍ ﺍﻟﻮﺳﻴﻂ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﻭﲢﺪﺩ ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺇﻥ ﻛﺎﻥ ﺳﻴﺘﻢ ﻗﺪﺡ ﺃﺣﺪﺍﺙ ﺍﻟﻌﻤﻠﻴﺔ ﺍﻟﻐﲑ‬
‫ﻣﺘﺰﺍﻣﻨﺔ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ ajax‬ﻣﺜﻞ ﺍﻟﺘﺎﺑﻊ ‪ ajaxStart‬ﻭ ‪ ajaxStop‬ﻭﻏﲑﻫﺎ ﻣﻦ ﺍﻟﺘﻮﺍﺑﻊ ﺍﻟﱵ ﺗﻨﺪﺭﺝ ﲢﺖ ‪Ajax‬‬
‫‪.Events‬‬

‫‪ifModified‬‬
‫ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﺴﻤﺢ ﻟﻠﻄﻠﺐ ﺑﺎﻟﻨﺠﺎﺡ ﻓﻘﻂ ﰲ ﺣﺎﻟﺔ ﺃﻥ ﻗﻴﻤﺔ ﺍﻟﻨﺘﻴﺠﺔ ﳐﺘﻠﻔﺔ ﻋﻦ ﺁﺧﺮ ﻧﺘﻴﺠﺔ ﰎ ﺍﳊﺼﻮﻝ ﻋﻠﻴﻪ‬
‫ﻭﺫﻟﻚ ﺑﻔﺤﺺ ﻗﻴﻤﺔ ‪ Last-Modified‬ﰲ ﺍﻟﺘﺮﻭﻳﺴﺔ ﺍﳋﺎﺻﺔ ﺑﺎﻟﻨﺘﻴﺠﺔ ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﺃﻱ ﲡﺎﻫﻞ‬
‫ﺍﻟﺘﺮﻭﻳﺴﺔ ‪.Last-Modified‬‬

‫‪jsonp‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﻮﺳﻴﻂ ﻟﺘﺠﺎﻭﺯ ﺍﺳﻢ ﺗﺎﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ ﻋﻨﺪ ﺗﻨﻔﻴﺬ ﻃﻠﺐ ‪ ,jsonp‬ﺣﻴﺚ ﺳﻴﺘﻢ‬
‫ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺑﺪ ﹰﻻ ﻣﻦ ‪ callback‬ﰲ ﺍﻟﺼﻴﻐﺔ "?=‪ "callback‬ﰲ ﺍﻟـ ‪ URL‬ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻩ ﺳﻮﺍﺀ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ‪ GET‬ﺃﻭ ‪ POST‬ﻭﺍﻟﻨﺘﻴﺠﺔ ﻫﻲ ﺃﻥ }'‪ {jsonp:'onJsonPLoad‬ﺳﺘﺼﺒﺢ‬
‫"?=‪."onJsonPLoad‬‬

‫‪241‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪password‬‬
‫ﻛﻠﻤﺔ ﺍﳌﺮﻭﺭ ﺍﻟﱵ ﳚﺐ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﻋﻨﺪ ﻭﺟﻮﺩ ﺗﻮﺛﻴﻖ ﻳﻌﺘﻤﺪ ﻋﻠﻰ ﺍﻟﱪﻭﺗﻮﻛﻮﻝ ‪.HTTP‬‬

‫‪processData‬‬
‫ﺑﺸﻜﻞ ﺍﻓﺘﺮﺍﺿﻲ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﱵ ﻳﺘﻢ ﺇﺭﺳﺎﳍﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﳋﻴﺎﺭ ‪ data‬ﻋﻠﻰ ﺷﻜﻞ ﻛﺎﺋﻦ )ﺑﺸﻜﻞ ﺗﻘﲏ ﺃﻱ ﺷﻲﺀ‬
‫ﻣﺎﻋﺪﺍ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻨﺼﻴﺔ( ﺳﺘﺘﻢ ﻣﻌﺎﳉﺘﻬﺎ ﻭﲢﻮﻳﻠﻬﺎ ﻟﻜﻲ ﺗﺮﺳﻞ ﻋﻦ ﻃﺮﻳﻖ ‪ query string‬ﺑﺸﻜﻞ ﻳﺘﻨﺎﺳﺐ ﻣﻊ ﻧﻮﻉ‬
‫ﺍﶈﺘﻮﻯ ﺍﻻﻓﺘﺮﺍﺿﻲ "‪ ,"application/x-www-form-urlencoded‬ﻭﰲ ﺣﺎﻝ ﻭﺟﻮﺩ ﺿﺮﻭﺭﺓ ﻹﺭﺳﺎﻝ‬
‫ﻛﺎﺋﻦ ‪ DOMDocument‬ﺃﻭﺃﻱ ﺑﻴﺎﻧﺎﺕ ﻏﲑ ﻣﻌﺎﳉﺔ ﻋﻨﺪﻫﺎ ﳚﺐ ﺗﻌﻴﲔ ﻗﻴﻤﺔ ‪ false‬ﳍﺬﺍ ﺍﳋﻴﺎﺭ‪.‬‬

‫‪scriptCharset‬‬
‫ﻳﺘﻢ ﺃﺧﺬ ﻗﻴﻤﺔ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﺑﺎﻻﻋﺘﺒﺎﺭ ﻓﻘﻂ ﻋﻨﺪ ﺗﻨﻔﻴﺬ ﻃﻠﺐ ‪ jsonp‬ﺃﻭ ﺗﻜﻮﻥ ﻗﻴﻤﺔ ﺍﳋﻴﺎﺭ ‪dataType‬‬
‫ﺗﺴﺎﻭﻱ ‪ script‬ﻭﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ ,GET‬ﻓﺈﻥ ﻗﻴﻤﺔ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﲢﺪﺩ ﻧﻮﻉ ﺍﶈﺎﺭﻑ ﺍﻟﱵ ﺳﻴﺘﻢ‬
‫ﺗﻔﺴﲑ ﺍﻟﻄﻠﺐ ﻋﻠﻰ ﺃﺳﺎﺳﻬﺎ ﻭﻳﺘﻢ ﲢﺪﻳﺪﻫﺎ ﻓﻘﻂ ﻣﻦ ﺃﺟﻞ ﺍﻟﺘﻮﻓﻴﻖ ﺑﲔ ﺍﶈﺎﺭﻑ ﰲ ﺍﶈﺘﻮﻯ ﺍﻟﺒﻌﻴﺪ ﻭﺍﶈﺘﻮﻯ ﺍﶈﻠﻲ‪.‬‬

‫‪success‬‬
‫ﺍﺳﻢ ﺍﻟﺘﺎﺑﻊ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻩ ﺇﺫﺍ ﰎ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ ﺑﺸﻜﻞ ﻧﺎﺟﺢ‪ ,‬ﻭﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ ﳘﺎ‪:‬‬

‫• ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﳌﻌﺎﺩﺓ ﻣﻦ ﺍﳋﺎﺩﻡ ﻭﺍﻟﱵ ﲤﺖ ﺇﻋﺎﺩ‪‬ﺎ ﻋﻠﻰ ﺣﺴﺐ ﺍﻟﻘﻴﻤﺔ ﺍﶈﺪﺩﺓ ﺑﺎﳋﻴﺎﺭ ‪.dataType‬‬
‫• ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﺗﻌﱪ ﻋﻦ ﺣﺎﻟﺔ ﺍﻟﻄﻠﺐ‪.‬‬

‫‪timeout‬‬
‫ﲢﺪﻳﺪ ﻗﻴﻤﺔ ﻣﺪﺓ ﻗﻄﻊ ﺍﻻﺗﺼﺎﻝ ﻗﺒﻞ ﺍﺳﺘﺠﺎﺑﺔ ﺍﳋﺎﺩﻡ ‪ timeout‬ﻟﻠﻄﻠﺐ ﺍﳊﺎﱄ‪ ,‬ﺣﻴﺚ ﺃﻥ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ﺍﳋﻴﺎﺭ‬
‫‪ timeout‬ﺳﺘﺆﺩﻱ ﺇﱃ ﲡﺎﻭﺯ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻌﺎﻣﺔ ﺍﶈﺪﺩﺓ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪.$.ajaxSetup‬‬

‫‪type‬‬
‫ﳛﺪﺩ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﻃﺮﻳﻘﺔ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ )‪ (POST, GET‬ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻫﻲ ‪ GET‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺃﻧﻪ‬
‫ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻃﺮﻕ ﺃﺧﺮﻯ ﻣﺜﻞ ‪ PUT, DELETE‬ﻭﻟﻜﻨﻬﺎ ﻏﲑ ﻣﺪﻋﻮﻣﺔ ﻣﻦ ﻗﺒﻞ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻧﻔﺴﻬﺎ‪.‬‬

‫‪url‬‬
‫ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﺍﻟﱵ ﺳﻴﺘﻢ ﻃﻠﺒﻬﺎ‪.‬‬

‫‪username‬‬
‫ﺍﺳﻢ ﺍﻟﺪﺧﻮﻝ ﺍﻟﺬﻱ ﺳﻴﺘﺨﺪﻡ ﰲ ﺣﺎﻝ ﻭﺟﻮﺩ ﺿﺮﻭﺭﺓ ﻟﻠﺘﻮﺛﻴﻖ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﱪﻭﺗﻮﻛﻮﻝ ‪.HTTP‬‬

‫‪242‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪xhr‬‬
‫ﳛﺪﺩ ﻫﺬﺍ ﺍﳋﻴﺎﺭ ﺍﺳﻢ ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪ ﺇﻧﺸﺎﺀ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XMLHttpRequest‬ﻭﺍﻟﻘﻴﻤﺔ‬
‫ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻫﻲ ‪ ActiveXObject‬ﰲ ﺣﺎﻝ ﺃﻥ ﺍﳌﺘﺼﻔﺢ ﻫﻮ ‪ IE‬ﻭﺇﻻ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻜﺎﺋﻦ‬
‫‪ ,XMLHttpRequest‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﺠﺎﻭﺯ ﺍﻟﻜﺎﺋﻦ ‪ XMLHttpRequest‬ﺍﻟﺬﻱ ﰎ‬
‫ﺇﻧﺸﺎﺅﻩ ﺃﻭ ﺗﻐﻴﲑ ﺑﻌﺾ ﺧﺼﺎﺋﺼﻪ‪.‬‬

‫أمثلة‬
‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﻤﻴﻞ ﻣﻠﻒ ‪ JavaScript‬ﻭﺗﻨﻔﻴﺬﻩ ﻣﺒﺎﺷﺮﺓ‪:‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺇﺭﺳﺎﻝ ﺑﻌﺾ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺇﱃ ﺍﳋﺎﺩﻡ ﻣﻊ ﺇﻋﻼﻡ ﺍﳌﺴﺘﺨﺪﻡ ﰲ ﺣﺎﻝ ﺍﻧﺘﻬﺎﺀ ﺍﻟﻌﻤﻠﻴﺔ ﺑﻨﺠﺎﺡ‪:‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻋﺎﺩﺓ ﺁﺧﺮ ﲢﺪﻳﺚ ﻣﻦ ﳏﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ‪:test.html‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﲢﻤﻴﻞ ﺑﻌﺾ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﻦ ﺍﳋﺎﺩﻡ ﺑﺸﻜﻞ ﻣﺘﺰﺍﻣﻦ ﳑﺎ ﻳﻌﲏ ﺗﻮﻗﻒ ﺍﳌﺘﺼﻔﺢ ﻋﻦ ﺍﻻﺳﺘﺠﺎﺑﺔ ﺣﱴ‬
‫ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ‪:‬‬

‫‪243‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﺇﺭﺳﺎﻝ ﻭﺛﻴﻘﺔ ‪ XML‬ﺇﱃ ﺍﳋﺎﺩﻡ ﻭﺫﻟﻚ ﺑﺘﻌﻴﲔ ﺍﻟﻘﻴﻤﺔ ‪ false‬ﺇﱃ ﺍﳋﻴﺎﺭ ‪processData‬‬
‫ﳌﻨﻊ ﻋﻤﻠﻴﺔ ﲢﻮﻳﻞ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺇﱃ ﻗﻴﻤﺔ ﻧﺼﻴﺔ‪:‬‬

‫ﻭﺃﺧﲑﹰﺍ ﰲ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﻳﺘﻢ ﺇﺭﺳﺎﻝ ﻗﻴﻤﺔ ﺇﱃ ﺍﳋﺎﺩﻡ ﻭﺇﻋﻼﻡ ﺍﳌﺴﺘﺨﺪﻡ ﰲ ﺣﺎﻝ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ‪:‬‬

‫)]‪load(url, [data], [callback‬‬

‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻹﻋﺎﺩﺓ ﺷﻴﻔﺮﺓ ‪ HTML‬ﻣﻦ ﺍﻟﺼﻔﺤﺔ ﺍﶈﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ ,url‬ﻭﻳﺘﻢ ﺗﻨﻔﻴﺬ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ‬
‫ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ GET‬ﺑﺸﻜﻞ ﺍﻓﺘﺮﺍﺿﻲ ﺇﻻ ﺇﻥ ﰎ ﲤﺮﻳﺮ ﻭﺳﻄﺎﺀ ﺇﺿﺎﻓﻴﲔ ﻋﻨﺪﻫﺎ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ‬
‫‪ .POST‬ﻭﺑﺪﺀﹰﺍ ﻣﻦ ﺍﻹﺻﺪﺍﺭ ‪ 1.2‬ﺗﺴﺘﻄﻴﻊ ﺗﻌﻴﻴﻢ ﳏﺪﺩﺍﺕ ﻟﺘﺮﺷﻴﺢ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﺍﳌﻌﺎﺩﺓ ﻣﻦ ﻗﺒﻞ ﻫﺬﺍ‬
‫ﺍﻟﺘﺎﺑﻊ ﺣﻴﺚ ﺗﺴﺘﻄﻴﻊ ﺇﺭﺟﺎﻉ ﺟﺰﺀ ﺃﻭ ﻛﻞ ﺷﻴﻔﺮﺓ ﺍﻟـ ‪ HTML‬ﻣﻦ ﺍﻟـ ‪ rul‬ﺍﶈﺪﺩ‪ .‬ﻭﺻﻴﻐﺔ ﲤﺮﻳﺮ ﺍﶈﺪﺩ ﺗﺒﺪﻭ ﻛﻤﺎ‬
‫ﰲ ﺍﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪ ,"url #some > selector" :‬ﻭﺑﺸﻜﻞ ﺍﻓﺘﺮﺍﺿﻲ ﻳﺘﻢ ﺗﻄﺒﻴﻖ ﺍﶈﺪﺩ * > ‪ .body‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ‬
‫‪ data‬ﻓﻬﻮ ﻭﺳﻴﻂ ﺍﺧﺘﻴﺎﺭﻱ ﻳﺘﺄﻟﻒ ﻣﻦ ﺃﺯﻭﺍﺝ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ }‪ ,{key:value‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ‪callback‬‬
‫ﺍﻻﺧﺘﻴﺎﺭﻱ ﻓﻬﻮ ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ load‬ﺑﻐﺾ ﺍﻟﻨﻈﺮ ﻫﻞ ﳒﺢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ﺃﻡ ﻻ‪.‬‬

‫‪244‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫أمثلة‬
‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﻤﻴﻞ ﳏﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ‪ feeds.html‬ﺩﺍﺧﻞ ﺍﻟﻌﻨﺼﺮ ‪ div‬ﺍﻟﺬﻱ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﻟﻪ‬
‫ﺗﺴﺎﻭﻱ ‪:feeds‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﲤﺮﻳﺮ ﻣﺼﻔﻮﻓﺔ ﻗﻴﻢ ﺇﱃ ﺍﻟﺼﻔﺤﺔ ‪:test.php‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻷﺧﲑ ﻓﻴﺘﻢ ﲤﺮﻳﺮ ﺍﻟﻘﻴﻤﺔ ‪ limit‬ﺗﺴﺎﻭﻱ ‪ 25‬ﺇﱃ ﺍﻟﺼﻔﺤﺔ ‪ feeds.php‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪POST‬‬
‫ﻭﺑﻌﺪ ﺍﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ load‬ﻳﺘﻢ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪:callback‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﲢﻤﻴﻞ ﲨﻴﻊ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﻼﺋﺤﺔ ﺍﻟﱵ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﳍﺎ ﺗﺴﺎﻭﻱ ‪jq-p-Getting-Started‬‬
‫ﺿﻤﻦ ﻻﺋﺤﺔ ﰲ ﺍﻟﺼﻔﺤﺔ ﺍﳊﺎﻟﻴﺔ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ ‪ id‬ﳍﺎ ﺗﺴﺎﻭﻱ ‪:links‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪245‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫)]‪jQuery.get(url, [data], [callback], [type‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﺤﻤﻴﻞ ﳏﺘﻮﻳﺎﺕ ﺻﻔﺤﺔ ﳏﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ url‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ .GET‬ﻭﻳﻌﺘﱪ ﻫﺬﺍ‬
‫ﺍﻟﺘﺎﺑﻊ ﻃﺮﻳﻘﺔ ﺑﺴﻴﻄﺔ ﺇﺭﺳﺎﻝ ﻃﻠﺐ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ GET‬ﺇﱃ ﺍﳋﺎﺩﻡ ﺑﺪﻭﻥ ﺇﻣﻜﺎﻧﻴﺔ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪,$.ajax‬‬
‫ﻭﺍﻟﻮﺳﻴﻂ ‪ callback‬ﳛﺪﺩ ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﰲ ﺣﺎﻝ ﺍﻻﻧﺘﻬﺎﺀ ﻭﺑﻨﺠﺎﺡ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ ,get‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ‪ data‬ﻓﻬﻮ‬
‫ﻭﺳﻴﻂ ﺍﺧﺘﻴﺎﺭﻱ ﻳﺘﺄﻟﻒ ﻣﻦ ﺃﺯﻭﺍﺝ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ }‪ ,{key:value‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ type‬ﻓﻴﻘﺒﻞ ﺍﻟﻘﻴﻢ‬
‫ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪.xml‬‬
‫• ‪.html‬‬
‫• ‪.script‬‬
‫• ‪.json‬‬
‫• ‪.jsonp‬‬
‫• ‪.text‬‬

‫)]‪jQuery.getJSON(url, [data], [callback‬‬

‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﺤﻤﻴﻞ ﺑﻴﺎﻧﺎﺕ ﺑﺼﻴﻐﺔ ‪ JSON‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ ,GET‬ﻭﺑﺪﺀﹰﺍ ﻣﻦ ﺍﻹﺻﺪﺍﺭ‬
‫‪ jQuery 1.2‬ﳝﻜﻦ ﲢﻤﻴﻞ ﺑﻴﺎﻧﺎﺕ ﺑﺼﻴﻐﺔ ‪ JSON‬ﻣﻮﺟﻮﺩﺓ ﻋﻠﻰ ﻧﻄﺎﻕ ﺁﺧﺮ ﺑﺘﺤﺪﻳﺪ ﺗﺎﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ‬
‫‪ JSONP‬ﺍﻟﺬﻱ ﳝﻜﻦ ﲤﺮﻳﺮﻩ ﻛﻤﺎ ﻳﻠﻲ‪ ,"myurl?callback=?" :‬ﺣﻴﺚ ﺗﺴﺘﺒﺪﻝ ﻣﻜﺘﺒﺔ ‪ jQuery‬ﻗﻴﻤﺔ‬
‫‪ callback‬ﺑﺎﺳﻢ ﺍﻟﺘﺎﺑﻊ ﺍﳌﻨﺎﺳﺐ‪.‬‬

‫‪246‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫أمثلة‬
‫ﲢﻤﻴﻞ ﺑﻴﺎﻧﺎﺕ ‪ JSON‬ﻣﻦ ﺍﳌﻠﻒ ‪ test.js‬ﻭﻋﺮﺽ ﻗﻴﻤﺔ ﺍﺣﻘﻞ ‪ name‬ﻣﻦ ﻫﺬﻩ ﺍﻟﺒﻴﺎﻧﺎﺕ‪:‬‬

‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻬﻮ ﺷﺒﻴﻪ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻣﻊ ﻭﺟﻮﺩ ﻓﺎﺭﻕ ﻭﻫﻮ ﲤﺮﻳﺮ ﻭﺳﻄﺎﺀ ﻋﻨﺪ ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ‪:‬‬

‫ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻪ ﺛﻼﺛﺔ ﻭﺳﻄﺎﺀ ﻫﻲ‪:‬‬

‫• ‪ :url‬ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﺍﻟﱵ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻫﺎ ﻭﻣﻦ ﺍﳌﻤﻜﻦ ﺃﻥ ﺗﻜﻮﻥ ﻋﻠﻰ ﻧﻔﺲ ﺍﻟﻨﻄﺎﻕ ﺃﻭ ﻧﻄﺎﻕ ﺁﺧﺮ‪.‬‬
‫• ‪ :data‬ﻭﺳﻴﻂ ﺍﺧﺘﻴﺎﺭﻱ ﻳﺘﺄﻟﻒ ﻣﻦ ﳎﻤﻮﻋﺔ ﻣﻦ ﺃﺯﻭﺍﺝ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ‪.‬‬
‫• ‪ :callback‬ﺗﺎﺑﻊ ﺍﺳﺘﺪﻋﺎﺀ ﻋﻜﺴﻲ ﺳﻴﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ getJSON‬ﺑﺸﻜﻞ ﻧﺎﺟﺢ‪,‬‬
‫ﻭﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ‪:‬‬
‫‪ :data o‬ﻭﻫﻲ ﺑﻴﺎﻧﺎﺕ ﺑﺼﻴﻐﺔ ‪JSON‬‬
‫‪ :textStatus o‬ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﳍﺎ ﺇﺣﺪﻯ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫ ‪timeout‬‬
‫ ‪error‬‬
‫ ‪notmodified‬‬
‫ ‪success‬‬
‫ ‪parsererror‬‬

‫)]‪jQuery.getScript(url, [callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﺤﻤﻴﻞ ﻭﺗﻨﻔﻴﺬ ﻣﻠﻒ ‪ JavaScript‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ ,GET‬ﻭﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻪ‬
‫ﻭﺳﻴﻄﲔ ﳘﺎ‪:‬‬

‫• ‪ :url‬ﻣﺴﺎﺭ ﻣﻠﻒ ﺍﻟـ ‪ JavaScript‬ﻭﳝﻜﻦ ﺃﻥ ﻳﻜﻮﻥ ﻫﺬﺍ ﺍﳌﺴﺎﺭ ﻋﻠﻰ ﻧﻔﺲ ﺍﻟﻨﻄﺎﻕ ﺃﻭ ﻋﻠﻰ ﻧﻄﺎﻕ ﺁﺧﺮ‪.‬‬
‫• ‪ :callback‬ﺗﺎﺑﻊ ﺍﺳﺘﺪﻋﺎﺀ ﻋﻜﺴﻲ ﺍﺧﺘﻴﺎﺭﻱ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﻋﻨﺪ ﲢﻤﻴﻞ ﺍﳌﻠﻒ ﺑﺸﻜﻞ ﻧﺎﺟﺢ‪.‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﻤﻴﻞ ﺍﳌﻠﻒ ‪:test.js‬‬

‫‪247‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻬﻮ ﻣﺸﺎﺑﻪ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻣﻊ ﻭﺟﻮﺩ ﺍﺳﺘﺪﻋﺎﺀ ﻟﻠﺘﺎﺑﻊ ﺍﻟﻌﻜﺴﻲ‪:‬‬

‫)]‪jQuery.post(url, [data], [callback], [type‬‬

‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﺤﻤﻴﻞ ﳏﺘﻮﻳﺎﺕ ﺻﻔﺤﺔ ﳏﺪﺩ ﺑﺎﻟﻮﺳﻴﻂ ‪ url‬ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ .POST‬ﻭﻳﻌﺘﱪ ﻫﺬﺍ‬
‫ﺍﻟﺘﺎﺑﻊ ﻃﺮﻳﻘﺔ ﺑﺴﻴﻄﺔ ﺇﺭﺳﺎﻝ ﻃﻠﺐ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ POST‬ﺇﱃ ﺍﳋﺎﺩﻡ ﺑﺪﻭﻥ ﺇﻣﻜﺎﻧﻴﺔ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪,$.ajax‬‬
‫ﻭﺍﻟﻮﺳﻴﻂ ‪ callback‬ﳛﺪﺩ ﺗﺎﺑﻊ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻩ ﰲ ﺣﺎﻝ ﺍﻻﻧﺘﻬﺎﺀ ﻭﺑﻨﺠﺎﺡ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ ,post‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ‪data‬‬
‫ﻓﻬﻮ ﻭﺳﻴﻂ ﺍﺧﺘﻴﺎﺭﻱ ﻳﺘﺄﻟﻒ ﻣﻦ ﺃﺯﻭﺍﺝ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ }‪ ,{key:value‬ﺃﻣﺎ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ type‬ﻓﻴﻘﺒﻞ‬
‫ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫• ‪.xml‬‬
‫• ‪.html‬‬
‫• ‪.script‬‬
‫• ‪.json‬‬
‫• ‪.jsonp‬‬
‫• ‪.text‬‬

‫أمثلة‬
‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻃﻠﺐ ﺍﻟﺼﻔﺤﺔ ‪ test.php‬ﻣﻊ ﲡﺎﻫﻞ ﺍﻟﻘﻴﻤﺔ ﺍﻟﱵ ﺗﻌﻴﺪﻫﺎ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﺃﻳﻀﹰﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻃﻠﺐ ﺍﻟﺼﻔﺤﺔ ‪ test.php‬ﻟﻜﻦ ﻫﺬﻩ ﺍﳌﺮﺓ ﻣﻊ ﺇﺭﺳﺎﻝ ﺑﻴﺎﻧﺎﺕ ﺇﱃ ﺍﻟﺼﻔﺤﺔ ﻋﻦ ﻃﺮﻳﻖ ﺍﻟﻮﺳﻴﻂ‬
‫ﺍﻻﺧﺘﻴﺎﺭﻱ ‪ data‬ﻭﺃﻳﻀﹰﺎ ﻳﺘﻢ ﲡﺎﻫﻞ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﱵ ﺗﻌﻴﺪﻫﺎ ﺍﻟﺼﻔﺤﺔ‪:‬‬

‫ﻭﺃﻳﻀﹰﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫‪248‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﻃﻠﺐ ﺍﻟﺼﻔﺤﺔ ‪ test.php‬ﻣﻊ ﺗﻨﻔﻴﺬ ﺗﺎﺑﻊ ﺍﻻﺳﺘﺪﻋﺎﺀ ﺍﻟﻌﻜﺴﻲ ﺍﻟﺼﺮﺡ ﻋﻨﻪ ﺑﺎﻟﻮﺳﻴﻂ‬
‫ﺍﻻﺧﺘﻴﺎﺭﻱ ‪:callback‬‬

‫ﺃﻳﻀﹰﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺸﺒﻪ ﺍﳌﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻣﻊ ﻭﺟﻮﺩ ﲤﺮﻳﺮ ﻟﻠﺒﻴﺎﻧﺎﺕ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻴﻂ ﺍﻻﺧﺘﻴﺎﺭﻱ ‪:data‬‬

‫أحداث العمليات الغير متزامنة ‪Ajax Events‬‬

‫)‪ajaxComplete(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳊﺪﺙ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ callback‬ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪AJAX‬‬
‫‪ ,Request‬ﻭﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ ﳘﺎ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XMLHttpRequest‬ﻭﺇﻋﺪﺍﺩﺍﺕ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ‬
‫ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺭﺳﺎﻟﺔ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫)‪ajaxError(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳊﺪﺙ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ callback‬ﻋﻨﺪ ﺣﺪﻭﺙ ﺧﻄﺄ ﺃﺛﻨﺎﺀ ﺗﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪AJAX‬‬
‫‪ ,Request‬ﻭﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ ﳘﺎ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XMLHttpRequest‬ﻭﺇﻋﺪﺍﺩﺍﺕ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ‬
‫ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫‪249‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺭﺳﺎﻟﺔ ﻋﻨﺪ ﺣﺪﻭﺙ ﺧﻄﺄ ﺃﺛﻨﺎﺀ ﺗﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫)‪ajaxSend(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳊﺪﺙ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ callback‬ﻗﺒﻞ ﺑﺪﺀ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪,AJAX Request‬‬
‫ﻭﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ ﳘﺎ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XMLHttpRequest‬ﻭﺇﻋﺪﺍﺩﺍﺕ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺭﺳﺎﻟﺔ ﻗﺒﻞ ﺑﺪﺀ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫)‪ajaxStart(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳊﺪﺙ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ callback‬ﻋﻨﺪ ﺍﻟﺒﺪﺀ ﺑﺘﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪AJAX‬‬
‫‪ ,Request‬ﻭﻟﻴﺲ ﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺃﻱ ﻭﺳﻴﻂ‪:‬‬

‫ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻈﻬﺮ ﺭﺳﺎﻟﺔ "ﺟﺎﺭﻱ ﺍﻟﺘﺤﻤﻴﻞ" ﻋﻨﺪ ﺑﺪﺀ ﺗﻨﻔﻴﺬ ﺍﻟﻄﻠﺐ‪:‬‬

‫)‪ajaxStop(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳊﺪﺙ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ callback‬ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪AJAX‬‬
‫‪ ,Request‬ﻭﻟﻴﺲ ﳍﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺃﻱ ﻭﺳﻴﻂ‪:‬‬

‫‪250‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﺧﻔﺎﺀ ﺭﺳﺎﻟﺔ "ﺟﺎﺭﻱ ﺍﻟﺘﺤﻤﻴﻞ" ﻋﻨﺪ ﺑﺪﺀ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺎﺕ ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫)‪ajaxSuccess(callback‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﳊﺪﺙ ﻟﺘﻨﻔﻴﺬ ﺍﻟﺘﺎﺑﻊ ‪ callback‬ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﺑﻨﺠﺎﺡ ﻣﻦ ﺗﻨﻔﻴﺬ ﻋﻤﻠﻴﺔ ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ ‪AJAX‬‬
‫‪ ,Request‬ﻭﻳﻘﺒﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻭﺳﻴﻄﲔ ﳘﺎ ﻛﺎﺋﻦ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ XMLHttpRequest‬ﻭﺇﻋﺪﺍﺩﺍﺕ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ‬
‫ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﺭﺳﺎﻟﺔ ﻋﻨﺪ ﺍﻻﻧﺘﻬﺎﺀ ﻣﻦ ﺗﻨﻔﻴﺬ ﺍﻟﻌﻤﻠﻴﺔ ﺑﻨﺠﺎﺡ‪:‬‬

‫متنوعات‬
‫)‪jQuery.ajaxSetup(options‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺘﻌﻴﲔ ﺍﻹﻋﺪﺍﺩﺍﺕ ﺍﻟﻌﺎﻣﺔ ﻟﻠﻄﺒﺎﺕ ﺍﻟﻐﲑ ﻣﺘﺰﺍﻣﻨﺔ‪ ,‬ﻭﺍﳋﻴﺎﺭ ‪ options‬ﻫﻮ ﻋﺒﺎﺭﺓ ﻋﻦ‬
‫ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳌﻔﺎﺗﻴﺢ ﻭﺍﻟﻘﻴﻢ‪ .‬ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ﺍﳋﻴﺎﺭ ‪ url‬ﺇﱃ ﺍﻟﻘﻴﻤﺔ "‪ "/xmlhttp/‬ﻣﻊ ﺇﻟﻐﺎﺀ‬
‫ﺍﻷﺣﺪﺍﺙ ﺍﻟﻌﺎﻣﺔ ﻭﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻌﻤﻠﻴﺔ ‪ POST‬ﺑﺪ ﹰﻻ ﻣﻦ ﺍﻟﻌﻤﻠﻴﺔ ‪ GET‬ﻟﺘﻨﻔﻴﺬ ﺍﻟﻄﻠﺒﺎﺕ‪:‬‬

‫)(‪serialize‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺴﻠﺴﺔ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻘﻴﻢ ﻭﲢﻮﻳﻠﻬﺎ ﺇﱃ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ‪ ,‬ﻭﻫﺬﻩ ﺍﻟﻌﻤﻠﻴﺔ ﺗﺴﺘﺨﺪﻡ ﻟﺘﺠﻬﻴﺰ‬
‫ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﱵ ﺃﺩﺧﻠﻬﺎ ﺍﳌﺴﺘﺨﺪﻡ ﻹﺭﺳﺎﳍﺎ ﺇﱃ ﺍﳋﺎﺩﻡ‪ ,‬ﻭﻫﺬﻩ ﺍﻟﻌﻤﻠﻴﺔ ﻫﻲ ﻋﻤﻠﻴﺔ ﻗﻴﺎﺳﻴﺔ ﺗﺘﻮﺍﻓﻖ ﻣﻊ ﲨﻴﻊ ﻟﻐﺎﺕ ﺍﻟﱪﳎﺔ‬
‫ﻭﻣﻨﺼﺎﺕ ﺍﻟﻌﻤﻞ‪ .‬ﻭﻟﻜﻲ ﻳﻌﻤﻞ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﺑﺸﻜﻞ ﺻﺤﻴﺢ ﳚﺐ ﺃﻥ ﲢﺘﻮﻱ ﺣﻘﻮﻝ ﺍﻟﻨﻤﻮﺫﺝ ﻋﻠﻰ ﻗﻴﻤﺔ ﻟﻠﻮﺍﺻﻔﺔ ‪name‬‬
‫ﻭﺇﻻ ﻓﺈﻥ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﻦ ﻳﻌﻤﻞ ﺑﺸﻜﻞ ﺻﺤﻴﺢ‪.‬‬

‫‪251‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﻮﻳﻞ ﺍﻟﻘﻴﻢ ﺍﳌﺪﺧﻠﺔ ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﺇﱃ ﺳﻠﺴﻠﺔ ﻧﺼﻴﺔ ﳝﻜﻦ ﺇﺭﺳﺎﳍﺎ ﻋﱪ ﺍﻟـ ‪ URL‬ﻟﺘﻨﻔﻴﺬ ﻋﻤﻠﻴﺎﺕ‬
‫ﻏﲑ ﻣﺘﺰﺍﻣﻨﺔ‪:‬‬

‫ﺃﻣﺎ ﻭﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪252‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

‫‪253‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫)(‪srializeArray‬‬
‫ﻳ‪‬ﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﻟﺴﻠﺴﺔ ﲨﻴﻊ ﺣﻘﻮﻝ ﺍﻟﻨﻤﻮﺫﺝ ﻛﻤﺎ ﰲ ﺍﻟﺘﺎﺑﻊ )(‪ serialize‬ﻟﻜﻦ ﻫﺬﺍ ﺍﻟﺘﺎﺑﻊ ﳛﻮﻝ ﺍﻟﻘﻴﻢ‬
‫ﺇﱃ ﺻﻴﻐﺔ ‪ , JSON‬ﻭﻧﺘﻴﺠﺔ ﺍﻟﺘﺎﺑﻊ ﻟﻴﺴﺖ ﻗﻴﻤﺔ ﻧﺼﻴﺔ ﻭﺇﳕﺎ ﻛﺎﺋﻦ ﻣﻦ ﻧﻮﻉ ‪ ,JSON‬ﻭﺷﻜﻞ ﺍﻟﻨﺘﻴﺠﺔ ﻳﻜﻮﻥ ﻣﺸﺎﺑﻪ‬
‫ﳌﺎ ﻳﻠﻲ‪:‬‬

‫‪254‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫أدوات‬
‫توابع التفاعل مع المتصفح وفحص الميزات ‪Browser and Feature Detection‬‬
‫‪jQuery.support‬‬
‫ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳋﺼﺎﺋﺺ ﲤﺖ ﺇﺿﺎﻓﺘﻬﺎ ﰲ ﺍﻹﺻﺪﺍﺭ ‪ 1.3‬ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﳌﻌﺮﻓﺔ ﺑﻌﺾ ﺧﺼﺎﺋﺺ ﺍﳌﺘﺼﻔﺢ‬
‫ﻭﺍﻟﻌﻴﻮﺏ ﺍﻟﱵ ﻓﻴﻪ‪ .‬ﻭﻣﻜﺘﺒﺔ ‪ jQuery‬ﲢﺘﻮﻱ ﻋﻠﻰ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﳋﺼﺎﺋﺺ ﺍﳉﺎﻫﺰﺓ ﻟﻼﺳﺘﺨﺪﺍﻡ ﻭﳝﻜﻦ ﺇﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ‬
‫ﺃﺧﺮﻯ ﺧﺎﺻﺔ ﺑﻚ‪ .‬ﻃﺒﻌﹰﺎ ﻣﻌﻈﻢ ﻫﺬﻩ ﺍﳋﺼﺎﺋﺺ ﻟﻴﺲ ﻣﻦ ﺍﻟﻀﺮﻭﺭﺓ ﺃﻥ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﰲ ﺍﳌﻬﺎﻡ ﺍﻟﻴﻮﻣﻴﺔ ﰲ ﻋﻤﻠﻚ‬
‫ﻭﻟﻜﻨﻬﺎ ﺗ‪‬ﺴﺘﺨﺪﻡ ﺃﺛﻨﺎﺀ ﺗﻄﻮﻳﺮ ﺍﻟﱪﳎﻴﺎﺕ ﺍﳉﺎﻫﺰﺓ ‪ Plugins‬ﻭﺑﻨﻴﺔ ﻣﻜﺘﺒﺔ ‪.jQuery‬‬

‫‪boxModel‬‬
‫ﺗﻜﻮﻥ ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﲤﺖ ﻋﻤﻠﻴﺔ ﺭﺳﻢ ﺍﻟﺼﻔﺤﺔ ﺃﻭ ﺍﳌﺘﺼﻔﺢ ﺑﺎﺳﺘﺨﺪﺍﻡ ‪W3C‬‬
‫‪ CSS Box Model‬ﻭﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ‪ IE6, IE7‬ﻋﻨﺪﻣﺎ ﺗﻌﻤﻞ ﰲ ﰲ ﺍﻟﻨﻤﻂ ‪ Quirks‬ﻭﺗﻜﻮﻥ‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ null‬ﺣﱴ ﻳﺘﻢ ﲢﻤﻴﻞ ﻛﺎﻣﻞ ﺍﻟﻮﺛﻴﻘﺔ‪.‬‬

‫‪cssFloat‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﻋﻨﺪﻣﺎ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ‪ style.cssFloat‬ﻟﻠﻮﺻﻮﻝ ﺇﱃ ﺍﻟﻘﻴﻤﺔ ﺍﻟﻌﺎﺋﻤﺔ‬
‫ﺍﳊﺎﻟﻴﺔ ﰲ ‪ ,CSS‬ﻭﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ﲨﻴﻊ ﺇﺻﺪﺍﺭﺍﺕ ‪ IE‬ﺣﻴﺚ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ‪ styleFloat‬ﺑﺪ ﹰﻻ ﻋﻦ‬
‫‪.cssFloat‬‬

‫‪255‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫‪hrefNormalized‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻳﺘﺮﻙ ﻧﺘﺎﺋﺞ ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ )'‪getAttribute('href‬‬
‫ﺑﺪﻭﻥ ﺗﻌﺪﻳﻞ )ﺍﻟﻘﻴﻤﺔ ﰲ ﺍﳌﺘﺼﻔﺢ ‪ IE‬ﺗﺴﺎﻭﻱ ‪.(false‬‬

‫‪htmlSerialize‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻳﺴﻠﺴﻞ ﻋﻨﺎﺻﺮ ﺍﻟﺮﺍﺑﻂ ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳋﺎﺻﻴﺔ‬
‫‪) innerHTML‬ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ‪.(IE‬‬

‫‪leadingWhitespace‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﰲ ﺣﺎﻝ ﺃﻥ ﺍﳌﺘﺼﻔﺢ ﳛﺎﻓﻆ ﻋﻠﻰ ﺍﻟﻔﺮﺍﻏﺎﺕ ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳋﺎﺻﻴﺔ‬
‫‪) innerHTML‬ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ‪ IE6‬ﻭ ‪.(IE8‬‬

‫‪noCloneEvent‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﺫﺍ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻳﻨﺴﺦ ﺗﻮﺍﺑﻊ ﺍﻻﺳﺘﺠﺎﺑﺔ ﻟﻸﺣﺪﺍﺙ ﻋﻨﺪ ﻧﺴﺦ ﺍﻟﻌﻨﺼﺮ‬
‫)ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ﺍﳌﺘﺼﻔﺢ ‪.(IE‬‬

‫‪objectAll‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ )'*'(‪ getElementsByTagName‬ﻳﻌﻴﺪ‬
‫ﻛﻞ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺣﻔﺎﺩ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ )ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ‪ IE7‬ﻭ ‪.(IE8‬‬

‫‪opacity‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻳﺴﺘﻄﻴﻊ ﺗﻔﺴﲑ ‪ opacity css‬ﺑﺸﻜﻞ ﺻﺤﻴﺢ )ﻗﻴﻤﺔ‬
‫ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ﺍﳌﺘﺼﻔﺢ ‪ IE‬ﺣﻴﺚ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳌﺮﺷﺢ ‪ filter‬ﺑﺪﻻ ﻋﻦ ‪.(opacity‬‬

‫‪scriptEval‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺘﺎﺑﻊ ‪ appendChild‬ﺃﻭ ﺍﻟﺘﺎﺑﻊ‬
‫‪ createTextNode‬ﻹﺩﺭﺍﺝ ﻧﺺ ﻳﺆﺩﻱ ﺇﱃ ﺗﻔﺴﲑ ﻗﻴﻤﺔ ﻫﺬﺍ ﺍﻟﻨﺺ )ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ‬
‫ﺍﳌﺘﺼﻔﺢ ‪ IE‬ﺣﻴﺚ ﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ‪ text‬ﺑﺪ ﹰﻻ ﻣﻦ ﺫﻟﻚ(‪.‬‬

‫‪style‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﺳﺘﺪﻋﺎﺀ ﺍﻟﺘﺎﺑﻊ )'‪ getAttribute('style‬ﺗﻌﻴﺪ ﻗﻴﻤﺔ ﺍﻟﻮﺍﺻﻔﺔ‬
‫‪ style‬ﺍﳋﻄﻴﺔ ﻟﻠﻌﻨﺼﺮ ﺍﳊﺎﱄ )ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ false‬ﰲ ﺍﳌﺘﺼﻔﺢ ‪ IE‬ﻭﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳋﺎﺻﻴﺔ‬
‫‪ cssText‬ﺑﺪ ﹰﻻ ﻋﻦ ‪.(style‬‬

‫‪tbody‬‬
‫ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺎﻭﻱ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻳﺴﻤﺢ ﺑﺎﻟﻮﺍﲰﺔ ‪ table‬ﺑﺪﻭﻥ ﺍﻟﻮﺍﲰﺔ ‪) tbody‬ﻗﻴﻤﺔ‬
‫ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﰲ ﺍﳌﺘﺼﻔﺢ ‪ IE‬ﺗﺴﺎﻭﻱ ‪ false‬ﺣﻴﺚ ﻳﺘﻢ ﺇﺩﺭﺍﺝ ﺍﻟﻮﺍﲰﺔ ‪ tbody‬ﺇﻥ ﱂ ﺗﻜﻦ ﻣﻮﺟﻮﺩﺓ(‪.‬‬
‫‪256‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬
 ‫‪jQuery.browser‬‬
‫ﰎ ﺇﻟﻐﺎﺀ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﰲ ﺍﻹﺻﺪﺍﺭ ‪) 1.3‬ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ‪ jQuery.support‬ﺑﺪ ﹰﻻ ﻋﻨﻬﺎ( ﻭﲢﺘﻮﻱ ﻋﻠﻰ‬
‫ﺇﺷﺎﺭﺓ ﻟﻜﻞ ﻣﺘﺼﻔﺢ‪ ,‬ﻭﻗﻴﻤﺘﻬﺎ ﻫﻲ ﻣﻦ ‪ navigator.userAgent‬ﻭﺍﻟﻘﻴﻢ ﺍﳌﺘﻮﻓﺮﺓ ﻫﻲ‪:‬‬

‫• ‪safari‬‬
‫• ‪opera‬‬
‫• ‪msie‬‬
‫• ‪mozilla‬‬

‫ﻭﺗﻜﻮﻥ ﻗﻴﻤﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺟﺎﻫﺰﺓ ﻗﺒﻞ ﲢﻤﻴﻞ ﻛﺎﻣﻞ ﻋﻨﺎﺻﺮ ﺍﻟﻮﺛﻴﻘﺔ ﻟﺬﻟﻚ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻹﺿﺎﻓﺔ‬
‫ﺃﺣﺪﺍﺙ ﺟﺎﻫﺰﺓ ﻟﺒﻌﺾ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻓﻘﻂ‪.‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺇﺻﺪﺍﺭ ﻣﻊ ﺍﺳﻢ ﺍﳌﺘﺼﻔﺢ ﺍﳊﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫‪257‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﻭﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﺇﻇﻬﺎﺭ ﺭﺳﺎﻟﺔ ﻓﻘﻂ ﺇﻥ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻫﻮ ‪ FireFox‬ﺍﻹﺻﺪﺍﺭ ﺭﻗﻢ ‪:3‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﲢﺪﻳﺪ ﻗﻴﻤﺔ ﺍﻟﻨﻤﻂ ‪ css‬ﺑﻨﺎﺀ ﻋﻠﻰ ﻧﻮﻉ ﺍﳌﺘﺼﻔﺢ‪:‬‬

‫‪jQuery.browser.version‬‬
‫ﰎ ﺇﻟﻐﺎﺀ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﰲ ﺍﻹﺻﺪﺍﺭ ‪) 1.3‬ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ‪ jQuery.support‬ﺑﺪ ﹰﻻ ﻋﻨﻬﺎ( ﻭﺗﻌﻴﺪ ﻫﺬﻩ‬
‫ﺍﳋﺎﺻﻴﺔ ﺭﻗﻢ ﺍﻹﺻﺪﺍﺭ ﺍﳊﺎﱄ ﻟﻠﻤﺘﺼﻔﺢ ﺍﳊﺎﱄ‪ ,‬ﻭﻣﺎﻳﻠﻲ ﺑﻌﺾ ﺍﻟﻘﻴﻢ ﺍﳋﺎﺻﺔ‪:‬‬

‫‪258‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫• ‪Internet Explorer: 6.0, 7.0‬‬
‫• ‪Moziall/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9‬‬
‫• ‪Opera: 9.20‬‬
‫• ‪Safari/Webkit: 312.8, 418.9‬‬

‫ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﺘﻢ ﻋﺮﺽ ﺇﺻﺪﺍﺭ ﺍﳌﺘﺼﻔﺢ ﺍﳊﺎﱄ‪:‬‬

‫ﺃﻣﺎ ﺍﻟﺸﻴﻔﺮﺓ ﺍﻟﻜﺎﻣﻠﺔ ﻟﻠﻤﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ ﻓﻬﻲ‪:‬‬

‫ﺃﻣﺎ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﻋﺮﺽ ﺭﺳﺎﻟﺔ ﻧﺼﻴﺔ ﻟﻠﻤﺘﺼﻔﺢ ‪:IE‬‬

‫‪259‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬

 ‫ﺃﻣﺎ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻓﻴﺘﻢ ﻋﺮﺽ ﺍﻹﺻﺪﺍﺭ ﺭﻗﻢ ﺍﻹﺻﺪﺍﺭ ﺍﻟﺮﺋﻴﺴﻲ ﻟﻠﻤﺘﺼﻔﺢ ‪:IE‬‬

‫‪jQuery.boxModel‬‬
‫ﰎ ﺇﻟﻐﺎﺀ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﰲ ﺍﻹﺻﺪﺍﺭ ‪) 1.3‬ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻡ ‪ jQuery.support‬ﺑﺪ ﹰﻻ ﻋﻨﻬﺎ( ﻭﺗﻌﻴﺪ ﻫﺬﻩ‬
‫ﺍﳋﺎﺻﻴﺔ ‪ true‬ﺇﻥ ﻛﺎﻥ ﺍﳌﺘﺼﻔﺢ ﺍﳊﺎﱄ ﻳﺘﻢ ﻋﺮﺿﻪ ﺑﺎﺳﺘﺨﺪﺍﻡ ‪:W3C CSS Box Model‬‬

‫‪260‬‬ ‫ﲨﻴﻊ ﺍﳊﻘﻮﻕ ﺗﺘﺒﻊ ﳊﻘﻮﻕ ﻣﻜﺘﺒﺔ ‪jQuery‬‬