一、项目中引入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():通过改变元素的透明度达到隐藏元素的状态
网友评论