1.什么是JQuery,有什么好处
JQuery是一个JavaScript框架或脚本库.它将一些原始js脚本封装,提供了一些函数,便于脚本开发.
类似jQuery框架很多,例如prototype,ExtJs,yahoo等.
好处就是:应用方便,便于客户端JavaScript和Ajax编程.
2.jQuery框架原理
jQuery提供了很多功能函数和多种类型的选择器.
1)利用jQuery编程步骤:
a.先利用选择器将页面中的元素获取.
b.然后使用函数进行操作.
2)什么是jQuery对象
利用jQuery选择器选出的对象才是jQuery对象.
jQuery对象是一个集合,集合元素是原有js中DOM对象.
注意:只有jQuery对象才可以使用jQuery提供的函数
3)对象类型的转换
a.将一个DOM对象转换成jQuery对象
$(DOM对象)
b.将一个jQuery对象转换成DOM对象
//获取jQuery对象集合中的第一个DOM对象
jQuery对象[0] 或者 jQuery对象.get(0)
c.将一个字符串转换成jQuery对象
$(字符串)
4)页面载入完毕后执行指定函数fn.
$(document).ready(fn); 或者 $(fn);
3.jQuery选择器
1).基本选择器
a.按id属性值选择,如果有特性元素如.,需要使用\\转义
$("#id值") $("#b\\.d") id="b.d"
b.按class属性值选择,可以有多个,只要有一个符合就返回结果
$(".class值")
c.按元素名称选择,指向DOM节点的标签名,用于搜索元素
$("元素名称")
d.选取页面中所有元素
$(*)
e.选取多个元素,并将匹配到的元素合并到一个结果内
$("#c1,#c2,...")
2).层级选择器
a.父子关系,在给定的父元素下匹配所有的子元素
$("选择器1>选择器2")
b.祖先后代关系,在给定的祖先元素下匹配所有的后代元素
$("选择器1 选择器2")
c.前后关系,匹配所有紧接在 prev 元素后的 next 元素
$("pre + next")
d.兄弟关系,匹配prev元素之后的所有siblings元素
$("选择器1 ~ 选择器2")
$("form > a")表单中的第一个a
<form>
<a><a>
<div>
<a></a>
</div>
</form>
3).简单选择器
a.匹配找到的第一个元素 :first 如:表格的第一行 tr:first
b.匹配找到的最后一个元素 :last 如:表格的最后一行 tr:last
c.匹配所有索引值为偶数的元素,从0开始计数 :even 如:查找表格的1、3、5...行(即索引值0、2、4...)
d.匹配所有索引值为奇数的元素,从0开始计数 :odd 如:查找表格的2、4、6行(即索引值1、3、5...)
e.选指定元素 :eq(索引) 如:$("tr:eq(1)") 找到第一行元素
f.匹配所有大于给定索引值的元素 :gt(索引)
g.匹配所有小于给定索引值的元素 :lt(索引)
h.去除所有与给定选择器匹配的元素 :not(选择器) 如:$("input:not("#b1")")
i.匹配如 h1, h2, h3之类的标题元素 :header
j.匹配所有正在执行动画效果的元素 :animated
4).内容选择器
a.根据指定文本信息选择
:contains(text)
b.匹配没有子元素或者文本为空
:empty
<div>jack1234</div>
<div></div>
<div/>
$("div:contains('jack')")
$("div:empty")
c.匹配含有选择器所匹配的元素的元素 :has(元素) 如:$("div:has(p)")
d.匹配含有子元素或者文本的元素 :parent
5).可见性选择器
a.选择不可见元素
:hidden
b.选择可见元素
:visible
6).属性选择器
a.按属性值做条件选择
[属性名=属性值]
$("input[name='name属性值']")
7).表单元素选择器
a.匹配所有 input, textarea, select 和 button 元素
:input
b.选择type="text"类型的输入框
:text
b.其他:password,:hidden,:radio,:button,:image,:file
8).表单对象属性选择器
a.选择可用表单元素
:enabled 如:查找所有可用的input元素 $("input:enabled")
b.选择不可用表单元素
:disabled
c.匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:checked
d.选择被选中的select的option
:selected
4.属性和样式函数
1)属性函数
a.属性操作
attr(属性名);//返回属性值
attr(属性名,属性值);//设置属性名=属性值
b.value属性操作
val();//返回value属性值
val(值);//设置value=值
c.获取div或span等元素的文本信息操作
text();//返回元素中的文本内容
text(值);//设置元素中的文本内容
d.获取和设置div等元素的信息,当作html信息处理
html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(值);设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
e.class属性操作
addClass(值);//设置元素class="值"
removeClass(值);//删除class属性中的值
2)css样式函数
a.css样式控制
css(样式属性);//获取样式属性值
css(样式属性,值);//设置样式属性值
b.宽和高的控制
width();//获取元素的宽
width(值);//设置元素的宽度
height();//获取元素的高
height(值);//设置元素的高度
5.事件函数
1)页面载入
$(document).ready(fn)或$(fn)
2)基本事件
click();//触发单击事件,执行单击事件
click(fn);//为元素绑定一个单击处理fn(函数)
focus();//获取焦点
focus(fn);
change();//选项改变
change(fn);
blur();//失去焦点
blur(fn);
mouseover;
mouserout;
hover;=mouseover+mouseout
unload(fn);//设置浏览器卸载页面前执行
3)事件切换函数
a.hover(over,out);鼠标移上去和移开两个事件,移上去执行over函数,移开执行out函数
b.toggle(fn1,fn2,...);为一个元素绑定多个不同的事件,每次单击调用不同的fn.
4)事件处理函数
a.bind("事件类型",fn);为元素绑定指定类型的事件处理函数
$("#b1").click(fn);
$("b1").bind("click",fn);
b.unbind("事件类型");
为元素取消绑定的处理函数
$("#b1").unbind("click");
$("#b1").unbind();//所有的事件取消
c.trigger("事件类型")
触发元素绑定的事件处理.
$("#b1").click();
$("#b1").trigger("click");
d.live("事件类型",fn)
为现有和将来的动态添加的元素
绑定指定类型的事件
6.文档处理
1)创建文档对象
$("字符串")
2)将文档对象添加到页面
append(对象);//将对象插入到元素内部末尾处
prepend(对象);//将对象值插入到元素内部的前面
after(对象);//将对象值插入到元素后面
before(对象);//将对象值插入到元素前面
3)将文档元素删除
empty();//将元素内容清空
remove();//将元素删除
4)将文档元素复制
clone();//复制元素
clone(true);//深度复制,可以将关联事件复制
5)将文档元素利用新元素包裹起来
wrap(html);//利用指定的html元素将原有元素包裹起来
6)将文档元素替换
replaceWith(html);//利用html元素替换原有文档对象
========================================================================================
1.特效函数
主要实现隐藏和显示功能。
1)基本
show();//将元素显示
show(speed);//在指定speed时间内完成显示
speed参数值有:'slow','normal','fast',也可以使用数字1000,2000(毫秒)
hide();//将元素隐藏
hide(speed);//在指定时间内隐藏
toggle();//切换隐藏和显示
2)滑动效果(改变元素宽和高)
slideDown(speed);//将元素按照宽度和高度变化的形式显示
slideUp(speed);//将元素隐藏
3)淡入淡出效果(改变元素的透明度)
fadeIn(speed);//将元素显示
fadeOut(speed);//将元素隐藏
2.筛选函数
基于现有jQuery元素对象查找其他元素.
1)过滤
a.eq(索引)
获取jQuery对象集合中某一个元素
b.not(选择器)
从jQuery对象集合中将符合选择器的元素排除,返回剩下的元素.
c.is(选择器)
从jQuery对象集合中获取符合选择器的元素
d.slice(begin,[end])
从jQuery对象集合中获取begin-end的子元素
2)查找
a.find(选择器)
从当前jQuery集合中将符合选择器的后代元素返回.
b.children(选择器)
从当前jQuery集合中将符合选择器的子元素返回
c.parent()
获取当前jQuery对象的父元素
d.siblings()
获取当前jQuery对象的兄弟
3.工具函数
a.$.trim(str)
字符串过滤空格,只过滤前后空格
b.$.each(集合,fn)
循环操作,每一个元素触发fn处理
===================================================================
1.Ajax函数
a.$.get()以ajax方式发送一个get的url请求
$.get(
url,//请求url
data,//请求提交的数据
function,//成功处理的回调函数
returnDataType//服务器返回的数据类型
);
b.$.post()以ajax方式发送一个post的url请求,与$.get参数相同
c.$.getJSON()以ajax方式发送一个get的url请求,服务器返回的数据是json
$.getJSON(
url,//请求url
data,//请求提交的数据
function,//成功处理的回调函数
);
d.$.getScript()以ajax方式发送一个get的url请求,服务器返回的数据是script脚本.
利用该函数实现异步方式加载较大的js函数库
$.getScript("js/test.js")
e.$.ajax()
发送一个Ajax请求,该函数是jQuery底层实现,$.get()和$.post()基于$.ajax()函数实现.
$.ajax(
{
async:true,//同步false,异步true
data:json对象,//发送到服务器的数据
url:"ariline.do",//请求地址
success:fn,//请求处理成功后的回调函数
error:fn,//请求处理失败后的回调函数
dataType:"json"//服务器响应的数据类型
}
);
f load()函数:采用ajax方式加载一个jsp,填充到指定的div或span中.
div对象.load("text.jsp");//将text.jsp加载到div对象中
2)Ajax事件函数:可以在请求处理中追加处理
ajaxStart(fn);在ajax请求处理开始时,执行fn
ajaxSuccess(fn);在ajax请求处理从成功时,执行fn
ajaxError(fn):在ajax请求处理失败时,执行fn
工具性函数
$.("#f").serialize();获取输入的参数 结果如name="sd"&passw=""
2.jQuery插件(了解)
1)插件的使用步骤:
a.首先引入jquery核心脚本库
b.然后引入jquery插件脚本库
c.利用jquery插件提供的扩展函数
JQuery是一个JavaScript框架或脚本库.它将一些原始js脚本封装,提供了一些函数,便于脚本开发.
类似jQuery框架很多,例如prototype,ExtJs,yahoo等.
好处就是:应用方便,便于客户端JavaScript和Ajax编程.
2.jQuery框架原理
jQuery提供了很多功能函数和多种类型的选择器.
1)利用jQuery编程步骤:
a.先利用选择器将页面中的元素获取.
b.然后使用函数进行操作.
2)什么是jQuery对象
利用jQuery选择器选出的对象才是jQuery对象.
jQuery对象是一个集合,集合元素是原有js中DOM对象.
注意:只有jQuery对象才可以使用jQuery提供的函数
3)对象类型的转换
a.将一个DOM对象转换成jQuery对象
$(DOM对象)
b.将一个jQuery对象转换成DOM对象
//获取jQuery对象集合中的第一个DOM对象
jQuery对象[0] 或者 jQuery对象.get(0)
c.将一个字符串转换成jQuery对象
$(字符串)
4)页面载入完毕后执行指定函数fn.
$(document).ready(fn); 或者 $(fn);
3.jQuery选择器
1).基本选择器
a.按id属性值选择,如果有特性元素如.,需要使用\\转义
$("#id值") $("#b\\.d") id="b.d"
b.按class属性值选择,可以有多个,只要有一个符合就返回结果
$(".class值")
c.按元素名称选择,指向DOM节点的标签名,用于搜索元素
$("元素名称")
d.选取页面中所有元素
$(*)
e.选取多个元素,并将匹配到的元素合并到一个结果内
$("#c1,#c2,...")
2).层级选择器
a.父子关系,在给定的父元素下匹配所有的子元素
$("选择器1>选择器2")
b.祖先后代关系,在给定的祖先元素下匹配所有的后代元素
$("选择器1 选择器2")
c.前后关系,匹配所有紧接在 prev 元素后的 next 元素
$("pre + next")
d.兄弟关系,匹配prev元素之后的所有siblings元素
$("选择器1 ~ 选择器2")
$("form > a")表单中的第一个a
<form>
<a><a>
<div>
<a></a>
</div>
</form>
3).简单选择器
a.匹配找到的第一个元素 :first 如:表格的第一行 tr:first
b.匹配找到的最后一个元素 :last 如:表格的最后一行 tr:last
c.匹配所有索引值为偶数的元素,从0开始计数 :even 如:查找表格的1、3、5...行(即索引值0、2、4...)
d.匹配所有索引值为奇数的元素,从0开始计数 :odd 如:查找表格的2、4、6行(即索引值1、3、5...)
e.选指定元素 :eq(索引) 如:$("tr:eq(1)") 找到第一行元素
f.匹配所有大于给定索引值的元素 :gt(索引)
g.匹配所有小于给定索引值的元素 :lt(索引)
h.去除所有与给定选择器匹配的元素 :not(选择器) 如:$("input:not("#b1")")
i.匹配如 h1, h2, h3之类的标题元素 :header
j.匹配所有正在执行动画效果的元素 :animated
4).内容选择器
a.根据指定文本信息选择
:contains(text)
b.匹配没有子元素或者文本为空
:empty
<div>jack1234</div>
<div></div>
<div/>
$("div:contains('jack')")
$("div:empty")
c.匹配含有选择器所匹配的元素的元素 :has(元素) 如:$("div:has(p)")
d.匹配含有子元素或者文本的元素 :parent
5).可见性选择器
a.选择不可见元素
:hidden
b.选择可见元素
:visible
6).属性选择器
a.按属性值做条件选择
[属性名=属性值]
$("input[name='name属性值']")
7).表单元素选择器
a.匹配所有 input, textarea, select 和 button 元素
:input
b.选择type="text"类型的输入框
:text
b.其他:password,:hidden,:radio,:button,:image,:file
8).表单对象属性选择器
a.选择可用表单元素
:enabled 如:查找所有可用的input元素 $("input:enabled")
b.选择不可用表单元素
:disabled
c.匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:checked
d.选择被选中的select的option
:selected
4.属性和样式函数
1)属性函数
a.属性操作
attr(属性名);//返回属性值
attr(属性名,属性值);//设置属性名=属性值
b.value属性操作
val();//返回value属性值
val(值);//设置value=值
c.获取div或span等元素的文本信息操作
text();//返回元素中的文本内容
text(值);//设置元素中的文本内容
d.获取和设置div等元素的信息,当作html信息处理
html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(值);设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
e.class属性操作
addClass(值);//设置元素class="值"
removeClass(值);//删除class属性中的值
2)css样式函数
a.css样式控制
css(样式属性);//获取样式属性值
css(样式属性,值);//设置样式属性值
b.宽和高的控制
width();//获取元素的宽
width(值);//设置元素的宽度
height();//获取元素的高
height(值);//设置元素的高度
5.事件函数
1)页面载入
$(document).ready(fn)或$(fn)
2)基本事件
click();//触发单击事件,执行单击事件
click(fn);//为元素绑定一个单击处理fn(函数)
focus();//获取焦点
focus(fn);
change();//选项改变
change(fn);
blur();//失去焦点
blur(fn);
mouseover;
mouserout;
hover;=mouseover+mouseout
unload(fn);//设置浏览器卸载页面前执行
3)事件切换函数
a.hover(over,out);鼠标移上去和移开两个事件,移上去执行over函数,移开执行out函数
b.toggle(fn1,fn2,...);为一个元素绑定多个不同的事件,每次单击调用不同的fn.
4)事件处理函数
a.bind("事件类型",fn);为元素绑定指定类型的事件处理函数
$("#b1").click(fn);
$("b1").bind("click",fn);
b.unbind("事件类型");
为元素取消绑定的处理函数
$("#b1").unbind("click");
$("#b1").unbind();//所有的事件取消
c.trigger("事件类型")
触发元素绑定的事件处理.
$("#b1").click();
$("#b1").trigger("click");
d.live("事件类型",fn)
为现有和将来的动态添加的元素
绑定指定类型的事件
6.文档处理
1)创建文档对象
$("字符串")
2)将文档对象添加到页面
append(对象);//将对象插入到元素内部末尾处
prepend(对象);//将对象值插入到元素内部的前面
after(对象);//将对象值插入到元素后面
before(对象);//将对象值插入到元素前面
3)将文档元素删除
empty();//将元素内容清空
remove();//将元素删除
4)将文档元素复制
clone();//复制元素
clone(true);//深度复制,可以将关联事件复制
5)将文档元素利用新元素包裹起来
wrap(html);//利用指定的html元素将原有元素包裹起来
6)将文档元素替换
replaceWith(html);//利用html元素替换原有文档对象
========================================================================================
1.特效函数
主要实现隐藏和显示功能。
1)基本
show();//将元素显示
show(speed);//在指定speed时间内完成显示
speed参数值有:'slow','normal','fast',也可以使用数字1000,2000(毫秒)
hide();//将元素隐藏
hide(speed);//在指定时间内隐藏
toggle();//切换隐藏和显示
2)滑动效果(改变元素宽和高)
slideDown(speed);//将元素按照宽度和高度变化的形式显示
slideUp(speed);//将元素隐藏
3)淡入淡出效果(改变元素的透明度)
fadeIn(speed);//将元素显示
fadeOut(speed);//将元素隐藏
2.筛选函数
基于现有jQuery元素对象查找其他元素.
1)过滤
a.eq(索引)
获取jQuery对象集合中某一个元素
b.not(选择器)
从jQuery对象集合中将符合选择器的元素排除,返回剩下的元素.
c.is(选择器)
从jQuery对象集合中获取符合选择器的元素
d.slice(begin,[end])
从jQuery对象集合中获取begin-end的子元素
2)查找
a.find(选择器)
从当前jQuery集合中将符合选择器的后代元素返回.
b.children(选择器)
从当前jQuery集合中将符合选择器的子元素返回
c.parent()
获取当前jQuery对象的父元素
d.siblings()
获取当前jQuery对象的兄弟
3.工具函数
a.$.trim(str)
字符串过滤空格,只过滤前后空格
b.$.each(集合,fn)
循环操作,每一个元素触发fn处理
===================================================================
1.Ajax函数
a.$.get()以ajax方式发送一个get的url请求
$.get(
url,//请求url
data,//请求提交的数据
function,//成功处理的回调函数
returnDataType//服务器返回的数据类型
);
b.$.post()以ajax方式发送一个post的url请求,与$.get参数相同
c.$.getJSON()以ajax方式发送一个get的url请求,服务器返回的数据是json
$.getJSON(
url,//请求url
data,//请求提交的数据
function,//成功处理的回调函数
);
d.$.getScript()以ajax方式发送一个get的url请求,服务器返回的数据是script脚本.
利用该函数实现异步方式加载较大的js函数库
$.getScript("js/test.js")
e.$.ajax()
发送一个Ajax请求,该函数是jQuery底层实现,$.get()和$.post()基于$.ajax()函数实现.
$.ajax(
{
async:true,//同步false,异步true
data:json对象,//发送到服务器的数据
url:"ariline.do",//请求地址
success:fn,//请求处理成功后的回调函数
error:fn,//请求处理失败后的回调函数
dataType:"json"//服务器响应的数据类型
}
);
f load()函数:采用ajax方式加载一个jsp,填充到指定的div或span中.
div对象.load("text.jsp");//将text.jsp加载到div对象中
2)Ajax事件函数:可以在请求处理中追加处理
ajaxStart(fn);在ajax请求处理开始时,执行fn
ajaxSuccess(fn);在ajax请求处理从成功时,执行fn
ajaxError(fn):在ajax请求处理失败时,执行fn
工具性函数
$.("#f").serialize();获取输入的参数 结果如name="sd"&passw=""
2.jQuery插件(了解)
1)插件的使用步骤:
a.首先引入jquery核心脚本库
b.然后引入jquery插件脚本库
c.利用jquery插件提供的扩展函数