事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件处理
$("").on(eve,[selector],[data],fn) //在选择元素上绑定一个或多个事件的事件处理函数。
//.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
//$(‘ul‘).on(‘click‘,‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
//click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
//$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个
//li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的
//但是用$(‘ul‘).on(‘click‘,‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加
//li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo:"bar"}, myHandler)实例之面板拖动
<!DOCTYPE html>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
</head>
<body>
<divstyle="border: 1px solid #ddd;width: 600px;position: absolute;">
<divstyle="height: 40px;color: white;">
标题
</div>
<divstyle="height: 300px;">
内容
</div>
</div>
<scripttype="text/javascript"src="jquery-2.2.3.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$(‘#title‘).mouseover(function(){
$(this).css(‘cursor‘,‘move‘);
}).mousedown(function(e){
//console.log($(this).offset());
var_event = e ||window.event;
// 原始鼠标横纵坐标位置
varord_x = _event.clientX;
varord_y = _event.clientY;
varparent_left = $(this).parent().offset().left;
varparent_top = $(this).parent().offset().top;
$(this).bind(‘mousemove‘,function(e){
var_new_event = e ||window.event;
varnew_x = _new_event.clientX;
varnew_y = _new_event.clientY;
varx = parent_left + (new_x - ord_x);
vary = parent_top + (new_y - ord_y);
$(this).parent().css(‘left‘,x+‘px‘);
$(this).parent().css(‘top‘,y+‘px‘);
})
}).mouseup(function(){
$(this).unbind(‘mousemove‘);
});
})
</script>
</body>
</html>实例之放大镜
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>bigger</title>
<style>
*{
margin:0;
padding:0;
}
.outer{
height:350px;
width:350px;
border: dashed5pxcornflowerblue;
}
.outer.small_box{
position: relative;
}
.outer.small_box.float{
height:175px;
width:175px;
background-color: darkgray;
opacity:0.4;
fill-opacity:0.4;
position: absolute;
display: none;
}
.outer.big_box{
height:400px;
width:400px;
overflow: hidden;
position:absolute;
left:360px;
top:0px;
z-index:1;
border:5pxsolid rebeccapurple;
display: none;
}
.outer.big_boximg{
position: absolute;
z-index:5;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<imgsrc="images/2.jpg">
</div>
<div>
<imgsrc="2.jpg">
</div>
</div>
<scriptsrc="jquery-2.1.4.min.js"></script>
<script>
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block");
$(".big_box").css("display","block")
});
$(".small_box").mouseout(function(){
$(".float").css("display","none");
$(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var_event=e ||window.event;
varfloat_width=$(".float").width();
varfloat_height=$(".float").height();
console.log(float_height,float_width);
varfloat_height_half=float_height/2;
varfloat_width_half=float_width/2;
console.log(float_height_half,float_width_half);
varsmall_box_width=$(".small_box").height();
varsmall_box_height=$(".small_box").width();
// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
varmouse_left=_event.clientX-float_width_half;
varmouse_top=_event.clientY-float_height_half;
if(mouse_left<0){
mouse_left=0
}elseif(mouse_left>small_box_width-float_width){
mouse_left=small_box_width-float_width
}
if(mouse_top<0){
mouse_top=0
}elseif(mouse_top>small_box_height-float_height){
mouse_top=small_box_height-float_height
}
$(".float").css("left",mouse_left+"px");
$(".float").css("top",mouse_top+"px")
varpercentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
varpercentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY)
$(".big_box img").css("left", -percentX*mouse_left+"px")
$(".big_box img").css("top", -percentY*mouse_top+"px")
})
})
</script>
</body>
</html>动画效果
回调函数
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<scriptsrc="jquery-2.1.4.min.js"></script>
</head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>
</html>扩展方法 (插件机制)
用JQuery写插件时，最核心的方两个方法
<script>
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({
min:function(a, b){returna < b ? a : b; },
max:function(a, b){returna > b ? a : b; }
});
console.log($.min(3,4));
//-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for(vari=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
</script>实例之注册验证
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
li{
list-style: disc;;
}
img{
display: block;
height: 200px;
}
</style>
</head>
<body>
<form>
<p><inputtype="text"name="username"mark="用户名"></p>
<p><inputtype="text"name="email"mark="邮箱"></p>
<p><inputtype="submit"value="submit"></p>
</form>
<scriptsrc="jquery-2.1.4.min.js"></script>
<script>
// 注意:
// DOM对象--->jquery对象 $(DOM)
// jquery对象--->DOM对象 $("")[0]
//---------------------------------------------------------
// DOM绑定版本
functionvalidate(){
flag=true;
$("Form .v1").each(function(){
$(this).next("span").remove();// 防止对此点击按钮产生多个span标签
varvalue=$(this).val();
if(value.trim().length==0){
varmark=$(this).attr("mark");
varele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
// return false-------->引出$.each的return false注意点
}
});
returnflag
}
</script>
</body>
</html>轮播图
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>轮播图</title>
<stylemedia="screen">
* {
margin:0;
padding:0;
}
#Numberli{
width:50px;
height:50px;
background-color:#303a40;
color: white;
text-align: center;
line-height:50px;
border-radius:50%;
margin-left:30px;
list-style-type: none;
display: inline-block;
}
#Number{
position: absolute;
width:100%;
text-align: center!important;
top:80%;
}
.outer{
cursor: pointer;
width:60%;
height:75%;
position: absolute;
left:50%;
top:10%;
margin-left: -30%;
}
.outer:hover.button{
display: inline-block;
}
.imgimg{
width:100%;
height:100%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.button{
display: none;
opacity:0.3;
color: white;
text-align: center;
line-height:80px;
top:50%;
position: absolute;
width:80px;
height:80px;
background-color: black;
}
.r{
right:0;
}
.l1{
background-color: red!important;
}
</style>
</head>
<body>
<div>
<div>
</div>
<div>
<ul>
</ul>
</div>
<div>
<
</div>
<div>
>
</div>
</div>
</body>
<scriptsrc="jquery-2.1.4.min.js"></script>
<scripttype="text/javascript">
vararr=[‘images/1.jpg‘,‘images/2.jpg‘,‘images/3.jpg‘,‘images/4.jpg‘,‘images/5.jpg‘,‘images/6.jpg‘]
$.each(arr,function(i,v){
console.log(i)
$(‘.img‘).append("<a><img src="+v+"></a>")
if(i==0){
$(‘ul‘).append("<li class=‘l1‘>"+(i+1)+"</li>")
}else{
$(‘ul‘).append("<li>"+(i+1)+"</li>")
}
})
$(‘.img‘).append("<a><img src="+arr[0]+"></a>")
$(‘#Number li‘).mouseover(function(){
$(this).addClass(‘l1‘).siblings().removeClass(‘l1‘)
varindex=$(this).index()
i=index
$(‘.img a‘).eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
vartime = setInterval(move,2000)
vari =0;
functionmove(){
if(i==arr.length-1){
i=-1
}
i++
$(‘#Number li‘).eq(i).addClass(‘l1‘).siblings().removeClass(‘l1‘)
$(‘.img a‘).eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(‘.outer‘).hover(function(){
clearInterval(time)
},function(){
time=setInterval(move,2000)
})
$(‘.r‘).click(function(){
move()
})
$(‘.l‘).click(function(){
if(i==0){
i=arr.length
}
i--
$(‘#Number li‘).eq(i).addClass(‘l1‘).siblings().removeClass(‘l1‘)
$(‘.img a‘).eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
</script>
</html>识别图中二维码,领取python全套视频资料
前端框架之jQuery（二）----轮播图,放大镜
原文地址：https://www.cnblogs.com/IT-Scavenger/p/9252251.html