鼠標移入移除
<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});
?? // })鼠標移入 移入子元素會觸發 事件發生在誰身上 $(this)就是誰
?? // $('#div1').mouselout(function () {
//? ?? $(this).stop().animate({marginvTop:100});
?? // })鼠標離開 離開子元素會觸發 會記錄鼠標移入移出的次數 stop會將之前沒有做完的結束,開始新的動畫
?? // $('#div1').mouseenter(function () {
//? ?? $(this).stop().animate({marginvTop:50});
?? // })鼠標進入 子元素不觸發
?? // $('#div1').mouseleave(function () {
//? ?? $(this).stop().animate({marginvTop:100});
?? // })鼠標離開子元素不觸發
?? //簡寫mouseenter mouseleave
?? $('#div1').hover(function () {
? ? ? $(this).stop().animate({marginvTop: 50});
? ? ? //鼠標移入時
?? }, function(){
? ? ? $(this).stop().animate({marginvTop:100});
? ? ? //鼠標移出時
});
});
?</script>
<body>
<div id="div1" class="box">
?? <div class="son"></div>
</div>
</body>
0人點贊
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');//鼠標移入彈出hello
? ? ? ? ? ? //綁定多個事件? 綁定click事件和mouseover事件
? ? ? ? ? ? $(this).unbind('mouseover');
? ? ? ? ????//解除綁定事件
? ? ? ?? })
? ? ? })
?? </script>
<body>
?? <input type="button" value="按鈕" id="btn">
</body>
自定義事件
$(function(){
? ? ? //自定義事件只能使用bind的方式進行綁定
? ? ? //通過trigger來觸發
? ? ? $('#btn1').bind('hello',function () {
? ? ? ?? alert('hello!');
});
? ? ? $('#btn2').click(function () {
? ? ? ?? $('#btn1').trigger('hello');
});//點擊按鈕2時'hello'會被trigg觸發
? ? ? $('#btn1').trigger('hello');
}) //直接觸發
<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('獲取焦點');
? ? ? ?? });//網頁顯示獲取焦點
? ? ? ?? $('#text01').blur(function () {
? ? ? ? ? ? alert('失去焦點');
? ? ? ?? });
? ? ? ?? // $('#txt01').focus();
? ? ? ?? //自動獲取焦點
? ? ? ?? // $('#txt01').change(function () {
? ? ? ?? //? ?? alert('值變了');
? ? ? ?? //? ?? // change 表單元素的值發生變化 失去焦點才會被觸發
? ? ? ?? // }) //檢測用戶名是否存在 用戶名全部輸完才會檢測 高頻觸發
? ? ? ? ? $('#txt01').keyup(function () {
? ? ? ? ? ?? alert('鍵盤松開了');
? ? ? ? ? ?? //松開鍵盤會彈出 輸入字母就會彈出
? ? ? ? ? });
? ? ? ?? $(document).ready(function () {
? ? ? ? ? ? //DOM 加載完成
? ? ? ?? });
? ? ? ?? $(function () {});//簡寫
? ? ? ?? window.onload = function(){};//原生js寫法
? ? ? ?? $(window).load(function () {
? ? ? ?? //元素加載完成
? ? ? ?? });
? ? ? ?? $(window).resize(function () {
? ? ? ? ? ? console.log('窗口尺寸變化了');
? ? ? ? ? ? //瀏覽器窗口尺寸改變
? ? ? ?? })//高頻觸發工具 手機端用的較多
? ? ? })
?? </script>
</head>
<body>
?? <input type="text" id="txt01" autofocus>
<!--autofocus 頁面自動獲取焦點-->
</body>
無縫滾動
<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;//每次滾動的距離
? ? ? ?? var timer = setInterval(move,30);
? ? ? ?? $ul.html($ul.html() + $ul.html());//HTML是獲取ul標簽中夾的內容
? ? ? ?? 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>
