We have 2 parts:
- Part 1: STEP BY STEP TO LEARN JQUERY SELECTOR
- Part 3: THE NEXT TIME I WILL POST MORE ....
REQUIREMENT
VISUAL STUDIO 2013 (2010 OR 2008)
GENERAL
Adding JQuery library inside <head></head>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
</head>
<body>
</body>
</html>
JQUERY CATEGORY
JQUERY SELECTOR
Create new Project ASP.NET Web Form Application is JQuery.Selectors
After create new project, we have jQuery available in this
JQUERY SELECTOR FILTERS
Basic Filter First
Creating new BasicFilters_First.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
Adding script library after <head> tag
<script src="\scripts\jquery-1.8.2.js"></script>
Design table with 3 rows 1 column in Body tag
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
Now we code JQuery script: Add script
<script>
$(document).ready(function () {//Registering
the event when form load
$("tr:first").css("font-style", "italic");//Finding first row and set css
});
</script>
Adding more css
<style>
td {
color: blue;
font-weight: bold;
}
</style>
All code here
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microsofttechnology.net - JQuery - Basic Filter - Fisrt</title>
<script src="\scripts\jquery-1.8.2.js"></script>
<script>
$(document).ready(function () {
$("tr:first").css("font-style", "italic");
});
</script>
<style>
td {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
</body>
</html>
F5 to run
Basic Filter Last
Creating BasicFilters_Last.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Basic Filter - Last</title>
<script>
$(document).ready(function () {
$("tr:last").css({ backgroundColor: 'yellow', fontWeight: 'bolder' });
});
</script>
</head>
<body>
<table>
<tr><td>First Row</td></tr>
<tr><td>Middle Row</td></tr>
<tr><td>Last Row</td></tr>
</table>
</body>
</html>
F5 to run
Basic Filter even
Creating BasicFilters_Even.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Basic Filter - Even</title>
<script>
$(document).ready(function () {
$("tr:even").css("background-color", "#bbbbff");
});
</script>
<style>
table {
background: #eeeeee;
}
</style>
</head>
<body>
<table border="1">
<tr><td>microsofttechnology.net #0</td></tr>
<tr><td>microsofttechnology.net #1</td></tr>
<tr><td>microsofttechnology.net #2</td></tr>
<tr><td>microsofttechnology.net #3</td></tr>
</table>
</body>
</html>
F5 to run
Basic Filter odd
Creating BasicFilters_Odd.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Basic Filter - Odd</title>
<script>
$(document).ready(function () {
$("tr:odd").css("background-color", "#bbbbff");
});
</script>
<style>
table {
background: #eeeeee;
}
</style>
</head>
<body>
<table border="1">
<tr><td>microsofttechnology.net #0</td></tr>
<tr><td>microsofttechnology.net #1</td></tr>
<tr><td>microsofttechnology.net #2</td></tr>
<tr><td>microsofttechnology.net #3</td></tr>
</table>
</body>
</html>
F5 to run
Basic Filter header
Creating BasicFilters_Header.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Basic Filter - Header</title>
<script>
$(document).ready(function () {
$(":header").css({ background: '#CCC', color: 'blue' });
});
</script>
<style>
body {
font-size: 14px;
font-family: Arial;
}
h1, h2 {
margin: 3px 0;
}
</style>
</head>
<body>
<h1>SharePoint - Ajax - JQuery</h1>
<p>Learning to Ajax and Jquery in SharePoint</p>
<h2>SharePoint Business Intelligence</h2>
<p>The first lesson: Reporting Services</p>
</body>
</html>
F5 to run
JQUERY SELECTOR CONTENT FILTERS
Contents Filters - Contents
Creating ContentsFilters_Contents.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Contents Filters -
Contents</title>
<script>
$(document).ready(function () {
$("div:contains('Do')").css("text-decoration", "underline");
});
</script>
</head>
<body>
<div>Do Quoc Hung</div>
<div>Phan Thi Yen</div>
<div>Do Gia Bao</div>
<div>Do Gia Han</div>
</body>
</html>
F5 to run
Contents Filters – Empty
Creating ContentsFilters_Empty.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Contents Filters -
Empty</title>
<script>
$(document).ready(function () {
$("td:empty").text("Was
empty!").css('background', 'rgb(255,220,200)');
});
</script>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr><td>Do Quoc Hung</td><td></td></tr>
<tr><td>quochung211187@gmail.com</td><td></td></tr>
<tr><td></td><td>+84909263861</td></tr>
</table>
</body>
</html>
F5 to run
Contents Filters – Has
Creating ContentsFilters_Has.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Contents Filters - Has</title>
<script>
$(document).ready(function () {
$("div:has(p)").addClass("test");
});
</script>
<style>
.test {
border: 3px inset red;
}
</style>
</head>
<body>
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
</body>
</html>
F5 to run
Contents Filters – Parent
Creating ContentsFilters_Parent.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Contents Filters -
Parent</title>
<script>
$(document).ready(function () {
$("td:parent").fadeTo(1500, 0.3);
});
</script>
<style>
td {
width: 40px;
background: green;
}
</style>
</head>
<body>
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
</body>
</html>
F5 to run
JQUERY SELECTOR VISIBILITY FILTERS
Visibility Filters – Hidden
Creating VisibilityFilters_Hidden.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Visibility Filters -
Hidden</title>
<script>
$(document).ready(function () {
// in
some browsers :hidden includes head, title, script, etc... so limit to body
$("div:hidden").show(3000);
});
</script>
<style>
div {
width: 70px;
height: 40px;
background: #ee77ff;
margin: 5px;
float: left;
}
span {
display: block;
clear: left;
color: red;
}
.starthidden {
display: none;
}
</style>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
</body>
</html>
F5 to run
Visibility Filters – Visible
Creating VisibilityFilters_Visible.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Visibility Filters -
Visible</title>
<script>
$(document).ready(function () {
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
});
</script>
<style>
div {
width: 50px;
height: 40px;
margin: 5px;
border: 3px outset green;
float: left;
}
.starthidden {
display: none;
}
</style>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>
F5 to run
JQUERY CHILD FILTERS
Child Filters – nth-Child
Creating ChildFilters_nth-Child.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Child Filters - nth-Child</title>
<script>
$(document).ready(function () {
$("ul
li:nth-child(2)").append("<span> -
microsofttechnology.net!</span>");
});
</script>
<style>
div {
float: left;
}
span {
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>SharePoint</li>
<li>C#</li>
<li>ASP.NET</li>
</ul>
</div>
<div>
<ul>
<li>SQL</li>
</ul>
</div>
<div>
<ul>
<li>JavaScript</li>
<li>JQuery</li>
<li>Ajax</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>
F5 to run
Child Filters – first-Child
Creating ChildFilters_first-Child.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Child Filters -
first-Child</title>
<script>
$(document).ready(function () {
$("div
span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
});
</script>
<style>
span {
color: #008;
}
span.sogreen {
color: green;
font-weight: bolder;
}
</style>
</head>
<body>
<div>
<span>Hung,</span>
<span>Yen,</span>
<span>Bao</span>
</div>
<div>
<span>Han,</span>
<span>Cherry,</span>
<span>Sori</span>
</div>
</body>
</html>
F5 to run
Child Filters – last-Child
Creating ChildFilters_last-Child.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Child Filters -
last-Child</title>
<script>
$(document).ready(function () {
$("div
span:last-child")
.css({ color: "red",
fontSize: "80%" })
.hover(function () {
$(this).addClass("solast");
}, function () {
$(this).removeClass("solast");
});
});
</script>
<style>
span.solast {
text-decoration: line-through;
}
</style>
</head>
<body>
<div>
<span>Hung,</span>
<span>Yen,</span>
<span>Bao</span>
</div>
<div>
<span>Han,</span>
<span>Cherry,</span>
<span>Sori</span>
</div>
</body>
</html>
F5 to run
JQUERY FORM FILTERS
Form Filters – Enabled
Creating FormFilters_Enabled.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Form Filters - Enabled</title>
<script>
$(document).ready(function () {
$("input:enabled").val("Welcome to
microsofttechnology.net!");
});
</script>
</head>
<body>
<form>
<input name="email" disabled="disabled" />
<input name="id" style="width:250px"/>
</form>
</body>
</html>
F5 to run
Form Filters – Disabled
Creating FormFilters_Disabled.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Form Filters - Disabled</title>
<script>
$(document).ready(function () {
$("input:disabled").val("Welcome to
microsofttechnology.net!");
});
</script>
</head>
<body>
<form>
<input name="email" disabled="disabled" style="width:250px" />
<input name="id" />
</form>
</body>
</html>
F5 to run
Form Filters – Checked
Creating FormFilters_Checked.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Form Filters - Checked</title>
<script>
$(document).ready(function () {
function countChecked() {
var n = $("input:checked").length;
$("div").text(n
+ (n == 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
});
</script>
<style>
div {
color: red;
}
</style>
</head>
<body>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="One" />
<input type="checkbox" name="newsletter" value="Two" />
<input type="checkbox" name="newsletter" value="Three" />
<input type="checkbox" name="newsletter" checked="checked" value="Four" />
<input type="checkbox" name="newsletter" value="Five" />
</form>
<div></div>
</body>
</html>
F5 to run
Form Filters – Selected
Creating FormFilters_Selected.html and add code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="\scripts\jquery-1.8.2.js"></script>
<title>microsofttechnology.net - JQuery - Form Filters - Selected</title>
<script>
$(document).ready(function () {
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.trigger('change');
});
</script>
<style>
div {
color: red;
}
</style>
</head>
<body>
<select name="garden" multiple="multiple" style="width:200px; height:200px">
<option>Do Quoc Hung</option>
<option selected="selected">Phan Thi Yen</option>
<option>Do Gia Bao</option>
<option selected="selected">Do Gia Han</option>
<option>Do Vuong Hao</option>
<option>Do Nhat Nam</option>
</select>
<div></div>
</body>
</html>
F5 to run
0 comments:
Post a Comment