<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-1124js"></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的值 /
consolelog($('div2')offset()top);
consolelog($('ul')width());
consolelog($('ul')height());
/ offsetParent 返回最近的自己定位的祖先元素 /
consolelog($('div2')offsetParent());
/ position() 返回第一个匹配元素相对于父元素的位置 /
consolelog($('div')position());
/ scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移/
/ 设置滚动条的距离 /
$(window)scrollLeft(100)
/ 获取滚动条的距离 /
$(window)scroll(function(){
consolelog($(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-1124js"></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')
consolelog(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-1124js"></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/1jpg" alt="">
<img src="/imgs/2jpg" alt="">
<img src="/imgs/3jpg" alt="">
<img src="/img/4jpg" alt="">
</div>
</div>
<button style="margin-left: 450px;" class="left">后退</button>
<button class="right">前进</button>
<script src="/jquery-1124js"></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-1124js"></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(ekeyCode==13){
alert('已提交')
}
})
</script>
</body>
只走一步是因为移动一次后没有对x进行处理，所以点第二次的时候 x的值不变，x-10也不变，所以就不动了
<html>
<head>
<title>demo</title>
<style type="text/css">
active
{
border: 1px solid red;
}
</style>
<script type="text/javascript" src="Scripts/jquery-162minjs"></script>
<script type="text/javascript">
var x = 0;//水平方向位移
var y = 0;//垂直方向位移
$(document)keydown(function (event) {
switch (eventwhich) {
case 37: y = y - 10; $("#person")css("left", y + "px"); break;
case 38: x = x - 10; $("#person")css("top", x + "px"); break;
case 39: y = y + 10; $("#person")css("left", y + "px"); break;
case 40: x = x + 10; $("#person")css("top", x + "px"); break;
default: break;
}
});
</script>
</head>
<body>
<div id="person" class="active" style="position: absolute; width: 50px; height: 50px;" />
</body>
</html>
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery。
2、在indexhtml中的<script>标签，输入jquery代码：$('input')change(function () {$('body')append('新值与旧值不相等')});。
3、浏览器运行indexhtml页面，此时会在输入内容变化时打印出新值与旧值是否相等的提示。
你好！！
1 Ctrl+S 组合键应该是在某个事件中被定义的，比如说：某个元素的keydown事件中，因此只需在按钮的click事件中，触发该事件就可以了；2 按钮的click事件中，需要设置下事件对象的属性，比如：eventkeyCode=83 && eventctrlKey=true; 然后将该event对象传入keydown事件中；
可以参考以下代码：
<script type="text/javascript">$(document)ready(function(){
$(window)keydown(function(e){
if(ekeyCode==83&&ectrlKey){
epreventDefault();
alert("按下了ctrl+S`````");
}
});
var e = jQueryEvent("keydown");
ekeyCode=83,ectrlKey=true;
$("button")click(function(){
$(window)trigger(e);
});
});
</script>
documentonkeydown = function(event) {
var e = event || windowevent || argumentscalleecallerarguments[0];
epreventDefault && epreventDefault() || (windoweventreturnValue=!1);
consolelog(ealtKey, ectrlKey, eshiftKey, ekeyCode);
// Ctrl + s
if (ectrlKey && ekeyCode===83) {
alert("Ctrl + s key down");
}
}
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="zzp">
<metaname="keywords"content="链式,事件,元素,函数,键盘">
<metaname="description"content="<style> { margin: 0%; padding: 0%; } box{ width: 340px">
<title>Document</title>
<styletype="text/css">
input:focus,textarea:focus{
border:1pxsolid#f00;
background:#fcc;
}
focus{
border:1pxsolid#f00;
background:#fcc;
}
</style>
<scripttype="text/javascript"src="js/jquery-164minjs"></script>
<scripttype="text/javascript">
vartemp;
$(function(){
$(":input")focus(function(){//获得焦点
alert(thisid);
alert("获得焦点时的值是："+(this)val());temp=trim((this)val());alert(temp);(this)addClass("focus");//添加样式
})blur(function(){//失去焦点
(this)removeClass("focus");//移除样式alert("失去焦点时的值是："+(this)val());
varlastValue=trim((this)val());
if(temp!=lastValue&&null!=lastValue&&""!=lastValue)
{
alert("值改变了！");
}
else{
alert("值没有变！");
}
//
});
});
</script>
</head>
<body>
<formaction="#"method="post"id="reFrom">
<fieldset>
<legend>个人信息</legend>
<div>
<label>名称：</label>
<inputid="username"type="text"value="admin">
</div>
<div>
<label>密码：</label>
<inputid="pass"type="text"value="123456">
</div>
<div>
<label>性别：</label>
<inputid="sex"name="sex"type="radio"value="1"checked="checked">男
<inputid="sex"name="sex"type="radio"value="2">女
</div>
<div>
<label>详细信息：</label>
<inputid="msg"type="text"value="获取值">
</div>
</fieldset>
</form>
</body>
</html>
扩展资料
change()函数用于为每个匹配元素的change事件绑定处理函数。该函数也可用于触发change事件。此外，你还可以额外传递给事件处理函数一些数据。change事件会在文本内容或选项被更改时触发。该事件仅适用于和以及。
对于text和textarea元素，该事件会在元素失去焦点时发生(文本内容也发生了更改)。可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发change事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过change()绑定的事件，请使用unbind()函数。该函数属于jQuery对象(实例)。
js和jquery没有类似的监控功能，可以给你提供两种思路。
可以判断输入框的焦点事件
可以用jquery的resize()方法，浏览器窗口大小改变时会触发。
以上就是关于jQuery链式调用、鼠标移入移出、轮播、键盘事件全部的内容，包括:jQuery链式调用、鼠标移入移出、轮播、键盘事件、jQuery通过键盘上下左右键，移动层、jquery如何判断文本框的值被改变了等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）