Jquery command

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.12 MB, 397 trang )

Hàm jQuery 8 Mô tả
HÀM (FUNCTIONS)
.add()
.addBack()
.addClass()
.after()
.andSelf()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind()
.blur()
callbacks.add()
callbacks.disable()
callbacks.disabled()
callbacks.empty()
callbacks.fire()
callbacks.fired()
callbacks.fireWith()
callbacks.has()
callbacks.lock()
callbacks.locked()
callbacks.remove()
.change()
.children()
.clearQueue()
.click()
.clone()
.closest()

.contents()
.context
.css()
.data()
.dblclick()
deferred.always()
deferred.done()
deferred.fail()
deferred.isRejected()
deferred.isResolved()
deferred.notify()
deferred.notifyWith()
deferred.pipe()
deferred.progress()
deferred.promise()
deferred.reject()
deferred.rejectWith()
deferred.resolve()
deferred.resolveWith()
deferred.state()
deferred.then()
.delay()
.delegate()
.dequeue()
.detach()
.die()
.each()
.empty()
.end()
.eq()

.error()
event.currentTarget
event.data
event.delegateTarget
event.isDefaultPrevented()
event.isImmediatePropagationStopped(
)
event.isPropagationStopped()
event.metaKey
event.namespace
event.pageX
event.pageY
event.preventDefault()
event.relatedTarget
event.result
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.filter()
.find()
.finish()
.first()
.focus()

.focusin()
.focusout()
.get()
.has()
.hasClass()
.height()
.hide()
.hover()
.html()
.index()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.is()
jQuery()
.jquery
jQuery.boxModel
jQuery.browser
jQuery.Callbacks()
jQuery.contains()
jQuery.cssHooks
jQuery.data()
jQuery.Deferred()
jQuery.dequeue()
jQuery.each()
jQuery.error()
jQuery.extend()
jQuery.fx.interval
jQuery.fx.off

jQuery.globalEval()
jQuery.grep()
jQuery.hasData()
jQuery.holdReady()
jQuery.inArray()
jQuery.isArray()
jQuery.isEmptyObject()
jQuery.isFunction()
jQuery.isNumeric()
jQuery.isPlainObject()
jQuery.isWindow()
jQuery.isXMLDoc()
jQuery.makeArray()
jQuery.map()
jQuery.merge()
jQuery.noConflict()
jQuery.noop()
jQuery.now()
jQuery.param()
jQuery.parseHTML()
jQuery.parseJSON()
jQuery.parseXML()
jQuery.proxy()
jQuery.queue()
jQuery.removeData()
jQuery.sub()
jQuery.support
jQuery.trim()
jQuery.type()
jQuery.unique()

jQuery.when()
.keydown()
.keypress()
.keyup()
.last()
.length
.live()
.load()
.map()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.next()
.nextAll()
.nextUntil()
.not()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.parent()
.parents()
.parentsUntil()

.position()
.prepend()
.prependTo()
.prev()
.prevAll()
.prevUntil()
.promise()
.prop()
.pushStack()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeData()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.select()
.selector
.serialize()
.serializeArray()
.show()
.siblings()
.size()
.slice()

.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toArray()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind()
.undelegate()
.unload()
.unwrap()
.val()
.width()
.wrap()
.wrapAll()
.wrapInner()
Hàm jQuery Ví dụ Mô tả
BỘ CHỌN (SELECTORS)
$('*') $('*')
Chọn tất cả các thành
phần có trong văn bản
HTML, khi sử dụng bộ
chọn này có thể sẽ khiến
quá trình xử lý của một số
trình duyệt chậm lại.
$('tag') $('div')

Chọn thành phần theo
từng tag cụ thể.
$('tag.tênclass') $('div.test')
Chọn thành phần theo
từng class cụ thể.
$('tag#tênid') $('div#test')
Chọn thành phần theo
từng id cụ thể.
$('selector1, selector2 , selectorN ') $('div, ul li, p')
Chọn nhiều bộ chọn giúp
bạn có thể chọn một lúc
nhiều bộ chọn khác nhau,
tốn ít thời gian hơn cho
việc chọn từng bộ chọn.
$('parent > child ') $('div > p')
Chọn thành phần con dựa
theo thành phần cha.
$('tag:eq()') $('ul li:eq(3)')
Chọn thành phần với một
chỉ số n cụ thể.
$('tag:gt()') $('ul li:gt(3)')
Chọn các thành phần với
chỉ số lớn hơn chỉ số n.
$('tag:lt()') $('ul li:lt(3)')
Chọn các thành phần với
chỉ số nhỏ hơn chỉ số n.
$('tag:even') $('ul li:even')
Chọn các phần tử ở vị trí
lẻ.
$('tag:odd') $('ul li:odd')

Chọn các phần tử ở vị trí
chẵn.
$('tag:first') $('p:first')
Chọn phần tử ở vị trí đầu
tiên.
$('tag:last') $('p:last')
Chọn phần tử ở vị trí cuối
cùng.
$('tag:first-child') $('ul li:first-child')
Chọn các phần tử con ở vị
trí đầu tiên.
$('tag:first-of-type') $('ul li:first-of-type')
Chọn thành phần con đầu
tiên hoặc duy nhất trong
các thành phần cha.
$('tag:last-child') $('ul li:last-child')
Chọn các phần tử con ở vị
trí cuối cùng.
$('tag:last-of-type') $('p:last-of-type')
Chọn thành phần con cuối
cùng hoặc duy nhất trong
các thành phần cha.
$('tag:nth-child()') $('p:nth-child(3)')
Chọn thành phần thứ "n"
trong thành phần cha, gốc
tính được tính từ thành
phần đầu tiên trở đi.
$('tag:nth-last-child()') $('p:nth-last-child(3)')
Chọn thành phần thứ "n"
trong thành phần cha, gốc

tính được tính từ thành
phần cuối cùng trở lại.
$('tag:nth-of-type()') $('p:nth-of-type(3)')
Chọn thành phần thứ "n",
gốc tính được tính từ
thành phần đầu tiên trở đi.
$('tag:nth-last-of-type()') $('p:nth-last-of-type(3)')
Chọn thành phần thứ "n",
gốc tính được tính từ
thành phần cuối cùng trở
lại.
$('tag:only-child') $('p:only-child') Chọn thành phần con trong
các thành phần cha, khi
thành phần cha có mỗi
thành phần con là chính
nó, không được chứa
thành phần con khác.
$('tag:only-of-type') $('p:only-of-type')
Chọn thành phần con trong
các thành phần cha, khi
thành phần cha có một
thành phần con là chính
nó.
$('tag:animated') $('div:animated')
Chọn các thành phần đang
chuyển động.
$('tag[attribute]') $('[title]')
Chọn các thành phần có
sử dụng cùng thuộc tính.
$('tag[attribute="value"]') $('[title="Học jQuery"]')

Chọn thành phần có thuộc
tính với giá trị xác định.
$('tag[attribute!="value"]') $('[title=!"Học jQuery"]')
Chọn những thành phần
ngoài thành phần chứa
thuộc tính với giá trị xác
định.
$('tag[attribute|="value"]') $('[title|="Học jQuery"]')
Chọn thành phần có thuộc
tính với giá trị xác định,
hoặc một chuỗi với giá trị
bắt đầu bằng value
$('tag[attribute^="value"]') $('[title^="Học jQuery"]')
Chọn thành phần có thuộc
tính với giá trị xác định,
hoặc một chuỗi với giá trị
bắt đầu bằng value.
$('tag[attribute$="value"]') $('[title$="Học jQuery"]') Chọn thành phần có thuộc
tính với giá trị xác định,
hoặc một chuỗi với giá trị
kết thúc bằng value.
$('tag[attribute*="value"]') $('[title*="Học jQuery"]')
Chọn thành phần có thuộc
tính với giá trị đặc biệt
bằng value.
$('tag[attribute~="value"]') $('[title~="Học jQuery"]')
Chọn thành phần có thuộc
tính với giá trị biệt bằng
value riêng lẻ, chỉ chọn các
giá trị nào được viết cách

nhau bằng khoảng trắng.
$('tag:lang(language)') $(':lang(vi)')
Chọn các thành phần có
sử dụng cùng thuộc tính
lang với language xác
định.
$(tag[bộ chọn thuộc tính 1][bộ chọn thuộc tính
n])
$('div[id][title="Việt Nam"]')
Chọn nhiều các thành
phần với từng bộ chọn cụ
thể
$('tag:parent') $('div:parent')
Chọn thành phần có chứa
ít nhất một thành phần con
(text cũng có thể xem là
thành phần con).
$('tag:empty') $('ul li:empty')
Chọn thành phần không có
chứa bất kỳ thành phần
nào, kể cả text.
$('tag:text') $('div:text')
Chọn thành phần input có
thuộc tính type với giá trị
text.
$('tag:button') $('input:button') Chọn thành phần input có
thuộc tính type với giá trị
button, hoặc tag button.
$('tag:checkbox') $('input:checkbox')
Chọn thành phần input có

thuộc tính type với giá trị
checkbox.
$('tag:checked') $('input:checked')
Chọn thành phần có thuộc
tính checked.
$('tag:disabled') $('input:disabled')
Chọn thành phần có thuộc
tính disabled.
$('tag:enabled') $('input:enabled')
Chọn thành phần không có
thuộc tính disabled.
$('tag:file') $('input:file')
Chọn thành phần có thuộc
tính type với giá trị file.
$('tag:focus') $('input:focus')
Chọn thành phần khi được
focus.
$('tag:hidden') $('div:hidden')
Chọn tất cả các thành
phần không hiển thị, không
dùng cho input với thuộc
tính type="hidden".
$('tag:image') $('input:image')
Chọn thành phần input có
thuộc tính type với giá trị
image.
$('tag:input') $('div:input')
Chọn thành phần thuộc về
form như: input, select,
textarea và button.

$('tag:password') $('input:password') Chọn thành phần input có
thuộc tính type với giá trị
password.
$('tag:radio') $('input:radio')
Chọn thành phần input có
thuộc tính type với giá trị
radio.
$('tag:reset') $('input:reset')
Chọn thành phần input có
thuộc tính type với giá trị
reset.
$('tag:selected') $(':selected') Chọn thành phần select.
$('tag:submit') $('input:submit')
Chọn thành phần input có
thuộc tính type với giá trị
submit.
$('tag:visible') $('div:visible')
Chọn thành phần đang
nhìn thấy (visible), click
vào các thành phần để
hiểu rõ hơn.
$('tag:root') $(':root')
Chọn thành phần gốc của
văn bản, thành phần gốc
chính là tag html.
$('tag:has(selector)') $('div:has(p)')
Chọn thành phần có chứa
ít nhất một phần tử phù
hợp với quy định chọn.
$('tag:header') $('div:header') Chọn thành phần headline.

$('prev + next ') $('div + span')
Chọn thành phần kế tiếp
ngay sau thành phần
trước.
$('prev ~ siblings ') $('div ~ p')
Chọn tất cả các thành
phần kế tiếp ngay sau
thành phần trước.
$('tag:not(selector)') $('div:not(p)') Không chọn bộ chọn này.
$('tag:contains(text)') $('p:contains(html)')
Chọn thành phần có chứa
text được chỉ định.
Các hàm trong Jquery(học web chuẩn .com)
.add
.add()
Định nghĩa và sử dụng
• .add(): Thêm thành phần vào thành phần đã có để cùng thực hiện một hành động.
Cấu trúc
• Đã được thêm vào từ phiên bản 1.0
.add( bộ chọn )
$('div').add('p').css('color','red');
$('div').add('.test, ul li').css('color','red');
.add( html )
$('div').add('<p class="test">tag p</p>').appendTo('body');
• Đã được thêm vào từ phiên bản 1.3.2
.add( Object )
$('div').add($('p').css('color','red')).css('border','1px solid blue');
• Đã được thêm vào từ phiên bản 1.4
.add( bộ chọn , context )
$('div').add('p',this).addClass('test');

.add(bộ chọn)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><script>
$(function(){
$('div').add('p').css('border','1px solid blue');
});
</script>
</head>
<body>
<div>Thành phần div</div>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Thêm thành phần p tham gia vào một hành động chèn style cùng với thành phần div.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<div>Thành phần div</div>
<p>Thành phần p</p>
<div style="border: 1px solid blue;">Thành phần div</div>
<p style="border: 1px solid blue;">Thành phần p</p>
Ví dụ
Html viết:
<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><script>
$(function(){
$('div').css('background','#cccccc').add('p').css('border','1px solid blue');
});
</script>
</head>
<body>
<div>Thành phần div</div>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Thành phần div được định dạng style với background="#cccccc" trước, sau đó thêm thành
phần p tham gia vào định dạng style chung với div.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<div>Thành phần div</div>
<p>Thành phần p</p>
<div style="background: #cccccc; border: 1px solid blue;">Thành
phần div</div>
<p style="border: 1px solid blue;">Thành phần p</p>
.add(html)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>Tiêu đề</title>
<script src=" /><script>
$(function(){
$('div').add('<p class="test">tag p có class test</p>').appendTo('body');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<div>Thành phần div</div>
<div>Thành phần div</div>
<p class="test">tag p có class test</p>
.add(Object)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><script>
$(function(){
$('div').add($('p').css('color','red')).css('border','1px solid blue');
});
</script>

</head>
<body>
<div>Thành phần divdiv</div>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Thêm thành phần p với một định dạng color="red" cùng với thành phần div được định dạng
thêm với thuộc tính border.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<div>Thành phần div</div>
<p>Thành phần p</p>
<div style="border: 1px solid blue;">Thành phần div</div>
<p style="color: red; border: 1px solid blue;">Thành phần
p</p>
.add(bộ chọn,context)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><style>
.test {
background-color: blue;
}
</style>
<script>
$(function(){

$('div').click(function() {
$('div').add('p',this).addClass('test');
});
});
</script>
</head>
<body>
<div>
<p>Thành phần p nằm trong div</p>
</div>
<p>Thành phần p</p>
</body>
</html>
Hiển thị trình duyệt:
Click vào "p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được
thêm class="test".
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery - sử dụng click
<div>
<p>Thành phần p nằm trong div</p>
</div>
<p>Thành phần p</p>
<div class="test">
<p class="test">Thành phần p nằm trong div</p>
</div>
<p>Thành phần p</p>
.addClass()
Định nghĩa và sử dụng
• .addClass(): thêm class cho thành phần.
Cấu trúc

• Đã được thêm vào từ phiên bản 1.0
.addClass( tênclass )
$('div').addClass('test');
.addClass( tênclass01 tênclass02 )
$('div').addClass('test');
• Đã được thêm vào từ phiên bản 1.4
.addClass(function(index){ })
$('ul li').addClass(function(index){
return "list-" + index;
});
.addClass(function(index, class_đã_có ){ })
$('ul li').addClass(function(index, current){
var newClass;
if(current == "blue") {
newClass = "red";
}
return newClass;
});
.addClass(tênclass)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><style>
.test {
background-color: blue;
}
</style>

return "list-" + index;
});
});
</script>
</head>
<body>
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li>Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Tất cả các thành phần li đã thêm class theo thứ tự
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li>Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
<ul>
<li class="list-0">Thành phần li 0</li>
<li class="list-1">Thành phần li 1</li>
<li class="list-2">Thành phần li 2</li>

<li class="list-3">Thành phần li 3</li>
<li class="list-4">Thành phần li 4</li>
</ul>
.addClass(function(index, class_đã_có){ })
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><style>
li {
background-color: blue;
}
li.bdrRed {
border: 3px dashed yellow;
}
</style>
<script>
$(function(){
$('ul li').addClass(function(index, current){
var newClass;
if(current == "blue") {
newClass = "bdrRed";
}
return newClass;
});
});
</script>
</head>

<body>
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li class="blue">Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Thành phần li có class="blue" đã được thêm class red.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li class="blue">Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li class="blue bdrRed">Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
.after()
• .after(): Thêm thành phần vào ngay sau thành phần đã có.

Cấu trúc
• Đã được thêm vào từ phiên bản 1.0
.after( nội dung )
$('div').after('<p>nội dung thêm vào</p>');
$('div').after($('h3'));
• Đã được thêm vào từ phiên bản 1.4
.after(function(index){ })
$('div').after(function() {
return <'p'> + this.className + <'/p'>;
});
.after(nội dung)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><script>
$(function(){
$('div').after('<p>nội dung thêm vào</p>');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng after thì ngay sau thành phần div
được thêm thành phần <p>nội dung thêm vào</p>.

So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQuery
<div>Thành phần div</div>
<div>Thành phần div</div>
<p>nội dung thêm vào</p>
Ví dụ thêm
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src=" /><script>
$(function(){
$('div').after($('h3'));

Jquery command

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về