jquery介绍

1.jQuery环境搭建

下载jquery包地址：http://jquery.com/

下载版本：最新版本jquery3.2.1

jquery-3.2.1.js和jquery-3.2.1.min.js

jquery-3.2.1.js：jquery未压缩版，提供开发和学习使用

jquery-3.2.1.min.js：jquery压缩版，提供工程项目开发部署

引入jQuery包：<scripttype="text/javascript" src="jquery-3.2.1.min.js"></script>

2.jQuery选择器

（1）基本选择器：$("#id"),$(".class"),$("element"),$("*")

(2)层级选择器：

$("sele,sele"),$("selesele"),$("sele>sele"),$("sele+sele")

(3) 基本过滤选择器：:first :last :not(selector) :even :odd

            :eq(index) :gt(index) :lt(index)

            :header :animated :focus

(4)属性过滤选择器：[attr],[attr=v],[attr~=v],

[attr|=v],[attr^=v],[attr$=v],[attr*=v]

(5)子元素过滤选择：:nth-child:first-child :last-child :only-child

(6)元素内容过滤选择：:contains(text):empty :has(selector) :parent

(7)表单元素过滤选择：:input :button:text :password

:radio:checkbox :submit :reset :file

(8)表单属性过滤选择：:enabled:disabled :checked :selected

(9) 过滤筛选:eq、first、last、hasClass、filter、is、map、has、not、slice

(10)查找：children、closest、find、next、nextall、nextUntil、offsetParent、parent、parents、parentsUntil、prev、prevall、prevUntil、siblings

(11)选择器串联：add、andSelf、contents、end

3.事件

on/off：绑定事件

格式：selector.on(events（事件名）,[selector]（子选择器名）,[data]（参数传递）,fn（事件触发后执行的函数）)

常用事件：

    change()：当元素的值改变时发生 change 事件

click()：当单击元素时，发生 click 事件

dblclick()：当双击元素时，会发生 dblclick 事件

focus()、focus()、focusout()、blur()

keydown、keyup、keypress，mousedown、mouseenter、mouseleave、mouseleave、mousemove、mouseout、mouseover、mouseup、resize、scroll、select、submit、unload。

4.入口函数

（1）定义方式：$(function(){});

$(document).ready(function(){});

jQuery(function(){});

（2）jquery入口函数和js入口函数区别:

js入口函数只能有一个，多个会互相覆盖;

js入口函数需要当前page所有资源全部加载完毕后执行，jquery入口函数只要加载完文档结构就执行。

5.jquery常用的核心元素

JQuery（HTML）/$（HTML）:动态创建DOM元素的HTML标记字符串

each（callbackfn）

size()、length：获取返回数据的大小/内容个数

index（）、get（）：搜索匹配的元素并返回索引、根据索引获取指定元素

6. 文档DOM节点操作函数分析

(1)DOM节点内部插入节点：append/appendTo、prepend/prependTo

(2)DOM节点外部（前后）插入节点：after/insertAfter、before/insertBefore

(3)DOM节点外层包裹节点操作：wrap、unwrap、wrapInner

(4)DOM节点删除：empty、remove（元素属性同时被移除）、detach（元素属性被保留）

(5)DOM节点克隆：clone

7.属性操作

  属性取值：attr(“name”)

单数属性设置：attr(“name”,“value”|fn)

多个属性设置：attr({name:“value”|fn,name:“value”|fn,...});

移除属性：removeAttr（“name”）

添加class类：addClass(“name”);

移除class类：removeClass（“name”）；

切换删除和添加class类：toggleClass（“name”）；

插入文本：html（content|fn）、text（content|fn）

8. 样式操作分析

样式取值：css(“name”)

单数样式设置：css(“name”,“value”|fn)

多个样式设置：css({name:“value”|fn,name:“value”|fn,...});

位置设置：offset、position、scrollTop、scrollLeft

尺寸设置：height、width、innerHeight、innerWidth、outerHeight、outerWidth。