style
成都创新互联-专业网站定制、快速模板网站建设、高性价比临夏网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式临夏网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖临夏地区。费用合理售后完善，十余年实体公司更值得信赖。
*{
margin: 0%;
padding: 0%;
}
.box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
.box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
/style
/head
body
div class="box"
h1
祝福冬奥
/h1
ul
li贝克汉姆/li
li 姚明/li
li张宏/li
li肖恩怀特/li
/ul
/div
script src="./jquery-1.12.4.js"/script
script
/* jQuery的链式调用 */
/* $('div').$('div').text('我是学生').css('color','red').attr({name:'zhangsan',age:30}) */
/* 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 */
/* $('ul li').first().css('background','yellow').end().eq(1).css('background','red') */
/* 获取的只是content里面的距离,不包括padding margin border里面的距离 */
/* 返回以像素为单位的top和left的坐标,仅对可见元素有效 */
/* top和left值都会包括自己的margin和父元素border的值 */
console.log($('div2').offset().top);
console.log($('ul').width());
console.log($('ul').height());
/* offsetParent 返回最近的自己定位的祖先元素 */
console.log($('div2').offsetParent());
/* position() 返回第一个匹配元素相对于父元素的位置 */
console.log($('div').position());
/* scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移*/
/* 设置滚动条的距离 */
$(window).scrollLeft(100)
/* 获取滚动条的距离 */
$(window).scroll(function(){
console.log($(document).scrollLeft());
})
/script
style
.div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
.div2{
width: 200px;
height: 200px;
background-color: red;;
}
/style
/head
body
div class="div1"
div class="div2"
/div
/div
script src="./jquery-1.12.4.js"/script
script
/* mouseenter mouseleave 在进入子元素区域时不会触发
mouseover 和mouseout 会触发 */
/* $('.div1').mouseenter(function(){
$(this).css('background','green')
})
$('.div1').mouseleave(function(){
$(this).css('background','yellow')
}) */
/* 由mouseenter 和mouseleave组成 */
$('.div1').hover(function(){
$(this).css('background','yellow')
console.log(1);
})
/script
style
*{
margin: 0%;
padding: 0%;
}
.box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
.box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
/style
/head
body
div class="box"
h1
祝福冬奥
/h1
ul
li贝克汉姆/li
li 姚明/li
li张宏/li
li肖恩怀特/li
/ul
/div
script src="./jquery-1.12.4.js"/script
script
/* $('li:eq(0)').mouseenter(function(){
$(this).css('background','red')
})
$('li:eq(0)').mouseout(function(){
$(this).css('background','')
}) */
$('li').hover(function(){
/* css('background','')不会改变元素原来bgc样式 */
$('li').first().css('background','red').siblings().css('background','')
})
$('li:eq(1)').mouseenter(function(){
$(this).css('background','yellow')
})
$('li:eq(1)').mouseout(function(){
$(this).css('background','')
})
/script
style
.box{
margin: 30px auto;
width: 500px;
height: 300px;
border: 1px solid cyan;
position: relative;
}
.img-list img{
width: 500px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
}
/style
/head
body
div class="box"
div class="img-list"
img src="./imgs/1.jpg" alt=""
img src="./imgs/2.jpg" alt=""
img src="./imgs/3.jpg" alt=""
img src="./img/4.jpg" alt=""
/div
/div
button style="margin-left: 450px;" class="left"后退/button
button class="right"前进/button
script src="./jquery-1.12.4.js"/script
script
/* 定时器 过2s 显示一张图 显示最后一张图的时候再跳回第一张 */
/* let i = 0
$('img').eq(0).show().siblings().hide();
setInterval(function(){
i++;
if(i==$('img').length){
i=0
} */
/* 淡入淡出 */
/* $('img').eq(i).fadeIn('slow').siblings().fadeOut('slow')
},2000) */
let i = 0;
let timer = null
$('img').eq(i).show().siblings().hide();
/* 自动播放 */
show();
$('.left').click(function(){
/* 先清空定时器 阻止自动播放 */
clearInterval(timer);
i--;
/* 防止减到-1找不到对应的图片 */
if(i == -1){
i=$('img').length - 1
}
/* 展示当前对应的图片其他图片淡出 */
$('img').eq(i).show().siblings().hide();
/* 继续开始自动播放 */
show();
})
$('.right').click(function(){
/* 先清空定时器 阻止自动播放 */
clearInterval(timer);
i++;
/* 防止减到-1 找不到对应的图片 */
if(i==$('img').length){
i=0
}
/* 展示当前对应的图片其他图片淡出 */
$('img').eq(i).show().siblings().hide();
/* 继续开始自动播放 */
show()
/* 定时器 过两秒 显示一张图 显示最后一张图的时候
再跳到第一张 */
})
function show(){
timer = setInterval(function (){
i++;
if(i == $('img').length){
i = 0
}
/* fadeIn 淡入 fadeOut淡出 */
$('img').eq(i).fadeIn().siblings().fadeOut();
},2000)
}
/script
body
用户名:input type="text"br
密码: input type="password"
script src="./jquery-1.12.4.js"/script
script
/* 按下键盘 */
/* $('input[type=text]').keydown(function(){
alert('我按下了')
}) */
/* 抬起键盘 */
/* $('input[type=password]').keyup(function(){
alert('我抬起了')
}) */
/* keypress 连续敲击键盘 */
/* $('input[type=text]').keypress(function(){
alert('连续打字')
}) */
$(window).keyup(function(e){
if(e.keyCode==13){
alert('已提交')
}
})
/script
/body
当用户按下enter键时触发from提交，而不只是点击提交按钮才提交！这样更友好。 13表示enter按键的keyCode编码
jquery的键盘事件分为keypress、keydown和keyup事件
一、键盘事件
1、keypress()事件
keypress当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。
2、keydown()事件
当按钮被按下时，发生 keydown 事件（多用于游戏开发，比如一直按空格键进行攻击）。
3、keyup事件
keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件
二、通过键盘事件可以进行相应操作
$(document).ready(function() {
//释放按键时
$(document).keyup(function(event){
if(event.keyCode=="13"){ //13表示回车键的代码
alert("释放按键");
}
})
//按下按键时
$(document).keydown(function(event){
if(event.keyCode=="13"){
alert("按下按键");
}
})
//输入字符时
$(document).keypress(function(event){
if(event.keyCode=="13"){
alert("输入字符");
}
})
//获取键盘的 键码值 方法（如果不知道某个键对应的 键码值，可用这个方法，在键盘上按该键，就会弹出对应的值 ）
$(document).keyup(function(event){
alert(event.keyCode);
})
});
function AHrefClick (){
var e = jQuery.Event("keydown");//模拟一个键盘事件
e.keyCode = 13;//keyCode=13是回车
$("#id").trigger(e);//模拟按下回车
}
要模拟键盘事件，首先要在需要模拟的元素上绑定事件才能模拟。比如先：
$(".div").on("keydown","input",function(){
alert("ABC");
});
然后再执行：
var e = jQuery.Event("keydown");//模拟一个键盘事件
e.keyCode = 13;//keyCode=13是回车
$(".div input").trigger(e);//模拟按下回车
当按钮被按下时，发生 keydown 事件。
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。
语法
$(selector).keydown(function)
例如：
$(document).keydown(function(event){
alert(event.keyCode);//弹出按键的对应值
});
!-- 把下边所有代码放到 .html 文件中，打开看效果就知道啦 --
html
headtitle/title/head
body
按一下键盘试试
/body
/html
script src="" type="text/javascript"/script
script type="text/javascript"
// 当页面执行 onkeydown 事件（键盘点击事件）的时候，执行方法 function(e){}
$(document).keydown(function(e){
// 这个判断是为了兼容所有浏览器，使 e 能被所有浏览器所解析
if(!e) var e = window.event;
// 这里就是要执行的方法体，其中 e 就是键盘对象
// 其中 e.keyCode（Code中C一定要大写） 就是按下的键的键值
alert("键盘按键的 keycode 是 " + e.keyCode);
})
/script
最快捷的修改办法：
$(document).ready(function(){
var p = $("#p").click(function(){
$(this).hide();
});
});
//此处是需要绑定esc事件的代码，当esc按下时触发hide方法
$(document).bind('keydown', 'esc',function (evt){
//关闭层代码
$(this).hide();
return false;
});