创建HTML
< script>
$ ( function ( ) {
var div = $ ( '<div>Hello</div>' ) ;
console. log ( div) ;
div. appendTo ( 'body' ) ;
console. log ( $ ( 'div' ) ) ;
}
< / script>
< script>
var link = $ ( '<a>' , {
text: '百度' ,
href: 'https://www.baidu.com' ,
target: '_blank' ,
title: '去往百度首页'
} ) ;
link. appendTo ( 'body' ) ;
var link2 = $ ( '<a>百度</a>' ) . attr ( {
href: 'https://www.baidu.com' ,
target: '_blank' ,
title: '去往百度首页'
} ) ;
link2. appendTo ( 'body' ) ;
< / script>
DOM元素选择
< script>
$ ( function ( ) {
var elements = $ ( 'li' ) ;
console. log ( elements. length) ;
console. log ( elements[ 0 ] ) ;
console. log ( elements. get ( ) ) ;
console. log ( elements. get ( 0 ) ) ;
console. log ( elements. get ( - 1 ) ) ;
console. log ( elements. eq ( 0 ) ) ;
console. log ( elements. eq ( - 1 ) ) ;
console. log ( elements. first ( ) ) ;
console. log ( elements. last ( ) ) ;
console. log ( elements. toArray ( ) ) ;
} ) ;
< / script>
通过关系查找jQuery对象的方法
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> methods</ title>
</ head>
< body>
< div id = " box1" >
< div id = " box2" >
< div id = " box3" >
< p id = " info" > 通过关系查找jQuery对象的方法</ p>
< ul>
< li class = " item1" > item1</ li>
< li class = " item2" > item2</ li>
< li class = " item3" > item3</ li>
< li class = " item4" > item4</ li>
< li class = " item5" > item5</ li>
< li class = " item6" > item6</ li>
< li class = " item7" > item7</ li>
< li class = " item8" > item8</ li>
< li class = " item9" > item9</ li>
</ ul>
</ div>
</ div>
</ div>
< script src = " jquery-1.12.4.js" > </ script>
< script>
$ ( function ( ) {
console. log ( $ ( '#box3' ) . children ( ) ) ;
console. log ( $ ( '#box3' ) . children ( 'p' ) ) ;
console. log ( $ ( '#box3' ) . contents ( ) ) ;
console. log ( $ ( '#box3' ) . find ( '.item1' ) ) ;
console. log ( $ ( 'ul, #box3' ) . parent ( ) ) ;
console. log ( $ ( 'ul, #box3' ) . parent ( '#box2' ) ) ;
console. log ( $ ( 'ul, #box3' ) . parents ( ) ) ;
console. log ( $ ( 'ul, #box3' ) . parents ( '#box2' ) ) ;
console. log ( $ ( '.item1' ) . parentsUntil ( '#box1' ) ) ;
console. log ( $ ( '.item1' ) . closest ( 'div' ) ) ;
console. log ( $ ( '.item4' ) . next ( 'li' ) ) ;
console. log ( $ ( '.item4' ) . nextAll ( 'li' ) ) ;
console. log ( $ ( '.item4' ) . nextUntil ( '.item7' ) ) ;
console. log ( $ ( '.item4' ) . prev ( 'li' ) ) ;
console. log ( $ ( '.item4' ) . prevAll ( 'li' ) ) ;
console. log ( $ ( '.item4' ) . prevUntil ( '.item1' ) ) ;
console. log ( $ ( '.item4' ) . siblings ( ) ) ;
console. log ( $ ( '.item4' ) . siblings ( '.item2' ) ) ;
} ) ;
</ script>
</ body>
</ html>
筛选和遍历jQuery对象
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> demo</ title>
</ head>
< body>
< div id = " box1" >
< div id = " box2" >
< div id = " box3" >
< p id = " info" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</ p>
< ul>
< li class = " item1" > item1</ li>
< li class = " item2" > item2</ li>
< li class = " item3" > item3</ li>
< li class = " item4" > item4</ li>
< li class = " item5" > item5</ li>
< li class = " item6" > item6</ li>
< li class = " item7" > item7</ li>
< li class = " item8" > item8
< ul> </ ul>
</ li>
< li class = " item9" > item9</ li>
</ ul>
</ div>
</ div>
</ div>
< script src = " jquery-1.12.4.js" > </ script>
< script>
$ ( function ( ) {
console. log ( $ ( '.item1' ) . add ( '.item2' ) ) ;
console. log ( $ ( 'li' ) . not ( '.item2, .item3' ) ) ;
console. log ( $ ( 'li' ) . filter ( '.item2, .item3' ) ) ;
console. log ( $ ( 'li' ) . not ( function ( index) {
return $ ( this ) . hasClass ( 'item1' ) ;
} ) ) ;
console. log ( $ ( 'li' ) . filter ( function ( index) {
return $ ( this ) . hasClass ( 'item1' ) ;
} ) ) ;
console. log ( $ ( 'li' ) . has ( 'ul' ) ) ;
console. log ( $ ( 'li' ) . slice ( 0 ) ) ;
console. log ( $ ( 'li' ) . slice ( 3 , 5 ) ) ;
console. log ( $ ( 'li' ) . slice ( - 2 ) ) ;
console. log ( $ ( 'div' ) . map ( function ( index, domElement) {
return this . id;
} ) ) ;
console. log ( $ ( 'li' ) . each ( function ( index, domElement) {
this . title = this . innerText;
} ) ) ;
console. log ( $ ( '#box3' ) . children ( ) . is ( 'p' ) ) ;
console. log ( $ ( '#box3' ) . children ( ) . end ( ) ) ;
console. log ( $ ( '#box3' ) . end ( ) ) ;
console. log (
$ ( '.item3' ) . nextUntil ( '.item6' ) . addBack ( ) . css ( 'color' , 'red' )
) ;
} ) ;
</ script>
</ body>
</ html>
操作元素的特性、属性和数据
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> demo</ title>
</ head>
< body>
< img id = " logo" src = " ../logo1.jpg" alt = " jQuery logo" title = " jQuery logo" />
< img id = " logo2" src = " ../logo1.jpg" alt = " jQuery logo" class = " img-jquery2" title = " jQuery logo" />
< input type = " checkbox" id = " check" tabindex = " 1" style =" width : 50px; height : 50px; " title = " Check this!" description = " just a checkbox" />
< script src = " ../../../vendor/jquery-1.12.4.js" > </ script>
< script>
$ ( function ( ) {
var img = $ ( 'img' ) ;
var checkbox = $ ( '#check' ) ;
console. log ( img. attr ( 'id' ) ) ;
console. log ( checkbox. attr ( 'TABINDEX' ) ) ;
console. log ( img. attr ( {
title: 'new title2' ,
alt: 'new alt2'
} ) ) ;
console. log ( img. attr ( 'title' , function ( index, previousValue) {
return previousValue + '-' + index;
} ) ) ;
console. log ( img. removeAttr ( 'title alt' ) ) ;
console. log ( checkbox. prop ( 'checked' ) ) ;
console. log ( checkbox. prop ( 'checked' , true ) ) ;
console. log ( checkbox. removeProp ( 'checked' ) ) ;
img. data ( 'description' , 'jquery logo' ) ;
console. log ( img. data ( 'description' ) ) ;
$ ( '#logo' ) . removeData ( ) ;
console. log ( $ ( '#logo' ) . data ( ) ) ;
} ) ;
</ script>
</ body>
</ html>