JQuery简介

jQuery

jQuery 美国人  2006年创建

这是目前最流行的JavaScript程序库，他是对JavaScript对象和函数的封装

他的设计思想是 write less   do more

Windows.onload 文档加载完成开始执行代码

$(document).ready(function)

偶数 even

jQuery与其他JavaScript库

jQuery

Bootstrap

让前端开发更快速更简单，所有设备都能适配

Zepto

加入移动端事件操作  触摸

Ext

用javaScript写的Ajax框架

YUI

 

jQuery能做什么

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

jQuery能做的JavaScript也能做，但使用jQuery能大幅提高开发效率

 

jQuery优势

体积小

强大的选择器

出色的DOM封装

可靠地事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

 

jQuery库分开发版和发布版

jQuery-1-版本号。Js   完整无压缩版本，主要用于测试，学习和开发

             。Min。Js   经过工具压缩或经过服务器开启Gzip压缩，主要用于发布的产品和项目

 

页面中引入jQuery

1 引用本地jquery库

<script src=”js/jquery-1.12.4.js” type=”text/javascript”></script>

2  引用cdn的jQuery库

<script src=”http://code.jquery.com/jquery-1.12.4.js” ></script>

Window.onload                 $(document).ready()

 

执行时机     必须等网页内容所有加载完毕         网页中所有DOM文件绘制完毕即刻执行，可能与DOM元素关联的内容并没有加载完

 

编写个数    同一页面不能同时编写多个             同一页面可以编写多个

简化写法       无                               $(function(){ 执行代码})

语法结构

$(selector).action();

工厂函数$()：将DOM对象转化成为jQuery对象

选择器selector：获取需要操作的DOM元素

方法action（）：jQuery 中提供的方法，其中包括绑定事件处理的方法

 

jQuery操作页面元素

使用addClass（）方法为元素添加样式

jQuery对象.addClass（）

使用css（）方法设置元素样式

Css(“属性”,”属性值”)设置一个css属性

Css（{“属性1”：“属性值1”，“属性2”：“属性值2”，...}）同时设置多个

使用show（），hide（）方法设置元素的显示和隐藏

$(selector).show();

$(selector).hide();

jQuery代码风格

$等同于jQuery

$(document).ready()=jQuery(document).ready()

$(function(){})=jQuery(function(){})

链式操作

对一个对象进行多重操作，并将操作返回给对象

.next（）取得该元素的下一个同胞元素

$(“h2”).css(“background-color”,”#ccffff”).next().css(“display”,”block”);

隐式迭代

 

jQuery对象与DOM对象之间的转换

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构

DOM对象：直接使用JavaScript获取的节点对象

  Var objDOM=document.getElementById(“title”);

Var objHTML=objDOM.inneerHTML;

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

    $(“#title”).html();

等同于

Document.getElementById(“title”).innerHTML;

DOM对象和jQuery对象分别有一套独立的方法，不能混用

DOM对象转jQuery对象

   使用$()函数进行转化：$(DOM对象)

   Var   txtName=document.getElementById(“txtName”)    DOM对象

   Var  $txtName=$(txtName);                      jQuery对象

jQuery对象命名一般约定以$开头

     在事件中经常使用$(this),this是触发该事件的对象

jQuery对象转化成DOM对象

Jquery对象是一个类似于数组的对象，可以通过[index]的方法得到相应的DOM对象

   Var $txtName=$(“#txtName”)     jQuery对象

Var txtName=$txtName[0];         DOM对象

 

     通过get（index）方法得到相应的DOM对象

        Var $txtName=$(“txtName”);      jQuery对象

        Var txtName=$txtName.get(0);     DOM对象

 

 

基本选择器：

jQuery选择器类似于CSS选择器，用来选取网页中的元素

实例： $(“h3”).css(“background”,”#09F”);

  获取并设置网页中所有《h3》元素的背景

  “h3”为选择器语法，必须放在$()中

$(“h3”)返回jQuery对象

.css()是为jQuery对象设置样式的方法

jQuery选择器功能强大，种类也很多分类如下

     通过CSS选择器选取元素

             基本选择器

       基本选择器包括：标签选择器  element    根据给定的标签名匹配元素   $(“h2”)选取所有h2元素

        类选择器；.class  根据给定的class匹配元素  $(“.title”)选取所有class为title的元素

       ID选择器  #id  根据给定的id匹配元素       $(“#title”)选取id为title的元素

      并集选择器 ： selector1，selector2，....，selectorN    将每一个选择器匹配的元素合并后一起返回   $(“div,p,title”)选取所有div，p和拥有class为title的元素

 

全局选择器   *     匹配所有的元素       $(“*”)选取所有元素

 

 

             层次选择器

          层次选择器通过DOM元素之间的层次关系来获取元素

           后代选择器    $(“#menu  span”)选取#menu下的span 元素

            子选择器        #menu > span            的子元素

         相邻元素选择器       h2 + dl       选取紧邻h2元素之后的同辈元素dl

         同辈元素选择器         h2~dl         选取h2 元素之后所有的同辈元素dl

Ancestor祖先   descendant 后代

             属性选择器

属性选择器通过HTML元素 的属性来选择元素

[attribute]  选取包含给定属性的元素   $(“[href]”)选取包含有href属性的元素

[attribute=value] 选取等于给定属性是某个特定值的元素   $(“[href=’#’]”)

[attribute!=value]     不等于                              

[attribute ^=value] 选取给定属性是以某些特定值开始的元素  $(“[href ^=’#’]”)

[attribute $=value]                           结尾               $

[attribute *=value]               包含某些特定值的元素           *

 通过过滤选择器选择元素

    通过特定的过滤规则来筛选出所需的元素

主要分类

          基本过滤选择器

         :first  选取第一个元素   $(“Ii:first”)选取所有<li>元素中的第一个<li>元素

         :last      最后              last                    最后

 :not(selector)  选取去除所有与给定选择器匹配的元素    $(“li:not(.three)”)选取class不是three的元素

        :even   选取索引是偶数的所有元素    $(“li:even”)选取索引是偶数的所有<li>元素

         :odd              奇数                  odd             奇数

        :eq(index)       选取索引等于index元素    $(“li:eq(1)”)选取索引等于1的li元素

       :gt(index)                 大于                gt              大于1的不包括1

       :lt                        小于                lt              小于   不包括

       :header            选取所有标题元素       $(“:header”)选取网页中所有标题元素

       :focus              选取当前获取焦点的元素   $(“:focus”)选取当前获取焦点的元素

:animated         选择所有动画                  $(“:animated”)选取当前所有动画元素

             可见性过滤选择器

      通过元素显示状态来选取元素  

    :visible   选取所有可见的元素     $(“:visible”)选取所有可见的元素

    :hidden  选取所有隐藏的元素     $(“:hidden”)选取所有隐藏的元素

表单过滤选择器

内容过滤选择器、子元素过滤选择器

   

jQuery选择器注意事项

  特殊符号的转义：

<div id=”id#a”>aa</div>

<div id=”id[2]”>aa</div>

获取这两个元素的选择器

   $(“#id#a”)

   $(“#id[2]”)

以上是错误的

$(“#id\\#a”)

$(“#id\\[2\\]”)

 

选择器中的空格

   选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

  Var $t_a=$(“.text :hidden”);//带空格的jQuery选择器   选取class为text的元素内部的隐藏元素

Var $t_a=$(“.text:hidden”) //选取隐藏的class为text 的元素

jQuery事件是对JavaScript时间的封装，常用事件分类：

   基础事件：

     鼠标事件：用户在文档上移动或单击鼠标时而产生的事件

        Click（）触发或将函数绑定到指定元素的click事件              单机鼠标时

        Mouseover() 触发或将函数绑定到指定元素的mouseover事件  鼠标指针移过时

        Mouseout                                mouseout               移出

        Mouseenter                              mouseenter              进入

        Mouseleave                              mouseleave               离开

鼠标在备选元素的子元素上来回进入离开时：触发mouseover  跟mouseout  

                                不触发  mouseenter       mouseleave

 

         键盘事件

             Keydown() 触发或将函数绑定到指定元素的keydown事件   按下键盘时

                Up                                  up         释放

                Press                            press      产生可打印的字符时

           键盘keycode

 

       浏览器事件：

         $(selector).resize()；调整窗口大小时，完成页面特效      

 

        绑定事件：

         Bind(type,[data],fn);

             Type:主要包括click mouseover  mouseout 等基础事件，此外，还可以是自定义事件

             Data 可选函数    fn 处理函数

 

 

 

   

         移除事件：

          Unbind（）方法

            UNbind([type],[fn])

                Type:事件类型，主要包括blur  focus  click  mouseout 等基础事件 此外还可以是自定义事件

            Fn 处理函数

        当UNbind（）不带参数时，表示移除所绑定的全部事件

         Window事件

         表单事件

     复核事件：

          鼠标光标悬停

          鼠标连续点击

jQuery复合事件：

Hover（）方法 相当于mouseover与mouseout事件的组合

Hover（enter，leave）

实例；hover(function(){

  $().show();

},function(){

  $().hide();

})

 

Toggle（）方法 用于模拟鼠标连续click事件

Toggle（fn1，fn2,fn3,fn4...）;（实现单击事件的切换，无额外绑定click事件）

 

Toggle() 方法不带参数，与show和hide方法作用一样（实现事件触发对象在显示和隐藏状态之间切换）

 

Toggleclass( className)可以对样式进行切换（实现事件触发对象在加载某个样式和移除这个样式之间转换）

$(selector).show([speed], [callback])

$(selector).hide([speed], [callback])

Speed  可选表示速度，默认为0；1000    slow    normal    fast

Callback  表示回调函数

$(selector).fadeIn([speed], [callback])

$(selector).fadeout([speed], [callback])

$(selector).slideup([speed], [callback])

$(selector).slidedown([speed], [callback])

样式操作与内容操作

    DOM操作分为三类

      DOM core 任何一种支持DOM的编程语言都可以使用它，如getElementById（）   HTML-DOM用于处理HTML文档，如document.forms

      CSS-Dom 用于操作Css，如element.style.color

Javascript用于对（x）HTML文档进行操作，他对这三类DOM操作都提供了支持

jQuery对JavaScript中的DOM操作进行了封装

  jQuery中的DOM操作

       样式操作

       内容及Value值操作

       节点属性操作

        节点遍历

        Css-dom操作

设置和获取样式值          opacity 透明度

     Css(name,value); 设置单个属性

     或css({name:value,name:value,...}) 同时设置多个属性

     Css(name)获取属性值

追加样式

     $(selector).addclass(class)

     $(selector).addclass(class1 class2 class3...)

移除样式

      $(selector).removeclass(class)

      $(selector).removeclass(class1 class2 class3...)

toggleClass（）

    模拟了addClass()与removeClass()实现样式切换的过程

Hasclass()方法来判断是否包含指定的样式

    $(selector).hasClass(class);

 

内容操作

   HTML代码操作

      HTML()可以对HTML代码进行操作，类似于js中的innerHTML

       $(“div.left”).html();获取元素中的HTML代码

       $(“div.left”).html(“<div class=’content’></div>”) 设置元素中的HTML代码

   Text()可以获取或设置元素的文本内容

         $(“div.left”).text();获取元素中的文本内容

       $(“div.left”).text(“<div class=’content’></div>”) 设置元素中的文本内容

   HTML   跟text区别

   HTML() 无参数 用于获取第一个匹配元素的HTML内容或文本内容

   Html(content) 用于设置所有匹配元素的HTML内容或文本内容

   Text() 无参数 用与获取所有匹配元素的文本的内容

   Text(content) 用于设置所有匹配元素的文本内容

   标签内容操作

   属性值操作

 $(this).val() 获取元素的value属性值

 或$(this).val(value) 设置元素的value属性值

获取焦点 focus    失去焦点  blur

节点操作

  查找节点

  创建节点

    工厂函数$()用于获取或创建节点

       $(selector) 通过选择器获取节点

       $(element)把DOM节点转化成jQuery节点

       $(html)使用HTML字符创建jQuery节点：： var $newNode=$(“<li  >  </li>”);  

var $newNode=$(“<li  > werqwerqwerq </li>”);  var $newNode=$(“<li title=”t” >  </li>”);创建含文本与属性<li>元素节点

  

  插入节点

      Append（content）  $(A).append(B) 将B追加到A中

      AppendTo(content)    $(A).appendTo(B) 将A追加到B中

      Prepend(content)    $(A).prepend(B) 将B前置插入到A中

      prependTo(content)   $(A).prependTo(B) 将A前置插入到B中

    元素外部插入同辈节点

       After(content) $(A).after(B)将B插入到A之后

       insertAfter(content)  $().insertAfter(B)将A插入到B之后

      Before (content)     $(A).before(B) 表示将B插入到A之前  

       insertBefore(content)   $().insertBefore(B)将A插入到B之前

  删除节点

      jQuery提供三种删除节点的方法

         Remove() 删除整个节点

         Empty()   清空节点内容 位置仍然保留

         Detach()  删除整个节点，保留元素的绑定事件、附加的数据

  替换节点

      replaceWith()和replaceAll()用于替换某个节点

   $(“.gameList li:eq(1)”).replaceWith($newNode1)     $().replaceAll(“.gameList li:eq(1)”)

  复制节点

  Clone()用于复制某个节点

   $(“selector”).clone([includeEvents]) 参数ture或false，true复制事件处理，false则只复制内容反之

属性操作

  获取与设置元素属性

    Attr()

  $(selector).attr([name]); 获取属性值

  $(selector).attr({[name1:value].....[nameN:valueN]}) 设置多个属性值

   删除元素属性

   removeAttr用来删除元素属性

    $(selector).removeAttr(name)

 

节点遍历

   遍历子元素

     $ (selector).children([expr]) 参数可以省略是代表选择器表达式

 

   遍历同辈元素

      Next([expr])获取紧邻元素之后的元素

      Prev([expr])获取紧邻元素之前的元素

      Slibings([expr]) 位于匹配元素前后所有同辈元素

   遍历前辈元素

       Parent()获取元素的父级元素

       Parents() 获取元素的祖先元素

   其他遍历方法

       jQuery中提供了find() filter()等节点操作方法

  Each()规定为每个匹配元素规定运行的函数

      $(selector).each(function(index,element))

Index 选择器的位置   element 当前的元素

       End()  结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$(“ul li”).first().css().end().last()    作用就是让last操作的是从$(“ul li”)开始 而不是$(“ul li”).first()

 

CSS-DOM操作

   除css()外，还有获取和设置元素高度宽度等的样式操作方法

    Css()     设置或返回匹配元素的样式属性

  Height([value])                      高度

 width([value])                      宽度

offset([value])              以像素为单位的top和left坐标。仅对可见元素有效  

offsetParent()  返回最近的已定位祖先元素。定位元素指的是元素的css position 值被设置为relative  absolute  或fixed的元素

 Position()   返回第一个匹配元素相对于父元素的位置

scrollLeft([position])     参数可选。设置或返回匹配元素相对滚动条左侧的偏移    

scrollRight([position])  参数可选。设置或返回匹配元素相对滚动条项