Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.
Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!
(NOTE): The buttons below will reset each other in order to display the code working properly
Selectors and Filters provide a way of finding and extracting information from Web pages.
Selectors are used to select parts of the Web page using a common CSS-style syntax.
For example, $("p")
will select all of the paragraph tags in a document and return them as a list that
can be further operated upon.
Filters are used to further refine the results returned from selectors.
For example, $("p:first")
will select the first paragraph in the returned set from $("p")
.
Selectors are used to do exactly what their name implies: select content within a Web page.
They use a very CSS-like syntax in order to do this. To take a few examples:
$("tag")
: Select all of the <tag> elements$(".className")
: Select all elements that have the className class applied$("#identifier")
: Select the element with the id of identifier$("tag.className")
: Select all <tag> elements that have the className class
appliedjQuery filters are used to refine the results that are returned from selectors.
A few examples:
$("p:first")
: of the returned
 tags, select the first one$("p:even")
: select the even-number
 tags starting at index 0 instead of 1$("a:gt(1)")
: of the  tags, select all those after the 0th and 1st$("p:not(p:eq(2))")
: select all the
 tags except the one at index 2This is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
To select elements based on their position in the document tree, use the Hierarchy Selectors. The Hierarchy Selectors work by examining the position of target elements relative to other elements:
$("parent > child")
: selects "child" elements that are immediate descendants of the "parent"$("ancestor descendant")
: selects "descendant" elements as long as they have an "ancestor" element
somewhere above them$("prev + next")
: selects the "next" element if it is immediately preceded by a "prev" element$("prev ~ siblings")
: selects all "siblings" elements that come after a "prev" elementThis is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
Attribute filters are used to select elements in the Web page that have attribute values matching a given set of criteria.
Some examples include:
This is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
These selectors are used to retrieve content that matches certain conditions, such as whether they contain certain content, whether they are visible/hidden, or whether they are in a certain position within their parent.
:contains('text')
: select elements that contain specific text:parent
: select elements have at least one child node (element or text):has(selector)
: select elements that contain at least one element that matches the selector:first-child
: select elements that are the first child of their parents:last-of-type
: select elements that are the last of their type among siblings:nth-child()
: select elements that are the nth child of their parentThis is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
The DOM of a Web page is organized as a tree structure. The elements in the page have family-like names to refer to their positions relative to other elements.
For example, the HEAD and BODY tags are "children" of the HTML tag, and are "siblings" of each other. They have the HTML tag as their "parent". jQuery provides functions for navigating the document tree and processing sets of elements, such as:
children()
: Retrieves all the child elements of the matched elements, except text nodesprev(), next(), parent()
: used to traverse the family relationships of an elementfind()
: search within a given element to find elements that match a selector expressioneach()
: loops over a set of matched elements and calls a function for each oneThis is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
jQuery makes it very easy to create new page content and change existing page content.
Creating new content is as simple as passing a string of HTML to the $() function.
For example, $("
")
creates a new, empty paragraph tag. To add new content to the paragraph,
you could simply write $("
").append("Hello there")
.
There are multiple ways to change page content using jQuery, depending on your needs.
The html()
and text()
functions can be used to directly manipulate the contents of elements,
and there are ways to control how content can be inserted and moved around in the page.
Content can be inserted at various points in the document, relative to existing content, using a variety of jQuery methods built for each purpose.
There are two sets of insertion functions: one set for inserting content inside of other content, and one for inserting outside of other content.
append()
: Appends content to the inside of the matched elementsprepend()
: Prepends content to the inside of the matched elementsappendTo()
: Appends the specified content to the inside of the matched elementsprependTo()
: Prepends the specified content to the inside of the matched elementsafter()
: Appends content to the outside of the matched elementsbefore()
: Prepends content to the outside of the matched elementsinsertAfter()
: Takes the specified content and appends it outside of the specified elementsinsertBefore()
: Takes the specified content and prepends it outside of the specified elementsThis is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
In addition to creating and inserting content, the ability to alter the current content of a page is a key scenario in Web development. jQuery has functions tailored to specific situations where content needs to be altered:
wrap()
: wrap the matched elements with the specified contentwrapAll()
: wrap content around the matched elements as a group(1 div compared to 5)unWrap()
: remove the parents from the matched elementsempty()
: remove all the child elements from the matched elementsremove()
: removes elements from the page, including any embedded data and event handlersdetach()
: removes elements from the page, but maintains embedded data and event handlersreplaceAll()
: replaces the matched elements with the specified contentreplaceWith()
: replaces matched elements with content or the results of a callback functionThis is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
To read or change element attributes, use the attr()
function. removeAttr()
can be used
to remove attributes
attr()
: get the value of an attributeattr(name, val)
: set the name attribute to valattr({ name: val ... })
: set multiple attributes in one callremoveAttr(name)
: remove the attribute from the elementGetting and setting CSS information is accomplished via a set of dedicated jQuery functions.
In addition to setting and retrieving individual CSS properties, there are methods for easily changing the CSS classes assigned to page elements that work in a cross-browser manner.
css()
: get or set CSS properties on the matched elements in a variety of wayshasClass(className)
: determine whether a page element has a certain classaddClass(className | function)
: add the given CSS class to the elements in the matched setremoveClass(className | function)
: remove the given CSS class from the elements in the matched settoggeClass(className | function)
: add or remove the given CSS class to the elements in the matched set depending on whether it is already thereThis is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
This is paragraph 5
jQuery can associate arbitrary data with page elements. Use the controls above to exercise the data() and removeData() functions on the example DIV element
Simple Animation Choices
jQuery provides some basic animation features for showing and hiding elements, as well as a low-level animation function that can be used to animate several CSS properties (as long as they are numeric).
The show() and hide() functions are the simplest way to reveal and hide elements. This can be done with an optional animation.
show()
: Reveals the matched elements using an optional animationhide()
: Hides the matched elements using an optional animationtoggle()
: Toggles the visible state of the matched elements using an optional animationPage elements can be faded in or out using a set of dedicated jQuery functions.
fadeIn()
fades the element in from being invisiblefadeOut()
fades the element out and removes it from layoutfadeTo()
fades the element to a specified opacityElements can also be shown and revealed via the slide functions. A common use case for this feature is when, for example, you have a message to display to the user that can be dismissed once read.
slideUp()
: animates the height of the matched elements to 0 (or whatever CSS min-height is set to).
When the animation finishes, the display
CSS property of the element is set to 'none' to remove
the element from the page layoutslideDown()
: animates the height of the matched elements to reveal themslideToggle()
: toggles the state of the matched elements, either sliding them up or down depending
on their current stateThe animate()
function provides a way to create smooth animations on the properties of an object.
Click the buttons below this

element to see how various properties can be animated.
jQuery normalizes an event structure across browsers and provides cross-browser consistency for properties such as the event name, the page coordinates of the mouse, the element where the event originated along with any other element related to the event, and information such as whether a meta-key or specific mouse button was pressed.
jQuery makes it simple to start and stop listening to events using the on()
and off()
functions.
You just need to supply the name of the event you want to listen to and a function to handle it
Type in this text field
Last character typed:
Some types of events are fairly common, and jQuery provides shorthand helper functions to make your code a little easier to write and read. Some examples:
hover()
: use this instead of mouseover and mouseleave eventsclick()
: listens for click eventsdblclick()
: listens for double-click eventsresize()
: fired on the window object when the browser window resizesThe jQuery Event object contains detailed information about each event that occurs in the page.
Click on each of the DIV elements below to see event-related information for each.
Do Not Use Spans: This will cause data to become blank
Event type:
Key/Button:
Target:
Related Target:
pageX:
pageY:
clientX:
clientY:
Meta Key:
data:
One of jQuery's great strengths is how it simplifies working with AJAX. jQuery provides high-level wrapper functions for retrieving data, working with different data types, handling errors, and monitoring the AJAX request process.
ajax()
: used to perform generic AJAX requestsload()
: loads AJAX content directly into a page elementThe $.ajax()
function is used to perform basic AJAX requests. It can be customized using a variety of parameters.
If successful, the returned data will appear here:
It turns out that certain scenarios, such as retrieving data via AJAX and then inserting the returned content into an element on the page, are pretty common in Web development.
jQuery provides a set of helper functions that make these scenarios easier.
Content will be inserted into this div:
Using AJAX, it is possible to retrieve and work with different types of data. In this example, we will write jQuery code to work with JSON and XML data.
The returned data will be inserted into this div: