< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 10 - jQuery基本选择器< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js" > < / script>
< script> $ ( function ( ) { $ ( "button:eq(0)" ) . click ( function ( ) { $ ( "#demoID" ) . css ( "background" , "red" ) ; } ) $ ( "button:eq(1)" ) . click ( function ( ) { $ ( ".class1" ) . css ( "background" , "yellow" ) ; } ) $ ( "button:eq(2)" ) . click ( function ( ) { $ ( ".class2" ) . css ( "background" , "green" ) ; } ) $ ( "button:eq(3)" ) . click ( function ( ) { $ ( "div" ) . css ( "background" , "red" ) ; } ) $ ( "button:eq(4)" ) . click ( function ( ) { $ ( "#demoID,p" ) . css ( "background" , "blue" ) ; } ) $ ( "button:eq(5)" ) . click ( function ( ) { $ ( "*" ) . css ( "background" , "green" ) ; } ) } )
< / script> < div id= "demoID" > ID < / div>
< div class = "class1" > class1< / div>
< div class = "class1" > class1< / div>
< div class = "class1 class2" > class2 class1< / div>
< div class = "class2" > class2< / div>
< span> 我是span< / span>
< p> 我是p< / p> < button> 获取id为demoID的标签< / button>
< button> 获取class 为class1的标签< / button>
< button> 获取class 为class2的标签< / button>
< button> 获取所有的div标签< / button>
< button> 获取id为demoID以及所有的p标签< / button>
< button> 获取所有的标签设置样式< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 11 - jQuery层级选择器< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . eq ( 0 ) . click ( function ( ) { $ ( ".box div" ) . css ( "background" , "red" ) } ) $ ( "button" ) . eq ( 1 ) . click ( function ( ) { $ ( ".box >div" ) . css ( "background" , "green" ) } ) $ ( "button" ) . eq ( 2 ) . click ( function ( ) { $ ( "#demoID +div" ) . css ( "background" , "green" ) } ) $ ( "button" ) . eq ( 3 ) . click ( function ( ) { $ ( "#demoID ~div" ) . css ( "background" , "green" ) } ) } )
< / script>
< button> 获取指定标签的所有后代< / button>
< button> 获取指定标签的所有直接后代< / button>
< button> 获取后面的第一个兄弟节点< / button>
< button> 获取后面所有的兄弟节点< / button>
< div class = "box" > < div> div1< / div> < div id= "demoID" > div2< div> a< / div> < div> b< / div> < div> c< / div> < / div> < div> div3< / div> < div> div4< / div>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 12 - jQuery属性选择器< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< ! -- 要求-- >
< ! -- 01 匹配单个属性的情况-- >
< ! -- 01 匹配多个属性的情况-- >
< script> $ ( function ( ) { $ ( "button" ) . click ( function ( ) { $ ( "a[href*='520it']" ) . css ( "background" , "yellow" ) ; } ) } )
< / script> < a href= "www.baidu.com" > www. baidu. com< / a>
< a href= "www.jd.com" > www. jd. com< / a>
< a href= "www.taobao.com" > www. taobao. com< / a>
< a href= "www.520it.com" > www. 520 it. com< / a>
< a href= "bbs.520it.com" > bbs. 520 it. com< / a>
< a href= "www.520it.cn" > www. 520 it. cn< / a> < br>
< a href= "www.520it.com" title= "这是标题" > www. 520 it. coms且有标题< / a> < br>
< a> 我啥也没有< / a> < button> 选择< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 13 - jQuery筛选选择器< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js" > < / script>
< ! -- 总结-- >
< ! -- 第一个和最后一个 : first last索引为奇数和偶数 : odd even索引大 ( 小) 于指定值: gt lt索引等于指定值 : eq ( ) 排除 : not ( )
-- >
< script> $ ( function ( ) { $ ( "button" ) . click ( function ( ) { $ ( "li:gt(5)" ) . css ( "background" , "green" ) ; } ) } )
< / script>
< ul> < li> 1 < / li> < li> 2 < / li> < li> 3 < / li> < li> 4 < / li> < li> 5 < / li> < li> 6 < / li> < li> 7 < / li> < li> 8 < / li> < li> 9 < / li> < li> 10 < / li>
< / ul>
< button> 选择< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 14 - jQuery父子选择器< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . click ( function ( ) { $ ( "#demoID" ) . siblings ( ) . css ( "background" , "red" ) } ) } )
< / script>
< div> < div class = "box" > < div> div1< / div> < div id= "demoID" > div2< div> divA< / div> < div> divB< / div> < / div> < div> div3< / div> < div> div4< / div> < / div>
< / div> < button> 按钮< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" > < meta http- equiv= "X-UA-Compatible" content= "IE=edge" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> jQuery属性操作< / title>
< / head>
< style> . class1 { font- size: 19 px; } . class2 { border- radius: 50 % ; } #box1 { width: 200 px; height: 200 px; background: red; position: relative; } #box2 { width: 50 px; height: 50 px; background: yellowgreen; position: absolute; left: 40 px; top: 15 px; }
< / style> < body> < div id= "one" > one 对象< / div> < div id= "two" > two css< / div> < button> one< / button> < button> two< / button> < div id= "box1" > < div id= "box2" > < / div> < / div> < script src= "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js" > < / script> < script> $ ( function ( ) { let one = document. getElementById ( 'one' ) ; console. log ( $ ( one) ) console. log ( $ ( one) . get ( 0 ) ) $ ( "#two" ) . css ( { "width" : "400px" , "height" : "50px" , "border" : "1px solid #ccc" , "background" : "red" } ) $ ( "div" ) . addClass ( "class1 class2" ) $ ( "button" ) . eq ( 0 ) . click ( function ( ) { var str = "<h1>天王盖地虎</h1>" ; $ ( "div" ) . html ( str) ; console. log ( $ ( "div" ) . html ( ) ) ; } ) $ ( "button" ) . eq ( 1 ) . click ( function ( ) { var str = "<h1>宝塔镇河</h1>" ; $ ( "div" ) . text ( str) ; console. log ( $ ( "div" ) . text ( ) ) ; } ) console. log ( $ ( "#box2" ) . position ( ) ) ; console. log ( $ ( "#box2" ) . position ( ) . top) ; console. log ( $ ( "#box2" ) . position ( ) . left) ; console. log ( $ ( "#box2" ) . offset ( ) ) ; console. log ( $ ( "#box2" ) . width ( ) ) ; console. log ( $ ( "#box2" ) . height ( 150 ) ) ; } ) < / script>
< / body> < / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 17 - jQuery处理鼠标移入和移出操作< / title> < style> * { margin: 0 ; padding: 0 ; } . box1{ width: 100 px; height: 200 px; background: red; } . box2{ width: 50 px; height: 50 px; background: yellowgreen; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script> < ! -- 要求-- >
< ! -- 1. 掌握mouseenter| mouseleave和mouseover| mouseout的使用和区别-- >
< ! -- 2. 清楚hover方法的使用和注意点-- > < script> $ ( function ( ) { $ ( ".box1" ) . mouseenter ( function ( ) { console. log ( "鼠标移入" ) ; } ) $ ( ".box1" ) . mouseleave ( function ( ) { console. log ( "鼠标离开" ) ; } ) $ ( ".box2" ) . hover ( function ( ) { console. log ( "in" ) ; } , function ( ) { console. log ( "out" ) ; } ) ; } )
< / script>
< div class = "box1" > < div class = "box2" > < / div>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 18 - jQuery获取元素的角标< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "li" ) . click ( function ( ) { alert ( $ ( this ) . index ( ) ) } ) } )
< / script>
< ul> < li> 1 < / li> < li> 2 < / li> < li> 3 < / li> < li> sdfsfdsf< / li> < li> 5 < / li> < li> 6 < / li> < li> 7 < / li> < li> 8 < / li> < li> 9 < / li> < li> 10 < / li> < li> 11 < / li> < li> 12 < / li> < li> 13 < / li> < li> 14 < / li> < li> 15 < / li> < li> 16 < / li> < li> 17 < / li> < li> 18 < / li> < li> 19 < / li> < li> 20 < / li> < li> 21 < / li> < li> 22 < / li> < li> 23 < / li> < li> 24 < / li> < li> 25 < / li> < li> 26 < / li> < li> 27 < / li> < li> 28 < / li> < li> 29 < / li> < li> 30 < / li> < li> 31 < / li> < li> 32 < / li> < li> 33 < / li> < li> 34 < / li> < li> 35 < / li> < li> 36 < / li> < li> 37 < / li> < li> 38 < / li> < li> 39 < / li> < li> 40 < / li> < li> 41 < / li> < li> 42 < / li> < li> 43 < / li> < li> 44 < / li> < li> 45 < / li> < li> 46 < / li> < li> 47 < / li> < li> 48 < / li> < li> 49 < / li> < li> 50 < / li>
< / ul>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 19 - jQuery实现tab标签小案例 ( 页面搭建) < / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } . box{ width: 1000 px; margin: 50 px auto; height: 500 px; } . nav{ width: 500 px; height: 44 px; border: 1 px solid #ccc; border- bottom: none; position: relative; top: 1 px; background: #fff; } . content{ width: 1000 px; height: 475 px; border: 1 px solid #ccc; } li{ float: left; width: 110 px; line- height: 44 px; text- align: center; } . content img{ width: 1000 px; height: 475 px; } . content div{ display: none; } . content . current{ display: block; } . action{ color: red; font- size: 20 px; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "li" ) . mouseenter ( function ( ) { $ ( this ) . addClass ( "action" ) . siblings ( ) . removeClass ( "action" ) ; var index = $ ( this ) . index ( ) ; $ ( ".content div" ) . eq ( index) . addClass ( "current" ) . siblings ( ) . removeClass ( "current" ) ; } ) } ) < / script>
< div class = "box" > < div class = "nav" > < ul> < li class = "action" > HTML 学院< / li> < li> iOS学院< / li> < li> java学院< / li> < li> 网页UI 学院< / li> < / ul> < / div> < div class = "content" > < div class = "current" > < img src= "src/01.png" > < / div> < div> < img src= "src/02.png" > < / div> < div> < img src= "src/03.png" > < / div> < div> < img src= "src/04.png" > < / div> < / div>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 02 - 过滤器方法filter和has< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . click ( function ( ) { $ ( "#demoID" ) . children ( ) . filter ( function ( ) { return $ ( "span" , this ) . length === 2 ; } ) . css ( "background" , "red" ) } ) console. log ( $ ( ".box" ) . has ( "p" ) ) ; } )
< / script>
< ! -- 1. 讲解filter方法的使用-- >
< ! -- < div class = "box" > -- > < ! -- div-- > < ! -- & lt; ! & ndash; < div class = "class1" > div1< / div> & ndash; & gt; -- > < ! -- & lt; ! & ndash; < div> div2< / div> & ndash; & gt; -- > < ! -- < div class = "class1" > 测试< / div> -- >
< ! -- < / div> -- >
< ! -- < div class = "class1" > div3< / div> -- >
< ! -- < div class = "class1" > div3< / div> -- >
< ! -- < p class = "class1" > 我是p< / p> -- >
< ! -- < button> 按钮< / button> -- > < ! -- & lt; ! & ndash; & ndash; & gt; -- >
< ! -- < div id= "demoID" > -- > < ! -- < div> div1-- > < ! -- < span> 我是span1< / span> -- > < ! -- < / div> -- > < ! -- < div> div2-- > < ! -- < span> 我是span2- A < / span> -- > < ! -- < span> 我是span2- B < / span> -- > < ! -- < / div> -- > < ! -- < div> div3-- > < ! -- < span> 我是span3< / span> -- > < ! -- < / div> -- >
< ! -- < / div> -- > < ! -- 2. 讲解has方法的使用-- >
< div class = "box" > < span> 我是span< / span>
< / div>
< div class = "box" > < p> 我是p< / p>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 03 - 查找相关方法< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< div class = "box" > < span> 我是span< / span> < div id= "demo" > div1< / div> < div> div2< / div> < div> div3< / div> < div class = "class1" > div4< / div> < div> div5< / div> < span> 我是span1< / span> < span> 我是span2< / span> < span class = "Test" > 我是span3< / span>
< / div>
< span> span< / span> < script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { console. log ( $ ( ".box" ) . find ( "span" ) ) ; } )
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 04 - add方法和end方法< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { console. log ( $ ( ".box" ) . find ( "p" ) . add ( ".demoClass" ) . css ( "background" , "yellow" ) . end ( ) . end ( ) . css ( "border" , "1px solid red" ) ) ; ; } )
< / script>
< div class = "box" > div1< p> 我是p标签< / p>
< / div>
< div> div1< p> 我是p标签< / p>
< / div>
< p class = "demoClass" > 我是p标签< / p>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 05 - 侧边栏广告效果实现< / title> < style> * { margin: 0 ; padding: 0 ; } span{ width: 150 px; height: 300 px; display: inline- block; background: url ( "images/ad.png" ) ; position: fixed; top: 50 % ; margin- top: - 150 px; } . left{ left: 0 ; } . right{ right: 0 ; } . close{ width: 20 px; height: 20 px; float: right; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( ".close" ) . click ( function ( ) { $ ( this ) . parent ( ) . hide ( 1000 ) ; } ) } )
< / script>
< span class = "left" > < img src= "images/close.png" class = "close" > < / span>
< span class = "right" > < img src= "images/close.png" class = "close" > < / span>
< div> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 06 - jQuery显示和隐藏的动画效果< / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 200 px; height: 200 px; background: red; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "button:eq(0)" ) . click ( function ( ) { $ ( ".box" ) . show ( 1000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button:eq(1)" ) . click ( function ( ) { $ ( ".box" ) . hide ( 2000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button:eq(2)" ) . click ( function ( ) { $ ( ".box" ) . toggle ( "slow" , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) } )
< / script>
< div class = "box" > div< / div>
< button> 显示< / button>
< button> 隐藏< / button>
< button> 切换< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 07 - jQuery展开和收起动画< / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 100 px; height: 300 px; background: yellowgreen; } . demo{ margin- top: 10 px; background: yellowgreen; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . eq ( 0 ) . click ( function ( ) { $ ( ".box" ) . slideDown ( 2000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button" ) . eq ( 1 ) . click ( function ( ) { $ ( ".box" ) . slideUp ( 2000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button" ) . eq ( 2 ) . click ( function ( ) { $ ( ".box" ) . slideToggle ( 2000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) } )
< / script>
< div class = "box" > div1< / div>
< div class = "box demo" > div2< / div>
< button> 展开< / button>
< button> 收起< / button>
< button> 切换< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 08 - jQuery实现下拉菜单 ( 界面搭建) < / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } body{ background: yellowgreen; } . box{ width: 1000 px; height: 44 px; margin: 50 px auto; border: 1 px solid #000 ; } . first > li{ width: 120 px; height: 44 px; float: left; line- height: 44 px; text- align: center; background: #fff; } . first > li: hover{ background: #F22E2C ; } . second{ display: none; background: #fff; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( ".first >li" ) . hover ( function ( ) { $ ( this ) . find ( ".second" ) . stop ( ) . slideToggle ( ) ; } ) } )
< / script>
< div class = "box" > < ul class = "first" > < li> 我是一级菜单1 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单2 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单3 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单4 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单5 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单6 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单7 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < li> 我是一级菜单8 < ul class = "second" > < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < li> 我是二级菜单< / li> < / ul> < / li> < / ul>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 10 - jQuery实现商品展示< / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } . box{ width: 400 px; height: 300 px; margin: 50 px auto; border: 1 px solid #000 ; } ul{ margin- top: 20 px; overflow: hidden; } li{ float: left; width: 100 px; height: 40 px; text- align: center; line- height: 40 px; } p{ width: 60 % ; height: 30 px; line- height: 30 px; border: 1 px solid #000 ; margin: 10 px auto; text- align: center; } < / style>
< / head>
< body>
< div class = "box" > < ul> < li> 佳能< / li> < li> 索尼< / li> < li> 三星< / li> < li> 尼康< / li> < li> 松下< / li> < li> 卡西欧< / li> < li> 富士< / li> < li> 可达< / li> < li> 宾得< / li> < li> 理光< / li> < li> 奥林巴斯< / li> < li> 明基< / li> < li> 其它品牌< / li> < / ul> < p> 显示所有品牌< / p>
< / div>
< script src= "js/jquery-3.1.1.js" > < / script>
< script> $ ( function ( ) { var temp = $ ( "li:gt(3):not(:last)" ) . css ( "display" , "none" ) ; $ ( "p" ) . click ( function ( ) { temp. slideToggle ( 1000 ) ; if ( $ ( this ) . text ( ) == "显示所有品牌" ) { $ ( this ) . text ( "隐藏" ) } else { $ ( this ) . text ( "显示所有品牌" ) } } ) } )
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 11 - 折叠菜单 ( 页面搭建) < / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } . box{ width: 320 px; border: 1 px solid #ccc; margin: 50 px auto; border- radius: 8 px; } . first > li{ line- height: 35 px; text- indent: 10 px; border- bottom: 1 px solid #ccc; } . first > li: last- child{ border- bottom: none; } span{ width: 16 px; height: 16 px; display: inline- block; background: url ( "images/arrow_right.png" ) ; float: right; position: relative; top: 10 px; right: 10 px; transition: 0.5 s; } . second{ display: none; background: #2 d2c41; color: #fff; } . second > li{ border- bottom: 1 px solid #ccc; } . second > li: last- child{ border- bottom: none; } . second > li: hover{ background: #992E2 C; } . current span{ transform: rotate ( 90 deg) ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( ".first >li" ) . click ( function ( ) { $ ( this ) . children ( ".second" ) . slideToggle ( ) ; $ ( this ) . siblings ( ) . find ( ".second" ) . slideUp ( ) ; $ ( this ) . toggleClass ( "current" ) ; $ ( this ) . siblings ( ) . removeClass ( "current" ) ; } ) } )
< / script>
< div class = "box" > < ul class = "first" > < li> < span> < / span> 一级菜单1 < ul class = "second" > < li> 二级菜单1 < / li> < li> 二级菜单2 < / li> < li> 二级菜单3 < / li> < li> 二级菜单4 < / li> < li> 二级菜单5 < / li> < / ul> < / li> < li> < span> < / span> 一级菜单2 < ul class = "second" > < li> 二级菜单1 < / li> < li> 二级菜单2 < / li> < li> 二级菜单3 < / li> < li> 二级菜单4 < / li> < li> 二级菜单5 < / li> < / ul> < / li> < li> < span> < / span> 一级菜单3 < ul class = "second" > < li> 二级菜单1 < / li> < li> 二级菜单2 < / li> < li> 二级菜单3 < / li> < li> 二级菜单4 < / li> < li> 二级菜单5 < / li> < / ul> < / li> < li> < span> < / span> 一级菜单4 < ul class = "second" > < li> 二级菜单1 < / li> < li> 二级菜单2 < / li> < li> 二级菜单3 < / li> < li> 二级菜单4 < / li> < li> 二级菜单5 < / li> < / ul> < / li> < li> < span> < / span> 一级菜单5 < ul class = "second" > < li> 二级菜单1 < / li> < li> 二级菜单2 < / li> < li> 二级菜单3 < / li> < li> 二级菜单4 < / li> < li> 二级菜单5 < / li> < / ul> < / li> < li> < span> < / span> 一级菜单6 < ul class = "second" > < li> 二级菜单1 < / li> < li> 二级菜单2 < / li> < li> 二级菜单3 < / li> < li> 二级菜单4 < / li> < li> 二级菜单5 < / li> < / ul> < / li> < / ul>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 13 - 淡入淡出动画< / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 100 px; height: 100 px; background: red; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . first ( ) . click ( function ( ) { $ ( ".box" ) . fadeIn ( 1000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button" ) . eq ( 1 ) . click ( function ( ) { $ ( ".box" ) . fadeOut ( 2000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button" ) . eq ( 2 ) . click ( function ( ) { $ ( ".box" ) . fadeToggle ( 1000 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) $ ( "button" ) . last ( ) . click ( function ( ) { $ ( ".box" ) . fadeTo ( 2000 , 0.5 , function ( ) { console. log ( "动画执行完毕" ) ; } ) } ) } )
< / script>
< div class = "box" > < / div>
< button> 淡入< / button>
< button> 淡出< / button>
< button> 切换< / button>
< button> 淡入淡出到... < / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 14 - 右下角弹出广告< / title> < style> * { margin: 0 ; padding: 0 ; } . ad{ width: 300 px; height: 195 px; background: url ( "images/ad-pic.png" ) ; position: fixed; bottom: 0 ; right: 0 ; display: none; } . close{ background: red; width: 10 px; height: 10 px; display: inline- block; float: right; position: relative; top: 5 px; right: 5 px; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( ".ad" ) . slideDown ( ) . fadeOut ( ) . fadeIn ( ) . delay ( 3000 ) . slideUp ( ) ; $ ( ".close" ) . click ( function ( ) { $ ( this ) . parent ( ) . stop ( ) . slideUp ( ) ; } ) } )
< / script>
< div class = "ad" > < span class = "close" > < / span> < / div>
< div> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p> < p> 01 - jQuery基础001 jQuery是js的第三方库002 最新版本: 3.2 .1 | 2.0 .0 ( 兼容性IE ) 003 冲突的处理: var jq = $. noConfilct ( ) 位置 ( $被定义之前) 004 对象的转换jQ: jQ- > DOM jQ. get ( index) | jQ[ index] JS : DOM - > jQ $ ( DOM ) 005 加载方式 ( 1 ) window. onload = function ( ) { } 001 调用的时间: 所有的资源加载完毕 ( css| js| img) 002 调用N 次: 执行1次 ( 2 ) $ ( document) . ready ( function ( ) { } ) 001 调用的时间: DOM 加载完毕002 调用N 次: 执行N 次003 简写: $ ( ) . ready ( function ( ) { } ) $ ( function ( ) { 02 - jQuery基本操作 ( 1 ) 操作css001 $ ( "selecter" ) . css ( "属性" , "值" ) ; 002 $ ( "selecter" ) . css ( "属性" , "值" ) . css ( "属性" , "值" ) ; 003 $ ( "selecter" ) . css ( { "属性" : "值" , "属性" : "值" } ) ; ( 2 ) 操作class 001 检查class hasClass ( ) 返回值: true | false 002 添加class addClass ( ) $ ( "selecter" ) . addClass ( "类" ) $ ( "selecter" ) . addClass ( "类1" ) . addClass ( "类2" ) $ ( "selecter" ) . addClass ( "类1 类2" ) 003 删除class removeClass ( ) 004 切换class toggleClass ( ) 如果该类存在, 那么就删除, 否则就添加 ( 3 ) 操作内容001 html ( ) == > innerHTML002 text ( ) == > innerText总结: 传递参数表示替换, 没有传参获取 ( 4 ) 操作位置001 width ( ) | height ( ) 002 offset ( 距离窗口的位置) | position ( 距离父标签的位置) 03 - 选择器01 基本选择器 ( 1 ) id选择器 $ ( "#demo" ) ( 2 ) 类选择器 $ ( ".box" ) ( 3 ) 标签选择器 $ ( "div" ) ( 4 ) 并集选择器 $ ( "div,.box" ) ( 5 ) 通配符选择器 $ ( "* ') 02 层级选择器 ( 1 ) 后代选择器 $ ( ".box div" ) ( 2 ) 直接后代 $ ( ".box > div" ) ( 3 ) 后面的第一个兄弟节点 $ ( ".box + div" ) ( 4 ) 后面所有的兄弟节点 $ ( ".box ~ div" ) 03 属性选择器 ( 1 ) 检查拥有指定属性的标签 $ ( "selector[属性]" ) ( 2 ) 匹配属性的值001 相等 $ ( "selector[属性='值']" ) 002 不等 $ ( "selector[属性!='值']" ) 003 以特定字符开头 $ ( "selector[属性^='值']" ) 004 以特定字符结尾 $ ( "selector[属性$='值']" ) 005 特定的子串 $ ( "selector[属性*='值']" ) ( 3 ) 多个属性 $ ( "selector[属性='值'][属性]" ) 04 筛选选择器 ( 1 ) 第一个| 最后一个: first | last ( 2 ) 相等 eq ( 3 ) 排除 not ( 4 ) 奇数和偶数 odd | even ( 5 ) 大于和小于 gt| lt05 父子选择器 ( 1 ) 获取父节点 parent ( ) ( 2 ) 获取祖先节点 parents ( ) ( 3 ) 获取祖先节点. . 直到 parentsUntil ( ) ( 4 ) 获取子标签 children ( ) ( 5 ) 获取兄弟节点 siblings04 - 鼠标事件 ( 1 ) mouseenter| mouseleva 移入和移出 ( 2 ) mouseover | mouseout ( 3 ) hover ( fn1, fn2) ( 4 ) 角标 index ( ) < / p>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 15 - 自定义动画< / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 100 px; height: 100 px; background: #000 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . click ( function ( ) { $ ( ".box" ) . animate ( { width: "toggle" , height: "+=50px" } , 2000 , function ( ) { alert ( "动画执行完毕" ) } ) } ) } )
< / script>
< div class = "box" > < / div>
< button> 执行动画< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 15 - 自定义动画< / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 100 px; height: 100 px; background: #F28F2D ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "button" ) . click ( function ( ) { $ ( ".box" ) . animate ( { width: "50" } ) . animate ( { width: "200px" } ) . animate ( { height: "200px" } ) } ) } ) < / script>
< div class = "box" > < / div>
< button> 执行动画< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 17 - 其他常用工具方法< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { var arrM = [ 10 , 1 , 2 , 3 , 4 , 5 , 6 , 7 ] ; var arr = $. grep ( arrM, function ( value, index ) { return value > 5 ; } ) console. log ( arr) ; var oDivs = document. getElementsByTagName ( "div" ) ; console. log ( Array. isArray ( oDivs) ) ; console. log ( Array. isArray ( arr) ) ; console. log ( oDivs) ; console. log ( $. makeArray ( oDivs) ) ; console. log ( $ ( "div" ) ) ; console. log ( $ ( "div" ) . toArray ( ) ) ; var str = "abc" ; var str1 = " abc" ; var str2 = "abc " ; var str3 = " abc " ; console. log ( str3) ; console. log ( $. trim ( str1) ) ; console. log ( $. trim ( str2) ) ; console. log ( $. trim ( str3) ) ; var arr1 = [ 1 , 2 , 3 , 4 , 5 ] ; var arr2 = [ "demo1" , "demo2" , "demo3" ] ; $. merge ( arr2, arr1) ; console. log ( arr1) ; console. log ( arr2) ; } )
< / script>
< div> div1< / div>
< div> div2< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 18 - each方法的使用< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { var obj = { name: "zs" , age: "99" } ; $. each ( obj, function ( key, value ) { console. log ( key, value) ; console. log ( this ) ; } ) var arrM = [ 1 , 2 , 3 , "demoA" , "XXX" ] ; $. each ( arrM, function ( index, ele ) { console. log ( index, ele) ; if ( ele === 3 ) { console. log ( "找到了该数组中的3,它对应的索引是" + index) ; return false ; } } )
$. each ( $ ( "div" ) , function ( key, value ) { console. log ( key, value) ; } ) var o = { name: "zs" , f : function ( ) { console. log ( this . name) ; console. log ( this ) ; } } o. f ( ) ; function f ( ) { console. log ( this ) ; } ; f ( ) ; $ ( "div" ) . each ( function ( key, value ) { console. log ( key, value) ; } ) } )
< / script>
< div> divT1< / div>
< div> divT2< / div>
< div> divT3< / div>
< div> divT4< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 02 - 工具方法map的使用< / title> < style> * { margin: 0 ; padding: 0 ; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { var arrM = [ 1 , 2 , 3 , 4 , 5 , 7 , 33 , 12 , 9 ] ; var arr1 = $. map ( arrM, function ( ele, index ) { return ele * 2 ; } ) console. log ( arr1) ; var arr2 = $. map ( arrM, function ( ele ) { if ( ele > 5 ) { return ele; } } ) console. log ( arr2) ; var arrM2 = [ " abc " , "1234" , "哈哈哈" , " 嘿嘿 " ] ; var arr3 = $. map ( arrM2, function ( ele ) { return $. trim ( ele) ; } ) console. log ( arr3) ; } )
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 03 - 导航效果小案例< / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } . box{ width: 400 px; height: 400 px; border: 1 px solid #ccc; margin: 50 px auto; } . box ul{ padding- top: 100 px; } li{ width: 100 px; float: left; text- align: center; line- height: 40 px; overflow: hidden; } span{ width: 20 px; height: 20 px; display: inline- block; position: relative; } < / style>
< / head>
< body>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "span" ) . each ( function ( index, ele ) { var bgurl = 'url("images/bg.png") 0-' + ( index * 24 ) + 'px no-repeat' ; $ ( this ) . css ( "background" , bgurl) ; } ) $ ( "li" ) . mouseenter ( function ( ) { $ ( this ) . children ( "span" ) . animate ( { "top" : "-60px" } , function ( ) { $ ( this ) . css ( { "top" : 60 , "opacity" : "0" } ) . animate ( { "top" : "0" , "opacity" : "1" } ) } ) } ) } )
< / script>
< div class = "box" > < ul> < li> < span> < / span> < p> 百度< / p> < / li> < li> < span> < / span> < p> 淘宝< / p> < / li> < li> < span> < / span> < p> 新浪< / p> < / li> < li> < span> < / span> < p> 网易< / p> < / li> < li> < span> < / span> < p> 搜狐< / p> < / li> < li> < span> < / span> < p> 腾讯< / p> < / li> < li> < span> < / span> < p> 优酷< / p> < / li> < li> < span> < / span> < p> 京东< / p> < / li> < / ul>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 04 - 渐变焦点图案例< / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } . box{ width: 600 px; height: 265 px; margin: 50 px auto; border: 1 px solid #ccc; position: relative; } ul{ z- index: 1 ; } ul > li{ position: absolute; display: none; } img{ width: 600 px; height: 265 px; } ol{ position: absolute; z- index: 2 ; bottom: 5 px; right: 5 px; } ol > li{ float: left; margin: 5 px; background: #ccc; width: 20 px; height: 20 px; text- align: center; } . action{ background: #ff0456; color: #fff; } . current{ display: block; } < / style>
< / head>
< body>
< div class = "box" > < ol> < li class = "action" > 1 < / li> < li> 2 < / li> < li> 3 < / li> < li> 4 < / li> < / ol> < ul> < li class = "current" > < img src= "images/01.png" > < / li> < li> < img src= "images/02.png" > < / li> < li> < img src= "images/03.png" > < / li> < li> < img src= "images/04.png" > < / li> < / ul>
< / div>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { $ ( "ul >li" ) . first ( ) . css ( "z-index" , 1 ) ; $ ( 'ol >li' ) . mouseenter ( function ( ) { $ ( this ) . addClass ( 'action' ) . siblings ( ) . removeClass ( 'action' ) ; var index = $ ( this ) . index ( ) ;
$ ( "ul >li" ) . eq ( index) . addClass ( "current" ) . siblings ( ) . removeClass ( "current" ) ; } ) } )
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 05 - 滚动焦点图案例< / title> < style> * { margin: 0 ; padding: 0 ; list- style: none; } body{ background: #2 d2c41; } . box{ width: 600 px; height: 200 px; border: 1 px solid red; margin: 20 px auto; overflow: hidden; } ul{ width: 9999 px; background: rebeccapurple; position: relative; } li{ float: left; } < / style>
< / head>
< body>
< div class = "box" > < ul> < li> < img src= "fengtu/01.jpg" > < / li> < li> < img src= "fengtu/02.jpg" > < / li> < li> < img src= "fengtu/03.jpg" > < / li> < li> < img src= "fengtu/04.jpg" > < / li> < li> < img src= "fengtu/01.jpg" > < / li> < li> < img src= "fengtu/02.jpg" > < / li> < / ul>
< / div>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { var leftX = 0 ; var timer; function autoPlay ( ) { timer = setInterval ( function ( ) { leftX += 3 ; if ( leftX >= 1200 ) leftX = 0 ; $ ( "ul" ) . css ( "left" , - leftX) ; } , 50 ) ; } autoPlay ( ) ; $ ( "li" ) . hover ( function ( ) { clearInterval ( timer) ; $ ( this ) . fadeTo ( 200 , 1 ) . siblings ( ) . fadeTo ( 200 , 0.2 ) ; } , function ( ) { $ ( "li" ) . fadeTo ( 200 , 1 ) ; autoPlay ( ) ; } ) } )
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 06 - 大屏焦点图 ( 界面搭建) < / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 100 % ; height: 365 px; overflow: hidden; } ul{ width: 500 % ; height: 365 px; background: rebeccapurple; position: relative; z- index: 1 ; } ul > li{ width: 20 % ; height: 365 px; float: left; } li img{ width: 100 % ; height: 365 px; } p{ width: 80 % ; height: 100 px; position: absolute; margin- top: 200 px; left: 50 % ; margin- left: - 40 % ; z- index: 2 ; } p span{ height: 80 px; line- height: 80 px; font- size: 50 px; color: #fff; } . right{ float: right; } < / style>
< / head>
< body>
< div class = "box" > < p> < span class = "left" > << / span> < span class = "right" >> < / span> < / p> < ul> < li> < img src= "images/01.png" > < / li> < li> < img src= "images/02.png" > < / li> < li> < img src= "images/03.png" > < / li> < li> < img src= "images/04.png" > < / li> < li> < img src= "images/01.png" > < / li> < / ul>
< / div>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { var index = 0 ;
$ ( ".right" ) . click ( function ( ) { index ++ ; if ( index === 5 ) { $ ( "ul" ) . css ( "left" , 0 ) ; index = 1 ; } $ ( "ul" ) . animate ( { "left" : - ( index * 100 ) + "%" } ) ; console. log ( $ ( "ul" ) . css ( "left" ) ) ; } ) $ ( ".left" ) . click ( function ( ) { index -- ; console. log ( index) ; if ( index === - 1 ) { $ ( "ul" ) . css ( "left" , - 400 + "%" ) ; index = 3 ; } $ ( "ul" ) . animate ( { "left" : - ( index * 100 ) + "%" } ) ; console. log ( $ ( "ul" ) . css ( "left" ) ) ; } ) } )
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 06 - 大屏焦点图 ( 界面搭建) < / title> < style> * { margin: 0 ; padding: 0 ; } . box{ width: 100 % ; height: 365 px; overflow: hidden; } ul{ width: 500 % ; height: 365 px; background: rebeccapurple; position: relative; z- index: 1 ; } ul > li{ width: 20 % ; height: 365 px; float: left; } li img{ width: 100 % ; height: 365 px; } p{ width: 80 % ; height: 100 px; position: absolute; margin- top: 200 px; left: 50 % ; margin- left: - 40 % ; z- index: 2 ; } p span{ height: 80 px; line- height: 80 px; font- size: 50 px; color: #fff; } . right{ float: right; } < / style>
< / head>
< body>
< div class = "box" > < p> < span class = "left" > << / span> < span class = "right" >> < / span> < / p> < ul> < li> < img src= "images/01.png" > < / li> < li> < img src= "images/02.png" > < / li> < li> < img src= "images/03.png" > < / li> < li> < img src= "images/04.png" > < / li> < li> < img src= "images/01.png" > < / li> < / ul>
< / div>
< script src= "js/jquery-3.3.1.js" > < / script>
< script> $ ( function ( ) { var index = 0 ; var timer; autoPlay ( ) ; $ ( ".right" ) . click ( function ( ) { next ( ) ; } ) $ ( ".left" ) . click ( function ( ) { prev ( ) ; } ) $ ( ".box" ) . hover ( function ( ) { clearInterval ( timer) ; } , function ( ) { autoPlay ( ) ; } ) function next ( ) { index ++ ; if ( index === 5 ) { $ ( "ul" ) . css ( "left" , 0 ) ; index = 1 ; } $ ( "ul" ) . stop ( ) . animate ( { "left" : - ( index * 100 ) + "%" } ) ; console. log ( $ ( "ul" ) . css ( "left" ) ) ; } function prev ( ) { index -- ; console. log ( index) ; if ( index === - 1 ) { $ ( "ul" ) . css ( "left" , - 400 + "%" ) ; index = 3 ; } $ ( "ul" ) . stop ( ) . animate ( { "left" : - ( index * 100 ) + "%" } ) ; console. log ( $ ( "ul" ) . css ( "left" ) ) ; } function autoPlay ( ) { timer = setInterval ( function ( ) { next ( ) ; } , 2000 ) } } )
< / script>
< / body>
< / html>
