整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、jQuery的事件有哪些？
javscript的事件：onClick,onmouseover
jquery的事件：click,mouseover
注意jQuery的事件比javascript的事件少一个on
1）鼠标事件
click：单击事件
//dbclick：双击事件
mouseover：鼠标悬念（移入）
mouseout：鼠标移出
<style>
.abc{
background-color: #aaa;
}
</style>
<script type="text/javascript">
$(function(){
$("#nav li").mouseover(function(){
$(this).addClass("abc");//当鼠标移入li元素时添加样式
}).mouseout(function(){
//$(this).removeClass() //当鼠标移出时删除所有样式
$(this).removeClass("abc") //当鼠标移出时删除指定样式
});
});
</script>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">在线浏览</a></li>
</ul>
</div>
2) 键盘事件
keydown：键盘按下事件
keypress：键盘按下并放开时触发
keydown：键盘放开时触发
<script type="text/javascript">
$(function(){
//按回车键自动登录(不用再点击登录按钮)
$(document).keydown(function(event){
if(event.keyCode==13){
$("#actionForm").submit();
return true;
}
return false;
})
});
</script>
<form id="actionForm" action="../index.html">
登录名：<input id="txtLoginName" /><br />
密码：<input type="password" />
<input type="button" value="登录" />
</form>
3) 表单事件
focus：获得焦点时触发
blur：失去焦点
select：文本选中时触发
<script type="text/javascript">
$(function(){
//文本框获得焦点时，将当前文本框的内容清空（值等于"请输入登录名.."）
//文本框失去焦点时，判断内容是否为"请输入登录名.."或是否为空，那么将这个值"请输入登录名.."设回到文本框
$("#txtLoginName").focus(function(){
if($(this).val()=='请输入登录名...'){
$(this).val('');//清空内容
}
}).blur(function(){
if($(this).val().trim()==''){
$(this).val('请输入登录名...');//清空内容
}
});
});
</script>
<form id="actionForm" action="../index.html">
登录名：<input id="txtLoginName" value="请输入登录名..." /><br />
密码：<input type="password" />
<input type="button" value="登录" />
</form>
4）其它事件
bind()：绑定事件
unbind()：移除绑定事件
<script type="text/javascript">
$(function(){
//绑定单个事件
// $("#btn1").bind('click',function(){
// alert("OK");
// });
//绑定多个事件
$("#btn1").bind({
mouseover:function(){
alert("鼠标悬念");
},
mouseout:function(){
alert("鼠标移出");
}
})
//解除绑定事件
$("#btn2").click(function(){
//$("#btn1").unbind("click");//解除绑定的单个事件
$("#btn1").unbind("mouseover mouseout");//解除多个绑定的事件，用空格分隔
//$("#btn1").unbind();//解除所有绑定的事件
});
});
</script>
<input type="button" id="btn1" value="点我" /><br />
<input type="button" id="btn2" value="解除绑定" />
hover()：相当于mouseover和mouseout的组合
.abc{
background-color: #aaa;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
// $("#nav li").mouseover(function(){
// $(this).addClass("abc");//当鼠标移入li元素时添加样式
// }).mouseout(function(){
// //$(this).removeClass() //当鼠标移出时删除所有样式
// $(this).removeClass("abc") //当鼠标移出时删除指定样式
// });
$("#nav li").hover(
function(){
$(this).addClass("abc");//当鼠标移入li元素时添加样式
},
function(){
$(this).removeClass("abc") //当鼠标移出时删除指定样式
}
);
});
</script>
togger()：
a) 鼠标连续点击
b) 显示和隐藏
<script type="text/javascript">
$(function(){
//点击当前页面时显示红绿蓝的背景色
$("body").toggle(
function(){
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","green");
},
function(){
$(this).css("background-color","blue");
}
);
});
</script>
</head>
<body>
测试
</body>
大网站常用的页面加载动画
一、使用场景
经常见到某些网站的动画是在屏幕显示到当前元素的时候，会有个过渡动画。
页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意
使用wow.js和Animate.css，实现各大网站常用的页面加载动画
1.wow.js
实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。
2.Animate.css
非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画
二、使用方法
1,下载文件
animate.css 下载地址: 网址前缀+daneden.github.io/animate.css/
wow.min.js 下载地址: 网址前缀+www.downyi.com/downinfo/37040.html#address
2,引入文件
<link rel="stylesheet" href="css/animate.css" rel="external nofollow" >
<script src="js/wow.min.js"></script>
3、HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）
属性，如：
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
4、JavaScript
new WOW().init();
要自定义配置，可如下使用：
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
三、兼容性
四、配置属性
过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("追加文本");
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("在开头追加文本");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
实例
functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 标签创建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
实例
functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 创建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素vartxt3=document.createElement("big"); // 使用 DOM 创建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本}
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
