04 JQuery的使用
01 对网站首页优化--定时弹出广告
<!--
作者：offline
时间：2018-09-09
描述：在使用JQ前要导入jquery-1.11.0.min.js包
注意区分js和jq的对象
--> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style>
#bodyDiv{
border: 1px solid blue;
width: 90%px;
}
.logoDiv{
border: 1px solid blue;
width: 33%;
float: left;
height: 50px;
}
.clear{
clear: both;
}
#menuDiv{
width: 100%;
height: 50px;
border: 1px solid blue;
background-color: black;
} #imgDiv{
width: 100%;
border: 1px solid blue;
} .productClass{
width: 100%;
border: 1px solid blue;
}
.contentClass{
width: 100%;
border: 1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
} #menuDiv a{
font-size: 20px;
color: white;
}
<!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题-->
</style>
<script src="js/jquery-1.11.0.min.js"></script> <!--引入jQuery-->
<script>
var time=3000;
$(function(){
//设定一个3秒钟显示广告的方法
time=setInterval("showAd()",3000);
}); function showAd(){
//获得元素,并显示出来
$("#adDiv").show();
//$("#adDiv").show(2000);缓慢进入
//$("#adDiv").slideDown(2000);向下滑动进入
clearInterval(time);
//在设置定时隐藏
time=setInterval("hide()",3000)
} function hide(){
$("#adDiv").hide();
//$("#adDiv").hide(2000);缓慢出
//$("#adDiv").slideUp(2000);向上滑动消失
clearInterval(time);
}
</script>
</head>
<body>
<!--整体的DIV-->
<div id="bodyDiv">
<div id="adDiv" style="width: 100%;display: none;">
<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" />
</div>
<!--首行分为三个小块-->
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="48"/>
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="48" />
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!--第二行的div-->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<!--第三行，滚动的图片-->
<div id="imgDiv">
<img src="../01静态界面/img/1.jpg" width="100%" />
</div>
<!--第四行，热门商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>热门商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--广告的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/ad.jpg" width="100%" height="80" />
</div>
<!--最新商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>最新商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--页脚的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div> <!--友情链接的Div-->
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
02 对后台管理界面
数据界面显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接格式设置-->
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//$("tr:odd").addClass("odd");普通的隔行换色
//$("tr:even").addClass("even");
$("thead tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
</head>
<body>
<table border="1" width="80%" align="center">
<thead>
<tr>
<td>分类的ID</td>
<td>分类的名称</td>
<td>分类的描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
数据界面显示--复选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接格式设置-->
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//表格隔行换色
$(function(){
//$("tr:odd").addClass("odd");普通的隔行换色
//$("tr:even").addClass("even");
$("thead tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
/*这个重在理解，下面有一个简化版本
//复选框设置
$(function(){
var $selectAll=$("#selectAll");
$selectAll.click(function(){
//alert($selectAll.prop("checked")); 测试语句
if($selectAll.prop("checked")==true){
//说明复选框已经被选中
$(":checkbox[name='ids']").prop("checked",true);
}else{
$(":checkbox[name='ids']").prop("checked",false);
}
});
});
*/ //复选框设置简化版本，因为下面的属性和首行属性完全相同，可以从这里入手简化
$(function(){
$("#selectAll").click(function(){
$(":checkbox[name='ids']").prop("checked",this.checked);
});
});
</script>
</head>
<body>
<table border="1" width="80%" align="center">
<thead>
<tr>
<td><input type="checkbox" id="selectAll" /> </td>
<td>分类的ID</td>
<td>分类的名称</td>
<td>分类的描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>4</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
数据界面显示--鼠标变色并修改数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接格式设置-->
<link rel="stylesheet" href="css/style.css" />
<!--版本太高和手册上的函数有些可能对不上
<script src="js/jquery-1.11.0.min.js"></script>
-->
<script src="js/jquery-1.8.3.min.js"></script>
<script>
//表格隔行换色
$(function(){
//$("tr:odd").addClass("odd");普通的隔行换色
//$("tr:even").addClass("even");
$("thead tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
/*这个重在理解，下面有一个简化版本
//复选框设置
$(function(){
var $selectAll=$("#selectAll");
$selectAll.click(function(){
//alert($selectAll.prop("checked")); 测试语句
if($selectAll.prop("checked")==true){
//说明复选框已经被选中
$(":checkbox[name='ids']").prop("checked",true);
}else{
$(":checkbox[name='ids']").prop("checked",false);
}
});
});
*/ //复选框设置简化版本，因为下面的属性和首行属性完全相同，可以从这里入手简化
$(function(){
$("#selectAll").click(function(){
$(":checkbox[name='ids']").prop("checked",this.checked);
});
}); //时间切换函数
$(function(){
/*//点击一下就添加样式，再点击一下就取消样式
$("tbody tr").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected")
});*/
//鼠标一放就改变样式
$("tbody tr").hover(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected")
});
});
</script>
</head>
<body>
<table border="1" width="80%" align="center">
<thead>
<tr>
<td><input type="checkbox" id="selectAll" /> </td>
<td>分类的ID</td>
<td>分类的名称</td>
<td>分类的描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<!-- 在此处进行链接-->
<td><a href="edit.html">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /> </td>
<td>4</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
数据修改部分
<!DOCTYPE html>
<!--
作者：offline
时间：2018-10-31
描述：配合data03数据修改使用，是数据修改界面
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入JQuery-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
/*
//传统方法JS方法
window.onload=function(){
//添加到右侧
document.getElementById("addRight").onclick=function(){
//获得左侧的下拉列表
var selectLeft =document.getElementById("selectLeft");
//遍历左侧列表中的所有option元素
for(var i=selectLeft.options.length-1;i>=0;i--){
//判断元素是否被选中
if(selectLeft.options[i].selected==true){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
}
//全部添加到右侧
document.getElementById("addAll").onclick=function(){
//获得左侧的下拉列表
var selectLeft =document.getElementById("selectLeft");
//遍历左侧列表中的所有option元素
for(var i=selectLeft.options.length-1;i>=0;i--){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
}
*/
//使用JQuery方式
//JQuery 入口函数
$(function(){
// 添加左侧选中的元素到右侧
$("#addRight").click(function(){
//获得左侧被选中的option元素
$("#selectLeft option:selected").appendTo("#selectRight");
}); // 添加左侧所有元素到右侧
$("#addAll").click(function(){
//获得左侧被选中的option元素
$("#selectLeft option").appendTo("#selectRight");
}); //移除右侧被选中的元素到左侧
$("#removeLeft").click(function(){
$("#selectRight option:selected").appendTo("#selectLeft");
}); //移除右侧所有元素到左侧
$("#removeAll").click(function(){
$("#selectRight option").appendTo("#selectLeft");
}); //双击左侧的某个元素移动到右侧
$("#selectLeft").dblclick(function(){
$("option:selected",this).appendTo("#selectRight");
});
//双击右侧的某个元素移动到左侧
$("#selectRight").dblclick(function(){
$("option:selected",this).appendTo("#selectLeft");
});
}); </script>
</head>
<body>
<form>
<table border="1" width="450" align="center">
<tr>
<td>分类名称</td>
<td><input type="text" name="cname" value="手机数码" /> </td>
</tr>
<tr>
<td>分类描述</td>
<td><textarea name="cdesc" cols="20" rows="4">手机数码</textarea></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<span style="float: left;">
已有商品<br/>
<select id="selectLeft" multiple="multiple"> <!--显示下拉列表中所有内容-->
<option>苹果</option>
<option>小米</option>
<option>华为</option>
</select>
<p id="addRight">>></p>
<p id="addAll">>>></p>
</span> <span style="float: right;">
未有商品<br/>
<select id="selectRight" multiple="multiple">
<option>三星</option>
<option>HTC</option>
<option>锤子</option>
</select>
<p id="removeLeft"><<</p>
<p id="removeAll"><<<</p>
</span>
</td>
</tr>
<tr>
<td><input type="submit" value="确定"> </td>
</tr>
</table>
</form>
</body>
</html>
03 表单校验
<!--
作者：offline
时间：2018-09-05
描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。
在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转.
在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。
【步骤一】：引入注册页面
【步骤二】：引入JQ的js.
【步骤三】：为必填项添加一个 *
【步骤四】：获得表单中的所有的输入项,为所有的输入项添加一个blur事件.
【步骤五】：判断当前输入项是什么(用户名，密码，邮箱)
【步骤六】：为不同的输入项做不同的校验.
【步骤七】：为表单元素添加一个submit事件.
【步骤八】：执行之前的blur函数.查找错误信息的长度,如果长度>0 有错误 不能提交.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<!--引入样式-->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/style2.css" />
<style>
div{
border: 1px solid blue;
}
.bodyDiv{
width:90%;
} .bodyDiv > div{
width: 100%;
} .logoDiv{
width: 33%;
height: 50px;
float: left;
} .clear{
clear: both;
} ul li{
display: inline;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//定义数组,采用了另一种方法
var citys=[
["杭州市","绍兴市"],
["南京市","苏州市"],
["武汉市","襄阳市"],
["唐山市","保定市"]
]; $(function(){
//获得省份的下拉列表
$("#province").change(function(){
//alert(this.value);用来检验代码，这个this是Js对象
//alert($(this).val());采用JQ对象使用
var $city=$("#city");//根据id获得city对象
$city.get(0).options.length=1;//每次都要把option的长度更新 var val=this.value;//获得省份的值
//获得的n是每个省份中包含的市的个数，即第二层数组的长度
$.each(citys, function(i,n) {
if(i==val){
//Jq对象,得到第二层数组的对象
$(n).each(function(j,m){
//alert(j+" "+m);
$city.append("<option>"+m+"</option>");
});
}
});
});
});
</script>
<!--
后面的就是在原有的基础上修改的代码
-->
<script>
//表单校验的操作
$(function(){
//步骤一：为必填项添加*号
$("form input.required").each(function(){
//获得他的父元素
$(this).parent().append("<b class='high'>* </b>")
});
//步骤二：获得表单中的所有的输入项,为所有的输入项添加一个blur事件
$("form input").blur(function(){
//获得父元素
var $parent=$(this).parent();
//将原有的信息清除掉--找到所有formtips 并清除掉
$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;
}
});
});
</script>
</head>
<body>
<!--整体的div-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="50" />
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
</div>
<div style="height: 50px;background-color: black;">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;">
<!--点击注册所提交到的界面-->
<form action="02网站界面图片滚动.html" method="post" >
<table border="0" width="100 %" cellspacing="10">
<tr>
<td>用户名</td>
<!-- 此处的class在样式中并无定义，只是为了查找这一类元素才定义的-->
<td><input type="text" id="username" name="username" class="required" > </td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" class="required"> </td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword" class="required"></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>--请选择--</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
<option value="3">河北省</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>
</div>
<!--最下面的两行-->
<div>
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div>
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
04 JQuery的使用的更多相关文章
- 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用
这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- 20+个可重复使用的jQuery代码片段
jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...
- jquery选择器和基本操作
定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: ...
- 2014年下半年计划—写博客，旅游，带女朋友拍写真
前言:写这篇博客之前,一直在网上,看各位大牛写的博文,发布的视频等.当然由于自己的初来乍到,人生地不"熟"儿的,也吃了不少亏,走了不少弯路.本着一颗学习的心,携着向各 ...
- Web前端开发推荐阅读书籍、学习课程下载
转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...
- jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined
jQuery实例--jQuery实现联动下拉列表查询框 在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...
- 【初探移动前端开发04】jQuery Mobile (中)
前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
- 【锋利的jQuery】学习笔记04
第四章 jQuery中的事件和动画 一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready() ...
随机推荐
- icell更改用户管理员
管理员页面是http://127.0.0.1:8080/PORTAL/tsysLoginController/admin超级管理员是http://127.0.0.1:8080/PORTAL/tsysL ...
- 【Funny Things】002——鞋的颜色
网上的那张鞋子的图片到底是什么颜色的?灰绿色还是粉色? 1. 先截取图片中鞋的那块的图片,获取大小 2. 带入大小分别计算R,G,B平均值 3. 通过计算所得的数据画图可得结果 from PIL im ...
- re(模块正则表达式)
re模块(正则) 正则是用一些具有特殊含义的符号组合到一起(成为正则表达式)来描述字符或者字符串的方法,或者说正则就是用来描述一类事物的规则. import re #从字符串中全部查找内容,返回一 ...
- 用bisect来管理已排序的序列
bisect 模块包含两个主要函数,bisect 和 insort,两个函数都利用二分查找算法来在有序序列中查找或插入元素. 2.8.1 用bisect来搜索 bisect(haystack, nee ...
- Mancala II
题目描述 Mancala is a family of board games played around the world, sometimes called sowing games, or c ...
- varnish HTTP头
Cache-Control:指定了缓存如何处理内容.varnish关心max-age参数,并用它来计算对象的TTL.“Cache-Control:no-cache”是被忽略的.Age:varnish添 ...
- MyBatis 源码篇-日志模块1
在 Java 开发中常用的日志框架有 Log4j.Log4j2.Apache Common Log.java.util.logging.slf4j 等,这些日志框架对外提供的接口各不相同.本章详细描述 ...
- SvcUtil.exe工具生成客户端代理类
1.以管理员身份运行vs下命令工具: 2.运行代码示例:C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin>svcutil http: ...
- 给datagrid一列中的数据加上单位
{ field:'computeRate', title:'完成百分比', width:100, align:'center', halign:'center', sortable:true, for ...
- Spring源码解析 - springMVC核心代码
一.首先来讲解下springMVC的底层工作流程 1.首先我们重点放在前端控制器(DispatcherServlet) 其类图: 因为从流程图看,用户的请求最先到达就是DispatcherServle ...