Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

网页设计及制作(J query)

720 views

Published on

新员工JS培训

Published in: Design, Technology
  • Be the first to comment

网页设计及制作(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>

×