jQuery ਕੋਰ ਜੈਨਰਲ - jQuery() ਮੇਥਡ
ਇੱਕ ਉਦਾਹਰਣ
ਸਾਰੇ div ਐਲੀਮੈਂਟਾਂ ਦੇ ਪੁੱਤਰ ਐਲੀਮੈਂਟਾਂ ਦੇ p ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਲੱਭੋ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਬਾਰਡਰ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੁਐਝਾਓ:
$("div > p").css("border", "1px solid gray");
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
jQuery() ਮੇਥਡ ਇੱਕ ਸਟਰਿੰਗ ਮੰਗੋ ਜਿਸ ਵਿੱਚ ਐਲੀਮੈਂਟ ਕਲੈਸ ਮੈਚ ਕਰਨ ਵਾਲਾ CSS ਚੋਣਕਰਤਾ ਹੋਵੇ:
jQuery() ਫੰਕਸ਼ਨ ਤਿੰਨ ਗਰੰਥ ਹਨ:
ਗਰੰਥ 1
ਇੱਕ ਸਟਰਿੰਗ ਮੰਗੋ ਜਿਸ ਵਿੱਚ ਐਲੀਮੈਂਟ ਕਲੈਸ ਮੈਚ ਕਰਨ ਵਾਲਾ CSS ਚੋਣਕਰਤਾ ਹੋਵੇ:
jQuery(selector, [context])
ਗਰੰਥ 2
ਮੂਲ ਹੈਲਟਮਲ ਦੇ ਸਟਰਿੰਗ ਨਾਲ DOM ਐਲੀਮੈਂਟ ਬਣਾਓ:
jQuery(html,[ownerDocument])
ਗਰੰਥ 3
ਡੋਮ ਦੇ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਚਲਾਉਣ ਵਾਲੀ ਫੰਕਸ਼ਨ ਬਾਂਧੋ:
jQuery( callback )
jQuery( selector, [ context ] )
该语法有以下几种用法:
ਵਰਤੋਂ 1: ਚੋਣਕਰਤਾ ਮਾਹੌਲ ਸੁਐਝਾਓ
ਵਰਤੋਂ ਕਰਨ ਦੀ ਵਿਧੀ
jQuery(selector, [context])
ਮੂਲ ਰੂਪ ਵਿੱਚ, ਚੋਣਕਰਤਾ ਡੋਕੂਮੈਂਟ ਰੂਟ ਤੋਂ DOM ਉੱਤੇ ਖੋਜ ਕਰਦਾ ਹੈ। ਪਰ, $() ਨੂੰ ਵਿਕਲਪਿਤ context ਪੈਰਾਮੀਟਰ ਦੀ ਸੁਵਿਧਾ ਹੈ।
ਜੇਕਰ ਅਸੀਂ ਕੋਈ ਕੈਲੱਬੈਕ ਵਿੱਚ ਇੱਕ ਐਲੀਮੈਂਟ ਲੱਭਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਨਿਮਨਲਿਖਤ ਖੋਜ ਦੇ ਦਾਇਰੇ ਵਿੱਚ ਰੱਖਿਆ ਜਾ ਸਕਦਾ ਹੈ:
ਇੱਕ ਉਦਾਹਰਣ
$($"div.foo").click(function() { $($"span", this).addClass("bar"); });
由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的 class。
ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ, ਚੋਣਕਰਤਾ ਮਾਹੌਲ .find() ਮੈਥਡ ਰਾਹੀਂ ਹੀ ਵਿਕਸਿਤ ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ $("span", this) ਇਕੱਲੇ $(this).find("span") ਦੇ ਬਰਾਬਰ ਹੈ。
jQuery ਦੇ ਕੋਰ ਫੰਕਸਨਾਂ ਸਭ ਇਸ ਫੰਕਸਨ ਰਾਹੀਂ ਹੀ ਚਲਾਉਣਗੇ।jQuery ਵਿੱਚ ਸਭ ਕੁਝ ਇਸ ਫੰਕਸਨ 'ਤੇ ਅਧਾਰਤ ਹੈ, ਜਾਂ ਕਿਸੇ ਤਰ੍ਹਾਂ ਇਸ ਫੰਕਸਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।ਇਸ ਫੰਕਸਨ ਦਾ ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਇਸਤੇਮਾਲ ਇਹ ਹੈ ਕਿ ਇਸ ਨੂੰ ਇੱਕ ਪ੍ਰੈਕਸੀਸ (ਆਮ ਤੌਰ 'ਤੇ CSS ਚੋਣਕਰਤਾ) ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਉਸ ਪ੍ਰੈਕਸੀਸ ਦੇ ਅਨੁਸਾਰ ਸਾਰੇ ਮੇਲ ਹੋਣ ਵਾਲੇ ਅੰਗਾਮੇ ਨੂੰ ਖੋਜ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
ਮੂਲ ਰੂਪ ਵਿੱਚ, ਜੇਕਰ context ਪੈਰਾਮੀਟਰ ਦਿੱਤਾ ਨਹੀਂ ਗਿਆ ਹੈ, ਤਾਂ $() ਸਾਰੇ ਹੀਰੋ ਵਿੱਚ ਖੋਜ ਕਰਦਾ ਹੈ; ਜੇਕਰ context ਪੈਰਾਮੀਟਰ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਇੱਕ DOM ਅੰਗਾਮੇ ਜਾਂ jQuery ਵਸਤੂ, ਤਾਂ ਉਹ ਉਸ context ਵਿੱਚ ਖੋਜ ਕਰਦਾ ਹੈ।jQuery 1.3.2 ਤੋਂ ਬਾਅਦ, ਉਸ ਦੇ ਵਾਪਸ ਦਾ ਅੰਗਾਮੇ ਕ੍ਰਮ ਉਸ context ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ。
ਵਰਤੋਂ 2: DOM ਅੰਗਾਮੇ ਦੀ ਵਰਤੋਂ
ਵਰਤੋਂ ਕਰਨ ਦੀ ਵਿਧੀ
jQuery(element)
ਇਹ ਫੰਕਸਨ ਸਾਨੂੰ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਪਾਏ ਗਏ DOM ਅੰਗਾਮੇ ਨੂੰ jQuery ਵਸਤੂ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।ਇਸ ਫੰਕਸਨ ਦੀ ਆਮ ਵਰਤੋਂ ਇਹ ਹੈ ਕਿ ਇਸ ਨੂੰ this ਕੀਵਾਰਡ ਵਾਲੇ callback ਫੰਕਸਨ ਵਿੱਚ ਪਾਏ ਗਏ ਅੰਗਾਮੇ 'ਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ:
ਇੱਕ ਉਦਾਹਰਣ
$("div.foo").click(function() { $(this).slideUp(); });
ਇਹ ਉਦਾਹਰਣ ਇਲੈਕਟ੍ਰੋਨ ਨੂੰ ਕਿਸੇ ਬੈਕਗਰਾਊਂਡ ਅਨਿਮੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰ ਕੇ ਛੁਪਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ।ਕਿਉਂਕਿ ਹੰਡਲਰ ਵਿੱਚ ਦਿੱਤਾ ਗਿਆ this ਕੀਵਾਰਡ ਵਿੱਚ ਜਿਸ ਨੂੰ ਇੱਕ ਬੈਕਗਰਾਊਂਡ ਅਨਿਮੇਸ਼ਨ ਵਾਲੇ ਹੰਡਲਰ ਦਾ ਸਮਾਨਤਾ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ, ਉਹ ਪੂਰਾ ਤੌਰ 'ਤੇ DOM ਅੰਗਾਮੇ ਹੈ, ਇਸ ਲਈ ਉਸ ਅੰਗਾਮੇ ਨੂੰ jQuery ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨੂੰ jQuery ਵਸਤੂ ਵਾਲੇ ਵਰਤ ਕੇ ਚਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ。
ਇਹ ਫੰਕਸਨ XML ਦਸਤਾਵੇਜ਼ ਅਤੇ Window ਵਸਤੂ (ਹਾਲਾਂਕਿ ਉਹ DOM ਅੰਗਾਮੇ ਨਹੀਂ ਹਨ) ਨੂੰ ਪ੍ਰਮਾਣਿਕ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਭੁਗਤਾਨ ਕਰ ਸਕਦਾ ਹੈ。
XML ਡਾਟਾ Ajax ਫੰਕਸਨ ਵਾਲੇ ਜਦੋਂ ਵਾਪਸ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ $() ਫੰਕਸਨ ਨੂੰ ਉਸ ਡਾਟਾ ਨੂੰ jQuery ਵਸਤੂ ਵਾਲੇ ਵਰਤ ਸਕਦੇ ਹਾਂ।ਜਦੋਂ ਉਹ ਪੂਰਾ ਹੋ ਜਾਵੇ, ਤਾਂ ਅਸੀਂ .find() ਅਤੇ ਹੋਰ DOM ਪਰਿਭਾਸ਼ਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ ਤਾਂ ਕਿ ਅਸੀਂ XML ਸਰੰਚਨਾ ਵਿੱਚ ਇੱਕ ਵਿਅਕਤੀ ਅੰਗਾਮੇ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕੀਏ。
ਵਰਤੋਂ 3: jQuery ਵਸਤੂ ਕਾਪੀ ਕਰਨਾ
ਵਰਤੋਂ ਕਰਨ ਦੀ ਵਿਧੀ
jQuery(jQuery object)
ਜਦੋਂ jQuery ਅਧਾਰਤ ਵਸਤੂ ਨੂੰ $() ਫੰਕਸਨ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਸ ਵਸਤੂ ਦਾ ਪਾਠ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ।ਨਵਾਂ jQuery ਵਸਤੂ ਮੂਲ ਵਸਤੂ ਨਾਲ ਸਮਾਨ ਤੌਰ 'ਤੇ ਇੱਕ ਸੀ ਜਿਸ ਨੂੰ ਉਸੇ DOM ਅੰਗਾਮੇ ਦੀ ਨਿਰਦੇਸ਼ਾਂ ਦਿੱਤੀਆਂ ਹਨ。
用法 4 :返回空的集合
ਵਰਤੋਂ ਕਰਨ ਦੀ ਵਿਧੀ
jQuery()
对于 jQuery 1.4,调用无参数的 jQuery() 方法会返回空的 jQuery 集合。在之前版本的 jQuery 中,这样会返回包含 document 节点的集合。
jQuery( html, [ ownerDocument ] )
该语法有以下几种用法:
用法 1 :创建新的元素
ਵਰਤੋਂ ਕਰਨ ਦੀ ਵਿਧੀ
jQuery(html,[ownerDocument])
你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。
当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("") 或 $("") ,但不推荐 $("")。在 jQuery 中,这个语法等同于 $(document.createElement("span"))。
如果以参数的形式将字符串传递给 $(),jQuery 会检查字符串是否是 HTML (比如,字符串某些位置存在标签)。如果不是,则把字符串解释为选择器表达式,请见上面的讲解。但如果字符串是 HTML 片,则 jQuery 试图创建由该 HTML 片描述的 DOM 元素。然后会创建并返回一个引用这些 DOM 元素的 jQuery 对象:
ਇੱਕ ਉਦਾਹਰਣ
$("My new text
").appendTo("body");
如果 HTML 片比不含属性的简单标签更复杂,如同上面例子中的 HTML,那么元素实际的创建过程是由浏览器的 innerHTML 机制完成的。具体地讲,jQuery 会创建新的
ਕਿਉਂਕਿ ਪਲੇਟਫਾਰਮ ਦੀ ਆਲੋਚਨਾ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਸਕ੍ਰੀਪਟ ਦੀ ਸਰੂਪ ਸੁਚਾਰੂ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਦੂਜੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਸਮੇਟਣ ਵਾਲੇ ਟੈਗ ਬੰਦ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ (ਬੰਦ ਟੈਗ ਲੈਣ ਵਾਲੇ):
$("<a href="http://jquery.com"></a>");
ਲੇਕਿਨ، jQuery ਨੇ ਅਜਿਹੀ ਵੀ ਟੈਗ ਵਰਤੋਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਹੈ ਜੋ XML ਦੀ ਤਰ੍ਹਾਂ ਹੈ:
$("<a/>");
ਹੋਰ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਸਮੇਟਣ ਵਾਲੇ ਟੈਗ ਬੰਦ ਕਰ ਸਕਦੇ ਹਨ ਜਾਂ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ:
$("<img />"); $("<input>");
ਵਰਤੋਂ 2: ਗੁਣ ਅਤੇ ਈਵੈਂਟ ਸੈੱਟ ਕਰੋ
ਵਰਤੋਂ ਕਰਨ ਦੀ ਵਿਧੀ
jQuery(html,props)
ਜਿਵੇਂ ਕਿ jQuery 1.4 ਵਿੱਚ, ਅਸੀਂ ਦੂਜੇ ਪੈਰਾਮੀਟਰ ਵਿੱਚ ਗੁਣ ਮੈਪਿੰਗ ਪਾ ਸਕਦੇ ਹਾਂ। ਇਹ ਪੈਰਾਮੀਟਰ .attr() ਮੱਥਕ ਦੇ ਇੱਕ ਪੂਰਣ ਸੈੱਟ ਦਾ ਅਧਿਕਾਰ ਦਿੰਦਾ ਹੈ। ਇਸ ਦੇ ਇਲਾਵਾ, ਕੋਈ ਵੀ ਈਵੈਂਟ ਪ੍ਰਕਾਰ ਪਾ ਸਕਦਾ ਹੈ ਅਤੇ ਹੇਠ ਲਿਖੇ jQuery ਮੱਥਕਾਂ ਨੂੰ ਆਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ: val, css, html, text, data, width, height, or offset.
ਧਿਆਨ ਦੇਓ ਕਿ Internet Explorer ਨੇ ਇੱਕ input ਐਲੀਮੈਂਟ ਬਣਾਉਣ ਅਤੇ ਉਸ ਦੀ ਪ੍ਰਕਾਰ ਬਦਲਣ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੱਤੀ; ਤੁਸੀਂ <input type="checkbox" /> ਵਰਗੇ ਵਰਤਣਾ ਹੋਵੇਗਾ ਤਾਕਿ ਪ੍ਰਕਾਰ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕੋਏ।
ਇੱਕ ਉਦਾਹਰਣ
ਇੱਕ <input> ਐਲੀਮੈਂਟ ਬਣਾਓ ਅਤੇ type ਪ੍ਰਤੀਯੋਗਿਤਾ, ਗੁਣ ਮੁੱਲ ਅਤੇ ਕੁਝ ਈਵੈਂਟ ਸੈੱਟ ਕਰੋ。
$("<input>", { type: "text", val: "Test", focusin: function() { $(this).addClass("active"); }, focusout: function() { $(this).removeClass("active"); } }).appendTo("form");
jQuery( callback )
ਤੁਹਾਨੂੰ ਦਸਤਾਵੇਜ਼ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਚਲਾਉਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਬਾਂਧਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ。
ਇਹ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਜਿਵੇਂ $(document).ready() ਅਜਿਹੀ ਹੈ, ਲੇਕਿਨ ਇਸ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪੰਜੀਨ ਵਿੱਚ ਹੋਰ ਸਾਰੇ $() ਓਪਰੇਟਰ ਜੋ ਕਿ DOM ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਚਲਾਉਣੇ ਹਨ ਉਹ ਇਸ ਵਿੱਚ ਵਿਭਾਜਿਤ ਕਰਨਾ ਹੋਵੇਗਾ। ਉਹ ਟੇਕਨੋਲੋਜੀ ਵਿੱਚ ਲਿੰਕ ਕਰਨ ਵਾਲੇ ਫੰਕਸ਼ਨ ਹਨ ਲੇਕਿਨ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਲਿੰਕ ਘੱਟ ਹੀ ਹੁੰਦੇ ਹਨ。
ਉਦਾਹਰਣ
ਜਦੋਂ DOM ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ، ਉਸ ਵਿੱਚ ਦਿੱਤੇ ਹੋਏ ਫੰਕਸ਼ਨ ਚਲਾਓ:
$(function(){ // ਦਸਤਾਵੇਜ਼ ਤਿਆਰ });