jQuery基础知识讲解

一：了解jQuery

• jQuery是什么？

             它是一个JS函数库，封装简化了DOM操作（CRUD）/Ajax

• 为什么用它？

             1、强大选择器：方便快速查找DOM元素

             2、隐式遍历（迭代）：一次操作多个元素

             3、读写合一

             4、链式调用

             5、解决浏览器兼容性

             6、动画效果

             7、样式操作、DOM操作（CUD）

             8、事件处理

• 如何使用？

            1、引入jQuery库：本地引入与远程引入/测试版本和正式版本（压缩版）

            2、使用jQuery：

                 使用jQuery函数：$/jQuery

                 使用jQuery对象：$（） /  jQuery（）

二：jQuery的两把利器

• jQuery核心函数

           通过jQuery.js文件可以发现，jQuery向外暴露的就是jQuery/$函数，可以直接调用

           jQuery当成一般函数使用：$（param）

                 1、param是function时：相当于window.οnlοad=function（）{}==>$(function（）{})，表示文档加载完成的监听

                 2、param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象

                      eg：$（‘selector’）.find（':eq（index）'）

                 3、param是DOM元素：将DOM元素包装成jQuery对象并返回$（this）

                      eg：$（document.body）.css（'top'，0）

                 4、param是标签字符串：创建标签DOM元素对象并包装为jQuery对象

                      eg：$（'<p>我是p</p>'）.appendTo('body')

           jQuery当成对象使用时：$.xxx

                 $.each（）：遍历

                 $.trim（）：删除左右空格

                 $.extend（{}）：创建jQuery函数对象工具方法

                 $.fn.extend（{}）：创建jQuery对象方法

                 。。。。。。

• jQuery核心对象

               *  jQuery对象它是包含所有匹配的n个DOM元素的伪数组对象

               *  执行$（）返回的就是jQuery对象

               *  基本行为：

                         伪数组大小：length / size（）

                         伪数组下标：$(selector)[index]得到指定下标的DOM元素

                         遍历伪数组：$（）.each（function（key，value）{}）

                         获取当前元素下标：$（selector）.index（）得到当前dom元素所在的下标

扩展：什么是伪数组？

伪数组它也是一个Object对象

它里面只有length属性、下标、遍历等方法或属性，但是没有数组中一些特别的方法，比如：

slice（），splice（），push（），pop（），concat（）等方法

 

三：选择器

• 基本选择器
• 层次选择器
• 过滤选择器
• 表单选择器

四：属性及CSS样式

属性：attr（name[，value]）、prop（name[，value]）、removeAttr（name）、removeProp（name）、val（）。。。

扩展：attr（）和prop（）两者之间的区别

          1、首先需要知道的是什么是atrribute和property

                attribute：HTML标签的自定义和预定义属性统称为attribute

                property：它是JS原生对象的属性

          2、什么时候使用？

               属性值为布尔值的时候使用prop（）

               属性值为非布尔值的时候使用attr（）

CSS：css（name[，value]）、addClass（）、removeClass、toggleClass（）。。。

五：文档处理

appendTo（）、before（）、remove（）、empty（）、clone（）、after（）、replaceWith（）。。。

六：事件处理

• 绑定事件

              绑定事件有两种方式：

                     1、使用$（selector）.on（eventNameStr，function（）{}）的方式

                     2、使用$（selector）.eventName（function（）{}）

              事件方法：

                     click（fun(){}）：鼠标点击

                     mousemove（fun(){}）：鼠标滑动

                     mouseenter（fun(){}）/ mouselever（fun(){}）：鼠标滑入 / 鼠标滑出

                     mouseover（fun(){}）/ mouseout（fun(){}）：鼠标滑入 / 鼠标滑出

                     hover（fun(){}，fun(){}）：鼠标滑入 / 鼠标滑出

                     foucs（fun(){}）/ blur（fun(){}）：获取焦点 / 失去焦点 

                     keydown（fun(){}）/ keypress（fun(){}）/ keyup（fun(){}）：键盘按下 键盘按着 键盘释放

                     resize（fun(){}）：监听文档窗口改变大小时触发，$（window）.resize（fun(){}）

                     scroll（fun(){}）：监听滚动条发生变化时触发

                     select（fun(){}）：监听input元素被选中时触发

                    submit（fun(){}）：提交表单时触发

                    ready（fun(){}）：页面载入时触发，$(document).ready（fun(){}）===$（fun(){}）

扩展：

          1、两者绑定监听事件的区别：

                on（）虽然编码麻烦，但是通用，比如，load事件就无法直接绑定，而需要$（selector）.on（'load',fun），而且on方法可以同时绑定多个事件，多个事件则需要空格隔开就行了

                eventName（）编码简单，但是不通用

          2、mouseenter/mouselever和mouseover/mouseout两者之间的区别

                mouseenter/mouselever在移入子元素时，不会触发子元素的事件

                mouseover/mouseout在移入子元素时，会触发子元素的事件

• 解绑事件

         $（selector）.off（fun(){}）

• 事件委托

         1、什么是事件委托？

              事件委托是将多个子元素的监听事件委托给父辈元素处理，监听回调是加在了父辈元素上，当触发任何一个子元素时，事件会冒泡到父辈元素，父辈元素不会直接处理事件，而是根据event.target（目标事件）得到发生事件的子元素，通过这个子元素调试事件的回调函数

         2、事件委托关系：

              子元素：委托方

              父辈元素：被委托方

       3、如何使用事件委托

            绑定事件委托：$（parentSelector）.delegate（childrenSelector，eventname，callback）

            取消事件委托：$（parentSelector）.undelegate（eventname）

      4、事件委托的好处：

           让新增的子元素也有监听事件

           减少绑定监听事件的个数，从绑定n个子元素 ===> 绑定一个父辈监听

七：动画效果

淡入淡出：

               fadeIn（）/ fadeOut（）/ fadeToggle（）

滑动：

               slideDown（）/ slideUp（）/ slideToggle（）

显示隐藏：

               show（）/ hide（）/ toggle（）

自定义动画：

               animate（{}）

停止动画：

                stop（）