来自:http://blog.csdn.net/flyingpig4/article/details/5353698
最近学习了一下<锋利的JQuery>,写一些自己的总结:
页面及动作初始化操作,使用ready
function sayhello(){
alert("hello,world");
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]});
$("tr").click(function(){.html())});
$("input").click(function(){.html())});
}
function sayhello1(){
//#用于取ID,.class用于取css样式 div用于直接的标签,通常得到一个数祖值
alert("hello,world");
//输出相应的文本值,value值,html文档
alert($("#world").val());
alert($("#no").text());
alert($("#no").html());
//改变背景色,利用css格式
$("#backtd").css("backgroundColor","blue");
//渐进渐出条
$("#no").fadeIn("fast");
$("#no").fadeOut("slow");
$("#no").click(function(){});
$("#no").click(sayhello());
$("#no").slideUp("slow");
$("#no").slideDown("slow");
}
function changecolor()
{
alert();
this.backgroundColor="red";
}
$(document).ready(function(){$("#yes").click(sayhello1)});
$(document).ready(function(){$("#mydiv").click(function sayhi()
{
alert("waht");
})});
$(document).ready(sayhello1);
$(document).ready(function(){$("a").click(sayhello1)});
//用toggle()方法实现隐藏,显示
$(function(){
$("#title").toggle(
function(){
$("#mydiv").hide()
},function(){
$("#mydiv").show();
}
)
});
//直接调用 toggle()方法显示和隐藏,并且添加css样式
$(function(){
$("#title").toggle(
function(){
$("#title").addClass("highlight");
$("#nod").toggle();//直接调用 toggle()方法
},function(){
$("#title").removeClass("highlight");
$("#nod").toggle();
}
)
});
//最为简单的方式
$('#title').bind("mouseover mouseout",function(){$(#title).toggle("highlight")})
*/
// 为span元素绑定click事件,防止因为嵌套出现的重复提交
$(function(){
$('table').bind("click",function(event){
alert($("#mydiv").html());
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('div').bind("click",function(event){
alert($("#mydiv").html());
event.stopPropagation(); // 阻止事件冒泡
return false; //click也可以阻止,特别是在<a>标签下可以使用
});
// 为body元素绑定click事件
$("body").bind("click",function(){
alert($("#mydiv").html());
});
})
//$("#backtd").click(sayhello);
// $(document).ready(function({$("#backtr").click(changecolor)});
//DOM对象和Jquery对象互相转换
//由DOM转化为Jquery对象,在Jquery对象前加$批为Jquery对象
var a=document.getElementById("aaa");
var $a=$(a);
//由Jquery转化为DOM对象
var b=$a[0];
var c=$a.get(0);
Jquery过滤器
1.基本选择器
$(#id)获取id值
$("element")获取元素集合
$(.cssStyle)获取为css样式的元素集合
应用:
$(#id).css("color","#bbffaa");
2.层次选择器
$('body div') 获取body下所有div
$('div'>tr)获取div下的元素名为tr的子元素
$('#mydiv'~tr)=$('#mydiv'.nextAll())获取id为mmdiv后的所有同类元素的集合,如果#mydiv为div ,则获取其后所有div值
$('#mydiv'+tr)=$('#mydiv'.next())获取id为mmdiv后的下一个同类元素的集合,如果#mydiv为div ,则取紧跟其后的div值
$("#mydiv").silblings("div")获取除#mydiv之外,所有同类div集合,不分先后顺序,
应用:
$('body div').css("color","#bbffaa");
3.过滤选择器:注意用冒号隔开
$("div:first") 获取第一个div
$("div:last")获取最后一个div
$("div:not(接选择器,如.css("className"))")
$("tr:even")获取当前tr是否为偶数,可用其它元素代替
$("tr:odd")获取当前tr是否为奇,可用其它元素代替
$("input:eq(int index)")获取当前的索引数的input
$("input:gt(int index)")获取当前的索引数大于3的input
$("input:lt(int index)")获取当前的索引数小于3的input
应用:
$("div:first").css("color","#bbffaa");
4.内容过滤器:同样用冒号隔开
$("div:contains(text)")获取含量有text文本的div
$("div:empty")获取无子元素的div,包含文本元素
$("div:has(元素)")获取存在元素的div
$("div:parent")获取存在子元素的div,包含文本元素
应用:$("div:has(mini)")即存在css样式为mini的div类
5:可见性过滤器:
$('div:visiable')
$('div:hidden')
应用:
$('div:visiable').css("color","#ffaabb");
6.属性过滤选择器:用[]表示为属性过滤器
$('div[attribute]')选择存在attribute属性的div
$('div[attribute=value]')选择存在attribute属性等于value的div
$('div[attribute!=value]')选择存在attribute属性不等于value的div
$('div[attribute^=value]')选择存在attribute属性前缀等于value的div
$('div[attribute$=value]')选择存在attribute属性后缀等于value的div
$('div[attribute*=value]')选择存在attribute属性名字中存在等于value的div
$('div[select1][select2]')多个选择器一起使用
应用:
$('div[id]')存在属性为id的div
$('div[id=test]')存在属性为id且id值为test的div
7.子元素过滤器选择:
$('div:nth-child[index/odd/even/3n+1]')//index从1开始,odd,even为偶数,n从0开始
$('div:first-child')//第一个孩子
$('div:last-child')//最后一个孩子
$('div:only-child')//只存在这个孩子
应用:$('div:table:only-child')
8.表单对象属性:
$('div:enabled') //获取div下所有可用元素
$('div:disabled')//获取div下所有不可用元素
$('#muselect:selected')//获取myselect下的被选中的下拉框元素集合
$('#myinput:checked')//获取myinput下的被选中的多选框,单选框元素集合
应用:
$('div input:enabled').val("这里改变了");
$('#myinput:checked').text();
$('#myselect:selected').length;
//Jquery表单操作
1.文本框实现
//也可运用mouseover,mouseout实现
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
//blur为失去焦点时触发
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
})
2.多选框实现
//全选
$('[name=items]:checkbox').attr("checked",true);
//全不选
$('[name=items]:checkbox').attr("checked",false);
//反选
$('[name=items]:checkbox').each(function(){
$(this).attr("checked",!$(this).attr("checked"));
})
//获取选中值,并输出合值
var str="选中的值为:/r/n"
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+/r/n;
})
3.下拉选框实现
var $sel=$('#province options:selected');获取选中对象,注意为Jquery对象
var $rem=$sel.remove();删除当前选中值
$rem.appendto('#anoprovince')//添加到另外一个下拉框当中
或者转换为:$sel.appendto('#anoprovince');
全部添加则为var $sel=$('#province options');$sel.appendto('anoprovince');
双击选项直接添加 $('#province').doubleclick(function()$("#province options:selected",this).appendto('#anoprovince');});
4.行数奇偶判断
$("tr:odd").addClass();
$("tr:even").addClass();
$("tbody>tr:odd").addClass();
$("tbody>tr:even").addClass();
$("tr:contains('')").addClass();
5.网页选项卡
$(function(){
var $change=$('#mydiv ul li')
$change.click(){
$(this).addClass('highlight')
.silblings.removeClass('highlight');
var $indexnumber=$change.index(this);
$('#mydiv2>div').eq($indexnumber).show()
.silblings.hide();
}
})
//Jquery的ajax操作:分为三个层次
1.$.load()方法
load(url,[,data],[,callback])
eg:
$('#hello').load("test.html");
$('#hello').load("test.html .para");
$('#hello').load("test.html .para",{name:"hello",user:"world"},function(responseText,textStatus,XMLHttpRequest){});
$('#hello').load("test.html .para",{name:"hello",user:"world"},function(responseText,textStatus,XMLHttpRequest){});
2.$.get()方法
$.get(url,[,data],[,callback],[,type])
eg:
$.('#mydiv').click($.get("test.html",{username:$('#myusername').val(),password:$('#mypassword').val()},function(data,textStatus){
$("#mydiv").html(data);
解析XML文档
$.('#mydiv').click($.get("test.html",{username:$('#myusername').val(),password:$('#mypassword').val()},function(data,textStatus){
var username=$(data).find('comment').attr("username");
var password=$(data).find('comment comment').text();
var textHtml="<div class="comment">"+usernmae+"<p class='para'>"+password+"</p></div>";
$("#mydiv").html(textHtml);
}))
解析JSON文档,注意type标识为返回json数据类型
$.('#mydiv').click(function(){($.get("test.html",{username:$('#myusername').val(),password:$('#mypassword').val()},function(data,textStatus){
var username=data.username;
var password=data.password;
var textHtml="<div class="comment">"+usernmae+"<p class='para'>"+password+"</p></div>";
$("#mydiv").html(textHtml);
},"json"));
})
3.$.post()方法:操作方式与get()方法相同
post与get异同:1.get的参数通过URL进行传递;2,get会被浏览器缓存,相对而言安全性低;3,get一般存在大小限制,不超过2K
$.post(url,[,data],[,callback],[,type])
4.$.getScript()方法
实现动态加载js文件
eg:
function(){
$("#mybutton").click(){function(){
$.getScript('test.js');
}}
}
//存在回调函数
function(){
$("#mybutton").click(){function(){
$.getScript('test.js',fucntion(){
//处理结果
});
}}
}
5.$.getJson()方法
实现动态加载Json文件,与加载script文件相同
6.$.ajax()方法
要注意相应参数的设置
//Jquery的插件
1.表单验证插件:添加validation.js文件
可以有多种方式,如添加js文件后,设置class类型,或者直接判断name,设定验证规则,还可以自己添加验证信息
并不推荐设置class值来进行判断;
1):直接用name进行判断:
eg:$(document).ready(function(){
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
}
});
});
jsp页面:<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" />
2):输出为中文,直接添加jquery.validate.messages_cn.js类型
eg:就直接添加js类型,其它与上一致
注意:可在JS文件中修改相应的错误提示message
3):自定义验证信息:可自定义错误信息,并设置错误信息的格式,为commentForm添加了验证,包括rules,messages,以及错误样式
eg:
$(document).ready(function(){
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
},
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
errorElement: "em", //可以用其他标签,记住把样式也对应修改
success: function(label) {
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
2.Jquery表单Form插件
1) 概念:将表单升级为ajax方式,可直接对表单进行ajax操作,简单的应用如表单提交前创建进行验证,验证方法采用validate.js进行验证;
2)核心包括ajaxForm()方法和ajaxSubmit()方法;两个方法的应用相似,均可完成下列内容;
eg:
$('#myForm').ajaxForm(function(){
$('#mydiv').html("hello,world").show();
//return false;返回值为false的时候阻止表单提交;
})
3)为ajaxForm()和ajaxSubmit提供参数options,然后作为参数进行传递,也可直接把options的内容传递到ajaxForm当中
eg:
$(document).function.ready(){
var options={
target:'#mydiv';服务返回的数据更新id为mydiv的内容
beforeSubmit:showrequest;//表单提交之前进行的函数处理;
success:showresponse;//表单提交之后进行的函数处理;
resetForm:true;//表单成功提交后全部内容清空;
//dataType:null 返回的数据类型:可以为xml,json,script等等;
//timeout:3000; 限制请求的时间,不宜过短;
//clearForm:true;与resetForm相似,但是默认选项也会被清空;
}
$('myForm').ajaxForm(options);
}
function showrequest(formData,jqForm,options){
alert("提交前进行的函数操作");
//jqForm 是一个jQuery对象, 他包装了表单的dom元素.可将其转换为dom方式
var formstring=jqForm[0];
if(!formstring.name.value||!formstring.password.value)
{
return false;
}
else {
var querystring=$.param(formData)//转换为url请求参数的格式name=fjfj$password=fd
alert(querystring);
for(var i=0 ;i<formData.length;i++)
{
if(!formData[i])
{
alert("存在空值");
return false;
}
}
else return true;
}
}
function show showresponse(responseText,statusText){
alert("提交后进行的函数操作");
alert('状态: ' + statusText + '/n 返回的内容是: /n' + responseText);
$('#output1').html(responseText);
}
4)dataType分别为xml,json时的处理方式
eg:
//json
$(document).ready(function(){
$('#myForm').ajaxForm(){
target:#mydiv;
success:processJson;
}
});
function processJson(data)
{
$('#mydiv').html(data.username+" "+data.password+" "+data.comment);
}
//xml
$(document).ready(function() {
$('#xmlForm').ajaxForm({
// 声明 服务器返回数据的类型.
dataType: 'xml',
success: processXml
});
});
function processXml(responseXML) {
// 'responseXML' 是一个XML的文档 ,从服务器返回的.
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
var comment = $('comment', responseXML).text();
$('#xmlOut').html(name + " "+address + " "+comment);
}
// html
$(document).ready(function() {
$('#htmlForm').ajaxForm({
// 用服务器返回的数据 更新 id为 htmlcssrain 的内容.
target: '#htmlOut',
success: function() {
$('#htmlOut').fadeIn('slow');
}
});
});