JQuery笔记

JQuery就是为了快速方便的操作DOM，里面封装了很多函数（方法），本质是一种JavaScript库，还有Prototype、YUI、Dojo、Ext JS、移动端的zepto等库。

1.JQuery的基本使用

  1.1JQuery的入口函数

 可以在页面加载完成之前就执行其中的代码。

  1.2JQuery的顶级对象

 ＄是JQuery的别称，也是顶级对象。

 ＄（'div'）等同于把div包装成一个JQuery对象，之后再调用其方法。

  1.3JQuery对象和DOM对象

  DOM对象：通过原生JS获取的对象，如：var m=document.querySelector('div');

  JQuery对象：通过JQuery的方法获取的对象，如：＄('div');(伪数组形式存储)

  两个对象只能使用与之对应的方法。

  相互转换的方法：

    1、DOM对象转换为JQuery对象：

        ＄(DOM对象)

    2、JQuery对象转换为DOM对象：

        ＄('div')[index] 或者 ＄('div').get(index) 其中index为索引号

2.JQuery选择器

  2.1基础选择器和层级选择器

   ＄("选择器")//直接写入CSS选择器即可。

 2.2JQuery隐式迭代

   遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。(不用自己再进行循环)

   例：$('div').css('background','pink');即可将所有匹配到的div设置CSS样式，无需使用for循环。

 2.3JQuery筛选选择器

   如：$('div:first')选择第一个div

    $('div:eq(index)') 可选择某一个div，index处是odd选择所有奇数个，是even选择所有偶数个。

 2.4JQuery筛选方法（重点）

 

 2.5JQuery里面的排他思想

  

非常的方便。 

2.6链式编程

  可以节省代码量，看起来更优雅。比如使用排他思想时：

$(this).css('color','blue').siblings.css('color','');

3.JQuery样式操作

  3.1操作CSS方法 

$(this).css('color');//参数只写属性名，则是返回属性值

$(this).css('color','skyblue'); //对属性值做出修改，用逗号分隔，后面若是带像素可以不加引号和单位。

   

  3.2设置类样式方法

   提前写好类，需要时添加该类名即可。

$(this).addClass(''类名'');

$(this).removeClass(''类名'');

$(this).toggleClass(''类名''); //切换类，如果有就去掉，没有就加上

 4.JQuery效果

   

 4.1显示隐藏效果

   

4.2滑动效果

  

4.3事件切换

stop()方法可以取消未执行的动画。 

4.4淡入淡出效果

  

fadeIn()//淡入
fadeOut()//淡出
fadeToggle()//切换

4.5自定义动画animate

  

5.JQuery属性操作

   5.1设置或获取固有属性值prop（）

       固有属性：元素本身自带的属性。

       $('div').prop('属性') ;  用于获取属性值。

       $('div').prop('属性','值'); 用于设置属性值。

    5.2设置或获取自定义属性值attr（）

       具体方法同上。

    5.3数据存储data（）

        该方法可在指定的元素上存储数据，并不会修改DOM元素结构。页面刷新，之前存储的数据          消失。

        

   :checked选择器，返回被选中的表单元素（伪数组形式）。 

 6.JQuery内容文本值

     主要针对元素的内容还有表单的值操作。

    1.普通元素内容Html（相对于原生innerHtml）

     

     2.普通元素文本内容text（）

       只获取文字，不包含标签。 

     3.获取设置表单值val（）

  7.JQuery元素操作

     7.1遍历元素

        给同一类元素做不同的操作要用到隐式迭代。

         

   

   7.2创建元素

      

  7.3添加元素

     1.内部添加 

      

    element.prepend('内容') // 添加到最前面 

     2.外部添加

 

 

  7.4删除元素

     

8.JQuery尺寸、位置操作

  8.1  JQuery尺寸 

      

Tips：以上参数为空，则是获取相应值，返回的是数字型。如果参数为数字，则是修改响应值。

   参数可以不必写单位。 

  8.2JQuery位置

    位置主要有三个：offect()、position()、scrollTop()|scrollLeft()。

   

 

 

 

 Document被卷去的头部即下滑滚动条时，下拉了页面的多少。

  案例：点击按钮后，以动画的形式返回顶部。

9.JQuery事件注册和处理以及事件对象

   9.1单个事件注册

     

   9.2事件处理on()绑定事件 

       on()方法在匹配元素上绑定一个或多个事件的事件处理函数。

  

  使用on（）可一次处理多个事件。 

  

 

 

9.3事件处理off（）解绑事件

  off（）方法可以移除通过on（）方法绑定的事件处理程序。 

 

如果有的事件只需要触发一次，则可以使用one（）来绑定事件。 

9.4自动触发事件trigger（）

  有些需要自动触发的事件，可以利用定时器自动触发右侧按钮点击事件。

  

元素的默认行为： 例如表单在获得焦点（被鼠标点击）之后有一个光标。

 9.5事件对象

   事件被触发，就会有事件对象的产生。