jquery
jQuery对象和javascript对象间的转换
// js对象转换为jq对象
var tdiv = document.getElementById("tDiv");
$(tdiv).html("nihao");
// jq对象转换为
$("#tDiv")[0].innerHTML="java";
$("#tDiv")get(0).innerHTML="java";
使用jQuery操作元素的属性
使用css方法
# 使用:jq对象.css(属性参数);
* $("div").css("background", "red"); // 单个参数时,属性和属性值用逗号隔开
* $("div").css({"background":"red","border":"2px solid blue"}); // 多个参数时,使用键值对形式
使用CSS类的方法
# 添加属性:addClass()方法
* 用法:jq对象.addClass(class类)
* $("tbody tr:odd").addClass("odd"); // 将tbody标签内的奇数行添加样式类odd
# 删除属性:removeClass()方法
* 用法:jq对象.removeClass(class类)
* $("tbody tr:odd").removeClass("odd"); // 将tbody标签内的奇数行删除样式类odd
属性值操作方法
# attr(name):设置或返回被选元素的属性值
* 用法:jq对象.attr(属性名,属性值)
* $("img").attr("src","img/test.jpg"); // 将img的添加src属性,值为"img/test.jpg"
* 用法:jq对象.attr({属性名:属性值,属性名2:属性值}) 属性名可以有"",属性值必须有""
* $("img").attr({"src":"img/test.jpg","alt":"test"}); // 将img的src和alt属性设为指定值
# removeAttr(name):删除元素指定的属性
* 用法:jq对象.removeAttr(属性名)
* $("img").removeAttr("src"); // 删除img标签元素的src属性
# prop(name):设置或返回元素的属性值
* 用法:jq对象.prop(属性名,属性值)
* $("input[type='checkbox']").prop("checked"); // 将type类型为checkbox的input标签元素的选中(前提是有checked属性)
*用法: jq对象.prop({属性名:属性值,属性名2:属性值}) 属性名可以有"",属性值必须有""
* $("input[type='checkbox']").prop({"checked":true, "disabled":true}); // 将checkbox选中并禁用
# removeProp(name):用来删除由.prop()方法设置的属性集(attr设置的属性值也可删除)
* 用法:jq对象.removeProp(属性名)
* $("img").removeProp("src"); // 删除img标签元素的src属性
HTML/文本/值的设置
# html(value):设置或获取对象的内容,一般针对含有文本的元素,使用在图片上无效
* 用法:jq对象.html() 获取jq对象的内容
* $("p").html(); // 获取p标签的内容
* 用法:jq对象.html(value) 设置jq对象的值为value
* $("p").html("java"); // 将所有的p标签的内容设为java
# text(value):设置或获取对象的内容
* 用法:jq对象.text() 获取jq对象的内容
* $("p").text(); // 获取p标签的内容
* 用法:jq对象.text(value) 设置jq对象的值为value
* $("p").text("java"); // 将所有的p标签的内容设为java
# val(value):设置或获取元素的值(相当于是js对象中value属性)
* 用法:jq对象.val()
* $("input[type='text']").val(); // 获取input的value值
* 用法:val(value值)
* $("input[type='text']").val(value); // 设置文本框的值为value
jQuery对象访问
# each(callback):以每一个匹配的元素作为上下文来执行一个函数(callback)
* 用法:jq对象.each(function(迭代变量){要执行之代码}); 使用return可以跳出循环
*$("img").each(function(n){ // 将所有的img标签添加src属性,n是从0开始
// this是代表DOM对象
// $(this)是代表jq对象
this.src = "img/" + n + ".jpg";
* });
# size():返回jq对象中元素的个数
* 用法:jq对象.size()
* var num = $("img").size(); //返回img对象的个数
# length:返回jq对象中元素的个数
* 用法:jq对象.length;
* var num = $("img").length; // 获取img对象的个数
# get([index]):取得其中一个匹配的元素, num表示取得第几个匹配的元素,num从0开始
* 用法:jq对象.get(num); 当无参数时,是获取所有的匹配的对象集合
* $("img").get(); // 获取所有img对象的集合
* $("img").get(0); // 获取匹配的第一个元素对象,与$(this)[0]等价
文档处理
# append(content):向每个匹配的元素内部追加内容,其中内容可以是标签
* 用法:jq对象.append(内容);
* $("p").append("内容"); // 向所有p标签内添加内容(追加)
* $("select").append("<option value='内容'>内容</option>"); // 向select标签添加option标签
# appendTo(content):把所有匹配的元素追加到另一个指定的元素中
* 用法:jq对象.appendTo(元素) 将jq对象添加到元素中
* $("p").appendTo("div"); // 将所有p标签元素追加到div中
# prepend(content):向每个匹配的元素内部前置内容,参数是要插入到目标元素内部前端的内容
* 用法:jq对象.prepend(内容);
* $("p").prepend("<b>Hello</b>"); // 向所有p标签元素内部的前面插入内容
# prependTo(content):把所有匹配的元素前置到另一个、指定的元素中
* 用法:jq对象.prependTo(元素) 将jq对象前置到元素内容中
* $("p").prependTo("#AdDiv"); // 将所有的p标签内容前置到id为AdDiv元素内部的前面
# empty():删除匹配的元素集合中所有的子节点
* 用法:jq对象.empty(); 删除jq对象中所有的子节点,jq对象本身不删除
* $("p").empty(); // 删除所有p元素中的子节点元素
# remove([expr]):从DOM中删除所有匹配的元素,参数是用于筛选元素的jQuery表达式
* 用法:jq对象.remove(选择器)
* $("p").remove(); // 删除所有的p标签元素,其本身要被删除
* $("div").remove("#AdDiv"); // 删除所有ID为AdDiv的div元素
jQuery筛选功能
# children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,参数是过滤子元素的表达式
* 用法:jq对象.children(过滤器)
* $("div").children(); // 获取所有div元素的所有子元素
* $("div").children("#AdDiv"); // 获取所有div元素的子元素中ID为AdDiv的所有元素
# find(expr|obj|ele):搜索所有与指定表达式匹配的元素对象,这个函数是找出正在处理的元素的后代元素的好方法,不包括本身元素,是在本元素的子元素中查找
expr:用于查找的表达式
obj:一个用于匹配元素的jQuery对象
ele:一个DOM元素
* 用法:jq对象.find(参数)
* $("p").find("span"); // 查找所有p标签元素下的span元素对象
# parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合,参数是筛选表达方式
* 用法:jq对象.parent(筛选表达式)
* $("p").parent(); // 获取p元素的所有的父类元素对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 定义数组：
var cities = [
["杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市"],
["南京市", "苏州市", "扬州市", "无锡市"],
["武汉市", "襄阳市", "荆州市", "宜昌市", "恩施"],
["石家庄市", "唐山市", "保定市", "邢台市", "廊坊市"],
["长春市", "吉林市", "四平市", "延边市"]
];
var $city = $("#city");
// 获得代表省份的下拉列表:
$("#province").change(function() {
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍历并且判断:
$.each(cities, function(i, n) {
// 判断:
if(i == val) {
$(n).each(function(j, m) {
// alert(j+" "+m);
$city.append("<option>" + m + "</option>");
});
}
});
});
});
</script>
<!--jQuery进行表单校验-->
<script>
$(function() {
// 将必填项的输入框添加*
$(".require").parent().append("<b class='high'> *</b>");
// 为所有的输入框添加失去焦点事件
$("form input").blur(function() {
// 将所有的提示信息清除
$(this).parent().children(".formtips").remove();
// 判断失去焦点的元素是否是username
if($(this).attr("id") == "username") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>用户名不能为空</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>");
}
}
// 判断失去焦点的元素是否是password
if($(this).attr("id") == "password") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>密码不能为空</span>");
} else {
if($(this).val().length < 6) {
$(this).parent().append("<span class='formtips onError'>密码长度至少六位</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>密码可用</span>");
}
}
}
// 判断失去焦点的元素是否是repassword
if($(this).attr("id") == "repassword") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>确认密码不能为空</span>");
} else {
// 获取密码框的后面是否有span标签
// 获取密码框的兄弟元素span标签(如果有),再获取span标签的父元素td,在td的子元素中查找class属性为onError
// if($("#password").siblings().parent().find(".onError").length != 0){
// 获取密码框的含有class属性为onError的所有兄弟元素集合
if($("#password").siblings(".onError").length != 0) {
// 获取密码框的父元素td,在td的所有子元素中查找所有的class属性为onError的元素集合
// if($("#password").parent().find(".onError").length != 0){
$(this).parent().append("<span class='formtips onError'>第一次输入密码有误</span>");
} else if($(this).val() != $("#password").val()) {
$(this).parent().append("<span class='formtips onError'>两次密码不一致</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>确认密码可用</span>");
}
}
}
// 校验邮箱
if($(this).attr("id") == "email") {
if($(this).val() == "") {
$(this).parent().append("<span class='formtips onError'>邮箱不能为空</span>");
} else {
if($(this).val().match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)) {
$(this).parent().append("<span class='formtips onSuccess'>邮箱可用</span>");
} else {
$(this).parent().append("<span class='formtips onError'>邮箱格式错误</span>");
}
}
}
// JQ对象绑定事件,返回的是自身,则可以使用链式绑定其他事件
// 输入框的获取焦点事件
}).focus(function() {
// 自身对象的失去焦点方法
$(this).triggerHandler("blur");
// 输入框的键盘输入事件
}).keyup(function() {
$(this).triggerHandler("blur");
});
// form表单提交校验
$("form").submit(function() {
// 触发所有input的blur事件,以便完成各个字段信息的校验
$("input").trigger("blur");
// 获取出现错误信息的输入框的个数
var length = $(".onError").length;
if(length > 0) {
alert("信息存在错误,请重新填写!")
return false; //返回false,form表单不会提交
}
});
});
</script>
</head>
<body>
<!--整体DIV-->
<div class="bodyDiv">
<form action="" method="post">
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" class="require"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" class="require"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword" class="require"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" name="province">
<option value="">-请选择-</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
