jQuery自学心得一（简介语法，选择器和事件，HTML捕获、添加删除元素、效果、回调、AJAX异步访问）

一：jQuery简介及语法

1、认识jQuery：

①jQuery：jQuery库可以通过一行简单的标记被添加到网页中。

②jQuery是一个JavaScript函数库。

③jQuery库包含的功能：HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画

HTML DOM遍历和修改、AJAX 、Utilities

2、引入jQuery：

①从jquery.com下载jquery库。

②从CDN中载入jquery，例如从百度服务器中加载jquery：http://libs.baidu./jquery/1.10.2/jquery.min.js

③版本介绍：v1.x支持IE6+，v2.x支持IE9+（版本自己查找最新版本即可）

3、jQuery语法：

基础语法：$（selector）.action（）

解析：美元符号定义jQuery，选择符（selector）"查询"和"查找"HTML元素，action（）执行对元素的操作

例如：$（this）.hide();--隐藏当前元素，$（"p"）.hide();--隐藏所有段落。

声明jQuery：$（document）.ready（function（）{

                        }）；

二：jQuery选择器和事件

1、jQuery选择器：常用的id、class和Element跟CSS一样、其他的查看API文档。

2、常用事件方法：点击事件、双击事件、鼠标移开、获取焦点.......

3、绑定事件（.bind）/解除绑定事件（.unbind）：版本1.7以后用on/off代替了他俩

4、事件的目标和冒泡：

5、自定义事件：

三：jQuery HTML之捕获、设置元素，添加、删除元素

1、捕获常用方法：text（）只能获取元素内容 ； html（）也可以获取元素内容，还包括子标签；val（）可以获取输入框的值；attr（）获取元素具体属性值；等等

2、设置常用方法：text（"修改的内容"）方法来修改；html（可以在元素内新增加标签）方法来修改标签；

val（）修改输入框值；attr（）修改元素具体属性值；等等

备注：回调方式，传递一个function，里面有两个参数，第一个为当前元素的下标，第二个位当前要修改的内容。

例如：$（"#btn"）.text（function（i ，ot）{

                    return   "old"+ot +" new:这是新的内容"+（i） ；

                   }）；

3、添加元素常用方法：append（）在被选中元素的结尾插入内容；prepend（）在被选中元素的开头来插入内容；

before也是在被选中元素之前插入内容；after（）在被选中元素之后插入内容；（备注：before和after是换行插入）

添加元素常见三种方式：

html添加方式：var text1 = "<p>Hello</p>"；

jQuery添加方式：var text2 =$（"<p></p>"）.text（"Word"）；

JS（DOM）添加方式：var text3 = document.createElement（"p"）；

                                    text3 .innerHTML="Hello  Word"；

                                    $（"body"）.append（text1，text2，text3）；

4、删除元素常用方法：remove（）全部删除；empty（）删除里面的子元素；

四：jQuery效果之隐藏显示，淡入淡出，滑动，回调

1、隐藏与显示：hide（）：隐藏，可以添加参数时间的设置；show（）：显示，也可以添加参数来限定时间；

toggle（）：绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。v1.9被移除

2、淡入与淡出：fadeIn（）淡出fadeOut（）淡入fadeTo（）设置透明度的效果；fadeToggle（）：切换，其实就是一个按钮实现两个效果。

3、滑动：slideDown（）滑动出现；slideUp（）滑动隐藏；slideToggle（）

4、回调：就是在动画执行完后再执行调用的方法的意思。

例如：$（"button"）.click（function（）{

                $（"p"）.hide（1000，function（）{

                              alter（"动画结束后调用这个方法-----回调"）；

                    }）；

            }）;

五：jQuery AJAX之异步访问和加载片段

1、ajax异步访问、更改数据而不刷新页面（可以在网上查看资料、还有php里的写法）

2、加载片段》》》》》详情上网查看案例