咩星征服計劃 用 js 征服地球 part iii
DESCRIPTION
jQuery Seletor (Advanced) jQuery EffectTRANSCRIPT
咩星征服計劃
用 JS 征服地球 Part III
course content
course content
• jQuery Seletor (Advanced)• jQuery Effect• Practice
jQuery Seletor (Advanced)
打的雖然是進階
但不是代表很難的意思
你騙人
只是用動作方式再選擇一次
jQuery Seletor (Advanced)
. find()由目前已經搜索到的元素，再使用一次搜索器
jQuery Seletor (Advanced)
$( "div" ).find( "span" )
<div><p>
<span>Hello</span>, how are you?</p><span>I’m fine.</span>
</div>
jQuery Seletor (Advanced)
$( "div" ).find( "span" )
<div><p>
<span>Hello</span>, how are you?</p><span>I’m fine.</span>
</div>
jQuery Seletor (Advanced)
$( "div" ).find( "span" )
<div><p>
<span>Hello</span>, how are you?</p><span>I’m fine.</span>
</div>
jQuery Seletor (Advanced)
. children()由目前已經搜索到的元素，再使用一次搜索器
與 .find() 相似但 .children 只單往下搜索一個層級
jQuery Seletor (Advanced)
<div>And One Last <span>Time</span></div>
$( "div" ). children()
jQuery Seletor (Advanced)
<div>And One Last <span>Time</span></div>
$( "div" ). children()
jQuery Seletor (Advanced)
<div>And One Last <span>Time</span></div>
$( "div" ). children()
jQuery Seletor (Advanced)
$( "div" ). children("span" )
<div><p>
<span>Hello</span>, how are you?</p><span>I’m fine.</span>
</div>
jQuery Seletor (Advanced)
$( "div" ). children("span" )
<div><p>
<span>Hello</span>, how are you?</p><span>I’m fine.</span>
</div>
jQuery Seletor (Advanced)
$( "div" ). children("span" )
<div><p>
<span>Hello</span>, how are you?</p><span>I’m fine.</span>
</div>
jQuery Seletor (Advanced)
. parent()與 . children () 相反往上搜索一個層級
jQuery Seletor (Advanced)
<div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
$( "p" ) .parent( ".selected" )
jQuery Seletor (Advanced)
<div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
$( "p" ) .parent( ".selected" )
jQuery Seletor (Advanced)
<div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
$( "p" ) .parent( ".selected" )
jQuery Seletor (Advanced)
. siblings()取得相似兄弟姊妹的元素
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li class="third-item">list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li.third-item" ).siblings()
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li class="third-item">list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li.third-item" ).siblings()
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li class="third-item">list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li.third-item" ).siblings()
jQuery Seletor (Advanced)
. next()取得相似元素的下一個
jQuery Seletor (Advanced)
.prev()取得相似元素的上一個
jQuery Seletor (Advanced)
.eq()指定索引中的元素
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li" ). eq( 2 )
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li" ). eq( 2 )
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li" ). eq( 2 )
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li" ). eq( 2 )
0
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li" ). eq( 2 )
1
jQuery Seletor (Advanced)
<ul> <li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li>
</ul>
$( "li" ). eq( 2 )
2
jQuery Seletor (Advanced)
.filter() 這個…很複雜所以不解釋
jQuery Seletor (Advanced)
.filter() 這個…很複雜所以不解釋
可自訂選擇方式過濾器
jQuery Effect
jQuery Effect
淡入淡出
jQuery Effect －淡入淡出
.fadeIn()
淡入元素. fadeOut()
淡出元素
jQuery Effect
滑動
jQuery Effect －滑動
. slideDown()
向下滑動.slideUp()向上滑動
. slideToggle()滑動切換
jQuery Effect
動畫
jQuery Effect －動畫
. animate(properties);
製定 CSS 動畫 Properties 為 CSS 屬性
.animate( properties[, duration ] [, easing ] [, complete ]
)
jQuery Effect －動畫
$( "#book" ).animate({ opacity: 0.25, left:
"+=50”});
jQuery Effect －動畫
$( "#book" ).animate({ opacity: 0.25, left:
"+=50”}, 5000,function() {
// Animation complete.}
);
jQuery Effect －動畫
Practice
Practice
下拉選單
Practice - 下拉選單
滑入 menu 背景變色
Practice - 下拉選單
滑入 menu 背景變色
使用 .hover( ) .css( )
{background:"#AAAACC"}
Practice - 下拉選單
滑入 menu 背景變色
使用 .hover( ) .css( )
{background:"#AAAACC"}
完整範例 http://goo.gl/L9VNnf
Practice - 下拉選單
滑入 menu 顯示 submenu
Practice - 下拉選單
滑入 menu 顯示 submenu
使用 .hover( ) .stop( )
.slideDown() .slideUp()
Practice - 下拉選單
滑入 menu 顯示 submenu
使用 .hover( ) .stop( )
.slideDown() .slideUp()
完整範例 http://goo.gl/t1yZku
Practice
顯示效果
Practice - 下拉選單
顯示效果 - 練習網址http://goo.gl/WeJ4uB
Practice - 下拉選單
滑入 menu 顯示 submenu
使用 .hover() . animate()
Practice - 下拉選單
滑入 menu 顯示 submenu
使用 .hover() . animate()
完整範例 http://goo.gl/GnqnzN
