jq鏈式編程
⑴ jQuery鏈式調用、滑鼠移入移出、輪播、鍵盤事件
<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>
/* 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>
⑵ 請問鏈式編程是什麼意思啊
鏈式腔念辯編程 是將多個操作（多行代伍缺碼）通過點號"."鏈接在一起成為一句代碼。 鏈式代碼高拆通常要求操作有返回值， 但對於很多操作大都是void型，什麼也不返回，這樣就很難鏈起來了， 當然也有解決辦法，可能不太優雅。 鏈式編程的新思想在jQuery中已流行使用
希望採納
⑶ jquery怎麼取redis中的值
這個有很多種方法，
通過id $("#id")
通過class $(".class")
通過name $("[name='name']")
通過標簽，例如: input $(":input")
等等
通過以上方法找羨並顫到對象，然後在進行操作，比如兄敗需要這些對象的values值，就在後面加.val()等等。
jquery是可以鏈式編程的，非常方便蔽沒