jQuery ਦੇ ਮੂਲ ਸੰਟੈਕਸ ਵਿੱਚ ਇੱਕ ਚੋਣਕਾਰ(CSS-ਸ਼ੈਲੀ ਚੋਣਕਾਰ) ਅਤੇ ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ ਨੂੰ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਢੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਇੱਥੇ jQuery ਦੀਆਂ ਕੁਝ ਬੁਨਿਆਦੀ ਸੰਟੈਕਸ ਉਦਾਹਰਣਾਂ ਹਨ:
ਤੱਤ ਦੀ ਚੋਣ
-
HTML ਟੈਗ ਨਾਮ ਦੁਆਰਾ ਤੱਤ ਚੁਣੋ:
$("tagname")ਉਦਾਹਰਨ: ਪੰਨੇ 'ਤੇ$("p")ਸਾਰੇ ਤੱਤ ਚੁਣਦਾ ਹੈ ।<p> -
CSS ਕਲਾਸ ਦੁਆਰਾ ਐਲੀਮੈਂਟਸ ਦੀ ਚੋਣ ਕਰੋ:
$(".classname")ਉਦਾਹਰਨ:$(".myClass")ਕਲਾਸ "myClass" ਵਾਲੇ ਸਾਰੇ ਤੱਤ ਚੁਣਦਾ ਹੈ। -
ID ਦੁਆਰਾ ਤੱਤ ਚੁਣੋ:
$("#idname")ਉਦਾਹਰਨ:$("#myElement")ID "myElement" ਵਾਲੇ ਤੱਤ ਨੂੰ ਚੁਣਦਾ ਹੈ। -
ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਐਲੀਮੈਂਟਸ ਦੀ ਚੋਣ ਕਰੋ:
$("[attribute='value']")ਉਦਾਹਰਨ: "ਬਟਨ" 'ਤੇ ਸੈਟ ਕੀਤੀ$("[data-type='button']")ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ ਚੁਣਦਾ ਹੈ ।data-type -
ਸੰਯੋਜਨ ਚੋਣ:
$("tagname.classname"),$("#idname .classname"), ...
ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ ਨੂੰ ਹੇਰਾਫੇਰੀ ਕਰਨਾ
-
ਕਿਸੇ ਤੱਤ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਬਦਲਣਾ:
.html(),.text()ਉਦਾਹਰਨ:$("#myElement").html("New content")ID "myElement" ਦੇ ਨਾਲ ਤੱਤ ਦੀ HTML ਸਮੱਗਰੀ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ। -
ਤੱਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੋਧਣਾ:
.attr(),.prop()ਉਦਾਹਰਨ: ਸਾਰੇ ਤੱਤਾਂ ਦੇ ਗੁਣਾਂ ਨੂੰ$("img").attr("src", "newimage.jpg")ਬਦਲਦਾ ਹੈ ।src<img> -
ਇੱਕ ਐਲੀਮੈਂਟ ਦੀਆਂ CSS ਕਲਾਸਾਂ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨਾ:
.addClass(),.removeClass(),.toggleClass()ਉਦਾਹਰਨ:$("#myElement").addClass("highlight")ID "myElement" ਵਾਲੇ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਲਾਸ "ਹਾਈਲਾਈਟ" ਜੋੜਦਾ ਹੈ। -
ਐਲੀਮੈਂਟਸ ਨੂੰ ਲੁਕਾਉਣਾ/ਦਿਖਾਉਣਾ:
.hide(),.show(),.toggle()ਉਦਾਹਰਨ:$(".myClass").hide()ਕਲਾਸ "myClass" ਵਾਲੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। -
ਤੱਤਾਂ 'ਤੇ ਇਵੈਂਟਾਂ ਨੂੰ ਸੰਭਾਲਣਾ:
.click(),.hover(),.submit(), ... ਉਦਾਹਰਨ:$("button").click(function() { ... })ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਰਜਿਸਟਰ ਕਰਦਾ ਹੈ
ਤੱਤ ਦੇ ਸੰਗ੍ਰਹਿ ਨਾਲ ਕੰਮ ਕਰਨਾ
-
ਸੰਗ੍ਰਹਿ ਦੁਆਰਾ ਦੁਹਰਾਉਣਾ:
.each()ਉਦਾਹਰਨ: ਪੰਨੇ 'ਤੇ$("li").each(function() { ... })ਹਰੇਕ ਤੱਤ ਨੂੰ ਦੁਹਰਾਉਂਦਾ ਹੈ ।<li> -
ਇੱਕ ਸੰਗ੍ਰਹਿ ਨੂੰ ਫਿਲਟਰ ਕਰਨਾ:
.filter(),.not()ਉਦਾਹਰਨ: ਤੱਤਾਂ$("div").filter(".myClass")ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ<div>ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਚੁਣਦਾ ਹੈ ਜੋ "myClass" ਕਲਾਸ ਵਾਲੇ ਹਨ। -
ਇੱਕ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਤੱਤ ਸ਼ਾਮਲ ਕਰਨਾ:
.append(),.prepend(),.after(),.before()ਉਦਾਹਰਨ: ID "myElement" ਵਾਲੇ ਤੱਤ ਵਿੱਚ$("#myElement").append("<p>New paragraph</p>")ਇੱਕ ਨਵਾਂ ਤੱਤ ਜੋੜਦਾ ਹੈ ।<p>
ਪ੍ਰਭਾਵ ਅਤੇ ਐਨੀਮੇਸ਼ਨ
-
fadeIn/fadeOut ਪ੍ਰਭਾਵਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨਾ:
.fadeIn(),.fadeOut()ਉਦਾਹਰਨ:$("#myElement").fadeIn(1000)1 ਸਕਿੰਟ ਦੀ ਮਿਆਦ ਵਿੱਚ ID "myElement" ਵਾਲੇ ਤੱਤ ਵਿੱਚ ਫਿੱਕਾ ਪੈ ਜਾਂਦਾ ਹੈ। -
ਸਲਾਈਡਅੱਪ/ਸਲਾਈਡਡਾਊਨ ਪ੍ਰਭਾਵ:
.slideUp(),.slideDown()ਉਦਾਹਰਨ:$(".myClass").slideUp(500)0.5 ਸਕਿੰਟਾਂ ਦੀ ਮਿਆਦ ਵਿੱਚ ਕਲਾਸ "ਮਾਈ ਕਲਾਸ" ਵਾਲੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਉੱਪਰ ਸਲਾਈਡ ਕਰਦਾ ਹੈ। -
ਕਸਟਮ ਐਨੀਮੇਸ਼ਨ ਕਰਨਾ:
.animate()ਉਦਾਹਰਨ:$("#myElement").animate({ left: '250px', opacity: '0.5' })ਆਈਡੀ "myElement" ਨਾਲ ਐਲੀਮੈਂਟ ਨੂੰ ਇਸਦੀ ਖੱਬੀ ਸਥਿਤੀ ਅਤੇ ਧੁੰਦਲਾਪਨ ਬਦਲ ਕੇ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ।
ਇਹ ਉਦਾਹਰਨਾਂ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ jQuery ਦੇ ਮੂਲ ਸੰਟੈਕਸ ਦੇ ਵੱਖ-ਵੱਖ ਪਹਿਲੂਆਂ ਨੂੰ ਐਲੀਮੈਂਟਸ ਦੀ ਚੋਣ ਕਰਨ, ਉਹਨਾਂ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਅਤੇ ਪ੍ਰਭਾਵਾਂ ਜਾਂ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ। jQuery ਵੈੱਬ ਵਿਕਾਸ ਕਾਰਜਾਂ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਅਤੇ ਵਧਾਉਣ ਲਈ ਤਰੀਕਿਆਂ ਅਤੇ ਕਾਰਜਕੁਸ਼ਲਤਾਵਾਂ ਦਾ ਇੱਕ ਅਮੀਰ ਸਮੂਹ ਪੇਸ਼ ਕਰਦਾ ਹੈ।