首页 > 代码库 > jquery
jquery
1.加载DOM
使用任何框架时,通常都会与文档对象(DOM)交互。但是为了这种交互,必须首先确定整个DOM已经加载。
(1)在javascript编程中,通常在采取行动之前等待窗口加载:
window.onload=function(){
// Do whatever here.
}
或使用匿名函数:
(
function(){
// Do whatever here.
}
)()
(2)在使用jquery中,等价的做法:
$(document).ready(
function(){
// Do whatever here.
}
)
或简化为:
$(
function(){
//Do whatever here.
}
)
2.选择元素(更多内容参考juery手册)
引用页面元素对于添加事件处理区,操作DOM,读取表单值来说是必需的。
(1)在javascript中,可以使用document对象的getElementById(),getElementByTagName()及其他技术来完成此工作。
(2)在jquery中,通过$()函数进行选择。
①用css选择符选择其他页面:
#id //根据给定的ID匹配一个元素。
.class //根据给定的类匹配元素
element //根据给定的元素名匹配所有元素
使用时,将选择符作为$()函数的参数,并加引号,如:
$(‘#name‘);//选择id值name的元素
这些规则可以合并使用,如:
$(‘img.langscpe‘);//选择class为landscape的所有图像
$(‘#loginForm input‘);//选择在id为longinForm的元素中找到所有输入元素
3.操纵元素(更多内容参考juery手册)
选择元素后,可以应用许多jquey函数进行其他操作(更多内容参考jquery手册)
(1)修改选中元素的属性----->>>attr()
attr(arg0,arg1)//方法修改选中元素的属性,支持“链式”函数
//第一个参数:是访问的属性,第二个参数:设置的新值。
如: ①var submit=$(‘#submitButtonId‘)
submit.attr(‘disabled‘,‘disabled‘);
②“链式”方式修改
$(‘#submitButtonId‘).attr(‘disabled‘,‘disabled‘).attr(‘value‘,‘...progressing...‘);
(2)修改选中元素的CSS样式---->>>addClass() ,removeClass(),toggleClass(),css()
$(‘#blockId‘).addClass(‘emphasis‘);//添加class样式
$(‘#blockId‘).removeClass(‘emphasis‘);//移除class样式
$(‘#blockId‘).toggleClass(‘emphasis‘);//切换类的应用;如果选中的元素没有应用类则添加,否则删除类。
$(‘#blockId‘).css(arg0,arg1);//改变单独的样式。第一个参数是样式名称,第二个参数是新值。
(3)修改选中元素的内容----->>>val();
var comments= $(‘comments‘);
var value=http://www.mamicode.com/comments.val();//获取当前值
if(value.length>100){//如果元素当前内容长度大于100
comments.val(value.slice(0,100));//设置内容长度为100
4.DOM操作(更多内容参考juery手册)
使用举例:
var submit= $(‘#submitButtonId‘);//获得表单元素引用
submit.before(‘<p>new paragraph</p>‘);//在表单之前添加一个新段落
5.事件处理(更多内容参考juery手册)
(1)jquery事件处理器语法格式:
selection.eventTyep(function);
eventType值根据选择的元素不同而不同,常见值有:change,focus,mouseover,click,submit,select等
如:$(‘img‘).mouseover(function(){
//Do something here.
});
注意:jquery1.7版本添加了新的on()和off()方法,用于添加或者移除事件处理器
(2)jquery还定义了些将更复杂的事件处理器与元素关联的方法,
例如:hover(fn1,fn2)方法,鼠标移过函数作为第一参数,鼠标移出函数作为第二个参数,可以在一步中创建两个事件处理器
6.Ajax操作
(1) ajax使用举例(验证用户名是否已注册)
$.ajax({
url:"/goods/UserServlet",//要请求的servlet
data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
type:"POST",
dataType:"json",
async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
cache:false,
success:function(result) {
if(!result) {//如果校验失败
$("#" + id + "Error").text("用户名已被注册!");
showError($("#" + id + "Error"));
return false;
}
}
});
(2)Ajax请求方法
$.ajax(options);//参数options代表用于配置的请求选项对象,
//使用时,至少应包含一下7个参数
url:请求的资源
data:给服务器的数据
type:请求类型(常见的有POST和GET)
dataType:请求响应数据类型
async:是否异步请求,如果是异步,那么不会等待服务器返回,函数会向下运行,true:表示异步
cache:是否缓存
succes:fn 指定ajax请求成功成功完成时调用的函数。成功意味着,readyState值为4,并且返回一个正常的状态码,函数fn不需要检查这些状态
;该函数至少有一个参数(服务器响应数据);对象的最后一个属性
7.jquery插件
框架具备利用插件快速添加复杂功能的能力,这是原生javascript不具备的能力。
jquery ui: http://jqueryui.com //定义了许多有用途的小部件(Widget),如:折叠控件,自动完成,日期选择,选项卡,以及拖放,改变大小,排序等优秀特性
jquery