jQuery基础知识概述

1.了解jQuery

• 是什么？ ：

  • 一个JS函数库：write less,do more

  • 封装简化DOM操作

• 为什么要用它？：

  • 强大的选择器：方便快速的查找DOM元素

  • 隐式遍历：可以一次操作多个元素

  • 读写合一：读数据/写数据用的是一个函数

  • 链式调用：可以通过 . 不断的调用jQuery对象的方法

  • 事件处理

  • DOM操作

  • 样式操作

  • 动画

  • 浏览器兼容

• 如何使用：

  • 引入jQuery库

    • 本地引入和CDN远程引入

  • 使用jQuery

    • 使用jQuery函数：$或jQuery

    • 使用jQuery对象：$xxx(执行$()得到的)

2.jQuery的两把利器

• 1.jQuery核心函数

  • 理解：

    • 即：$或jQuery

    • jQuery 定义了这个全局的函数供我们使用，它既可以作为一般函数调用，切传递的参数类型不同/格式不同，功能就完全不同
      也可以作为对象调用其定义好的方法，此时$就是一个工具对象

  • 作为函数调用$( )：

    • 1.参数为函数：当DOM加载完成后，执行此回调函数

    • 2.参数为选择器字符串：查找所有匹配的标签，并将其封装成jQuery对象

    • 3.参数为DOM对象：将DOM对象封装成jQUERY对象

    • 4.参数为html标签字符串（用的少）：创建标签对象，并封装成jQuery对象

  • 作为对象使用$.xxx( )：

    • 发送ajax请求的方法：

      • $.ajax()

      • $.get()

      • $.post()

      • ......

    • 其他工具方法：

      • $.each():隐式遍历数组

      • $.trim():去除字符串两端的空格

      • $.parseJSON()：将JSON格式的字符串转化为对应的JavaScript对象

      • ......

• 2 jQuery核心对象

  • 理解：

    • 即：执行jQuery核心函数返回的对象

    • jQuery对象内部包含的是DOM元素对象的伪数组（可能只有一个元素），jQuery对象拥有很多的属性和方法，让程序员更方便快捷的操作DOM

  • 属性/方法：

    • 基本行为：

      • size()/length:包含的DOM元素个数

      • [index]/get(index):得到对应位置的元素

      • each():遍历包含的所有DOM元素

      • index():得到在所在兄弟元素中的下标

    • 属性：操作内部标签的属性或值

    • CSS:操作标签的样式

    • 文档:对标签进行增删改操作

    • 筛选:根据指定的规则过滤内部的标签

    • 事件:处理事件监听

    • 效果:实现动画效果

3.使用jQuery核心函数

• 选择器

  • 是什么，怎么用？

    • 具有特定规则（css选择器）的字符串

    • 用来查找DOM元素：$(selecter),根据选择器规则在整个文档中查找所有匹配的元素的数组，并将其封装成jQuery对象返回

    • 只有调用$(),并将选择器作为参数传入才能起作用

  • 分类

    • 基本选择器

      • #id:id选择器

      • element:元素选择器

      • .class:属性选择器

      • *:任意元素

      • selecter1,selecter2,selecterN:组合选择器

      • selecter1selecter2selecterN:相交选择器

    • 层次选择器--查找子元素，后代元素，兄弟元素的选择器

      • ancestor descendant 在给定的祖先元素下的后代元素中匹配元素

      • parent>child:在给定的父元素下的子元素中匹配元素

      • prev+:匹配下一个兄弟元素

      • prev~:匹配后面所有兄弟元素

    • 过滤选择器--在原有选择器匹配的元素中进一步进行过滤的选择器

      • :first

      • :last

      • :eq(index)

      • :lt

      • :gt

      • :odd

      • :even

      • :not(selector)

      • :hidden

      • :visible

      • [attrName]

      • [attrName=value]

      • ......

    • 表单选择器

      • 表单：

        • :input

        • :text

        • :checkbox

        • :radio

        • :checked: 选中的

        • ......

      • 表单对象属性

        • :enabled

        • :disabled

        • :checked

        • :selected

• 工具

  • $.each():遍历数组或对象中的数据

  • $.trim():去除字符串两边的空格

  • $.type(obj):得到数据的类型

  • $.isarray():判断是否是数组

  • $.isFunction:判断是否是函数

  • ......

• ajax

  • ajax()

  • get()

  • post()

  • ......

4.使用jQuery对象

• jQuery对象使用特点

  • 链式调用：调用jQuery对象的任何方法后返回的还是当前jQuery对象，可以多次调用

  • 读写合一：读：内部第一个 DOM元素， 写:内部所有的DOM元素

• 属性/文本

  • 操作标签的属性, 标签体文本

    • attr(name) / attr(name, value): 读写非布尔值的标签属性

    • prop(name) / prop(name, value): 读写布尔值的标签属性

    • removeAttr(name)/removeProp(name): 删除属性

    • addClass(classValue): 添加class

    • removeClass(classValue): 移除指定class

    • val() / val(value): 读写标签的value

    • html() / html(htmlString): 读写标签体文本

• CSS模块

  • 设置CSS样式/读取CSS值

    • css(styleName):读取css值

    • css(styleName,value):设置一个样式

    • css({多个键值对})：设置多个样式

  • 获取/设置元素的位置数据

    • offset():相对页面左上角的坐标

    • position():相对于父元素左上角的坐标

    • scrollTop()/scrollLeft():读写元素/页面的滚动条的坐标

      • 得到页面滚动条的scrollTop：
        $(document.body).scrollTop()+$(document.html).scrollTop();

      • 设置页面滚动条的scrollTop:
        $('body,html').scrollTop(value);

  • 获取/设置元素的吃寸数据

    • 不包括内边距和边框的尺寸

      • height()

      • width()

    • 包括内边距，但不包括边框的尺寸

      • innerHeight()

      • innerWidth()

    • 包括内边距和边框的尺寸

      • outHeight()

      • outWidth()

• 文档模块

  • 添加节点

    • 向当前匹配的所有元素内部的最后/最前面插入指定内容

      • append(content)

      • prepend(content)

    • 将指定内容插入到当前所有匹配元素的最后/最前

      • after(content)

      • before(content)

  • 替换节点

    • replaceWidth(content):用指定内容替换 所有匹配的元素

  • 删除节点

    • empty():删除所有匹配元素的子元素(掏空)

    • remove():删除所有匹配的元素(自己及内部都删除)

• 筛选模块

  • 过滤

    • 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回

    • first()

    • last()

    • eq(index)

    • filter(selecter)

    • not(selecter)

    • has(selecter)

  • 查找后代/父/兄弟元素

    • 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回

    • children():子元素

    • find():后代元素

    • parent():父元素

    • prevAll():前面的所有兄弟元素

    • siblings():所有的兄弟元素

• 事件模块

  • 绑定事件

    • on('eventName',function(){}):通用的事件绑定方法

    • eventName(function(){})

    • hover(function(){},function(){}):同时绑定鼠标移入和移出事件

  • 解绑事件

    • off('eventName')

  • 事件委托

    • 理解：通过事件冒泡将子元素的事件委托给父元素处理，事件监听绑定在父元素上，但事件发生在子元素上，最终调用事件回调函数的是子元素：event.target

    • 绑定事件委托监听

      • delefate(selecter(子元素)，'eventName',function(event){})

    • 解绑事件监听

      • undelegate('eventName')

  • 相关知识

    • 事件坐标

      • 相对可视窗口左上角：event.clientX/eventclientY
        *相对页面左上角：event.pageX/event.pageY

      • 相对当前元素左上角：event.offsetX/event.offsetY

    • 阻止事件冒泡：event.stopPropagation();

    • 取消事件的默认行为：event.preventDefault();

• 动画效果

  • 滑动动画

    • 不断改变元素的高度来实现

    • slideDown():带动画的展开

    • slideUp():带动画的收缩

    • slideToggle():切换展开和收缩

  • 淡出淡入动画

    • 不断改变元素的透明度来实现

    • fadeIn():带动画的显示

    • fadeOut():带动画的隐藏

    • fadeToggle():带动画的切换显示和隐藏

  • 显示/隐藏

    • show():显示

    • hide():隐藏

    • toggle():切换显示隐藏

  • 自定义动画

    • animate({结束时的样式}，time，function(){}) :自定义动画效果

    • stop():停止动画

• jQuery插件

  • 扩展插件

    • 扩展jQuery插件的工具方法

      $.extend({
        xxx.function(){}
      })
      $.xxx()

    • 扩展jQuery对象的方法

      $.fn.extend({
        xxx:function(){}
      })
      $().xxx()

  • jQuery插件

    • 理解：基于jQuery编写的扩展库

    • 网址：http://plugins.jquery.com/

    • jQuery UI: http://jqueryui.com/