jQuery基础二

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>