JavaScript DHTML/jQuery/Selector
Содержание
- 1 Adds class to all divs that have a paragraph inside of them.
- 2 Ancestor descendant
- 3 Assign query result to variable
- 4 Contains another tag
- 5 Contains(text) matches elements which contain the given text.
- 6 Count hidden tags
- 7 Doest it contain
- 8 empty() matches all elements that have no children (including text nodes).
- 9 Find all elements is to set the "context" to document.body
- 10 Find all elements within the "context" (document.body)
- 11 Finds every element (including head, body, etc).
- 12 Find tag from just added HTML
- 13 Find the parent element of each paragraph with a class "selected".
- 14 header() matches all elements that are headers, like h1, h2, h3 and so on.
- 15 hidden() matches all elements that are hidden, or input elements of type "hidden".
- 16 Hides all paragraphs then the link on click.
- 17 HTML contains
- 18 jQuery custom filter selectors
- 19 Make all visible divs turn yellow on click.
- 20 Matches all elements
- 21 Matches all elements that are headers, like h1, h2, h3 and so on
- 22 Matches all elements that have no children (including text nodes)
- 23 Matches all elements with the given name.htm
- 24 Matches all input elements of type text.htm
- 25 Matches elements which contain the given text
- 26 Methods to obtain new wrapped set based on relationships
- 27 not(selector) filters out all elements matching the given selector.
- 28 Removes all elements that match "div p.selected" from the total set of all paragraphs.
- 29 Select more than one
- 30 Show hidden div tags
- 31 visible() matches all elements that are visible.
Adds class to all divs that have a paragraph inside of them.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:has(p)").css("color","red");
});
</script>
</head>
<body>
<body>
<div><p>Hello in a paragraph</p></div>
</body>
</html>
Ancestor descendant
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form input").css("border", "2px solid red");
});
</script>
</head>
<body>
<form>
<label>Child:</label>
<input name="name" />
<fieldset>
<label>Grandchild:</label>
<input name="newsletter" />
</fieldset>
</form>
</body>
</html>
Assign query result to variable
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var input = $("form input:text");
$("div").text("For this type jQuery found " + input.length + ".");
});
</script>
</head>
<body>
<form>
<input type="text" />
</form>
<div></div>
</body>
</html>
Contains another tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").remove(":contains("Hello")");
});
</script>
</head>
<body>
<body>
<p class="hello">Hello</p>
</body>
</html>
Contains(text) matches elements which contain the given text.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:contains("F")").css("background-color", "#bbbbff");
});
</script>
</head>
<body>
<body>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
<html>
<head>
<style>
.test{ border: 1px solid red; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:hidden").show(3000);
});
</script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span></span>
</body>
</html>
Doest it contain
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one("click", function () {
if ($(this).is(":contains("asdf")")) {
$("p").text("It"s the asdf div.");
}else{
$("p").text("It"s NOT the asdf div.");
}
$("p").hide().slideDown("slow");
});
});
</script>
</head>
<body>
<body>
Press each to see the text.
<div>asdf</div>
<div>sdf</div>
<div>df</div>
<div>sdf</div>
<div>asdf</div>
<div>asdf</div>
<p></p>
</body>
</html>
empty() matches all elements that have no children (including text nodes).
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:empty").text("Was empty!").css("background", "red");
});
</script>
</head>
<body>
<body>
<table>
<tr><td>First</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</body>
</html>
Find all elements is to set the "context" to document.body
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("*", document.body).css("border","1px solid red");
});
});
</script>
</head>
<body>
<div class="notMe">div </div>
<div class="myClass">div</div>
<span class="myClass myOtherClass">span</span>
</body>
</html>
Find all elements within the "context" (document.body)
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("*", document.body).css("border","3px solid red");
});
</script>
</head>
<body>
<body>
<div>A div</div>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<span></span>
</body>
</html>
Finds every element (including head, body, etc).
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("*").css("border","3px solid red");
});
</script>
</head>
<body>
<body>
<div>A div</div>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<span></span>
</body>
</html>
Find tag from just added HTML
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newText = $("p").text().split(" ").join("</div> <div>");
$("p").html(newText).find("div").hover(
function () { $(this).addClass("y"); },
function () { $(this).removeClass("y"); });
});
</script>
<style>
.y { background:yellow; }
</style>
</head>
<body>
<body>
<p>a ab abc</p>
</body>
</html>
Find the parent element of each paragraph with a class "selected".
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").parent(".selected").css("background", "yellow");
});
</script>
</head>
<body>
<body>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
</body>
</html>
header() matches all elements that are headers, like h1, h2, h3 and so on.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":header").css({ background:"#CCC", color:"blue" });
});
</script>
</head>
<body>
<body>
<h1>Header 1</h1>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(":hidden").length);
});
</script>
</head>
<body>
<body>
<input type="button" value="Input Button"/>
<input type="checkbox">asdf</input>
<input type="checkbox" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</body>
</html>
Hides all paragraphs then the link on click.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hide();
});
</script>
</head>
<body>
<body>
<p class="myClass">p</p>
<span class="myClass">span class="myClass"</span>
</body>
</html>
HTML contains
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newText = $("p").text().split(" ").join("</div> <div>");
$("p").html(newText).find(":contains("a")")
.css({"font-style":"italic"});
});
</script>
<style>
.y { background:yellow; }
</style>
</head>
<body>
<body>
<p>a ab abc</p>
</body>
</html>
jQuery custom filter selectors
Selector Description
:animated Selects animated elements.
:button Selects button (input[type=submit], input[type=reset],input[type=button], or button).
:checkbox Selects check box elements (input[type=checkbox]).
:checked Selects check checked boxes or radio buttons.
:contains(foo) Selects only elements containing the text foo.
:disabled Selects disabled form elements.
:enabled Selects enabled form elements.
:file Selects file elements (input[type=file]).
:header Selects headers elements; for example: <h1> through <h6> elements.
:hidden Selects hidden elements.
:image Selects form images (input[type=image]).
:input Selects form elements (input, select, textarea, button).
:not(filter) Negates the specified filter.
:parent Selects elements that have children (including text), but not empty elements.
:password Selects password elements (input[type=password]).
:radio Selects radio elements (input[type=radio]).
:reset Selects reset buttons (input[type=reset] or button[type=reset]).
:selected Selects option elements that are selected.
:submit Selects submit buttons (button[type=submit] or input[type=submit]).
:text Selects text elements (input[type=text]).
:visible Selects elements that are visible.
Make all visible divs turn yellow on click.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
});
</script>
</head>
<body>
<body>
<span></span>
<div style="display:none;">Hider!</div>
<div>click me</div>
</body>
</html>
Matches all elements
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("*").css("background","red");
});
});
</script>
</head>
<body>
<div class="notMe">div </div>
<div class="myClass">div</div>
<span class="myClass myOtherClass">span</span>
</body>
</html>
Matches all elements that are headers, like h1, h2, h3 and so on
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":header").css({ background:"#CCC", color:"blue" });
});
</script>
</head>
<body>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
</body>
</html>
Matches all elements that have no children (including text nodes)
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:empty").text("Was empty").css("background", "rgb(255,220,200)");
});
</script>
</head>
<body>
<table>
<tr><td>data</td><td></td></tr>
<tr><td>data</td><td></td></tr>
<tr><td>data</td><td></td></tr>
</table>
</body>
</html>
Matches all elements with the given name.htm
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
.changeP { font-weight: bold; color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("border","1px solid red");
});
</script>
</head>
<body>
<div id="myID">0</div>
<div id="myID1">1</div>
<div id="myID2">2</div>
<span>SPAN</span>
</body>
</html>
Matches all input elements of type text.htm
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var input = $("form input:text").css({background:"yellow"});
});
</script>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>
Matches elements which contain the given text
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:contains("J")").css("text-decoration", "underline");
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>
</head>
<body>
<div>Java</div>
<div>C#</div>
<div>JavaScript</div>
<div>CSS</div>
</body>
</html>
Methods to obtain new wrapped set based on relationships
Method Description
children() Returns all unique children.
contents() Returns contents of the elements.
next() Returns all unique next siblings.
nextAll() Returns all the following siblings.
parent() Returns unique direct parents.
parents() Returns unique ancestors.
prev() Returns all unique previous siblings.
prevAll() Returns all the previous siblings of the wrapped elements.
siblings() Returns all unique siblings of the wrapped elements.
not(selector) filters out all elements matching the given selector.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:not(:checked) + span").css("background-color", "yellow");
});
</script>
</head>
<body>
<body>
<div>
<input type="checkbox" name="a" />
<span>A</span>
</div>
<div>
<input type="checkbox" name="b" />
<span>B</span>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<span>C</span>
</div>
</body>
</html>
Removes all elements that match "div p.selected" from the total set of all paragraphs.
$("p").not($("div p.selected"))
Select more than one
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div,span,p.myClass").css("border","3px solid red");
});
</script>
</head>
<body>
<div>div</div>
<p class="myClass">p</p>
<p class="notMe">p</p>
<span>span</span>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:hidden").show(3000);
});
</script>
</head>
<body>
<body>
<span></span>
<div style="display:none;">Hider!</div>
<div></div>
</body>
</html>
visible() matches all elements that are visible.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
});
</script>
</head>
<body>
<body>
<span></span>
<div style="display:none;">Hider!</div>
<div>click me</div>
</body>
</html>