传智播客--jQuery的全面学习

今天休息,对前两天的内容进行一下总结和巩固练习.上课的内容很多,在课堂上很难马上就消化和记住了.为了防止在工作中一碰到什么技术问题,就想我知道 啊,曾经学习过,可是就是想不起来了.这样会大大的降低工作效率和质量.所以,在每学完一个知识点的时候,传智播客都会一点时间,进行理解和消化.而不是 从周一到周五一直上课.一般是周一到周三上课,周四练习,周五周六上课,周日练习.很科学啊.能给我喘口气的机会.好好消化一下.

昨天的学习的是 jQuery  库.包含的内容非常全面.在一天中讲了百分之八九十的内容.所以非常的快.课上的练习和作业没有做完.今天休息正好把昨天的 jQuery 和前天的 JavaScript 的练习做完.

1.为什么使用jQuery
为了简化 JavaScript 的开发缩短开发周期降低成本, 有很多的 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器. jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库.

2.jQuery 都有什么优点
轻量级;强大的选择器;出色的 DOM 操作的封装;可靠的事件处理机制;完善的 Ajax;出色的浏览器兼容性;链式操作方式等等.

3.jQuery 的 HelloWorld
<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                alert("Hello World!");
            });
</script>

4.jQuery对象
jQuery 对象是 jQuery 自己的.
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

5.jQuery 对象转成 DOM 对象的两种方法
1)var cr = $cr[0]
2)var cr = $cr.get(0)

6.DOM 对象转成 jQuery 对象
var cr = document.getElementById("cr");
var $cr = $(cr);

7.如果 Aptana 没有提示 jQuery 怎么办
window --> Preferences --> Aptana --> Editors --> JavaScript --> Code Assist --> JQuery

8.jQuery 选择器
选择器是 jQuery 很基础很重要的.要能好好掌握好 jQuery 的选择器,就已经学好 jQuery 的一大半了.
1)jQuery基本选择器
#id 根据给定的 id 匹配一个元素
.class 根据给定的类名匹配元素
element 根据给定的元素名匹配元素
* 匹配所有元素
selector1...将每一个选择器匹配到元素合并后一起返回

2)jQuery层次选择器
$("ancestor descendant") 选取 ancestor 的所有 descendant(后代元素)
$("parent > child") 选取 parrent 元素下的 child 子元素
$("prev + next") 选取紧接在 prev 元素后的下一个 next 元素
$("prev ~ siblings") 选取 prev 元素后的所有 siblings 元素

3)jQuery基本过滤选择器
:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素
:not 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq 匹配一个给定索引值的元素
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素

4)jQuery内容过滤选择器
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素

5)jQuery可见性过滤选择器
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素

6)jQuery属性过滤选择器
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

7)jQuery子元素过滤选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 匹配某个元素是父元素中唯一的子元素

8)jQuery表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected 匹配所有选中的option元素

9)jQuery表单选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素，或者type为hidden的元素

9.jQuery 其他的操作
1)jQuery 中的 DOM 操作
2)遍历节点
3)CSS-DOM 操作
4)jQuery 中的事件:加载DOM,事件绑定,合成事件,事件冒泡,事件对象的属性,移除事件.
5)jQuery 中的动画:隐藏和显示.
6)jQuery 加载并解析XML

只学习了知识点和单个知识点的运用是没有太好的效果的,把知识综合的运用到一起的练习才是最好的.老师给的联系都是非常实用,在公司经常能用到的.把这些 练习好,在以后的工作就会省不少了力气.

总结一下课上的练习和作业:

1.点击 p 节点, 弹出对应的文本内容.这个练习主要是适应和对比jQuery和JavaScript的区别和优势,原来用JavaScript 实现的功能,用jQuery只要原来一般的代码量.代码写起来优美和自然,相当的方便开发和维护.

2.为 table2 隔行加背景色.这是对表单的操作是相当的常用的,非常实用.在工作中经常使用,用jQuery实现只用一行代码: $("table:last tr:odd").css("background", "#ffbbaa");这个技术使用好了,对开发效率会大大的提高.

3.对多选框进行操作, 输出选中的多选框的个数.一个练习,练习到了上面的三个知识点.一个是选择器是使用;二是过滤器的使用;三是充分说明了jQuery对象都是数组.这里用 到的length就是利用了这个道理.

4.添加新员工,这个练习在JavaScript中练习过,这个可以很好的对比jQuery的好处和优势了

5.对邮箱文本输入进行提示.界面做的好了,对用户的操作上就会有大大的方便,用起来心情也是非常的舒畅的.这个功能是实现,就是从这方考虑的.传智播客 老师给的例子,都是从实际出发,很少的花拳绣腿.一切都的实战,技术和经验上去了,好工作自然就来了.

6.显示精品品牌和全部品牌,之间相互切换.这个特别是实用,在各大网站上经常能看见的.这么经典的功能大家都使用过吧,可你会实现吗.快了用用 jQuery 吧,不是很难的.

7.鼠标移动到图片上,自动放大显示.这个练习有点专业了,对我们程序员来说是有那么点,感觉这是UI做的事情嘛.不过在小公司,很多时候一个人要顶很多 职位的.多学点对工资和职位的提升会有很大好处的.

每天学习的东西都好多,所以一定得跟上.要跟上进度不是那么容易的事情.我还工作过一段时间,有一定的基础.要跟上也得付出努力.所以,大家要一起加油. 不吃苦中苦,难做人上人.