网页设计及制作(J query)

658 views
609 views

Published on

新员工JS培训

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
658
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

网页设计及制作(J query)

  1. 1. 网页设计及制作 主讲:李汝康
  2. 2. 大纲 <ul><li>jQuery 基本 </li></ul><ul><li>jQuery 引入 </li></ul><ul><li>jQuery 开始写法 </li></ul><ul><li>选择器 </li></ul><ul><li>遍历方法 </li></ul><ul><li>常用方法 </li></ul>
  3. 3. Web 标准网页制作 基本知识 <ul><li>暂无。自己看资料。 </li></ul>
  4. 4. Web 标准网页制作 Jquery 引入 <ul><li>下载网上最新 Jquery 库 </li></ul><ul><li>在网页头部引入库 </li></ul><ul><li><script language=&quot;javascript&quot; src=&quot;js/jquery-1.4.2.min.js&quot;></script> </li></ul>
  5. 5. Web 标准网页制作 Jquery 调用写法 <ul><li>全写: </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>}) </li></ul><ul><li>2. 简写: </li></ul><ul><li>$(function(){ </li></ul><ul><li>}) </li></ul>
  6. 6. Web 标准网页制作 Jquery 选择器 <ul><li>基本选择器 (3 种 ):  </li></ul><ul><li>组选择器 :  </li></ul><ul><li>层次选择器 A. 后代选择器 :  B. 子选择器 C. 临近选择器 </li></ul><ul><li>过滤选择器 </li></ul><ul><li>内容过滤选择器 </li></ul><ul><li>可见性过滤选择器 </li></ul><ul><li>属性过滤选择器 </li></ul><ul><li>子元素过滤选择器 </li></ul><ul><li>表单对象过滤选择器 </li></ul>
  7. 7. Web 标准网页制作 Jquery 选择器 <ul><li>基本选择器 (3 种 ):  </li></ul><ul><li>$(&quot; 标签名 &quot;), 如 $(&quot;p&quot;) 是选取了所有的 p 标签节点  </li></ul><ul><li>$(&quot;#id 名 &quot;), 如 $(&quot;#test&quot;) 是选取了 id 为 test 的标签节点  </li></ul><ul><li>$(&quot;.class 名 &quot;), 如 $(&quot;.test&quot;) 是选取了所有 class 为 test 的标签节点  上面的 $(&quot; 标签名 &quot;) 和 $(&quot;.class 名 &quot;) 返回的都是所有满足的节点 , 至于进一步筛选可以添加一些函数 , 如 eq,gt,lt 等等 . </li></ul><ul><li>* :匹配所有元素 </li></ul>
  8. 8. Web 标准网页制作 Jquery 选择器 <ul><li>组选择器  </li></ul><ul><li>下面还是现做一个约定 : 把 &quot; 标签名或 #id 名或 .class 名 &quot; 记作 mix, 则 mix 表示一个标签名 , 或一个 #id 或一个 .class.  </li></ul><ul><li>$(&quot;mix,mix,mix,...&quot;), 如 :$(&quot;div,#test1,p,.test2,#test3&quot;)  </li></ul>
  9. 9. Web 标准网页制作 Jquery 选择器 <ul><li>层次选择器  </li></ul><ul><li>后代选择器 : $(“mix mix”), 当然可以是多个嵌套 , 但后代选择器可以是深层子代 </li></ul><ul><li>子选择器 : $(&quot;mix>mix&quot;) </li></ul><ul><li>临近选择器 : $(“mix+mix”), 选取下一个兄弟节点 </li></ul>
  10. 10. Web 标准网页制作 Jquery 选择器 <ul><li>过滤选择器(也叫简单选择器) </li></ul><ul><li>:first   匹配找到的第一个元素 </li></ul><ul><li>:last   匹配找到的最后一个元素 </li></ul><ul><li>:not 去除所有与给定选择器匹配的元素 </li></ul><ul><li>:even 匹配所有索引值为偶数的元素,从  0  开始计数 </li></ul><ul><li>:odd 匹配所有索引值为奇数的元素,从  0  开始计数 </li></ul><ul><li>:eq(index) 匹配一个给定索引值的元素 </li></ul><ul><li>:gt(index) 匹配所有大于给定索引值的元素 </li></ul><ul><li>:lt(index) 匹配所有小于给定索引值的元素 </li></ul><ul><li>:header 匹配如  h1, h2, h3 之类的标题元素 </li></ul><ul><li>:animated 匹配所有正在执行动画效果的元素 </li></ul>
  11. 11. Web 标准网页制作 Jquery 选择器 <ul><li>内容过滤选择器 </li></ul><ul><li>:contains(text)  匹配包含给定文本的元素 </li></ul><ul><li>:empty   匹配所有不包含子元素或者文本的空元素 </li></ul><ul><li>:has(selector)   匹配含有选择器所匹配的元素的元素 </li></ul><ul><li>:parent   匹配含有子元素或者文本的元素 </li></ul>
  12. 12. Web 标准网页制作 Jquery 选择器 <ul><li>可见性过滤选择器 </li></ul><ul><li>:hidden 匹配所有的不可见元素, input  元素的  type  属性为  &quot;hidden&quot;  的话也会被匹配到 </li></ul><ul><li>:visible 匹配所有的可见元素 </li></ul>
  13. 13. Web 标准网页制作 Jquery 选择器 <ul><li>属性过滤选择器 </li></ul><ul><li>[attribute] 匹配包含给定属性的元素。 </li></ul><ul><li>[attribute=value] 匹配给定的属性是某个特定值的元素 </li></ul><ul><li>[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。 </li></ul><ul><li>[attribute^=value] 匹配给定的属性是以某些值开始的元素 </li></ul><ul><li>[attribute$=value] 匹配给定的属性是以某些值结尾的元素 </li></ul><ul><li>[attribute*=value] 匹配给定的属性是以包含某些值的元素 </li></ul><ul><li>[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用 </li></ul>
  14. 14. Web 标准网页制作 Jquery 选择器 <ul><li>子元素过滤选择器 </li></ul><ul><li>:nth-child(index/even/odd/equation ) 匹配其父元素下的第 N 个子或奇偶元素 </li></ul><ul><li>:first-child 匹配第一个子元素 </li></ul><ul><li>:last-child 匹配最后一个子元素 </li></ul><ul><li>:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配 </li></ul>
  15. 15. Web 标准网页制作 Jquery 遍历方法 :each $(&quot;div p&quot;). each (function(){ $(this).click(function(){alert($(this).html())}) });
  16. 16. Web 标准网页制作 Jquery 常用方法 <ul><li>Click 点击事件 </li></ul><ul><li>hover(fn1,fn2 ) 悬停事件 </li></ul><ul><li>toggle(evenFn,oddFn) 每次点击时切换 </li></ul><ul><li>Show 显示 / Hide 隐藏 </li></ul><ul><li>addClass/removeClass 增加 / 移除样式 </li></ul><ul><li>Find 查找晒选 </li></ul><ul><li>parents </li></ul>

×