导航
当鼠标经过li标签时，改变背景色 及显示子元素ul,鼠标离开时，恢复背景色并动画收起ul
$("li").mouseenter(function () {
// $(this).addClass('active');
if(!$(this).children('ul').is(':animated')){
$(this).css('background-color', 'red').children('ul').slideDown();
}
}).mouseleave(function () {
// $(this).removeClass('active');
$(this).css('background-color', '').children('ul').slideUp();
});
地址联动
<h1>请选择您的地址</h1>
<hr>
<select name="" id="prov"></select>
<select name="" id="city"></select>
<br>
<a href="http://www.lampbrother.net" target="_blank">我是超链接</a>
<form action="http://www.lampbrother.net">
<button id="btn">submit</button>
</form>
<script src="jquery-1.12.4.min.js"></script>
<script>
var prov_list = ['山西', '陕西', '甘肃', '青海', '新疆'];
var city_list = [];
city_list[0] = ['太原', '大同', '平遥', '晋中', '运城'];
city_list[1] = ['西安', '宝鸡', '咸阳', '延安', '渭南'];
city_list[2] = ['兰州', '武威', '天水', '平凉', '嘉峪关'];
city_list[3] = ['西宁', '玉树', '格尔木', '林芝', '唐古拉'];
city_list[4] = ['乌鲁木齐', '吐鲁番', '伊犁', '喀什', '克拉玛依'];
//遍历省的信息 添加到第一个list
//遍历prov_list 添加到#prov
$.each(prov_list,function(key,value){
$("<option>").html(value).val(key).appendTo("#prov");
})
//当第一个下拉框选中内容改变的时候，置空第二个下拉框，将下标 对应当前prov_list的val的city_list 加入到第二个下拉框
$("#prov").change(function(){
$("#city").empty();
$.each(city_list[$(this).val()],function(key,value){
$("<option>").html(value).val(key).appendTo("#city");
})
})
//触发#prov的change事件
$("#prov").trigger('change');
//触发#btn的click事件
$("#btn").triggerHandler("click");
</script>
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。
与 trigger() 方法相比的不同之处
它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
动画效果
div的隐藏显示及切换
<style>
#box{
width: 400px;
height: 300px;
border: 1px solid #999;
background: url('../h5/image/middle.jpg');
background-size: cover;
}
</style>
<h1>jquery 动画效果</h1>
<hr>
<button id="hide_btn">隐藏</button>
<button id="show_btn">显示</button>
<button id="toggle_btn">切换</button>
<button id="delay_btn">delay</button>
<br>
<br>
<div id="box">
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#hide_btn").click(function(){
// $("#box").hide('slow');
// $("#box").hide('normal');
$("#box").hide('fast');
// $("#box").hide(3000);
})
$("#show_btn").click(function(){
$("#box").show(2000,function(){
alert('啊 我显示完了');
});
})
$("#toggle_btn").click(function(){
$("#box").toggle(2000);
})
$("#delay_btn").click(function(){
$("#box").hide(2000).delay(3000).show(2000);
})
})
</script>
横着的手风琴
寻找.nav样式下的h2元素 点击时执行 寻找它的下一个div元素 动画展开 宽度520px，2秒执行完毕 遍历其他同胞div元素 设置宽度为0
<script>
$(function(){
$('.nav h2').click(function(){
$(this).next('div').animate({'width':'520px'},2000).siblings('div').animate({'width':'0px'},2000);
})
})
</script>
滑动动画效果
$(function(){
$("#hide_btn").click(function(){
//隐藏
$("#box").slideUp();
// $("#box").slideUp(5000);
})
$("#show_btn").click(function(){
//显示
$("#box").slideDown();
})
$("#toggle_btn").click(function(){
//切换
$("#box").slideToggle();
})
$("#hide_show_btn").click(function(){
//隐藏完马上显示
$("#box").slideUp().slideDown();
})
})
轮播图
$(function(){
//默认图片显示
$(".image-list img:first").show();
//定时 循环变量
var m = 1;
var t = setInterval(imagePlay,3000);
function imagePlay(){
if(m>4){
m = 0;
}
controlImage(m);
controlIcon(m);
m ++;
}
//控制图片变化
function controlImage(n){
$(".image-list img").finish().fadeTo(500,0.3).hide().eq(n).show().fadeTo(500,1);
}
//控制图标变化
function controlIcon(n){
$(".icon-list span").removeClass("active").eq(n).addClass("active");
}
//控制图标
$(".play-box").mouseenter(function(){
clearInterval(t);
$(".icon-list span").mouseenter(function(){
controlImage($(this).index());
controlIcon($(this).index());
m = $(this).index() + 1;
})
}).mouseleave(function(){
t = setInterval(imagePlay, 3000);
})
})
全选
$(function(){
$("#select_input").click(function(){
// alert($(this).prop('checked'));
$("#list input").prop('checked',$(this).prop('checked'));
})
})
删除/恢复
detach() 方法移除被选元素，包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
$(function(){
$("#box").mouseenter(function(){
$(this).css("background-color","green");
}).mouseleave(function(){
$(this).css("background-color","orange");
})
})
var div = null;
//删除
$("#remove_btn").click(function(){
// div = $("#box").remove();
div = $("#box").detach();
})
//恢复
$("#goback_btn").click(function(){
$(document.body).append(div);
})
事件委派
//鼠标移至或离开li 改变其背景色
$("#list").on("mouseenter","li",function(){
$(this).css("background-color","#abcdef");
}).on("mouseleave","li",function(){
$(this).css("background-color","#f5f5f5");
})
//将#myinput里的内容 添加至li
$("#add_btn").click(function(){
$("<li>").html($("#myinput").val()).appendTo("#list");
})
树形菜单导航
$(".nav h2").click(function(){
// $(this).next('ul').toggle();
// $(this).next('ul').slideToggle();
//未展开的展开 展开的收起
if($(this).next('ul').is(':hidden')){
$(this).next('ul').slideDown();
}else{
$(this).next('ul').slideUp();
}
})
新闻滚动播出
fadeTo（）方法将选定元素的不透明度逐渐更改为指定的不透明度（渐变效果）
slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
$(function(){
setInterval(function(){
// $(".news_list li").last().hide().prependTo('ul').slideDown(1000);
// },2000)
//每3秒将最后一条加至最上面滚动播放
$(".news_list li").last().fadeTo(0,0).hide().prependTo('ul').slideDown(1000).fadeTo(500,1);
},3000)
})
选项卡
finish() 方法停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
delay() 方法对队列中的下一项的执行设置延迟。
eq(index|-index) 获取第N个元素
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
$(function(){
//单击事件
$(".options li").click(function(){
//给当前点击的.options li增加current样式，其他动兄弟元素移除current样式
$(this).addClass("current").siblings().removeClass("current");
// console.log($(this).index())
$(".card li").finish().fadeOut(1000).delay(1000).eq($(this).index()).fadeIn(1000);
})
})
自定义动画
toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
该方法也可用于切换被选元素的 hide() 与 show() 方法。
//自定义动画--宽度
$(function(){
$("#animate_btn").click(function(){
$("#box").animate({
"width":"1000px"
},3000)
})
//自定义动画--多个class属性
$("#animate_btn1").click(function(){
$("#box").animate({
"width":"1000px",
"height":"600px",
"border-width":"10px"
},3000)
})
//自定义动画--toggle
$("#animate_toggle_btn").click(function(){
$("#box").animate({
"width":"toggle",
},3000)
})
//slideUp通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
$("#slide_btn").click(function(){
$("#box").slideUp(10000)
})
//停止动画
$("#stop_btn").click(function(){
$("#box").stop()
})
})
jquery事件
//鼠标移至$(".box")显示隐藏的 $(".wrap") 鼠标移除隐藏显示的$(".wrap")
$(function(){
$(".box").mouseenter(function(){
$(".wrap").slideDown();
}).mouseleave(function(){
$(".wrap").slideUp();
})
//当p获得焦点当时候 改变子元素input的宽度 失去焦点时恢复
$("p").focusin(function(){
$(this).children("input").css('width',"300px");
}).focusout(function(){
$(this).children("input").css('width',"auto");
})
//按下鼠标按键时触发
$(".content").mousedown(function(en){
console.log(en);
console.log(en.type);
console.log(en.target);
console.log(en.which);
console.log(en.pageX+','+en.pageY);
console.log(en.clientX+','+en.clientY);
console.log(en.button);
})
})
jQuery选择器
//基本选择器
// $("#first_list").css("border","10px solid red");
// $(".item").css("border","10px solid red");
// $("li").css("border","2px solid red");
// $("*").css("border","2px solid red");
// $(".item,ul,h1").css("border","2px solid red");
//层级选择器
// $("#first_list li").css("border","2px solid #f90");
// $("#first_list>li").css("border","2px solid #f90");
// $("#active+li").css("border","2px solid #f90");
// $("#active~li").css("border","2px solid #f90");
// $("li:first").css("border","2px solid #f90");
// $("li:last").css("border","2px solid #f90");
// $("li:eq(3)").css("border","2px solid #f90");
// $("li:lt(5)").css("border","2px solid #f90");
// $("li:gt(8)").css("border","2px solid #f90");
// $("li:even").css("border","2px solid #f90");
// $("li:odd").css("border","2px solid #f90");
// $(":header").css("border","10px solid red");
// $(".container :header").css("border","10px solid red");
// $("li:not('.item')").css("border","10px solid red");
$("input:focus").css("border","2px solid #f90").css("outline","2px solid red");
网友评论