jQuery 学习笔记 + jQuery-UI 学习笔记

jQuery笔记

一、Dom的操作：

<1>.操作CSS： .css(“key”,”value”).css(“key”,”value”)或者.css({“key:value”,”key:value”})

<2>.click()点击事件，text()文本事件，html()是html内容，attr(“属性名称”)，获取属性

<3>.append(“xxx”)后方追加，prepend(“xxx”)前方追加       à     不换行的 追加

<4>.after(“xxx”)后方追加，before(“xxx”)前方追加       à     第一次追加时换行

<5>.remove()和empty()是删除元素，区别：remove全部删除，empty是删除子元素

 

二、特效操作：

<1>.隐藏和显示：Hide()，show()，toggle(),　中间添加毫秒数值。

<2>.淡化效果：fadeIn()，fadeout()，fadeToggle(),中间添加毫秒数表示形成动画效果，fadeTo(xx, xx)表示淡化的透明度，透明度为0～1，0为完全透明。  e.g：fadeTo (1000 , 0.8);  表示1000秒动画时间，透明度为0.8，

<3>.上下滑动效果：像窗帘一样，slideUp()，slideDown()，slideToggle()上下滑动，效果好似把Hide()和show（）倒过来。

 

三、回调：

                即类似于方法链，能让很多动画连续执行。

<1>.方法内回调：最后一个参数跟匿名方法，表示此动画执行完讲执行另一个方法。

<2>.方法外回调：方法链方式。

                e.g：

                $(document).ready(function(){

                                $("#A").click(function(){   //红色字体为方法内回调

                  $("#B").sligeDown(1000).Hide().toggle(1000,function(){

                        //此方法为方法内回调

});

});

});

 

四、遍历：

                <1>.向下遍历：Children()表示其儿子元素，只能是其内第一层；   find(“参数”)表示所有”参数”的子元素，即传入的子孙元素。

           <2>.向上遍历：Parent()只表示其父亲元素，只能是其外第一层；   Parents(“参数”)表示所有”参数”的父元素，即所有先祖元素中传入的先祖元素。

 

五、noConflict()用来$符号冲突

      var myJs = $.noConflict();

      然后就可以用myJs来替代$符号了。e.g : myJs(document).myJs(ready){…};

 

注意：

1.      jQuery类库下载时有两个版本，1.0和2.0，1.0支持IE6.0+的所有浏览器，2.0只支持IE9.0+的浏览器，所以1.0兼容性好，2.0体积小；

2.      使用jQuery时要引入jQuery类库，还要引入你的js文件，但是jQuery类库必须放在自定义js文件前，因为需要先解析jQuery类库。

jQuery-UI笔记

第一讲：概述

1.      简介：jQuery-UI 是以jQuery为基础的开源框架，包含很多小控件，能加快开发速度。

2.      分类：  jQuery-UI      ＝     交互 ＋ 小部件 ＋ 效果

                                 交互(Interactions)  ＝ 与鼠标交互相关的小部件；

                                 小部件(Widgets) ＝ 界面扩展；

                                 效果(Effects) ＝ 丰富的动画效果。

 

第二讲：下载  与  使用

1.      主题选择：可以下载相应主题的不同jQuery-UI类库，在Themes标签页面里自己编辑，然后下载编辑后的自定义的主题；

2.      下载后解压文件包，我们只需要两个文件即可，分别是：引入jquery-ui.min.js文件和链接jquery-ui.min.css文件。我们还需要jQuery的js文件作为基础，所以不能忘记jQuery.js文件。所以我们共需要三个文件即可在开发中使用jQuery-UI。当然还可以加上自己的js文件，一共四个文件。

3.      注意：三个文件引入是有顺序，不然会引入无效。顺序是：jQuery.js à jQuery-UI.js à (自定义).js

 

第三讲：Interactions的使用

1.      draggable() ：实现所定义元素的可拖动效果。

2.      droppable()：表示所定义元素里是可以放置东西的，放完东西可以出发一个事件，一般用on绑定事件来做后续工作。

例如： $(document).ready(function(){

            $(“#AA”).droppable().on(“drop”,function(){

                  alert(“!!!”);

});

});

3.      resizeable()：所定义的元素尺寸可以缩放。

4.      sortable()：所定义的元素的子元素可以随意拖动更换排名次序。

 

第四讲：Widgets的使用（1）

1.      accordion() ：手风琴折叠效果。用于一个大div里，然后这个大div里的每个行级元素将依次变为标题和内容，呈现出手风琴折叠效果展示。

2.      dialog()：对话框，可以用于弹出的对话框，具有了自己的风格，将一个div设置成隐藏，然后对其使用dialog()方法，设置一个按钮出发它，这个div的内容就成了对话框，点击按钮就能弹出对话框。还可以设置对话框的标题，参加API。

3.      datepicker()：日期类，定制化的日历表，可以用于一个input type=”text”中，单击输入框将弹出日历表。还可格式化输入日期，参加API

4.      autocomplete()：自动补全方法，可以在输入框中输入东西自动提示。仅需要定义一个var数组存相应的范围，然后就可以讲此方法用于输入框标签了。

第五讲：Widgets的使用（2）

1.      progressbar()：进度条，需要使用JS编写一个循环，用setIntervar(函数 , 毫秒数)方法来循环调用函数让进度条增长。

2.      menu()：菜单栏。

3.      slider()：可拖动进度条，具体用法查看API。

4.      tabs()：很有用，类似导航栏效果。定义一个大div，第一层为一个ul列表，每个li列是定义一个锚点，用于锚下面每层的div。详细参见API。

 

小贴士：jQuery-UI的API文档：http://jqueryui.com/