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() ...
随机推荐
- Sumitomo Mitsui Trust Bank Programming Contest 2019 Task F. Interval Running
Link. There is a nice approach to this problem that involves some physical insight. In the following ...
- codeforces 1251D Salary Changing （二分+贪心）
(点击此处查看原题) 题意分析 一共有s元钱,要用这些钱给n个人发工资,发给每个人的工资si有最少和最多限制 si ∈[li,ri],在发给n个人的总工资小于s的情况下,要求发给n个人中的工资的中位数 ...
- 怎样使当前cookie只有在加密协议https环境下才能将它发送到服务器
使用 Secure 属性. 注意, 这个属性基本是"自动"的, 也就是说, 如果当前网页是https请求的, 那里面的各种HTTP请求的cookie都会自定加上这个属性, 如果当前 ...
- React-脚手架
1. Node和NPM 版本 2. 脚手架 在对React比较熟悉之前,为了避免陷入到开发工具的繁琐配置中,借助react官方提供的脚手架工具Create React App来搭建React应用 np ...
- javaIO——BufferedReader效率测试实践
上一篇刚刚学习了 BufferedReader ,想着来验证一下 BufferedReader 的缓冲到底能带来多大的性能提升,于是拷贝了一个100M 左右的日志文件放到本地,测试一下使用 Buffe ...
- 【php设计模式】享元模式
享元模式其实就是共享独享模式,减少重复实例化对象的操作,从而将实例化对象造成的内存开销降到最低. 享元模式尝试重用现有的同类对象,如果未找到匹配的对象,则创建新对象.我们将通过创建 5 个对象来画出 ...
- web储存的初级运用
<html> <head> <meta charset="utf-8"> <title>web存储</title>< ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- asp.net page类
1 page 继承自control类 2 httpServerUtility的transfer方法:请求生命周期将在调用此方法之后终止,将不会触发后续的请求生命周期事件,将直接跳到logReques ...
- Java远程通讯可选技术及原理
转自:https://www.linuxidc.com/index.htm 在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI.MI ...