jquery基础例子
2016-03-17 23:11
465 查看
1.jquery标签页.html
<html>
<head>
<title>tab标签页</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
body {
margin: 50px;
}
#ul {
height: 30px;
margin-bottom: 10px;
}
#ul li {
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid #abcdef;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current {
background: #abcdef;
}
#content div {
width: 300px;
height: 200px;
border: 1px solid #abcdef;
display: none;
}
#content div.show {
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
$("#ul li").click(function () {
/*//1.点击li的时候切换样式
$(this).addClass("current").siblings().removeClass("current");
//2.根据li的索引值，来确定哪个div显示，其他div隐藏
$("#content>div").eq($(this).index()).show().siblings().hide();*/
//$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();
$(this).addClass("current").siblings().removeClass("current").parent().next().find("div").eq($(this).index()).show().siblings().hide();
});
});
</script>
</head>
<body>
<ul id="ul">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>
<div id="content">
<div class="show">php...介绍</div>
<div>ruby...介绍</div>
<div>python...介绍</div>
</div>
</body>
</html>2.jquery表单事件.html
<html>
<head>
<title>表单事件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*$("input").focus(function(){
$("span").show();
});
$("input").blur(function(){
$("span").hide();
});*/
//当有focus事件的元素里面的值改变的时候，并触发了blur事件才算完成一次
/*$("input").change(function(){
$("span").show();
});*/
/*$("input").select(function(){
$("span").show();
});*/
$("#form1").submit(function(){
alert("success");
});
});
</script>
</head>
<body>
<form action="http://www.baidu.com" id="form1">
<input type="text" name="username" id="" value="11111" />
<input type="submit" value="提交" />
</form>
<span style="display:none">asas<span>
</body>
</html>3.jquery表单选择框实例.html
<html>
<head>
<title>表单选择框实例</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function () {
var chkAll = $("#chkAll");
var chkNone = $("#chkNone");
var chkReverse = $("#chkReverse");
var checkbox = $("#checkbox>:checkbox");
chkAll.click(function(){
checkbox.attr("checked","checked");
});
chkNone.click(function(){
checkbox.removeAttr("checked");
});
chkReverse.click(function(){
checkbox.each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="checkbox">
<input type="checkbox" name="" id="" checked="checked" />1
<input type="checkbox" name="" id="" />2
<input type="checkbox" name="" id="" />3
<input type="checkbox" name="" id="" />4
</div>
<div id="btn">
<input type="button" id="chkAll" value="全选" />
<input type="button" id="chkNone" value="全不选" />
<input type="button" id="chkReverse" value="反选" />
</div>
</body>
</html>4.jquery查看修改和删除.html
<html>
<head>
<title>查看修改和删除</title>
<style>
#table {
border: 1px solid #abcdef;
border-collapse: collapse;
width: 600px;
}
tr {
height: 30px;
}
th {
border: 1px solid #abcdef;
}
td {
border: 1px solid #abcdef;
text-align: center;
}
td a {
margin-right: 5px;
color: #f00;
}
.popDiv {
width: 500px;
padding: 10px;
border: 1px solid red;
position: absolute;
left: 50%;
margin-left: -250px;
top: 100px;
background: #fff;
display: none;
z-index: 1000
}
.popDiv p {
border-bottom: 1px solid red;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
//查看
$(".view").click(function () {
var maskHeight = $(document).height();
var maskWidth = $(document).width();
//添加遮罩层
$("<div class='mask'></div>").appendTo($("body"));
//$("body").append("<div class='mask'></div>");
$("div.mask").css({
"opacity": 0.4,
"background": "#000",
"position": "absolute",
"left": 0,
"top": 0,
"height": maskHeight,
"width": maskWidth,
"z-index": 2
});
//z-index大小决定谁被遮蔽
var arr = [];
$(this).parent().siblings().each(function () {
arr.push($(this).text());
});
//alert(arr);
$(".popDiv").show().children().each(function (i) {
$(this).children("span").text(arr[i]);
});
});
//关闭
$(".close").click(function () {
$(this).parent().hide();
$(".mask").remove();
});
//删除
$(".del").click(function () {
//$(this).parent().parent().remove();
$(this).parents("tr").remove();
});
});
</script>
</head>
<body style="height:8000px">
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>前端</td>
<td>6000</td>
<td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a>
</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>java工程师</td>
<td>12000</td>
<td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a>
</td>
</tr>
</table>
<div class="popDiv">
<p><strong>姓名：</strong><span></span>
</p>
<p><strong>年龄：</strong><span></span>
</p>
<p><strong>职位：</strong><span></span>
</p>
<p><strong>工资：</strong><span></span>
</p>
<a href="#" class="close">关闭</a>
</div>
</body>
</html>5.jquery动画队列.html
<html>
<head>
<title>动画队列</title>
<style>
p{
width:100px;
padding:100px;
background:#abcdef;
}
div{
width:50px;
height:50px;
background:#f60;
position:absolute;
left:10px;
top:40px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
$("a").hover(function(){
$("p").stop(false,true).slideDown(500);
},function(){
$("p").stop(false,true).slideUp(500);
});
$("button").click(function(){
$("div").animate({
"top":"400px"
},2000).animate({
"left":"800px"
},2000).animate({
"top":"40px"
},2000).animate({
"left":"10px"
},2000);
});
$("#stop").click(function(){
//是否清除队列 是否立即结束
$("div").stop(false,false);
});
$("#dequeue").click(function(){
//清除下一个动画
$("div").dequeue();
});
$("#finish").click(function(){
//结束动画
$("div").finish();
});
$("#dianji").click(function(){
//延迟动画
$("p").slideUp(500).delay(1000).slideDown(500);
});
});
</script>
</head>
<body>
<a href="#">点击</a>
<input id="dianji" type="button" value="dianji" />
<p>您好</p>
<button>run</button>
<input id="stop" type="button" value="stop" />
<input id="dequeue" type="button" value="dequeue" />
<input id="finish" type="button" value="finish" />
<div></div>
</body>
</html>6.jquery仿微博发布框.html
<html>
<head>
<title>仿微博发布框</title>
<style>
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
var maxLength = $("strong").text();
$("textarea").keyup(function(){
var l = $(this).val().length;
$("strong").text(maxLength - l);
if(parseInt($("strong").text()) < 0){
$("strong").text("0");
var val = $(this).val().substring(0,140);
$(this).val(val);
}
});
});
</script>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<span>您还可以输入<strong style="color:red">140</strong>个字</span>
</body>
</html>7.jquery滚动公告.html
<html>
<head>
<title>滚动公告</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
margin: 50px;
}
ul {
list-style-type: none;
}
li {
height: 30px;
line-height: 30px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
setInterval(function () {
var newLi = $("ul>:first").clone(true);
$("ul").append(newLi);
$("ul>:first").remove();
}, 2000);
});
</script>
</head>
<body style="height:8000px">
<ul>
<li>我是第1条公告</li>
<li>我是第2条公告</li>
<li>我是第3条公告</li>
<li>我是第4条公告</li>
<li>我是第5条公告</li>
<li>我是第6条公告</li>
<li>我是第7条公告</li>
<li>我是第8条公告</li>
</ul>
</body>
</html>8.jquery滑动动画.html
<html>
<head>
<title>滑动动画</title>
<style>
p{
width:100px;
padding:10px;
border:1px solid #abcdef;
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*$("a").click(function(){
$("p").slideDown(500);
});*/
/*$("p").show();
$("a").click(function(){
$("p").slideUp(500);
});*/
$("a").click(function(){
$("p").slideToggle(500);
});
});
</script>
</head>
<body>
<a href="#">点击</a>
<p>您好</p>
</body>
</html>9.jquery基础动画.html
<html>
<head>
<title>基础动画</title>
<style>
p{
width:100px;
padding:10px;
border:1px solid #abcdef;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*$("a").click(function(){
//$("p").hide(600);
$("p").hide("fast");//fast slow normal
});*/
/*$("p").hide();
$("a").click(function(){
$("p").show("fast");//fast slow normal
});*/
/*$("a").click(function(){
$("p").toggle(100);//fast slow normal
});*/
$("a").click(function(){
if($("p").is(":visible"))
{
$("p").hide(100);
}
else
$("p").show(100);
});
});
</script>
</head>
<body>
<a href="#">点击</a>
<p>您好</p>
</body>
</html>10.jquery渐变动画.html
<html>
<head>
<title>渐变动画</title>
<style>
p{
width:100px;
padding:10px;
border:1px solid #abcdef;
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*$("a").click(function(){
//opacity从0变成1
$("p").fadeIn(1000);
});*/
/*$("p").show();
$("a").click(function(){
//opacity从1变成0
$("p").fadeOut(1000);
});*/
/*$("a").click(function(){
$("p").fadeTo(1000,0.5,function(){
alert(1);
});
});*/
$("a").click(function(){
$("p").fadeToggle(1000);
});
});
</script>
</head>
<body>
<a href="#">点击</a>
<p>您好</p>
</body>
</html>11.jquery浏览器事件.html
<html>
<head>
<title>浏览器事件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*$(window).resize(function(){
alert("浏览器窗口发生改变");
});*/
$(window).scroll(function(){
alert("浏览器滚动条发生改变");
});
});
</script>
</head>
<body style="height:3000px">
</body>
</html>12.jquery普通事件.html
<html>
<head>
<title>普通事件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
//鼠标事件
//当鼠标左键按下然后再抬起鼠标左键才算完成一次click
/*$("p").click(function(){
alert($(this).text());
});*/
//双击
/*$("p").dblclick(function(){
alert($(this).text());
});*/
//获取焦点事件，可作用于父级
/*$("div").focusin(function(){
$(this).children("span").show();
});*/
//鼠标按下事件
/*$("p").mousedown(function(){
alert($(this).text());
});*/
//鼠标抬起事件
/*$("p").mouseup(function(){
alert($(this).text());
});*/
//鼠标移动事件
/*$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
$("input").val(x+","+y);
});*/
/*//鼠标移入事件
$("p").mouseover(function(){
$(this).css("background","red");
});
//鼠标移出事件
$("p").mouseout(function(){
$(this).css("background","none");
});*/
/*$("p").mouseover(function(){
$(this).css("background","red");
});
$(document).mouseover(function(){
$("p").css("background","none");
});*/
/*
//可阻止冒泡
$("p").mouseenter(function(){
$(this).css("background","red");
});
$(document).mouseleave(function(){
$("p").css("background","none");
});*/
//键盘事件
/*$("input").keydown(function(){
alert();
});*/
/*$("input").keyup(function(){
alert();
});*/
$("input").keypress(function(){
alert();
});
});
</script>
</head>
<body>
<p>我是p</p>
<div>
<input type = "text" value = "123456"/>
<span style="display:none">111111</span>
<p><em><input type = "text" value = "222222"/></em></p>
</div>
</body>
</html>13.jquery普通事件2.html
<html>
<head>
<title>事件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
//hover是模拟鼠标进入（mouseenter）和鼠标离开（mouseleave）
$("p").hover(function(){
$(this).css("background","red");
},function(){
$(this).css("background","none");
});
$("a").click(function(){
alert("我被点击了");
});
//模拟事件发生
$("a").trigger("click");
});
</script>
</head>
<body>
<p>我是p</p>
<a href="#">点击</a>
</body>
</html>14.jquery事件绑定与移除.html
<html>
<head>
<title>事件绑定与移除</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*$("p").click(function(){
alert($(this).text());
});*/
//绑定事件
/*$("p").bind("click",function(){
alert($(this).text());
});
$("p").mouseover(function(){
$(this).css("background","red");
});*/
//移除事件
//$("p").unbind("click mouseover");
/*$("body").delegate("p","click",function(){
$(this).append("<p>我是新p</p>");
});*/
/*$("p").bind("click",function(){
$("body").append("<p>我是新p</p>");
});*/
//事件命名空间
$("p").bind("click.background",function(){
$(this).css("background","red");
});
$("p").bind("click.color",function(){
$(this).css("color","blue");
});
$("p").unbind("click.color");
});
</script>
</head>
<body>
<p>我是p</p>
</body>
</html>15.jquery事件对象.html
<html>
<head>
<title>事件对象</title>
<style>
*{
padding:0;
padding:0;
}
ul{
list-style-type:none;
}
body{
margin:50px;
}
div{
width:200px;
height:24px;
line-height:24px;
text-align:center;
border:1px solid #ccc;
}
ul{
width:200px;
border:1px solid #ccc;
display:none;
}
ul li{
height:24px;
line-height:24px;
}
ul li:hover{
background:#cfcfcf;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
$(document).click(function(e){
var x = e.pageX;
var y = e.pageY;
$("#input1").val(x+","+y);
});
$("#form1").submit(function(e){
alert("success");
//阻止浏览器默认行为
e.preventDefault();
});
$("div").click(function(e){
$("ul").show();
//阻止冒泡
e.stopPropagation();
});
$(document).click(function(){
$("ul").hide();
});
});
</script>
</head>
<body style="height:3000px;width:3000px">
<input type="text" id="input1" style="position:fixed;top:200px;left:500px"/>
<form action="http://www.baidu.com" id="form1">
<input type="text" name="username" id="input2" value="11111" />
<input type="submit" id="input3" value="提交" />
</form>
<div>请选择数字</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
<a href="http://pan.baidu.com/share/link?shareid=543954&uk=4211285463">111</a>
</body>
</html>16.jquery位置操作.html
<html>
<head>
<title>位置操作</title>
<style>
* {
margin: 0;
}
div {
position: relative;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background: red;
}
p {
position: absolute;
left: 100px;
top: 50px;
width: 50px;
height: 50px;
background: yellow;
}
button {
position: fixed;
top: 200px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
/*var a = $("p").offset();//获取位置
alert(a.left);
alert(a.top);*/
/*var a = $("p").position();//相对于父元素的位置
alert(a.left);*/
$("button").click(function () {
alert($(window).scrollTop());
});
});
</script>
</head>
<body style="height:8000px">
<div>divdivdiv
<p>111</p>
</div>
<button>弹出滚动条离顶部的距离</button>
</body>
</html>17.jquery样式操作.html
<html>
<head>
<title>样式操作</title>
<style>
.bgred {
background: red;
}
.white {
color: #fff;
}
p {
height: 30px;
border: 10px solid red； padding: 10px;
margin: 10px
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
//添加样式
//$("p").addClass("bgred").addClass("white");
/*$("p").addClass("bgred white");
//删除样式
$("p").removeClass("white");*/
//切换样式
/*$("p").click(function(){
$(this).toggleClass("bgred");
});*/
//
/*$("p").click(function(){
if($(this).hasClass("bgred")){
$(this).removeClass("bgred");
}else{
$(this).addClass("bgred");
}
});*/
//设置样式
//$("p").css("background","red").css("border","10px solid #abcdef");
/*$("p").css({
"background" : "red",
"border" : "10px solid #abcdef"
});*/
//建议css属性名用引号引起来
//alert($("p").height());//获取p标签真实高度
//innerHeight()方法获得的高度不把border和margin计算进去，但是会把padding值计算进去
//outerHeight()方法如果参数不写，为默认值false，不会把margin计算进去，如果参数为true,会把border，margin，padding计算进去
/*alert($("p").outerHeight(true));
alert($("p").innerHeight());*/
});
</script>
</head>
<body>
<p>我是p</p>
</body>
</html>19.jquery页面搜索实例.html
<html>
<head>
<title>页面搜索实例</title>
<style>
table{
width:700px;
border:1px solid #abcdef;
border-collapse:collapse;
}
tr{
height:30px;
}
td,th{
border:1px solid #abcdef;
text-align:center;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
$("input[type='button']").click(function(){
var text = $("input[type='text']").val();
$("table tr:not('#thead')").hide().filter(":contains('"+text+"')").show();
});
});
</script>
</head>
<body>
<table>
<tr id="thead">
<th>姓名</th>
<th>性别</th>
<th>号码</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>110</td>
</tr>
<tr>
<td>移动客服</td>
<td>女</td>
<td>10086</td>
</tr>
</table>
<input type="text" name="" id="" />
<input type="button" value="搜索" />
</body>
</html>20.jquery中DOM操作.html
<html>
<head>
<title>DOM操作</title>
<style>
.a {
background: red
}
.b {
background: #abcdef
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
//创建节点并插入
var newElement = $("<strong>2</strong>");
/*$("p").append(newElement);
var html = "<strong>3</strong>";
$("p").append(html);
$("p").prepend(newElement);
//外部插入
$("p").after(newElement);
$("p").before(newElement);*/
//包裹标签
//$("p").wrap("<div></div>");
//删除节点
//$("p").remove();
//$("p").empty();
//$("strong").unwrap();//删除父节点
//复制节点
/*$("a").click(function(){
alert(111);
});
var newA = $("a").clone(true);//true将点击事件也克隆
$("body").append(newA);*/
//替换节点
//$("em").replaceWith("<strong>我是strong</strong>");
//操作节点属性值
//$("span").attr("class","b");
//$("span").removeAttr("class");
});
</script>
</head>
<body>
<p>1</p>
<div><strong>99999</strong>9999999</div>
<a href="#">点击</a>
<em>我是em</em>
<span class="a">123</span>
</body>
</html>22.jquery自定义动画.html
<html>
<head>
<title>自定义动画</title>
<style>
div{
width:100px;
height:100px;
background:#abcdef;
position:absolute;
left:0;
top:30px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function () {
$("input").click(function(){
$("div").animate({
//动画累加
"left":"+=800px",
"top":"500px",
"opacity":"0.2"
},3000,function(){
$("div").css("background","#f90");
});
});
});
</script>
</head>
<body>
<input type="button" value="点击">
<div></div>
</body>
</html>23.jquery动画算法插件easing
附：WEB前端开发api
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery选择器部分
- jquery表单验证使用插件formValidator
- jquery 多标签添加 活动标签 促销标签
- jQuery学习笔记(2)-选择器的使用
- jQuery与Zepto的异同
- 利用jquery模拟select效果
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- 页面上使用jQuery显示数据
- 在asp.net工程中使用jQuery-ui的autocomplete功能
- js、jQuery、layer实现弹出层的打开、关闭
- jquery 时间大小比较和获取当前时间
- jQuery基础知识整理（1）
- Jquery实现ajax三级联动
- 30+最佳Ajax jQuery的自动完成插件的例子
- jQuery获取Select选择的Text和 Value(转)
- 多日低效率关于$post,$get,$ajax的感悟
- jQuery.Autocomplete实现自动完成功能（详解）
- jquery获取iframe页面中的元素
- 如何在网页中添加 jQuery。
- Spring+SpringMVC+mybatis+Jquery easyUI框架整合