鼠標(biāo)移入移除
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
? <script type="text/javascript">
$(function(){
?? // $('#div1').mouseover(function () {
//? ?? $(this).stop().animate({marginvTop:50});
?? // })鼠標(biāo)移入 移入子元素會(huì)觸發(fā) 事件發(fā)生在誰(shuí)身上 $(this)就是誰(shuí)
?? // $('#div1').mouselout(function () {
//? ?? $(this).stop().animate({marginvTop:100});
?? // })鼠標(biāo)離開 離開子元素會(huì)觸發(fā) 會(huì)記錄鼠標(biāo)移入移出的次數(shù) stop會(huì)將之前沒有做完的結(jié)束,開始新的動(dòng)畫
?? // $('#div1').mouseenter(function () {
//? ?? $(this).stop().animate({marginvTop:50});
?? // })鼠標(biāo)進(jìn)入 子元素不觸發(fā)
?? // $('#div1').mouseleave(function () {
//? ?? $(this).stop().animate({marginvTop:100});
?? // })鼠標(biāo)離開子元素不觸發(fā)
?? //簡(jiǎn)寫mouseenter mouseleave
?? $('#div1').hover(function () {
? ? ? $(this).stop().animate({marginvTop: 50});
? ? ? //鼠標(biāo)移入時(shí)
?? }, function(){
? ? ? $(this).stop().animate({marginvTop:100});
? ? ? //鼠標(biāo)移出時(shí)
});
});
?</script>
<body>
<div id="div1" class="box">
?? <div class="son"></div>
</div>
</body>
0人點(diǎn)贊
bind綁定事件
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
?? <script type="text/javascript">
? ? ? $(function(){
? ? ? ?? // $('#btn').click(function () {
? ? ? ?? //只能綁定click事件
? ? ? ?? // })
? ? ? ?? $('#btn').bind('click mouseover',function () {
? ? ? ? ? ? alert('hello');//鼠標(biāo)移入彈出hello
? ? ? ? ? ? //綁定多個(gè)事件? 綁定click事件和mouseover事件
? ? ? ? ? ? $(this).unbind('mouseover');
? ? ? ? ????//解除綁定事件
? ? ? ?? })
? ? ? })
?? </script>
<body>
?? <input type="button" value="按鈕" id="btn">
</body>
自定義事件
$(function(){
? ? ? //自定義事件只能使用bind的方式進(jìn)行綁定
? ? ? //通過trigger來觸發(fā)
? ? ? $('#btn1').bind('hello',function () {
? ? ? ?? alert('hello!');
});
? ? ? $('#btn2').click(function () {
? ? ? ?? $('#btn1').trigger('hello');
});//點(diǎn)擊按鈕2時(shí)'hello'會(huì)被trigg觸發(fā)
? ? ? $('#btn1').trigger('hello');
}) //直接觸發(fā)
<input type="button" value="按鈕" id="btn1">
<input type="button" value="按鈕" id="btn2">
input框和其他事件
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
?? <script type="text/javascript">
? ? ? $(function(){
? ? ? ?? $('#text01').focus(function () {
? ? ? ? ? ? alert('獲取焦點(diǎn)');
? ? ? ?? });//網(wǎng)頁(yè)顯示獲取焦點(diǎn)
? ? ? ?? $('#text01').blur(function () {
? ? ? ? ? ? alert('失去焦點(diǎn)');
? ? ? ?? });
? ? ? ?? // $('#txt01').focus();
? ? ? ?? //自動(dòng)獲取焦點(diǎn)
? ? ? ?? // $('#txt01').change(function () {
? ? ? ?? //? ?? alert('值變了');
? ? ? ?? //? ?? // change 表單元素的值發(fā)生變化 失去焦點(diǎn)才會(huì)被觸發(fā)
? ? ? ?? // }) //檢測(cè)用戶名是否存在 用戶名全部輸完才會(huì)檢測(cè) 高頻觸發(fā)
? ? ? ? ? $('#txt01').keyup(function () {
? ? ? ? ? ?? alert('鍵盤松開了');
? ? ? ? ? ?? //松開鍵盤會(huì)彈出 輸入字母就會(huì)彈出
? ? ? ? ? });
? ? ? ?? $(document).ready(function () {
? ? ? ? ? ? //DOM 加載完成
? ? ? ?? });
? ? ? ?? $(function () {});//簡(jiǎn)寫
? ? ? ?? window.onload = function(){};//原生js寫法
? ? ? ?? $(window).load(function () {
? ? ? ?? //元素加載完成
? ? ? ?? });
? ? ? ?? $(window).resize(function () {
? ? ? ? ? ? console.log('窗口尺寸變化了');
? ? ? ? ? ? //瀏覽器窗口尺寸改變
? ? ? ?? })//高頻觸發(fā)工具 手機(jī)端用的較多
? ? ? })
?? </script>
</head>
<body>
?? <input type="text" id="txt01" autofocus>
<!--autofocus 頁(yè)面自動(dòng)獲取焦點(diǎn)-->
</body>
無縫滾動(dòng)
<style type="text/css">
? ? ? body,ul,li{margin:0;padding:0}
? ? ? ul{list-style:none;}
? ? ? .slide{
? ? ? ?? width:500px;
? ? ? ?? height:100px;
? ? ? ?? border:1px solid #ddd;
? ? ? ?? margin:20px auto 0;
? ? ? ?? position:relative;
? ? ? ?? overflow:hidden;
? ? ? }
? ? ? .slide ul{
? ? ? ?? position:absolute;
? ? ? ?? width:1000px;
? ? ? ?? height:100px;
? ? ? ?? left:0;
? ? ? ?? top:0;
? ? ? }
? ? ? .slide ul li{
? ? ? ?? width:90px;
? ? ? ?? height:90px;
? ? ? ?? margin:5px;
? ? ? ?? background-color:#ccc;
? ? ? ?? line-height:90px;
? ? ? ?? text-align: center;
? ? ? ?? font-size:30px;
? ? ? ?? float:left;
? ? ? }
? ? ? .btns{
? ? ? ?? width:500px;
? ? ? ?? height:50px;
? ? ? ?? margin:10px auto 0;
? ? ? }
?? </style>
?? <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
?? <script type="text/javascript">
? ? ? $(function(){
? ? ? ?? var $ul = $('#slide ul');
? ? ? ?? var left = 0;
? ? ? ?? var deraction = 2;//每次滾動(dòng)的距離
? ? ? ?? var timer = setInterval(move,30);
? ? ? ?? $ul.html($ul.html() + $ul.html());//HTML是獲取ul標(biāo)簽中夾的內(nèi)容
? ? ? ?? function move() {
? ? ? ? ? ? left -= deraction;
? ? ? ? ? ? if(left < -500){
? ? ? ? ? ? ?? console.log('22');
? ? ? ? ? ? ?? left = 0;
? ? ? ? ? ? }
? ? ? ? ? ? if(left > 0){
? ? ? ? ? ? ?? console.log('33');
? ? ? ? ? ? ?? left = -500;
? ? ? ? ? ? }
? ? ? ? ? ? $ul.css({left:left});
? ? ? ?? }
? ? ? ?? $('#btn1').click(function () {
? ? ? ? ? ? console.log('44');
? ? ? ? ? ? deraction = 2;
? ? ? ?? });
? ? ? ?? $('#btn2').click(function () {
? ? ? ? ? ? deraction = -2;
? ? ? ?? });
? ? ? ?? $('#slide').mouseover(function () {
? ? ? ? ? ? clearInterval(timer);
? ? ? ?? });
? ? ? ?? $('#slide').mouseout(function () {
? ? ? ? ? ? timer = setInterval(move, 30);
? ? ? ?? });
? ? ? })
?? </script>
</head>
<body>
?? <div class="btns">
? ? ? <input type="button" name="" value="向左" id="btn1">
? ? ? <input type="button" name="" value="向右" id="btn2">
?? </div>
?? <div class="slide" id="slide">
? ? ? <ul>
? ? ? ?? <li>1</li>
? ? ? ?? <li>2</li>
? ? ? ?? <li>3</li>
????????<li>4</li>
? ? ? ?? <li>5</li>
? ? ? </ul>
?? </div>
</body>
