JQuery视屏笔记
一、项目中引入JQuery
1.首先，在工程中导入jquery的压缩包，并在.JSP或者.html页面的<head><script type="text/javascript" src="jquery压缩包所在路径"></script></head>标签中引入对应的jquery压缩包即可，引入jquery压缩包后，就可以在<head>标签后续中使用对应的JQuery对象了
2.JQuery默认进入的方法为
$(function(){
具体的代码块
})
这个方法相当于window.onload()方法
3.JQuery对象和DOM对象之前的相互转换
按照约定，页面定义的JQuery对象均以$美元符开头表示的。例如 var $btn=$("btn")
由于JQuery对象是一个数组对象，那么可以通过数组下标取值的方式将JQuery对象转换成DOM对象，也可以通过对应的get()方法获取对应的DOM对象。例如:
var btn=$("button")[0]
var btn=$("button").get(0)
将DOM对象转换成JQuery对象
var btn=document.getElementById("btn")
var $btn=$(btn)
二、JQuery选择器
1、5个基本选择器
id选择器、类选择器、标签选择器、* 所有元素选择器、(selector1,selector2.......)多个选择器结果求并集
2、4个层级选择器
两个元素之间以空格隔开，例如
selector1 selector2 则表示当前selector1下的所有selector2后代元素
selector1>selector2 表示子元素
selector1+selector2 表示第一个元素的下一个相邻的同级元素
selector1~selector2 表示第一个元素的所有同级元素
3、过滤选择器
过滤选择器分为多种，基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素属性选择器
1>、基本过滤选择器分为10种
:first、:last、:not()、:even、:odd、:eq、:gt、:lt、:header(备注:这个选择器是需要特殊处理的选择器)、:animate
2>、内容过滤选择器分为四种
:content()、:empty、:has()、:parent
3>、可见性过滤选择器分为两种
:hidden、:visible
同时衍生出来的方法有方法的连缀用法，了解show()方法，attr()方法，val()方法的用法
4>、属性过滤选择器
属性过滤选择器有7种，属性过滤选择器不以":"开头，它的七种选择器分别如下所示
[属性值] 表示包含某个属性的元素
[属性值='内容'] 表示某个属性等于内容值的元素
[属性值!='内容'] 同上，不等于
[属性值^='内容'] 属性值以内容开头的元素
[属性$='内容'] 属性值以内容结尾的元素
[属性*='内容'] 属性值包含内容的元素
[属性值1][属性值2][属性值3]........元素满足属性值一，属性值二，属性值3等等
5>、子元素过滤选择器
子元素过滤选择器分为四种
:nth-child(可以为索引，奇偶值，表达式等等)
:first-child 第一个子元素选择器
:last-child 最后一个子元素选择器
:only-child 只有一个子元素的选择器
6>、表单元素选择器
表单元素选择器共有11种，分别如下:
:text
:input
:password
:radio
:checkbox
:submit
:imag
:reset
:button
:file
:hidden
7>、表单元素属性选择器
表单元素属性选择器总共有4种，分别为
:disabled 选取可用的表单元素
:enable 选取不可用的表单元素
:checked 选取被选中的<Input>元素
:selected 选取被选中的<option>元素
三、JQuery中的方法
1.查找结点
1.find()方法
通过find方法去查找某个元素，该方法的返回值为找到的元素的JQuery对象
2.通过选择器找到对应的元素
2.创建节点
3.插入结点
append():向对应元素的子节点最后一位插入一个新元素
appendTo():同上，两者的区别在于主谓互换
prepend():将对应元素插入为被插入元素的第一个子元素
prependTo():
insertAfter():同append()方法一样
after():
insertBefore():同prepend()方法一样
before():
4.删除、清空结点
empty():
remove():
5.复制节点
clone():克隆一个新节点，不会克隆对应的
clone(true):深度克隆节点，并克隆它的相应的事件信息
6.替换节点
replaceWith():
replaceAll():
7.包裹节点
wrap():
wrapAll():
wrapInner():
8.操作样式
JQuery中常用操作样式的方法有如下几种:
atrr():设置元素属性
addCss():为元素添加样式属性
removeCss():为元素移出样式属性
hasCss():判断元素是否有某种样式
toggleCss():切换元素的样式
opacity 透明度属性
height():获取元素的高度
width():获取元素的宽度
offset():top、left属性
9.window.onload和$(document).ready()的区别
1>执行的时间点。window.onload必须等到页面所有的东西加载完毕才可以执行，$(document).ready()则只需要等到页面所有的元素结构加载完毕即可执行，外部引入页面则不需要管
2>个数。前者只能有一个，当有多个时，后者会将前者覆盖，后者可以有多个，并且不会覆盖
3>是否能简写。前者不可以简写，后者则可以简写为$(function(){})
10.JQuery中常用的方法
bind():为元素绑定对应的事件，该方法有两个参数，第一个参数为对应的事件类型，第二个参数为对应的事件的响应函数，例如:为元素div绑定点击事件。$("div").bind(function(){})
is():判断某个对象是否存在某个选择器，若是存在，则返回值为true,若是不存在，则返回值为false,例如判断某个元素是否存在:hidden过滤选择器
$("div").is(":hidden")
hover(函数1，函数2):鼠标悬停方法
当鼠标放在指定的元素上时，执行函数1，当鼠标移出时，执行函数2。
mouseover():鼠标移入事件
mouseout():鼠标移出事件
toggle(函数1,函数2,函数3..........):当鼠标点击第一次时，执行函数1，当点击第二次时，执行函数2，点击第三次时，执行函数3等等等，等所有函数执行完毕后又从第一个函数开始往后执行
pageX、pageY:这是是事件对象的两个属性，只有事件对象在当前页面x,y的位置
unbind():解除事件的绑定
one():为指定元素添加一次性事件绑定
show():展示某个元素
hide():隐藏某个元素
slideDown():向下展示某个元素
slideUp():向上隐藏某个元素
slide两个方法是通过高度去隐藏元素的
fadeIn():展示某个元素
fadeOut():隐藏某个元素
通过透明度去隐藏某个元素的
toggle():可以切换元素的可见状态
slideToggle(函数1，函数2):通过高度改变元素可见状态
fadeTaggle(函数1，函数2):通过透明度改变元素的可见状态
fadeTo():通过改变元素的透明度达到隐藏元素的状态
