Scribd
Upload
5 views

Lecture 5

Uploaded by

moinuddeen.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Lecture 5

Uploaded by

moinuddeen.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l .

c o m )
jQuery with HTML and CSS
LECTURE (5)
Jquery also used to manipulate html and css.

Method Description

addClass() Adds one or more class names to selected elements

after() Inserts content after selected elements

append() Inserts content at the end of selected elements

appendTo() Inserts HTML elements at the end of selected elements

attr() Sets or returns attributes/values of selected elements

before() Inserts content before selected elements

clone() Makes a copy of selected elements

css() Sets or returns one or more style properties for selected elements

detach() Removes selected elements (keeps data and events)

empty() Removes all child nodes and content from selected elements

hasClass() Checks if any of the selected elements have a specified class name

height() Sets or returns the height of selected elements

html() Sets or returns the content of selected elements

innerHeight() Returns the height of an element (includes padding, but not border)

1 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )

innerWidth() Returns the width of an element (includes padding, but not border)

insertAfter() Inserts HTML elements after selected elements

insertBefore() Inserts HTML elements before selected elements

offset() Sets or returns the offset coordinates for selected elements (relative
to the document)

offsetParent() Returns the first positioned parent element

outerHeight() Returns the height of an element (includes padding and border)

outerWidth() Returns the width of an element (includes padding and border)

position() Returns the position (relative to the parent element) of an element

prepend() Inserts content at the beginning of selected elements

prependTo() Inserts HTML elements at the beginning of selected elements

prop() Sets or returns properties/values of selected elements

remove() Removes the selected elements (including data and events)

removeAttr() Removes one or more attributes from selected elements

removeClass() Removes one or more classes from selected elements

removeProp() Removes a property set by the prop() method

replaceAll() Replaces selected elements with new HTML elements

2 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )

replaceWith() Replaces selected elements with new content

scrollLeft() Sets or returns the horizontal scrollbar position of selected elements

scrollTop() Sets or returns the vertical scrollbar position of selected elements

text() Sets or returns the text content of selected elements

toggleClass() Toggles between adding/removing one or more classes from


selected elements

unwrap() Removes the parent element of the selected elements

val() Sets or returns the value attribute of the selected elements (for
form elements)

width() Sets or returns the width of selected elements

wrap() Wraps HTML element(s) around each selected element

wrapAll() Wraps HTML element(s) around all selected elements

wrapInner() Wraps HTML element(s) around the content of each selected


element

Use of CSS( ) method

The css() method sets or returns one or more style properties for the selected elements.

Example:-
<!DOCTYPE html>
<html>
<head>
<title>Css()</title>
<script src="jquery-1.9.1.min.js"></script>

3 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("border", "5px solid #bb00ff");
$("p").css("margin", "50px");
$("p").css("padding", "20px");
$("p").css("color", "#9955cc");
$("p").css("background-color", "#99ffcc");
// set multiple properties and values
$("p").css({"width":"500px","height":"300px"});
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>


<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set Css Property</button>

</body>
</html>
Use of html( ) method

The html() method sets or returns the content (innerHTML) of the selected elements.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>html()</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("<h1>This is replaced content</h1>");
$("h2").html("<center><img src='abc.jpg' width='700px' height='300px' /></center>");
});

4 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
});
</script>
</head>
<body>

<h2>This is a heading h2</h2>


<h1>This is a heading h1</h1>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set Css Property</button>

</body>
</html>

Use of after( ) method

The after() method inserts specified content after the selected elements.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>after</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('p').click(function(){
$(this).after("<p>This is a text after paragraph</p>");
});
});
</script>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

Use of addClass( ) method


5 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
The addClass() is used to add the class on any element.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>addClass</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("[align='center']").addClass('orange');
$("[name='one']").addClass('red');
$("[id]").addClass('green');
});
</script>
<style type="text/css">
.red{
background-color:red;
color:white;
}
.green{
background-color:green;
color:white;
}
.orange{
background-color:orange;
color:white;
}
</style>
</head>
<body>
<h1 align="center" id="two">This is a sample heading 1</h1>
<p align="justify" name="one">This is a sample paragraph</p>
<h3 align="right" name="one">This is a sample heading 3</h3>
<p align="center">This is another sample paragraph</p>
<table border="1px" width="500px">
<tr align="center" id="two">
<td>Name</td>
<td>Class</td>
<td name="one">Rno.</td>
</tr>
6 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 5<Jquery with HTML and CSS> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<tr align="center">
<td id="two">Faizan</td>
<td id="two">WG</td>
<td name="one" >23</td>
</tr>
</table>
</body>
</html>

7 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial

You might also like