select element
select by id$('#third')
...
<p id="third"> ... </p>
select set of elements
$("p") << select all <p> element
$("p").size() << number of <p> elements
$("p").length << number of <p> elements
select by index from set of elements
$("img")[0] << select first <p> element
NOTE: this will return browser element, not jQuery-wrapped element, so cannot use further jQuery function.
$("img").slice(0, 1) return jQuery-wrapped element, so can use further jQuery function.
e.g. $("img").slice(0, 1).attr("alt") << OK
$("img")[0].attr("alt") << NG
select by style
$('p.second')
...
<p class="second"> ... </p>
select by index
$('p:first') << first <p> element
$('p:last') << last <p> element
$('p:nth-child(3)') << 3rd <p> element (nothing happened if invalid index is given)
$('p:nth-child(even)'), $('p:nth-child(odd)') << even/odd <p> elements
$('p.second:first') << combine style & first/last
:even << even elements
:odd << odd elements
:eq(9) << element indexed 9 (index start from 0 --> select 10th element)
:gt(9) << element indexed 10 and after
:lt(9) << element indexed 0..8
select by text content
$('p:contains("3")') << all <p> elements with text contains "3"
select by attribute
$('p[Language]') << all <p> elements with have attribute "Language"
$('p[Language='German']') << all <p> elements with have attribute "Language" = "German"
select by hierarchy
$('body div p') << select all <p> elements inside <div> inside <body>
select by direct hierarchy
$('div > p') << select all <p> elements DIRECTLY inside <div>
user input
checkbox selected$('input:checked') << all input elements that user selected
$('input[type='radio']:checked') << combined : all radio buttons selected
$("input:radio") << all radio buttons
$("input:radio:checked") << all radio button selected
...
<form>
<input type="checkbox">Check 1</input>
<input type="radio">Check 2</input>
...
</form>
list selected
$("select option:selected") << selected elements
<form>
<select size="4" multiple="true">
<option>Item 1</option>
<option>Item 2</option>
...
</select>
</form>
attribute value
get attribute value$('img:first').attr("alt") << get value of attribute "alt" from first <img> element
$('img')slice(0, 1).attr("alt") << same
$('img')[0].attr("alt") << won't work
$('img:nth-child(1)).attr("alt") << won't work (throw "undefined"), don't know why
set attribute value
$('img:first').attr("alt", "...") << set value of attribute "alt" for first <img> element
for "value" attribute, can also use function val()
$("#target").val("new value") << same as $("#target").attr("value", "new value")
set width/height
$('img').width(486); $('img').height(365); << set new size
rewrite text
$("p")[0].innerHTML = "<i>Hello there!</i>";
rewrite element
$("div").html("...") << rewrite HTML text inside <div> element
$("div").text("...") << rewrite text inside <div> element (treat parameter as simple text)
$("p").append("...") << append HTML content for all <p> elements
page structure
check element type$('#p1').is('p') << TRUE if element with ID 'p1' is <p> element
insert element before/after
$("...").insertAfter("#first") << insert after element with ID=first
$("#first").after(...) << same
$("...").insertBefore("p") << insert before EVERY <p> elements
$("p").before(...) << same
move element
$("p:last").append($("p:first")) << append existing element = move element
NOTE: index not updated after element moved?
e.g. following example work can only rotate one round
function rotate()
{
$("p:last").append($("p:first"));
}
...
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
<p>Element 4</p>
<form>
<input type = "button" value="Rotate" onclick="rotate()"></input>
wrap element
$('p').wrap('<h1></h1>') << wrap <p> in <h1> i.e. become <h1><p>...</p></h1>
event
overviewpage element --> event --> event handler
bind an element's event to event handler
$('img').bind(event, data, handler)
event : event name
data : additional data (optional)
handler : handler function
e.g. bind image(with id="target")'s click event (alert a message)
<script>
$(function(){
$('#target')
.bind('click', function(event) {
alert('Hello!');
});
});
</script>
...
<img id='target' ...>
...
bind multiple events
$('#target')
.bind('click', function(event) {
...1st event handler...
})
.bind('click', function(event) {
...2nd event handler...
})
.bind(...)
shortcut (apply to all type of event)
.bind('click', function(event){... = .click(function(event) {...
call event handler only once
.one('click', function(event){... << use one() instead of bind()
some event object properties
event.pageX, event.pageY, event.screenX, event.screenY
NOTE: top-left = (0,0)
event.type e.g. click, mouseenter, mouseout
event.keyCode << key pressed (raw key code, no shift detected)
String.fromCharCode(event.keyCode) << convert from key code to char (return capital letter)
event.target
handle hover event
$('#target').hover(over, out);
...
function over(event) {
...
}
function out(event) {
...
}
show/hide
show/hide element$('p:first').show();
$('p:first').hide();
NOTE:
can specify parameters same as slideUp/slideDown mentioned below
show/hide with duration and callback
$('#target').show(2000, hey) << duration = 2000 msec; call function hey() after done (can pass parameters if necessary)
$('#target').hide(2000, hey)
$('#target').toggle(duration, callback) << switch between show/hide
$('#target').fadeIn(duration, callback) << (show/hide + visual effect)
$('#target').fadeOut(duration, callback) << (show/hide + visual effect)
$('#target').fadeTo(duration, callback) << partially fade
$('#target').slideUp(duration, callback) << (show/hide + visual effect)
$('#target').slideDown(duration, callback) << (show/hide + visual effect)
$('#target').slideToggle(duration, callback) << switch between slide up/down
$('#first').slideUp("slow"); $('#first').slideDown("slow")
NOTE:
- duration : fast = 200msec, slow=600msec;
- much more parameters are available, see jQuery API at http://api.jquery.com/slideUp/
- use attribute style to initially hide element >> <img id='target' src='image1.jpg' style='display:none'/>
animation
animate(params, duration, easing, callback) << animation from starting style to target style (specified by params)e.g.
<script>
function animator()
{
$("#target").animate({
width: "80%",
opacity: 0.333,
fontSize: "26pt",
marginLeft: "0.5in",
borderWidth: "15px"
}, 2000 );
}
</script>
others
apply/toggle class$('div p.second').addClass("striped");
$('div p.second').toggleClass("striped");
...
<style>
p.second {
font-weight: normal;
}
p.striped {
background-color: cyan;
}
</style>
running code when page is ready
$(document).ready(function() {
...
});
OR in short form
$(function() {
...
});
change style
$('p:first').css("font-style", "italic");
create new element
$("...<html text here>...") OR jquery("...")
apply custom function to elements
$('img').each(function(m) { << apply to <img> element; refer each element using this, m = element index
this.alt = "Image " + (m+1);
...
});
ไม่มีความคิดเห็น:
แสดงความคิดเห็น