Scribd
Upload
23 views

Jquery Syntax

1. The document summarizes jQuery syntax for selecting elements, modifying attributes and styles, handling events, and using UI widgets. It lists over 30 common jQuery methods like click(), text(), addClass(), on(), hide(), fadeOut(), and datepicker(). 2. Core jQuery selection and manipulation methods are covered, including selecting elements with CSS selectors, getting/setting attributes, text, HTML, and CSS styles. 3. Event handling methods teach how to attach callbacks for common events like click and keypress, as well as more specialized events. 4. jQuery UI widgets are briefly introduced with draggable(), droppable(), and datepicker().

Uploaded by

Md. Asaduzzaman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Jquery Syntax

1. The document summarizes jQuery syntax for selecting elements, modifying attributes and styles, handling events, and using UI widgets. It lists over 30 common jQuery methods like click(), text(), addClass(), on(), hide(), fadeOut(), and datepicker(). 2. Core jQuery selection and manipulation methods are covered, including selecting elements with CSS selectors, getting/setting attributes, text, HTML, and CSS styles. 3. Event handling methods teach how to attach callbacks for common events like click and keypress, as well as more specialized events. 4. jQuery UI widgets are briefly introduced with draggable(), droppable(), and datepicker().

Uploaded by

Md. Asaduzzaman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

jQuery Syntax

---basic---
1. $(selector).action() //
a. $("body") => selects whole body
b. <ul> <li> <a href=”#”> </a></li> </ul>
 $(“ul li a”) => selects the anchor tag
 $(“ul li a”).css(“color”,”red”) => adds css to anchor tag
2. $(selector).before(content)
 $(“ul”).before(“<h1>title</h1>”)
3. $(selector).after(content)
 $(“ul”).after(“<h3>Conclusion</h3>”)
4. $(selector).text() => this returns the text inside the selected
5. $(selector).text(content) => this replace the selected with content
6. $(selector).html() => this returns the content inside the selected with html tag
7. $(selector).html(content) => overwrites the content of all matched content
8. $(selector).css(protertyname) => this returns the content of the first selected
element
9. $(selector).css(propertyname, value) => overwrites the css content of all selected,
here css content will be object type variable
10. $(selector).attr(attribute) => returns the attributes of first selected element
11. $(selector).attr(attribute, value) => overwrites the attributes of all selected elements
12. $(selector).val() => returns the value of first selected element
13. $(selector).val(value) => sets the value of all selected elements
14. $(selector).click(function()) => run function when clicked on selected. It should be
inside ready function.
15. $(document).ready(function(){}) => run the function when page is loaded
 Shortcut -> $(function(){ });.
16. $(selector).addClass(classname) => adds one or more classes
17. $(selector).removeClass(classname) => removes classes from selected
18. $(selector).toggleClass(classname) => it removes if the class is exists or adds if there
is not such class exist.
19. $(selector).hide() => this hides the selected element

---EVENT---
20. $(selector).on(event, function) => event = click, select, change etc.
21. $(selector).on(“keypress”, function) / $(selector).keypress(function) => executes
when character is entered
22. $(selector).keydown(function) => when key is pressed
23. $(selector).keyup(func) => when key is released
24. $(selector).hide(speed, callback) => speed = slow, fast or in millisecond
25. $(selector).show(speed, callback)
26. $(selector).toggle(speed, callback)
27. $(selector).fadeOut(speed, callback)
28. $(selector).fadeIn(speed, callback)
29. $(selector).fadeToggle(speed, callback)
30. $(selector).slideDown(speed, callback) => slides up and hide
31. $(selector).slideUp(speed, callback) => slides down and show
32. $(selector).slideToggle(speed, callback)

---UI---
33. $(selector).draggable() => makes element draggable
34. $(selector).droppable() => makes element a place to drop the draggable element
35. $(selector).datepicker(); => creates a ui to pick a date

You might also like