JQuery：
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
* JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* window.onload和$(document).ready(function(){});区别?
* onload页面加载完成后才会执行.执行一次
* ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
* JS-->JQuery: $(JS的对象)
* JQuery-->JS: JQ对象.get(0), JQ对象[0]
* JQuery的选择器：(*****)
* 基本选择器：
* ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
* 层级选择器：
* 空格 ,> ,+ ,~
* 过滤:
* :first,:last,:eq(),:even,:odd...
* 属性选择器:
* [属性名],[属性名=’属性值’]...
* 表单选择器:
* :input,:text,:password,:radio...
* 可见性:
*
* 表单对象属性：
* :checked,:selected,:enable,:disable
* JQuery实现效果:
* show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()
* JQuery样式操作:
* css();
* JQuery属性操作的方法:
* attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()
* JQuery文档处理:
* append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()
* JQuery的事件:
* click(),change(),submit(),dblclick(),keyUp(),keyDown()...
* toggler(),hover() ---进行事件的切换.
1.2 案例一：使用JQuery完成表单校验：
1.2.1 需求：
// 表单校验的操作
$(function(){
// 步骤一：为必填项添加一个 *.
$("form input.required").each(function(){
// 获得他的父元素：
$(this).parent().append("<b class='high'> *</b>");
});
// 步骤二：获得所有的输入项,为输入项添加一个blur事件.
$("form input").blur(function(){
// 获得该元素的父元素：
var $parent = $(this).parent();
// 将原有的信息清除掉.
$parent.find(".formtips").remove();
// 确定点击的输入项是谁?
if($(this).is("#username")){
// 判断用户名是否为空:
if(this.value == ""){
// 向文本框后添加一个错误提示.
$parent.append("<span class='formtips onError'>用户名不能为空</span>");
}else{
// 向文本框后添加一个正确提示.
$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");
}
}
if($(this).is("#password")){
// 判断用户名是否为空:
if(this.value == ""){
// 向文本框后添加一个错误提示.
$parent.append("<span class='formtips onError'>密码不能为空</span>");
}else{
// 向文本框后添加一个正确提示.
$parent.append("<span class='formtips onSuccess'>密码输入正确</span>");
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
// 为表单添加一个submit事件.
$("form").submit(function(){
// 执行表单中blur事件.
$("form :input").trigger("blur");
// 获得错误信息的长度.
var errorLength = $(".onError").length;
if(errorLength > 0){
return false;
}
});
});
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |