User Define Function 13 Built in function 14 Function with Argument Function With return value 20

Size: px

Start display at page:

Download "User Define Function 13 Built in function 14 Function with Argument Function With return value 20"

Shauna Ramsey
5 years ago
Views:

- 1 - jquery Tutorial In 1. What Is Jquery 3 2. How To Use jquery 3 3. Script <script>tag 3-4 4. Basic Syntax Of jquery 4 5. First Program Of jquery 4-5 6. variable 6-8 7.

1 - 1 - jquery Tutorial In 1. What Is Jquery 3 2. How To Use jquery 3 3. Script <script>tag Basic Syntax Of jquery 4 5. First Program Of jquery variable Data Type What Is Data Type 9 Number 9 String 9 Boolen 9 Object Array Function What is Function 13 User Define Function 13 Built in function 14 Function with Argument Function With return value scop Selectors In Jquery What Is Selector 23 Tag Selectors Id selectors Class Selectors 25-26

2 - 2 - jquery Tutorial In Universal Selectors Event In Jqery What Is Event 28 Mouse Event Key Event Form Event Slide Event Attribute setattribute Value 44 getattribute Value Applay Style addclass remmoveclass Method In Jquery Use Of Method 49 eq() filter() find() html() text() val() val( attribute ) 55 add() 56 not() 57 and() 58 slice() position() top width() height(); append(); empty(); prepand(); css Method In Jquery 67

3 - 3 - jquery Tutorial In What Is Jquery : Jquery एक fast javascript Library हह इसकक Develop 2006 मम John Resig नन ककयय थय jquery कय use web Designing मन ककयय जय तय हह jquery कय use कर कन animation ककयन जय सकतन हह jquery कय use कर कन ajax कक भभ inplement ककयय जय तय हह और jquery कय use कर कन event henling भभ कक जय सकतभ हह event hendling सन तय तत पयर य यह हह कक जब आवशयकय हक तब jquery कय code execute ककयय जय सकतय हह How To use jquery : Jquery javascript कक library हह इस लल ए इसन use करनन कन लल ए pre Define library हह जजनकय use कर कन jquery कय use ककयय जय तय हह इन library कक use करनन कन do तरर कन हक तन हह 1. Local Path : इसकय मतल ब यह हह कक आत प jquery कक library local कक पयपटर त पर भक download कर कन use कर सकतन हह इसन download करनन तथय webpage मम include करनन कक process ननमनलल खख त हह 2. CDN Path : यह jquery library कक use करनन कय दपसरय तरर कय हह इसमम library local कक पयपटर त पर नहर क हक तभ हह इसन use करनन कन लल ए हम हमय रन webpage त पर उस library कय cdn त पय थ दन तन हह जक ककसभ ककसभ सवर यर कय हक तय हह जहय त पर इसकक library हह और उस cdn त पय थ कय use कर कन jquery library कक use ककयय जय सकतय हह cdn Path कक add करनन कन लल ए process ननमनलल खख त हह What Is <Script> Tag :

4 - 4 - jquery Tutorial In script एक html tag हह जजसकय use scripting language कक use करनन कन लल ए करतन हह इसन <script> सन शशर करतन हह तथय त पर अक त करतन हह तथय इसकन 2 प रमशख attribute हक तन हह 1. type : type attribute कय use कर कन यह बतय यय जय तय हह कक ककस scripting language कय use ककयय जय रहय हह type मम उसकय name लल ख य जय तय हह jquery javascript कक library हह इस लल ए इसकय type javascript हर हक तय हह 2.src : इस attribute कय use कर कन यह define ककयय जय तय हह कक jquery library कहय हह <script type="text/javascript" src="js/myjs.js"> Basic syntax of jquery $(event).(function); यह jquery कय basic syntax हह जजसकय use कर कन jquery कय code लल ख य जय तय हह इसमम त पहल न perenthisis मम selector लल ख य जय तय हह कक ककस event execute करनन कन लल ए selector कयय हह तथय दशसरन perenthisis मम event लल ख य जय तय हह कक कक न सय event execute हक नय चय हहए तथय इन दक नन perenthisis कन बबच मम (. ) dot कय use ककयय जय तय हह First Program of Jquery <!DOCTYPE html> <title>jquery Example</title> <script type="text/javascript" src="jquery.js"> //jquery library //jquery program $('document').ready(function(){

5 - 5 - jquery Tutorial In alert('hello'); उत परक कत Example मम एक jquery प रक गय म बतय यय गयय हह जजसकय use कर कन एक alert Message Display ककयय जय तय हह जन सय कक आत प जय नतन हह कक jquey event त पर work करतभ हह तक त पहल न त पन रमथथसभ मम document selector बतय यय गयय हह इसन लल ख नन सन html document select हक जय तय जय तय हह तथय अगल न त पन रमथथद मम ready() function बतय यय गयय हह तथय उसमन एक function लल ख य गयय हह जजसमन एक alert() कय code लल ख य गयय हह

6 - 6 - jquery Tutorial In Variable In Jquery What Is Variable : jquery javascript कक हर library हह इस कय रण jquery कय use कर कन javascript कक तरह प रक गय म बनय ए जय सकतन हह जब भभ कक ई प रक गय म बनय यय जय तय हह तब उसमन ककसभ नय ककसभ प रकय र कन data कय use ककयय जय तय हह उस वह data कक पयपटर कक मन मक रर मम कहर न कहर सटक र हक तय हह उस data कक सटक र करनन कन लल ए variable कय use ककयय जय तय हह दशसरन शबदन मम कहन तक variable एक मन मक रर location कय नय म हक तय हह जहय त पर data सटक र रहतय हह jquery me variable create करनन कन लल ए var kayword कय use ककयय जय तय हह syntax : var variable_name; var x; Example of Variable <title>variable</title> <script type="text/javascript" src="jquery.js"> var x=10; document.write("x ="+x);

7 - 7 - jquery Tutorial In jquery मम variable कक डड कल न अर करनन कन लल ए var keyword opshnal हक तय हह आत प इस keyword कय use ककयन बबनय भभ variable create कर सकतन हह इसन create करनन कन लल ए आत पकक simple variable कय नय म लल ख नय हक तय हह <title>variable</title> <script type="text/javascript" src="jquery.js"> x=10; document.write("x ="+x);

8 - 8 - jquery Tutorial In

9 - 9 - jquery Tutorial In What is Data Type : Data Type जब भभ हम कक ई प रक गय म बनय तन हह तक उस प रक गय म मम बहशत प रकय र कन data कक use ककयय जय तय हह जन सन कक text number object आहद कय use ककयय जय तय हह इन सभभ कय data type अल ग अल ग हक तन हह इनकक define करनन कन लल ए jquery मम कश छ pre Define Function हदए गए हह jquery कन pre Define data type ननमनलल खख त हह 1. Number 2. String 3. boolen 4. object 1. Number : जब भभ हम कक ई प रक गय म बनय तन हह तक हम उस program मम number कय use करतन हह number intiger तथय float दक प रकय र कन हक तन हह 101, 10, 1, 4,1.20 etc 2.String : String Group of कन रन कटर हक तभ हह जजसन store करनन कन लल ए string data type कय use ककयय जय तय हह string कक envarted coma ( ) मम लल ख य जय तय हह engineersworld.in 3. Boolen : Jquery मम programing कन दक रय न बहशत बय र boolen value कय भभ use ककयय जय तय हह boolen value दक प रकय र कक हक तभ हह true, false यहय true कय मतल ब 1 हक तय हह और false कय मतल ब 0 हक तय हह 1 = true 0 = flase = flase engineersworld = true Object :

10 jquery Tutorial In object एक एसभ entity हक तभ हह जजसकक कश छ proparty हक तभ हह object कय use कर कन उस object कक proparty कय use ककयय जय तय हह Syntax : var object_name = { property 1, property 2, property n ; How To Access Object Property : Object_name.property_name; <title>object</title> <script type="text/javascript" src="jquery.js"> var student={ name :"Deependra", age :21 ; document.write("name :"+student.name); document.write("<br>"); document.write("age :"+student.age);

11 jquery Tutorial In

12 jquery Tutorial In What is Array : Array Array एक user define data type हक तय हह array कय use कर कन multipal value कक एक हर variable मम सटक र ककयय जय सकतय हह और उस data कक उसकक index number सन एकसन स ककयय जय तय हह array कक indexing 0 सन शशर हक तभ हह syntax : var variable_name =[list of Element ]; <title>array</title> var x=[1,2,3,4,5]; for(var i=0;i<x.length;i++) { document.write(x[i]); document.write("<br>"); What Is Function : Function

13 jquery Tutorial In ककसभ भभ प रक गय म कक लल ख नन मम function महतवत पपणर य हक तन हह Function कक ककसभ न ककसभ ववशन ष कय यर य कक करनन कन लल ए ककयय जय तय हह इसभ लल ए jquery मम भभ function कय use ककयय जय तय हह Function 2 प रकय र कन हक तन हह 1. user Define Function : user Define function वह function हक तन हह जक user अत पनभ आवशयकतय कन अनशसय र बनय तय हह jquery मम function 2 प रकय र सन बनय नन जय तन हह 2. function() : इस तरह कन syntax कय use तब ककयय जय तय हह जब ककसभ event मम function कक define ककयय जय तय हह alert( Hello ); 3. basic function syntax : function कय दपसरय तरर कय javascript कन function कक तरह हर हक तय हह जजसन function keyword कय use कर कन बनय यय जय तय हह तथय उस function कय नय म बतय यय जय तय हह तथय function कक जब आवशयकतय हक तभ हह तब function कक call ककयय जय तय हह syntax : function function_name() { statement; function f1() { document.write( Hello ); Built in Function :

14 jquery Tutorial In Built in Function वह Function हक तन हह जक jquery Library मम pre define हह जजनकय use कर कन ककसभ नय ककसभ task कक त परफक मर य ककयय जय तय हह built in function कहल य तन हह Jquery मम built in Function ननमनलल खख त हह 1. charat() : यह function string कक दर गई index number कन अनशसय र कन रन कटर return करतभ हह यह method एक त पन रय मभ टर ल न तभ हह यह त पन रय मभ टर string कन कन रन कटर कक index number हदयय जय तय हह var x="engineersworld"; x.charat(5); Output : e 2. concat() : इस function कय use कर कन 2 string कक concat ककयय जय तय हह var x="engineersworld"; var y=".in"; x.concat(y); OutPut : Engineersworld.in IndexOf() : इस Function कय use कर कर ककसभ भभ string कन कन रन कटर कक index number त पतय कक जय तभ हह var x="engineersworld"; x.indexof( n ); Output : 1 touppercase() : इस function कय use कर कन ककसभ भभ string कक upper case मम convert ककयय जय तय हह

15 jquery Tutorial In var x="engineersworld"; x.touppercase(); tolowercase() : इस function कय उसन ककसभ uppercase string कक lower case string मम convert करनन कन लल ए ककयय जय तय हह Example var x="engineersworld"; x.tolowercase(); Example Of All Built In Function <title>built In Function</title> var x="engineersworld"; var y=".in"; document.write(x.charat(2)); document.write("<br>"); document.write(x.concat(y)); document.write("<br>"); document.write(x.indexof("s")); document.write("<br>"); document.write(x.touppercase()); document.write("<br>"); document.write(x.tolowercase()); document.write("<br>"); document.write(x.tostring());

16 jquery Tutorial In pop() : इस function कय use कर कन array कन last element कक delete ककयय जय तय हह और यह function delete ककयन गए कन रन कटर कक return करतय हह var z=[1,2,5,3]; z.pop(); push() : इस function कय use कर कन array कन last मम कन रन कटर कक इनसटर य ककयय जय तय हह तथय यह Function insert ककयन गए कन रन कटर कक return करतय हह var z=[1,2,5,3];

17 jquery Tutorial In z.push(4); <title>built In Function</title> var z=[1,2,5,3]; document.write(z.pop()); document.write("<br>"); document.write(z.push(5)); Function With Argument :

18 jquery Tutorial In jquery मम function कक Declare करनन कय एक तरर कय यह भभ हह इस तरर कन कय use कर कन function कक value argument कन र त प मम त पय स ककयय जय तय हह argument एक तरह कन variable हक तन हह जजनकक function कन perenthisis मम लल ख य जय तय हह Syntax : function function_name(args_list) { body of function; उदहय रण : function sum(x,y) { document.write("sum :"+(x+y)); उत परक कत उदहय रण मन एक function sum बनय यय गयय हह जजसमन दक peramitter त पय स ककयन गए हह x तथय y इन दक नन कक value तब त पय स कक जय तभ हह जब function call हक तय हह sum(10,2); उत परक कत उदहय रण मम sum नय म कन function कक call ककयय गयय हह जजसमन 2 value त पय स कक गई हह यह value sum function कन x, तथय y argument कन दवय रय Receive ककयन जय तन हर तथय function मम use कक जय तभ हह Example of function With Argument <!DOCTYPE html> <title>function Example</title>

19 jquery Tutorial In function sum(x,y) { document.write("sum :"+(x+y)); sum(10,2); Function With Return Type : Jquery मम ककसभ function सन ककसभ भभ प रकय र कक value कक return करनन कन लल ए return statement कय use करतन हह function दवय रय return कक गई value कक जहय सन function कक call ककयय जय तय हह वहय Receive ककयय जय तय हह <!DOCTYPE html> <title>function Example</title> function sum(x,y) {

20 jquery Tutorial In return x+y; var res=sum(10,2); alert(res); Variable Scoop variable कन scope सन ततत पयर य यह हह कक variable कहय तक use ककयय जय तय हह scope कहतभ हह Jquery मम variable कय scope 2 प रकय र कन हक तन हह 1. local scope 2. global scope 1. Local Scope : variable कन local scope सन ततत पयर य यह हह कक यहय ह variable जजस बल य क मम डड कल न अर ककयन गए हह उसभ बल य क मम उस variable कक use ककयय जय एगय इस तरह कन variable local variable कहल य तन हह 2. Global Scope : global scope सन ततत पयर य यह कक variable कक त पशरन प रक गय म मम कहर भभ एकसन स ककयय जय तय हह इस तरह कन variable global variable कहल य तन हह <title>variable Scope</title> var a=101; //global variable function f1() { var a=20; //Local Variable document.write("local A :"+a); document.write("global A :"+a+"<br>"); f1();

21 jquery Tutorial In

22 jquery Tutorial In Selectors In Jquery What Is Selectors : Selector कय use कर कन html कन ककसभ object कक select ककयय जय सकतय हह जजसकय use jquery event कक execute ककयय जय तय हह Selector कहल य तन हह Tag Selectors : jquery मम html कन element कक select करनन कन लल ए html tag कय भभ उस ककयय जय तय हह इसमम html tag कय नय म लल ख य कर उसन use ककयय जय तय हह tag selectors कहल य तन हह <title>selectors</title> <script type="text/javascript" src="jquery.js"> $('button').click(function(){ alert("hello"); <button>click</button>

23 jquery Tutorial In Id Selectors : Id selectors कय use कर कन भभ html element कक select ककयय जय सकतय हह यहय ह त पर जजस html element कक ससन ल न कट करनय हह उसकक एक id दन दर जय तभ हह जजसकय use कर कन element कक select ककयय जय तय हह id selectors कहल य तन हह <title>selectors</title> <script type="text/javascript" src="jquery.js"> $('#btn').click(function(){ alert("hello");

24 jquery Tutorial In <button id="btn">click</button> class Selector : ककसभ html element कक id कय use कर कन भभ उस html element कक select ककयय जय सकतय हह class selector कहल य तन हह <title>selectors</title> <script type="text/javascript" src="jquery.js"> $('.btn').click(function(){ alert("hello");

25 jquery Tutorial In <button class="btn">click</button> Universal Selectors : Universal selector कय use कर कन त पशरन webpage कन सभभ element कक एक सय थ select ककयय जय तय हह Universal selector कहल य तन हह <title>selectors</title> <script type="text/javascript" src="jquery.js">

26 jquery Tutorial In $('*').click(function(){ alert("hello"); <button class="btn">click</button> <button class="b1">click 2</button> Event In Jquery

27 jquery Tutorial In What Is Event : HTML कय use कर जब भभ कक ई webpage बनतन हह तक वह webpage static हक तय हह उस webpage कक dyanamic बनय नन कन लल ए jquery मम event hendling कय use करतन हह जजसकय use कर कन webpage कक ड य यनय लमक बनय तन हह दशसरन शबदन मम कहन तक ककसभ भभ webpage कक daynamic बनय नन कन लल ए jquery मम event कय use ककयय जय तय हह Event ननमनलल खख त प रकय र कन हक तन हह Mouse Event : mouse event वह event हक तन हह जक mouse कन दवय रय active हक तन हह mouse event कहल य तन हह उदहय रण कन लल ए जब mouse ककसभ object त पर enter हक तय हह तब कक ई event execute हक तय हह इसकन आल य वय mouse कन दवय रय ककसभ object त पर click करनन त पर भभ event execute हक तन हह इस तरह कन event mouse event कहल य तन हह mouse Event ननमनलल खख त हह 1. mousedown : यह event तब execute हक तय हह जब mouse कन ककसभ object त पर down कर कन रख य जय तय हह mouse कक down रख नन कय मतल ब यह हह कक जब mouse कय click हक गय तब event execute हक गय <title>event</title> <script type="text/javascript" src="jquery.js"> $('#t1').keyup(function(){ alert('key up')

28 jquery Tutorial In <input type="text" id="t1" name="t1"> 3. mouseup : यह event तब execute हक तय हह जब mouse कय click ककसभ object त पर छक ड़य जय तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px; $('#d1').mouseup(function(){ alert('hello') <div id="d1">click</div> 4. mouseenter : जब भभ कक ई mouse ककसभ object मम enter हक तय हह तक mouse enter event execute हक तय हह

29 jquery Tutorial In <title>event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px; $('#d1').mouseenter(function(){ alert('hello') <div id="d1">click</div> 5. mouseleave: यह event तब execute हक तय हक तय हह जब जब mouse ककसभ object सन बय हर हक तय हह तब यह event execute हक तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px;

30 jquery Tutorial In $('#d1').mouseleave(function(){ alert('hello') <div id="d1">click</div> 6. mousemove : यह event तब execute हक तय हह जब mouse ककसभ object त पन एक location सन ककसभ दपसरर location त पर move हक तय हह तब यहय ह event execute हक तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px; $('#d1').mousemove(function(){ alert('hello') <div id="d1">click</div>

31 jquery Tutorial In 7. mouseout : यह event तब execute हक तय हह जब जब mouse ककसभ object सन out हक तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px; $('#d1').mouseout(function(){ alert('hello') <div id="d1">click</div> 8. mouseover : यह event तब execute हक तय हह जब mouse ककसभ object त पर जय तय हह <title>event</title> <script type="text/javascript" src="jquery.js">

32 jquery Tutorial In #d1{ width: 100px; height: 50px; background: orange; padding: 10px; $('#d1').mouseover(function(){ alert('hello') <div id="d1">click</div> 9. click Event : Click event तब execute हक तय हह जब ककसभ object त पर mouse कन दवरय click ककयय जय तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px;

33 jquery Tutorial In $('#d1').click(function(){ alert('hello') <div id="d1">click</div> 10. dbclick : यह event तब execute हक तय हह जब कसभ object त पर double click ककयय जय तय हह <title>example</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 50px; background: orange; padding: 10px; $('#d1').dblclick(function(){ alert('hello') <div id="d1">click</div> key Event

34 jquery Tutorial In key event वह event हक तन हह जक ककसभ key कन press हक नन त पर execute हक तन हह key event कहल य तन हह key event ननमनलल खख त प रकय र कन हक तन हह 1. keypress : यह event तब execute हक तय हह जब कक ई key press कक जय तभ हह अथय र यत ककसभ key कन press हक नन त पर execute हक नन वय ल य event keypress event कहल य तय हह <title>variable</title> <script type="text/javascript" src="jquery.js"> $('#t1').keypress(function(){ alert('key press') <input type="text" id="t1" name="t1"> 2. keydown : keydown event वह event हक तन हह जब ककसभ key कक press कर कन रख तन हह keydown event कहल य तन हह <title>variable</title> <script type="text/javascript" src="jquery.js"> $('#t1').keypress(function(){ alert('key press')

35 jquery Tutorial In <input type="text" id="t1" name="t1"> 3. keyup : यह event तब execute हक तय हह जब कक ई key छक ड़भ जय तभ हह <title>event</title> <script type="text/javascript" src="jquery.js"> $('#t1').keyup(function(){ alert('key up') <input type="text" id="t1" name="t1"> 1. blur : Form event यह event तब execute हक तय हह जब ककसभ object सन focus हटतय हह इस event कय जयय दय use textfield कन सय थ ककयय जय तय हह <title>variable</title> <script type="text/javascript" src="jquery.js"> $('#t1').blur(function(){

36 jquery Tutorial In alert('hello') <input type="text" id="t1" name="t1"> <input type="text" id="i2" name="t2"> 2. change : यह event तब execute हक तय हह जब ककसभ object मम changes हक तन हह change event कहल य तय हह इस event कय जयय दय use drop down list कन सय थ ककयय जय तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> $('#s').change(function(){ alert('hello') <select id="s"> <option>html</option> <option>jquery</option> <option>php</option> </select> 3. focus : यह event तब execute हक तय हह जब ककसभ object त पर focus ककयय जय तय हह इस event कय जयय दय use textfield कन सय थ ककयय जय तय हह इस event कक focusin event भभ कहतन हह

37 jquery Tutorial In <title>event</title> <script type="text/javascript" src="jquery.js"> $('#t1').focus(function(){ alert('focus In t1') <input type="text" id="t1" name="t1"> 4. focusout : यह event तब execute हक तय हह जब ककसभ object सन focus out हक तय हह focus out event कहल य तय हह इस event कय जयय दय use textfield कन सय थ ककयय जय तय हह <title>event</title> <script type="text/javascript" src="jquery.js"> $('#t1').focusout(function(){ alert('focus out In t1') <input type="text" id="t1" name="t1">

38 jquery Tutorial In slideup : Slide Event in jquery इस event उस कर कन ककसभ भभ html object कक slideup ककयय जय तय हह इसकय मतल ब यह हह कक इस event कय use करनन कन जजस html object त पर इसन applay ककयय गयय हह वह तथय सय उत पर एननमन ट हक कर hide हक जय तय हह <title>method</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 100px; background: orange; padding: 10px; $('#btn').click(function(){ $('#d1').slideup(); <button id="btn">click</button> <div id="d1"></div> SlideDown : यह event slideup event कन aposit कय यर य करतय हह जजस तरह slideup event ककसभ भभ object कक एननमन ट कर कन hide करतय हह उसभ तरह slidedown event html object कक वय त पस एननमन ट कर कन display करनय हक तय हह

39 jquery Tutorial In <title>method</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 100px; background: orange; padding: 10px; display: none; $('#btn').click(function(){ $('#d1').slidedown(); <button id="btn">click</button> <div id="d1"></div> SlideToggle : यह event slideup तथय slidedown event दक नन कक तरह कय यर य करतय हह इसकय use कर कन ककसभ भभ object कक hide भभ ककयय जय सकतय हह तथय hide object कक display भभ ककयय जय सकतय हह <title>slide Event</title> <script type="text/javascript" src="jquery.js"> #d1{ width: 100px; height: 100px;

40 jquery Tutorial In background: orange; padding: 10px; $('#btn').click(function(){ $('#d1').slidetoggle(); <button id="btn">click</button> <div id="d1"></div> slidetoggle Event With Stop method : जब slidetoggle कय use ककयय जय तय हह तक जब use एक समय मम एक सन जय दय बय र execute करतन हह तक वह continue चललय रहतय हह इसन रक कनन कन लल ए stop() method कय use ककयय जय तय हह <title>slide Event</title> <script type="text/javascript" src="jquery.js">

41 jquery Tutorial In #d1{ width: 100px; height: 100px; background: orange; padding: 10px; $('#btn').click(function(){ $('#d1').stop().slidetoggle(); <button id="btn">click</button> <div id="d1"></div> Attribute setattribute Value : setattribute value कय use ककसभ भभ attribute कक value कक jquery कय use कर कन set करनन कन लल ए करतन हह इसकन लल ए attr method कय use ककयय जय तय हह syntax : attr( attribute name, value ); <title>slide Event</title> <script type="text/javascript" src="jquery.js"> $('#im').mouseenter(function(){ $('#im').attr('src','fevi.png'); $('#im').mouseout(function(){

42 jquery Tutorial In $('#im').attr('src','logo.png'); <img id="im" src="logo.png"> getattribute Value : jquery मम ककसभ भभ attribute कन value कक त पतय करनन कन लल ए getattribute value कय use ककयय जय तय हह इसकन लल ए attr() method कय use ककयय जय तय हह syntax : $( selector ).arrt( attribute name ); <title>slide Event</title> <script type="text/javascript" src="jquery.js"> var p1 = $('p').attr('title'); $('#d1').text(p1); <p title="this Is A P Tag">P Tag</p> <div id="d1"></div> Applay Style Using jquery : Jquery कय use कर कन कन भभ ककसभ भभ html element कक style दर जय सकतभ हह इसकय use animation करनन मम ककयय जय तय हह jquery कय use कर कन html कक style दन नन कन लल ए jquery library कक css method कय use ककयय जभ तय हह syntax :

43 jquery Tutorial In $('selectors').css('attribute','value'); <title>method</title> <script type="text/javascript" src="jquery.js"> #d1{ background: red; width: 100px; height: 50px; $('#btn').click(function(){ $('#d1').css('background','orange'); <button id="btn">click</button> <div id="d1"></div> addclass() : addclass method कय use कन रन टय इम त पर ककसभ भभ html element त पर ककसभ भभ class कक applay ककयय जय सकतय हह syntax : $('selectors').addclass('class name'); <title>slide Event</title> <script type="text/javascript" src="jquery.js">.d1{

44 jquery Tutorial In background: red; width: 100px; height: 50px;.d2{ background: orange; width: 100px; height: 50px; $('.d1').mouseenter(function(){ $('.d1').addclass('d2'); <div class="d1"></div> removeclass : jquery कय use कर कन ककसभ भभ html object त पर applay class कक run time त पर remove ककयय जय सकतय हह class कक remove करनन कन लल ए jquery library कक removeclass() method कय use ककयय जय तय हह syntax : $('selectors').removeclass('class name'); <title>method</title> <script type="text/javascript" src="jquery.js">.d1{ background: red; width: 100px; height: 50px;

45 jquery Tutorial In.d2{ background: orange; width: 100px; height: 50px; $('.d1').mouseenter(function(){ $('.d1').removeclass('d2'); <div class="d1"></div>

46 jquery Tutorial In Method in jquery Use Of Method : जन सय कक आत प जय नतन हह कक jquery use webpage त पर animation applay करनन तथय webpage कक daynamic बनय नन कन लल ए ककयय जय तय हह jquery कय use कर कन webpage त पर animation applay करनन कन तथय webpage कक daynamic बनय नन कन लल ए jquery library मम कश छ pre define method हह वह method ननमनलल खख त हह 1. eq () : eq() method कय use एक selector कन र त प मम ककयय जय तय हह eq method कय use कर ककसभ भभ html element कक उसकक index number सन select ककयय जय तय हह अथय र यत इसकय use कन वल एसन html element कन सय थ ककयय जय तय हह जजसन कक html list html list index number सन हक तभ हह इसकक index 0 सन शशर हक तभ हह eq method एक त पन रय मभ टर ल न तभ हह और वह index number हक तय हह syntax : $('selectors').eq(index).event; <title>method</title> <title>slide Event</title> <script type="text/javascript" src="jquery.js">.ds{ color: red;

47 jquery Tutorial In $('#btn').click(function(){ $('li').eq(2).addclass('ds'); <button id="btn">click</button> <ul> <li>home</li> <li>about As</li> <li class="">contect As</li> <li>help</li> </ul> filter() Method : filter() method कय use html object त पर applay कय class कक search कर कन उस त पर कश छ event त परफफ मर य करनन कन लल ए ककयय जय तय हह syntax : $('selectors').filter('selectors').addclass('class name'); <title>method</title> <script type="text/javascript" src="jquery.js">.ds{ color: red;

48 jquery Tutorial In $('#btn').click(function(){ $('li').filter('.b').addclass('ds'); <button id="btn">click</button> <ul> <li class="a">home</li> <li class="a">about As</li> <li class="b">contect As</li> <li class="c">help</li> </ul> find() method : find() method कय use भभ filter method कक तरह हक तय हह इसकय use भभ ककसभ html document मम सन ककसभ html element त पर applay कक कक गई class कक find कर कन उस त पर event त परफक मर य ककयय जय तय हह syntax : $('selector').find('selector').addclass('class name '); <title>slide Event</title> <script type="text/javascript" src="jquery.js">.ds{ color: red;

49 jquery Tutorial In $('#btn').click(function(){ $('li').find('.b').addclass('ds'); <button id="btn">click</button> <ul> <li class="a">home</li> <li class="a">about As</li> <li class="b">contect As</li> <li class="c">help</li> </ul> html() Method : html method कय use कर jquery मम html code कक लल ख य जय तय हह html method मम जक html code लल ख न जय तन हह वन ब बय उज़र interprit करतय हह और code कय जक Mining हक तय हह उसन display करतय हह syntax : $('selector').html('code'); <title>method</title> <script type="text/javascript" src="jquery.js">.d1{ background: red; width: 100px; height: 50px; $('#btn').click(function(){

50 jquery Tutorial In $('.d1').html('<h1>hello</h1>'); <button id="btn">ok</button> <div class="d1"></div> text() Method : इस method कय use jquery कय use कर ककसभ बबह html element त पर text display करनन कन लल ए इसकय use ककयय जय तय हह Syntax : $('selector').text('method'); <title>method</title> <script type="text/javascript" src="jquery.js">.d1{ background: red; width: 100px; height: 50px; $('#btn').click(function(){ $('.d1').text('<h1>hello</h1>'); <button id="btn">ok</button> <div class="d1"></div>

51 jquery Tutorial In val () method : इस method कय use ककसभ भभ html element कक value त पतय करनन कन लल ए ककयय जय तय हह syntax : var variable =$('selector').val(); <title>method</title> <script type="text/javascript" src="jquery.js">.d1{ background: red; width: 100px; height: 50px; $('#btn').click(function(){ var x=$('#t1').val(); $('.one').text(x); <button id="btn">ok</button> <input type="text" name="num" id="t1" placeholder="enter A Number" /> <div class="one"></div> val ( value ) : इस method कय use कर कन run time त पर ककसभ भभ html element त पर value assign कक जय तभ हह

52 jquery Tutorial In syntax : $('selector').val('value'); <title>method</title> <script type="text/javascript" src="jquery.js">.d1{ background: red; width: 100px; height: 50px; $('#btn').click(function(){ $('#t1').val('hello'); <button id="btn">ok</button> <input type="text" id="t1" value="" /> add() Method : add() Method कय use कर कन एक सन जयय दय selector कक select कर कन उन त पर ऑत परन शन त परफफ मर य ककयय जय तय हह syntax : $('selector 1').add('selector 2 ').event;

53 jquery Tutorial In <title>method</title> <script type="text/javascript" src="jquery.js">.ds{ color: red; $('#btn').click(function(){ $('.a').add('.c').addclass('ds'); <button id="btn">click</button> <ul> <li class="a">home</li> <li class="a">about As</li> <li class="b">contect As</li> <li class="c">help</li> </ul> not() method : इस method कय use तब ककयय जय तय हह जब आत प ककसभ html element कक select नहर क करनय चय हतन हह जब आत प ककसभ tag कय नय म लल ख कर ककसभ element कक select करतन हह तक उस webpage मम उस नय म कन जजतनन भभ tag हक तन हह वह सभभ select हक जय तन हह यहद आत प ककसभ एक tag कक select नहर क करनय चय हतन हह तक आत प not method कय use करतन हह syntax :

54 jquery Tutorial In $('selector').not('selector').event; <title>method</title> <script type="text/javascript" src="jquery.js">.ds{ color: red; $('#btn').click(function(){ $('li').not('.b').addclass('ds'); <button id="btn">click</button> <ul> <li class="a">home</li> <li class="a">about As</li> <li class="b">contect As</li> <li class="c">help</li> </ul> and() Method : जब आत प एक समय मम एक सन अथध क event कय use use कन समय मम करतन हह तक and () method कय use ककयय जय तय हह <title>slide Event</title> <script type="text/javascript" src="jquery.js">

55 jquery Tutorial In.ds{ color: red; $('p').find('span').end().css('background','red'); <p>hello <span>this Is a Span</span></p> slice() : slice() method कय use कर कन ककसभ html element ननध र यररत index कन बबच element कक select ककयय जय तय हह <title>method</title> <script type="text/javascript" src="jquery.js">.ds{ color: red; $('#btn').click(function(){ $('li').slice(1,3).addclass('ds'); <button id="btn">click</button> <ul>

56 jquery Tutorial In <li class="a">home</li> <li class="a">about As</li> <li class="b">contect As</li> <li class="c">help</li> </ul> position() Method : position method कय त पर कन ककसभ भभ html element कक left top position त पतय कक जय तभ हह इस method कन सय थ ननमनलल खख त proparty कय use ककयय जय तय हह 1. left : यहद हमम ककसभ element कक left position कक त पतय करनय हह तक हम इसकय use करन गन Example <title>position Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('.ds').click(function(){ var pos = $(this).position(); $('.lres').text("position Left : "+pos.left);

57 jquery Tutorial In <div class="ds">engineersworld.in</div> <div class="lres"></div> 2. top : ककसभ element कक right position त पतय करनन कन लल ए इसकय use ककयय जय तय हह <title>position Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('.ds').click(function(){ var pos = $(this).position(); $('.lres').text("position Left : "+pos.top); <div class="ds">engineersworld.in</div> <div class="lres"></div> width() method :

58 jquery Tutorial In इस method कय use ककसभ भभ html element कक width त पतय करनन कन लल ए ककयय जय तय हह syntax : var variable = $( selector ).width(); <title>width Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('.ds').click(function(){ var w = $(this).width(); $('.res').text("width : "+w); <div class="ds">engineersworld.in</div> <div class="res"></div> height() Method : इस method कय use कर कन ककसभ भभ html element कक height त पतय करनन कन लल ए ककयय जय तय हह Syntax : var variable = $( selectors ).height();

59 jquery Tutorial In <title>height Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('.ds').click(function(){ var hei = $(this).height(); $('.res').text("height :"+hei); <div class="ds">engineersworld.in</div> <div class="res"></div> append () Method : append method कय use कर कन webpage त पर ककसभ content मम और content append करनन कन लल ए ककयय जय तय हह append करनन कय अथर य यहय ह हह कक जक content webpage मम त पहल न सन लल ख य हह उसकन बय द मम नयय contect add हक Syntax : $('selector').append("msg");

60 jquery Tutorial In <title>append Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('#btn').click(function(){ $('.ds').append(" This Is My Website"); <button id="btn">click</button> <div class="ds">engineersworld.in</div> empty() Method : इस method कय use कर कन ककसभ भभ html element कक empty ककयय जय सकतय हह syntax : $('selector').empty(); <title>empty Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px;

61 jquery Tutorial In height: 50px; color: red; background-color:yellow; $('#btn').click(function(){ $('.ds').empty(); <button id="btn">click</button> <div class="ds">engineersworld.in</div> prepend () Method : इस method कय use ककसभ भभ html element मम लल ख न हशए content मम new content कक prepend करनन कन लल ए ककयय जय तय हह prepand करनन कय अथर य यह हह कक जक content त पहल न सन लल ख य हह उससन त पहल न new content कक add करतय हह Syntax : $('selector').prepend("msg"); <title>prepend Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow;

62 jquery Tutorial In $('#btn').click(function(){ $('.ds').prepend("my Website "); <button id="btn">click</button> <div class="ds">engineersworld.in</div>

63 jquery Tutorial In CSS Method in Jquery What Is css : Css कय use कर कन ककसभ भभ html element कक style दर जय तभ हह इसकय full form cristal style sheet हक तय हह css कक jquery कय use कर कन भभ applay ककयय जय सकतय हह इस लल ए jquery css method कय use ककयय जय तय हह 1. css( attribute ) : इस method कय use कर कन ककसभ भभ html element त पर applay कक गई css कक value त पतय कक जय सकतभ हह Syntax : var variable =$( selector ).css("background-color"); <title>css Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('.ds').click(function(){ var c=$(this).css("background-color"); $('.res').text(c);

64 jquery Tutorial In <div class="ds"></div> <div class="res"></div> 2. css({ attribute : value ) : इस method कय use ककसभ भभ html element त पर css applay करनन कन लल ए ककयय जय तय हह <title>css Example</title> <script type="text/javascript" src="jquery.js">.ds{ width: 200px; height: 50px; color: red; background-color:yellow; $('.ds').click(function(){ $(this).css({'color':'black', 'background-color':'white' <div class="ds">engineersworld.in</div>

65 jquery Tutorial In

Cambridge International Examinations Cambridge International General Certificate of Secondary Education

Cambridge International Examinations Cambridge International General Certificate of Secondary Education ambridge International Examinations ambridge International General ertificate of Secondary Education *0123456789* HINDI S SEOND LNGUGE 0549/02 Paper 2 Listening For Examination from 2019 SPEIMEN PPER pprox.