jQuery(스타일 및 DOM)
$(document).ready(function() {
$("div").html(" jQuery");
});
：$(document).ready （document） ， ，
， ， 。
jQuery DOM ：
：jQuery DOM
， jQuery DOM ：
id imooc p ， ：
， JavaScript ：
var p = document.getElementById('imooc');
p.innerHTML = ' jQuery';
p.style.color = 'red';
DOM document.getElementById(“imooc”) DOM DOM ，
innerHTML style 。
jQuery ：
var $p = $('#imooc');
$p.html(' jQuery').css('color','red');
$('#imooc') $p jQuery ，$p 。 DOM ，
， html css， JavaScript 。
JavaScript DOM jQuyer DOM ， ：
jQuery ， 。 DOM ， DOM。
jQuery DOM ， ， DOM ，
， jQuery API ， 。
jQuery DOM ：
jQuery JavaScript ， JavaScript ， DOM
。 jQuery JavaScript 。 ，
jQuery DOM ， DOM ，jQuery ， DOM DOM 。
jQuery DOM ：
HTML
JavaScript
var $div = $('div') //jQuery
var div = $div[0] // DOM
div.style.color = 'red' // dom
jQuery div （3 ）， jQuery ， div ，
div ， style div 。 ， 0 ，
0
jQuery get() ：
jQuery .get() jQuery DOM ，get ：
var $div = $('div') //jQuery
var div = $div.get(0) // get ， DOM
div.style.color = 'red' // dom
： get ， get 。
DOM jQuery
jQuery DOM， dom jQuery 。$( ) ，
。
$(DOM) DOM ，jQuery DOM jQuery
$(dom) dom jQuery ， jQuery
HTML
JavaScript
var div = document.getElementsByTagName('div'); //dom
var $div = $(div); //jQuery
var $first = $div.first(); // div
$first.css('color', 'red'); //
getElementsByTagName div ， dom ，
(3 div )。 $(div) jQuery ， jQuery first css
。
id ： ID， id ： $( "#id" )
， ， class ：$( ".class" )
： （html） ：$( "element" )
： ， 。
jQuery （* ）：$( "*" )
：id、class、tag ， ，
， :
1. IE ， IE getElementsByTagName ，
2. getElementById IE8
3. IE7 ， ， A name B ID A B ，
getElementById A
4. IE8 ， getElementsByClassName
jQuery ！
jQuery ：
1.
2.
3.
4. ，
$("parent>child") ， ”parent“ ”child“
$("ancestor descendant")
$("prev+next") ： ”prev“ ”next“
$("prev~sublings") ： ”prev“ 。 ， ”siblings“
jQuery ： CSS ， “：”
$(":first")：
$(":last")：
$(":not(selector)")： ，
$(":eq(index)")： index
$(":gt(index)")： index
$(":even")： ， 0
$(":odd")： ， 0
$(":lt(index)")： index
$(":header")： ， h1,h2,h3
$(":lang(language)")：
$(":root")：
$(":animated")：
：
1. :eq(), :lt(), :gt(), :even, :odd ，
， jQuery 0
2. gt ， ，gt(1) 2
jQuery ：
DOM ， ，jQuery ，
$(":contains(text)")：
$(":parent")：
$(":empty")： （ ）
$(":has(selector)")：
：
1. :contains :has ， contains “ ” ，has “ ”
2. :contains ， 。
3. :parent :empty ， ，
jQuery ：
，jQuery :visible :hidden
$(":visible")：
$(":hidden")：
： 2 jQuery ， ，
1. :hidden ， display="none" ， 、visibility
：
1. CSS display none。
2. type="hidden" 。
3. 0。
4. ，
5. CSS visibility hidden
6. CSS opacity 0
, 。
， 。
visibility: hidden opacity: 0 ， 。
， ，jQuery ，
jQuery ：
。 ， ，
$("[attribute|="value"]")： （ "-"）
$("[attribute*="value"]")： （ ）
$("[attribute~="value"]")：
$("[attribute!="value"]")： ，
$("[attribute^="value"]")：
$("[attribute$="value"]")： ，
$("[attribute]")： ，
：[attr="value"] ， form ， input[type="text"],
input[type="checkbox"]
[attr*="value"]
jQuery ：
$(":first-child")：
$(":last-child")：
$(":only-child")： ，
$(":nth-child")： n
$(":nth-last-child")： n ，
jQuery ：
$(":input")： input、textarea、select button
$(":text")：
$(":password")：
$(":radio")：
$(":checkbox")：
$(":submit")：
$(":iamge")：
$(":reset")：
$(":button")：
$(":file")：
：
input ， input type 。
。 $(':password') == $('[type=password]')
jQuery ：
$(":enabled")：
$(":disabled")：
$(":checked")：
$(":selected")： jQuery .addClass()：
.addClass( className ) ：
.addClass( className ) :
.addClass( function(index, currentClass) ) :
：
.addClass() 。
p newClass ：
$("p").addClass("newClass")
jQuery .removeClass()：
.removeClass( ) ：
.removeClass( [className ] )：
.removeClass( function(index, class) ) ： ，
：
, 。 ，
jQuery .toggleClass()：
jQuery toggleClass ， toggleClass Class，
addClass， removeClass
.toggleClass( ) ： ,
。 ： （ ） （ ）
.toggleClass( className )： （ ）
.toggleClass( className, switch )： ，
.toggleClass( [switch ] )：
.toggleClass( function(index, class, switch) [, switch ] )：
。
：
toggleClass ， Class ， ，
toggleClass Class ，
jQuery .css()：
.css() ： CSS
：
.css( propertyName ) ：
.css( propertyNames )： ，
：
.css(propertyName, value )： CSS
.css( propertyName, function )： ，
.css( properties )： ，
：
， jQuery ， RBG， px
.css() ，
（value） ， jQuery ， px，
.css("width",50}) .css("width","50px"})
：.addClass() class ， ，
.css() ， style
jQuery ：
jQuery ：
jQuery.data( element, key, value ) // ,
jQuery.data( element, key ) // ,
.data( key, value ) // ,
.data( key ) // ,
2 ， data ，
jQuery.removeData( element [, name ] )
.removeData( [name ] )
jQuery : var $body = $('body'); $body.on('click','button',function() { // jQuery div var div = $("") $body.append(div) }) DOM append() appendTo()： .append() .appendTo() ， —— append() ， appendTo() ， DOM after() before()： before after 2 HTML ，DOM ， ， jQuery ， 2 after(div1,div2,....) ： after html ， ， ， html before html ， ， ， html DOM prepend() prependTo()： .prepend() ( .append()). .prepend() .prependTo() ， ， .prepend() ， ， ， .prependTo() ， ， ， 。 ： append() prepend() appendTo() prependTo() DOM insertAfter() insertBefore()： .before() .insertBefore() 。 —— 。 before() ， ， .insertBefore() ， ， .after() .insertAfter() 。 —— （ ） 。 after() ， 。 .insertAfter(), ， ， before、after insertBefore。insertAfter ， ： insertAfter JQuery ， ， ， JQuery ； insertBefore JQuery ， ， ， JQuery ； DOM empty() ：DIVempty div ， html ， DOM // empty $('.hello').empty() // ：
DOM remove() ：remove div ，remove ， // remove $('.hello').remove() // ：
// , DOM empty remove ： ，jQuery empty() remove([expr]) ， ， empty ，empty() ， ， empty remove ， DOM detach() remove() ： remove： ， ， ， ， detach： remove remove() ， 、 ：$("p").detach() ， 。 。 append ， 。 。
- DOM节点的复制与替换
DOM clone()： .clone() ， 、 、 。 clone ， ， ， clone(ture) ture ， ， ： HTMLJavaScript $("div").on('click', function() {// }) //clone $("div").clone() // ， //clone $("div").clone(true) // 、 DOM replaceWith() replaceAll()： 、 ， replaceWith .replaceWith( newContent )： ： $() A， replaceWith ， B（HTML ，DOM ， jQuery ） A ： HTML$("p:eq(1)").replaceWith('두 번째 단락의 내용 바꾸기') jQuery p ， replaceWith ， .replaceAll( target ) ： .replaceAll() .replaceWith() ， ， HTML ， replaceAll $('두 번째 단락의 내용 바꾸기').replaceAll('p:eq(1)') ： .replaceAll() .replaceWith() ， .replaceWith() .replaceAll() .replaceWith() ， jQuery ， jQuery ， .replaceWith() jQuery ， replaceWith/replaceAll DOM wrap() ： ， ， ，JQuery wrap .wrap( wrappingElement )： HTML ：
p
p div $('p').wrap('') ，p div.wrap( function ) ： ， HTML jQuery ， ， ： $('p').wrap(function() { return 'p
'; // ， }) ： .wrap() ， $() DOM 。 ， 。 。 ， 。 DOM unwrap() ： wrap 。 ， ? jQuery unwrap() ， wrap 。 ， （ ， ） 。 ：div， remove empty $('div').remove(); p， ， ， ， jQuery unwrap $('p').unwrap(); p ， unwrap ， div ：p
p
， ， DOM wrapAll() ： wrap dom ， ， ， ，JQuery wrapAll .wrapAll( wrappingElement )： HTML ：p
p
p div $('p').wrapAll('') ，2 P div.wrapAll( function ) ： ， HTML jQuery ， $('p').wrapAll(function() { return 'p
p
p
： .wrapAll() ， $() DOM 。 ， 。 ， HTML 。 DOM wrapInner() ： ， ， ， JQuery wrapInner .wrapInner( wrappingElement )： ， HTML ， ， ：p
ppp $('div').wrapInner('') ， di pp
.wrapInner( function ) ： callback ， ， ， DOM ，jQuery ， HTML ， ， $('div').wrapInner(function() { return ''; }) ，p
p
： .wrapInner() ， HTML， HTML 。p
- jQuery
jQuery children() : jQuery ， ， children() 。 ：.children(selector) （ ， - ） ：$("div").children()， ul， div ul ，li div ， 。 children() DOM ， jQuery ：jQuery ， children .children() $("div").children(".selected") jQuery ， ， ， jQuery find() ： jQuery ， DOM ， find() ， 。 children find ，children ， find （ ） ：
- 1
$("div").find("li")， ，li div ， find 。 .find() ： find 。 ， ， 。 ， .find() 。 ， '*'。 find ， 。 context .find() ； ，$('.item-ii').find('li') $('li', '.item-ii')( item-ii li )。 ： .find() .children() 1.children 2.find jQuery parent() ： jQuery ， （ - ）， parent() ， ：
- 1
ul div, $(ul).parent()， parent() parent() DOM ， ， jQuery ：jQuery ， parent parent() jQuery ， ， ， jQuery parents() ： jQuery ， ， parents() find children ，parent ，parents ：
- 1
li div， $("li").parents() parents() parents() DOM ， ， jQuery ; ：jQuery ， parent parents() jQuery ， ， ， ： 1 .parents() .parent() ， DOM 2 $( "html" ).parent() document ， $( "html" ).parents() 。 jQuery closest() ： ， find、children 。 ， ， jQuery closest() ， parents ， closest() ， DOM ， ： div ， li ， $("div").closet("li') ：jQuery ， closest closest() jQuery jQuery ， ， ， jQuery ： .parents() .closest() ， ， ， 1. ：.closest .parents 2. ：.closest ，.parents ，closest ， ，parents ， 3. ：.closest jquery ，parents jquery jQuery next() ： jQuery ， ， next() ： class="item-1" ， class="item-2"
- 1
next() ， jQuery 。 ：jQuery ， next next() jQuery ， ， ， jQuery prev() ： jQuery ， ， prev() ： class="item-2" li ， prev
- 1
- 2
- 3
prev() ：jQuery ， prev prev() jQuery ， ， ， jQuery siblings()： jQuery ， ， siblings() ： class="item-2" li ， siblings
- 1
- 2
- 3
siblings() ：jQuery ， siblings siblings() jQuery ， ， ， ：sibings ， ：.children() .find() .parent() .parents() ( , ) .closest() ( , , ) .next() .prev() .siblings() jQuery add() ： jQuery ， $() 。 $() ， ？ jQuery add ， jQuery ， .add() $()， jQuery ，DOM ， HTML 。 ： ： li ， p li
- 1
- 2
- 3
- list item 1
- list item 3
p
： $('li').add('p') ： dom $('li').add(document.getElementsByTagName('p')[0]) ， P ， ， $('li').add('p
').appendTo( ) jQuery each()： jQuery ， $() 。 $("li").css('') li style ， jQuery ， css ， 。 li ， each .each() for ， jQuery DOM 。 ， ( 0 3 ： each for each ， 2 ， each this domli， 2 $("li").each(function(index, element) { index 0,1 element li li,li this li }) ， ， false
- Aaron
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
