1.jQuery的页面加载
onload:包括页面在内的图片等所有文件加载完成,原生JavaScript使用此方法
ready:页面的文档结构加载完成(不包含图片等文件),jQuery使用
<script type="text/javascript">
$(document).ready(function(){
alert("hello 顾意");
});
</script>
当然还有它的简写版本,两种方法同等
$(function(){
alert("hello 顾意");
});
$(function(){
alert("hello 顾意");
});
2.jQuery程序步骤(大纲)
1.根据需求确定事件:单击、聚焦、修改、提交等........必写页面加载事件$(function(){});
2.使用合适选择器:基本选择器 >层级选择器 >过滤选择器(基本过滤,属性过滤,表单过滤)
3.属性操作:属性attr操作,css类操作,html代码/文本text/值val操作
4.文档处理:插入,复制,替换,删除
5.数组遍历: each(Objetc,[callback])
6.效果:显示/隐藏,滑动,淡入淡出
3.属性操作
3.1)属性attr操作:得到元素后对其进行属性修改
attr(name):获取某个属性的值(根据属性的名称)
$("img").attr("src");
attr(key,value):设置属性(key)和值(value)
$("img").attr("height","800px");
attr(properties):同时设置多个属性值
$("img").attr({"width":"1300px","height":"300px"});
removeAttr(name):删除某个属性和值
$("img").removeAttr("width");//清除width属性后,图片变回其自身原有的大小
3.2)css类操作
addClass(class):添加一个class属性(指定类名)
$("tbody tr:even").addClass("even");//同等于[ <p class="even">Hello</p> ]在style.js外部样式中已经定义好了有“even”的class
removeClass([class]):删除一个class属性(指定类名)
$("tbody tr:even").removeClass("even");
toggleClass(class):如果存在(不存在)就删除(添加)一个类(指定类名)
$("#div1").toggleClass("divclass");//点击字体变为紅色,再点击样式还原
3.3)html代码/文本text/值val操作
html代码:html()获取html标签(包括里面的内容),.html("hello")设置标签里面的内容
var divEle = $("div").html();
$("div").html("jQuery");
文本text:text()获取text文本内容,.text("hello")设置text文本内容
var divEle = $("div").text();
$("div").text("Java");
值val操作:val()获取内容,.val("hello")设置内容
var divEle = $("div").val();
$("div").text("Java");
4.文档处理
4.1)文档插入
内部插入:
append(content):内部结尾处,将B追加到A里面去
$("#a").append($b);
appendTo(content):内部结尾处,将A追加到B里面去
$("#a").appendTo($b);
prepend(content):内部开始处,将B追加到A里面去
$("#a").prepend($b);
prependTo(content):内部开始处,将B追加到A里面去
$("#a").prependTo($b);
外部插入:
after(content):外部,将B追加到A后面
before(content):外部,将A追加到B前面
insertAfter(content):外部,将A追加到B后面
insertBefore(content)::外部,将A追加到B前面
4.2)复制操作
clone():克隆匹配的DOM元素并且选中克隆的副本。(只有内容,不包含事件等)
$(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素
clone(true):克隆匹配的DOM元素并且选中克隆的副本。(包含事件,与真身完全相同)
$(this).clone(true).appendTo("ul");//设置参数true后,复制后的内容也具备单击事件
4.3)替换操作
replaceWith(conten):将所选定的元素替换成指定的html或dom元素
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
replaceAll(selector):替换成指定的selector元素
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
4.4)删除操作
empty():清空元素中的所有后代节点,本身标签不会被删除,三种方式都会删除掉内容
$("p").empty();
remove():删除节点,事件也会删除
$("p").remove();
detach():删除节点,事件会得到保留(1.4版本以后)
$("p").detach();
<p>Hello</p> how are <p>you?</p>
5.数组遍历
each(Objetc,[callback]):通用遍历方法,用于遍历数组和对象,callback-要执行的函数
语法格式:$each(数组或对象,function(i,n){}); i是数组角标,n是遍历的数组内容
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
each(callback):另一种数组遍历方法
语法格式:$("数组对象",function(i){}); i是角标,
$("li").each(function(){
alert($(this).text())
});
6.效果
显示/隐藏,滑动,淡入/淡出,
显示:show()
$("p").show()
隐藏:hide()
$("p").hide()
显示/隐藏的切换:toggle() 如果是显示状态就切换为隐藏,如果是隐藏就切换为显示
$("p").toggle()
滑动:slideDown(),下面的1000都指一千毫秒 即一秒
$("p").slideDown(1000);
淡入:fadeIn
$("p").fadeIn(1000);
淡出:fadeOut
$("p").fadeOut(1000);
上面的五种方法后面都可以添加一个回调函数,原理相同此处就举一个栗子:在显示之后触发后面的函数
$("p").show(4000,function(){
alert("回调函数");
});
7.Validation插件
一款优秀的表单验证插件——validation插件,用于用户注册时的表单验证,是基于jQuery的插件
优点:内置验证规则,自定义规则,简单强大的验证信息提示,实时验证
下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
引入步骤:
1.导入jQuery.js文件
2.导入jquery.validate.min.js文件,此文件放入js文件夹中
3.导入messages_zh.js文件,此文件放入js文件夹中
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate插件js文件-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>