java程序员菜鸟入门之十一jQuery

一、概述

1、jquery是前端js的框架，是对一些js代码的封装，以实现一些效果

2、jquery的使用需要引包

3、在使用时注意是document对象还是jquery对象，别把两者的方法用反了

二、选择器

1、基本选择器：#id//根据给定的ID匹配一个元素

                          element//根据给定的元素标签名匹配所有元素

                          .class//根据给定的css类名匹配元素

                          *//匹配所有元素

                           selector1,selector2,selectorN//将每一个选择器匹配到的元素合并后一起返回

2、层级选择器：parent > child//在给定的父元素下匹配所有的子元素

                          prev + next//匹配所有紧接在 prev 元素后的 next 元素

                          prev ~ siblings//匹配 prev 元素之后的所有 siblings 元素

3、筛选器：:first//获取第一个元素

                   :not(selector)//去除所有与给定选择器匹配的元素

                   :last()//获取最后个元素

                   :focus// 匹配当前获取焦点的元素

4、内容选择器：:contains(text)//匹配包含给定文本的元素

                         :empty// 匹配所有不包含子元素或者文本的空元素

5、可见性选择器：:hidden//匹配所有不可见元素，或者type为hidden的元素

                             :visible//匹配所有的可见元素

6、属性选择器：[attribute]//匹配包含给定属性的元素

                         [attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]         7、表单选择器：:input//匹配所有 input, textarea, select 和 button 元素

                          :text//匹配所有的单行文本框

                          :password//匹配所有密码框

                          :radio //匹配所有单选按钮

                          :checkbox//匹配所有复选框

                         :submit//匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。

                            :image//匹配所有图像域

                            :reset//匹配所有重置按钮

                            :button//匹配所有按钮

                            :file//匹配所有文件域                     

8、子元素选择器：:first-child//匹配所给选择器( :之前的选择器)的第一个子元素

9、表单对象属性选择器：:enabled//匹配所有可用元素

                                        :disabled//匹配所有不可用元素

                                      :checked//匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

                                         :selected//匹配所有选中的option元素

三、jquery事件

1、页面载入事件：ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

2、事件处理：jQueryon(events,[selector],[data],fn)//在选择元素上绑定一个或多个事件的事件处理函数。

                      off(events,[selector],[fn])//在选择元素上移除一个或多个事件的事件处理函数。                       

3、事件：blur([[data],fn])//当元素失去焦点时触发 blur 事件

               change([[data],fn])//当元素的值发生改变时，会发生 change 事件

               click([[data],fn])//触发每一个匹配元素的click事件

               dblclick([[data],fn])//当双击元素时，会发生 dblclick 事件

               focus([[data],fn])//当元素获得焦点时，触发 focus 事件

              mouseover([[data],fn])//当鼠标指针位于元素上方时，会发生 mouseover 事件

              mouseout([[data],fn])//当鼠标指针从元素上移开时，发生 mouseout 事件

              scroll([[data],fn])//当用户滚动指定的元素时，会发生 scroll 事件

              select([[data],fn])//当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

              submit([[data],fn])//当提交表单时，会发生 submit 事件

4、事件切换：hover([over,]out)//一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

                      toggle([speed],[easing],[fn])//用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

四、ajax请求

1、jQuery.ajax(url,[settings])：可以发送post与get请求

2、jQuery.get(url, [data], [callback], [type])：get请求

3、jQuery.post(url, [data], [callback], [type])：post请求

五、文档处理

1、append(content|fn)：向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

2、  remove([expr])： 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

3、文档处理的类型分类有这几种：内部文档插入、外部插入、包裹、替换、删除、复制

六、工具

1、字符串操作：jQuery.trim(str)//去掉字符串起始和结尾的空格

七、属性

1、CSS类：addClass(class|fn)//为每个匹配的元素添加指定的类名。

                  removeClass([class|fn])//从所有匹配的元素中删除全部或者指定的类

                  toggleClass(class|fn[,sw])//如果存在（不存在）就删除（添加）一个类

2、属性：attr(name|properties|key,value|fn)//设置或返回被选元素的属性值

               removeAttr(name)//从每一个匹配的元素中删除一个属性

                prop(name|properties|key,value|fn)//获取在匹配的元素集中的第一个元素的属性值

3、HTML代码/文本/值：html([val|fn])//取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

                                      text([val|fn])//取得所有匹配元素的内容

                                      val([val|fn|arr])//获得匹配元素的当前值

八、CSS

css(name|pro|[,val|fn])：访问匹配元素的样式属性

position()：获取匹配元素相对父元素的偏移

height([val|fn])：取得匹配元素当前计算的高度值（px）

width([val|fn])：取得第一个匹配元素当前计算的宽度值（px）

innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）

innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）

outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框）

outerWidth([options])：获取第一个匹配元素外部宽度（默认包括补白和边框）

九、效果

1、基本：show([speed,[easing],[fn]])//显示隐藏的匹配元素

                hide([speed,[easing],[fn]])//隐藏显示的元素

                toggle([speed],[easing],[fn])//用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件,如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

2、还有其他用的比较少的效果样式：滑入、淡入淡出、自定义、设置

十、筛选

1、过滤：eq(index|-index)//获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个

               first()//获取第一个元素

               last()//获取最后个元素

               hasClass(class)//检查当前的元素是否含有某个特定的类，如果有，则返回true

               is(expr|obj|ele|fn)//根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true         

2、查找：find(expr|obj|ele)//搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

               next([expr])//取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

               nextAll([expr])//查找当前元素之后所有的同辈元素

              parent([expr])// 取得一个包含着所有匹配元素的唯一父元素的元素集合

              parents([expr])//取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选

               prev([expr])//取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合