Jquery实例
2018-06-20 本文已影响13人
DragonRat
作者：烨竹
源码去git上下载：https://github.com/keyesone66/Jquery.git
Jquery推荐网站：
http://www.w3school.com.cn/
https://www.cnblogs.com/suoning/p/5683047.html
https://jqueryui.com/
Jquery代码如下：
1、页面加载时弹出一个对话框
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
alert("hello");
});
</script>
2.点击事件
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
alert("烨竹");
});
$('input:text').click(function(){
alert("这是文本框弹出的内容");
});
$('input:checkbox').click(function(){
alert("这是BOX的弹出内容");
});
$('.hdw').click(function(){
alert("这是DIV弹出的内容");
});
});
</script>
3、弹出层效果
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easydrag.handler.beta2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.one').click(function(){
$('.box').show();
});
$('span').click(function(){
$('.box').hide();
});
//js实现可拖动效果
$('.box_all').easydrag();
});
</script>
4、选项卡效果
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//隐藏所有的ct gt(0)gt选择器选择第一个开始的所有的数
$('.ct:gt(0)').hide();
//
var hdw = $('.box ul li');
//鼠标移上添加一个样式
hdw.hover(function(){
$(this).addClass('two')
.siblings().removeClass('two');
});
hdw.click(function(){
//添加一个样式,并且删除除这个样式的所有样式
$(this).addClass('one')
.siblings().removeClass();
//index()获取一个元素的名称和值，说白了就是获取ct的下标
var hdw_index = hdw .index(this);
//显示相应下标的值，隐藏其他的
$('.ct').eq(hdw_index).show()
.siblings().hide();
});
});
</script>
5、下拉菜单
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//鼠标移上li
$('.menu li').hover(function(){
//显示子类ul
$(this).children('ul').show();
//focus()获取焦点事件
$(this).focus().addClass('focusa')
},function(){
//隐藏ul
$(this).children('ul').hide();
//移除其他的焦点事件类focusa
$(this).focus().removeClass('focusa')
});
//透明插件
DD_belatedPNG.fix('ul,.more');
});
</script>
6、后台左菜单制作
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//添加一个类active
$('.box h1:first').addClass('active');
//隐藏所有不是下标为p且不是第一个的值
$('.box p:not(:first)').hide();
//鼠标移上
$('.box h1').hover(function(){
//添加一个hover类
$(this).addClass('hover');
},function(){
//移除所有的‘hover类’
$(this).removeClass('hover');
});
//鼠标点击
$('.box h1').click(function(){
//旁边的p上下滑动
$(this).next('p').slideToggle()
//遍历所有的p，并向上滑动
.siblings('p').slideUp();
//如果active存在就删除，不存在就添加
$(this).toggleClass('active')
//遍历所有的h1，删除所有的active类
.siblings('h1').removeClass('active');
});
});
</script>
7、简单滑动
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.box a').click(function(){
//slideToggle()上下滑动
$('.one').slideToggle();
//toggleClass('active');如果存在就删除,否则就添加
$(this).toggleClass('active');
});
$('.box p').hover(function(){
//鼠标移上添加一个类
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
</script>
8、数据列表控制
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//从第六个开始隐藏
var hdw = $('.content ul li:gt(5):not(:last)');
hdw.hide();
$('.boxmore a').click(function(){
//:visible可见元素
if (hdw.is(':visible')){
hdw.hide();
//改变一个元素内容样式
$('.boxmore a span').css('background','url(img/down.gif) no-repeat right 0')
.text('显示全部资源');
//移除所有的特殊样式onebox
$('ul li').removeClass('onebox');
}else{
hdw.show();
$('.boxmore a span').css('background','url(img/up.gif) no-repeat right 0')
.text('精简资源');
//为指定的元素添加特殊的样式
$('ul li').filter(":contains('网页布局'),:contains('PHP视频教程'),:contains('建站知识'),:contains('高清图片下载')")
.addClass('onebox');
};
return false;
});
});
9、文字图片提示效果
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// x和y表示了title框与元素之间横轴和纵轴之间的距离
var x = 10;
var y = 20;
//鼠标指针位于元素之上
$(".box").mouseover(function(e){
this.myTitle = this.title;//获取默认的title
this.title = "";//获取后将默认的清空
var imgTitle;
if (this.myTitle){
//为title添加一个<br>标签
imgTitle = "<br />"+this.myTitle;
}else{
imgTitle = "";
}
var hdw = "<div id='two'><img src='"+ this.href +"' alt='hdw' />"+imgTitle+"<\/div>";
//插入内容
$("body").append(hdw);
//实现title跟随
$("#two")
.css({
"left":(e.pageX+x)+"px",
"top":(e.pageY+y)+"px"
}).show("fast");
//当鼠标指针从元素上移开时触发事件
}).mouseout(function(){
//将title的元素名称还原
this.title = this.myTitle;
//删除匹配的元素
$("#two").remove();
//当鼠标指针在指定的元素中移动时触发事件
}).mousemove(function(e){
$("#two")
.css({
"left":(e.pageX+x)+"px",
"top":(e.pageY+y)+"px"
});
});
});
//]]>
</script>
10、图片横向动态展示
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var page = 1;
var i = 4;
//向右移动
$(".next").click(function(){
//每个元素的所有祖先元素,body,html
var jq1 = $(this).parents(".a1");
//find查找
var jq2 = jq1.find(".a6");
var jq3 = jq1.find(".a5");
//width获取宽度
var jqwidth = jq3.width();
//length输出数目
var len = jq2.find("li").length;
//向上取整Math.ceil
var page_count = Math.ceil(len/i);
//正在执行动画效果的元素
if(!jq2.is(":animated")){
if (page == page_count){
//与PHP语言类似
jq2.animate({left:'0px'},"slow");
page = 1;
}else{
jq2.animate({left:'-='+jqwidth},"slow");
page++;
}
}
jq1.find("span").eq((page-1)).addClass("one").siblings().removeClass("one");
});
//向左移动
$(".prev").click(function(){
var jq1 = $(this).parents(".a1");
var jq2 = jq1.find(".a6");
var jq3 = jq1.find(".a5");
var jqwidth = jq3.width();
var len = jq2.find("li").length;
var page_count = Math.ceil(len/i);
{if(!jq2.is(":animated")){
if (page == 1){
jq2.animate({left:'-='+jqwidth*(page_count-1)},"slow");
page = page_count;
}else{
jq2.animate({left:'+='+jqwidth},"slow");
page--;
}
}
jq1.find("span").eq((page-1)).addClass("one").siblings().removeClass("one");
});
}
});
</script>
11、文本框失去焦点
<link rel="stylesheet" type="text/css" href="style/hdw.css"/>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//匹配所有 input, textarea, select 和 button 元素
$(":input").focus(function(){
//添加一个样式
$(this).addClass("focusa");
//焦点在显示空
if ($(this).val()==this.defaultValue){
$(this).val("");
}
//失去焦点
}).blur(function(){
$(this).removeClass("focusa");
if ($(this).val()==""){
$(this).val(this.defaultValue);
}
});
});
</script>
12、切换皮肤特效
<link rel="stylesheet" type="text/css" href="css/hdw.css"/>
<link rel="stylesheet" type="text/css" href="css/skin_1.css" id="cssfile"/>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$("#"+this.id).addClass("selected")
.siblings().removeClass("selected");
//设置所有图像的src属性
$("#cssfile").attr("href","css/"+this.id+".css");
});
});
</script>
13、复选框，全选，反选，全不选
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//全选
$("#CheckedAll").click(function(){
//:checkbox所有复选框
//attr设置或返回被选元素的属性值
$("[name=checkboxt]:checkbox").attr("checked",true);
});
//全不选
$("#CheckedNo").click(function(){
$("[name=checkboxt]:checkbox").attr("checked",false);
});
//反选
$("#CheckedRev").click(function(){
//each() 遍历一个数组或对象，for循环
$("[name=checkboxt]:checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str = "你的爱好是:\r\n";
$("[name=checkboxt]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
});
</script>
14、表单验证以及提交
$(document).ready(function(){
//创建一个*
$(".a1").each(function(){
//添加红色强调
var hdw = $("<strong class='reda'>*</strong>");
$(this).parent().append(hdw);
});
//end
//失去焦点
$("form :input").blur(function(){
//判断是否存在a2存在就清空
$(this).parent().find(".a2").remove();
//判断
if ($(this).is("#username")){
if (this.value=="" || this.value.length < 6){
var hdw1 = $("<span class='a2 error'>用户名不得小于6位</span>");
$(this).parent().append(hdw1);
}else{
var hdw1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(hdw1);
}
}
//end
//判断
if ($(this).is("#password")){
if (this.value==""){
var hdw1 = $("<span class='a2 error'>密码不得为空</span>");
$(this).parent().append(hdw1);
}else{
var hdw1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(hdw1);
}
}
//end
//判断
if ($(this).is("#passwords")){
if (this.value=="" || this.value!= $("#password").val()){
var hdw1 = $("<span class='a2 error'>两次密码不一样</span>");
$(this).parent().append(hdw1);
}else{
var hdw1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(hdw1);
}
}
//end
//判断
if ($(this).is("#email")){
if (this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){
var hdw1 = $("<span class='a2 error'>邮件的格式不正确</span>");
$(this).parent().append(hdw1);
}else{
var hdw1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(hdw1);
}
}
//end
//判断
if ($(this).is("#tel")){
if (this.value=="" || isNaN($(this).val()) || this.value.length < 11 ){
var hdw1 = $("<span class='a2 error'>手机号不得为空，必须是11位数字</span>");
$(this).parent().append(hdw1);
}else{
var hdw1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(hdw1);
}
}
//end
});
//blur end
//提交
$("#send").click(function(){
//触发被选元素的指定事件类型
$("form :input").trigger("blur");
var hdw3 = $(".error").length;
if (hdw3){
return false;
}
alert("注册成功");
});
//end
//重置
$("#res").click(function(){
$(".a2").remove();
});
15、表格变色
// JavaScript Document
$(document).ready(function(){
//$("tr:even") //索引为偶数的元素，从 0 开始
//$("tr:odd") //索引为奇数的元素，从 0 开始
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even")
//$("div:contains('nick')") //包含nick文本的元素
//默认选项为星期三的选项
$("tr:contains('星期三')").addClass("selected");
$("tbody>tr").click(function(){
//如果拥有selected类
if($(this).hasClass("selected")){
//移除这个类并且复选框为false
$(this).removeClass("selected")
.find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected")
.find(":checkbox").attr("checked",true);
}
});
});
16、下拉框左右选择
$(document).ready(function(){
$("#add").click(function(){
//#select1元素追加到select2后
$("#select1 option:selected").appendTo("#select2");
});
$("#add_all").click(function(){
$("#select1 option").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
$("#remove_all").click(function(){
$("#select2 option").appendTo("#select1");
});
//双击
$("#select1").dblclick(function(){
$("#select1 option:selected").appendTo("#select2");
});
$("#select2").dblclick(function(){
$("#select2 option:selected").appendTo("#select1");
});
});
17、表格展开收缩
// JavaScript Document
$(document).ready(function(){
$(".hdw").click(function(){
//toggleClass如果存在就删除,否则就添加
$(this).toggleClass("selected")
//toggle(); //切换 显示/隐藏
.siblings('.child_'+this.id).toggle();
}).click();
});
18、each（），find（），next（），parents（）简单实例
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul li").each(function(i){
$(this).html($(this).html()+"------"+i);
});
<!-- //$("p").find("span").addClass("one");-->
//<!--$("p span").css({'background':'orange','padding':'3px','color':'#fff'});-->
$("p").find("span").css({'background':'orange','padding':'3px','color':'#fff'});
});
</script>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#one").click(function(){
//<!--alert($("span").html());-->
alert($(this).next("span").html());
});
});
</script>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").hover(function(){
//<!--$("p").addClass("one");-->
$(this).parents("p").addClass("one");
},function(){
//<!-- $("p").removeClass("one");-->
$(this).parents("p").removeClass("one");
});
});
</script>
19、ui库使用
//日历
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
showButtonPanel: true
});
});
</script>
//按钮
<link rel="stylesheet" type="text/css" href="base/jquery.ui.all.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.button.js"></script>
<link rel="stylesheet" type="text/css" href="css/demos.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("input:submit,input:button,#one").button();
});
//动画特效
<script src="js/jquery-1.6.2.js"></script>
<link rel="stylesheet" href="base/jquery.ui.all.css">
<script src="js/jquery.bgiframe-2.1.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.draggable.js"></script>
<script src="js/jquery.ui.position.js"></script>
<script src="js/jquery.ui.resizable.js"></script>
<script src="js/jquery.ui.dialog.js"></script>
<script src="js/jquery.effects.core.js"></script>
<script src="js/jquery.effects.blind.js"></script>
<script src="js/jquery.effects.explode.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script>
$.fx.speeds._default = 1000;
$(function() {
$( "#test" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#hdw" ).click(function() {
$( "#test" ).dialog( "open" );
return false;
});
});
</script>
