JQuery属性操作、特殊效果、事件、冒泡

作者: 咻咻咻滴赵大妞 | 来源:发表于2018-09-19 23:37 被阅读0次

jquery实战
JQuery属性操作、特殊效果、事件、冒泡
JQuery属性操作、特殊效果、事件、冒泡
jQuery（二）
jquery
jQuery样式操作、选项卡
jQuery样式操作、选项卡
2018-12-08
jQuery学习
事件冒泡委托节点 ajax jsonp

jQuery属性操作

读写值为布尔类型的属性用prop方法

读取.box的属性，标签也显示
$(function(){
alert($('.box').html());///<span>这是div元素内的span</span>

写入
$('.box').html('<ahref="http://www.baidu.com">百度网</a>');

读写值为非布尔类型的属性用attr方法

 $('.box').attr({title:'这是一个div!'});//写入title属性，并赋值
 $('.box').attr('class');//读属性class的值，弹出box

多选框用prop方法

alert($('#check').prop('checked'));//选中为true，非选中为false
$('#check').prop({checked:true});//设置默认勾选

获取标签文本内容

alert($('.box2').text());//这是div元素内的span

jQuery特殊效果

fadeIn() 淡入

$btn.click(function(){

    $('#div1').fadeIn(1000,'swing',function(){
        alert('done!');
    });

});

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                // $('.box').fadeOut();//淡出
                // $('.box').fadeIn();//淡入
                // $('.box').fadeToggle();//切换淡入淡出
                // $('.box').toggle();//切换显示隐藏
                $('.box').slideToggle();//切换上收和下展
            })
        })
    </script>
</head>
<body>
    <input type="button" name="" value="效果" id="btn">
    <div class="box"></div>
</body>
</html>

jQuery动画

参数：
1、什么属性做动画，属性设置{param1: value1, param2: value2}
2、动画执行的时间，单位毫秒
3、动画曲线：
swing（默认值）开始和结束慢，中间快
linear匀速
可省略不写
4、回调函数，动画完成之后要做的事情，可无限嵌套
jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

参数可以写成数字表达式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#div1').animate({
                width: 200,
                height: 200},
                1000,"linear"//linear匀速，默认是swing中间块，开始结束慢
                function(){//可以接着上一个动画结束后再进行动作
                    // alert('动画完了！');
                    $(this).animate(
                        {marginLeft: 500},
                        1000,
                        function(){
                            $(this).animate(
                                {marginTop: 500},
                                1000
                            )
                        }
                    )
                }
            );
        })
    </script>
</head>
<body>
    <div id="div1" class="box"></div>
</body>
</html>

jQuery循环

each循环

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery循环</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //给全部的li设置内容和样式
             $('.list li').html('111');
             $('.list li').css({background:'gold'});

            //each循环
            $('.list li').each(function(index) {
                 alert(index);//弹出索引值
                //0,1,2,3,4,5,6,7,8
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offse()

3、获取可视区高度

$(window).height();

4、获取页面高度

$(document).height();

5、获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){  
......  
})

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素绝对位置</title>
    <style type="text/css">
        .con{
            width: 600px;
            height: 600px;
            margin: 50px auto 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin-bottom: 10px;
        }
        .pos{
            margin-left: 500px;
        }
        .pop{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            left:0;
            top: 0;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $pos = $('.pos');
            //offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果
            var pos = $pos.offset();
            // console.log(pos);
            // alert(pos.left + "," + pos.top);
            var w = $pos.outerWidth();
            var h = $pos.outerHeight();
            // alert(w);

            $('.pop').css({left:pos.left + w,top:pos.top});

            $pos.mouseover(function() {
                $('.pop').show();
            });
            $pos.mouseout(function() {
                $('.pop').hide();
            });
        })
    </script>
</head>
<body>
    <div class="con">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box pos"></div>
        <div class="box"></div>
    </div>

    <div class="pop">提示信息！</div>
</body>
</html>

jquery事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化

    $(function(){
         一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
         $('#txt01').focus();

         文本框获取焦点的时候（有光标闪烁的时候）
         $('#txt01').focus(function() {
            alert('focus');
         });

         失去焦点的时候（光标离开的时候）
         $('#txt01').blur(function() {
            alert('blur');
         });

         输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
         $('#txt01').change(function() {
            alert('change');
         });
    })

click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数

<script type="text/javascript">
        $(function(){
            /*进入子元素也触发*/
            $('#div1').mouseover(function() {
                $(this).animate({marginTop: 50});//.stop()
            });

            /*进入子元素不触发*/
            $('#div1').mouseenter(function() {
                $(this).stop().animate({marginTop: 50});//
            });

            /*通过hover（mouseenter+mouseleave）实现简写*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })
    </script>

mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘

        松开键盘按键就触发
        $('#txt01').keyup(function() {
            alert('keyup');
        });

load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变

     JS原生写法
     window.onload = function(){

     }

     jQuery写法，等同于上面写法
     $(window).load(function(){

     })

     ready的写法
     $(document).ready(function(){

     })

     ready的简写
     $(function(){

     })

     窗口改变尺寸的时候，会高频触发
    $(window).resize(function() {
        console.log('3');
    });

scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面

主动触发与自定义事件

主动触发
可使用jquery对象上的trigger方法来触发对象上绑定的事件。

给element绑定hello事件

element.bind("hello",function(){
     alert("hello world!");
});

触发hello事件
```
element.trigger("hello");
```
取消绑定事件
```
$(this).unbind('mouseover');
```

自定义事件
除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
            $('#btn1').bind('hello', function(){
                alert('hello');
            })
            $('#btn1').bind('click', function(){
                alert('click');
            })
            $('#btn2').click(function() {
             trigger即可以触发自定义事件，也可以触发原始的事件
                $('#btn1').trigger('hello');
                $('#btn1').trigger('click');
            });
            
            //不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
             $('#btn1').trigger('hello');
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
    <input type="button" value="按钮2" id="btn2">
</body>
</html>

事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

 $(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
 $box1.click(function() {
    alert('father');
});
$box2.click(function() {
    alert('son');
});
$box3.click(function(event) {
    alert('grandson');
    event.stopPropagation();

});
$(document).click(function(event) {
    alert('grandfather');
});
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默认行为
阻止右键菜单

 $(document).contextmenu(function(event) {
    event.preventDefault();
});

合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;
页面弹框实例

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

 $(function(){
     $ali = $('#list li');
     $ali.click(function(event) {
         $(this).css({background:'red'});
    });
})
...
<ul id="list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
  </ul>

事件委托的写法

  $(function(){
      $list = $('#list');
      $list.delegate('li', 'click', function(event) {
          $(this).css({background:'red'});
      });
  })
  ...
<ul id="list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>

取消事件委托

// ev.delegateTarge 委托对象
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

$(function(){
        
        给每个li绑定事件，一共绑定了8次，性能不高
        $('.list li').click(function() {
            alert($(this).html());
        });
        

        
        事件委托：方法delegate，只绑定一次事件，冒泡触发
            参数：
                selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’
                eventType事件
                function要执行的操作
        
        $('.list').delegate('li', 'click', function() {
            $(this)指发生事件的子集，即每个li
            alert($(this).html());

            全部取消委托
            $('.list').undelegate();
        });
    })

jquery元素节点操作

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

todolist(计划列表)实例

    <script type="text/javascript">
    $(function(){
        var $span = $('<span>span元素</span>');
        var $p = $('<p>p段落元素</p>');
        var $h = $('<h1>页面标题</h1>');

        /*插入子元素*/
        div中插入span和p（末尾追加）
         $('#div1').append($span);
         $('#div1').append($p);

         把span和p插入div中
        $span.appendTo('#div1');
        $p.appendTo('#div1');

        把子元素插入到父元素（前面追加）
         $('#div1').prepend($span);
         $('#div1').prepend($p);
         $span.prependTo('#div1');
         $p.prependTo('#div1');

        在div前边插入兄弟h1标题
         $('#div1').before($h);
        $h.insertBefore('#div1');

        在后边插入兄弟元素
        after()
        insertAfter()

        删除p标签
        $p.remove();    
    })
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

jquery实战
jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件自定义事件
JQuery属性操作、特殊效果、事件、冒泡
jQuery属性操作读写值为布尔类型的属性用prop方法读取.box的属性，标签也显示$(function(){...
JQuery属性操作、特殊效果、事件、冒泡
jQuery属性操作读写值为布尔类型的属性用prop方法读取.box的属性，标签也显示$(function(){...
jQuery（二）
jQuery索引值： jQuery做选项卡： jQuery属性操作： jQuery特殊效果： $('.box')....
jquery
input框事件 jQuery属性操作特殊效果动画循环元素绝对位置鼠标移入移出其他事件绑定事件bin...
jQuery样式操作、选项卡
jQuery样式操作 click事件 jQuery选项卡特殊效果
jQuery样式操作、选项卡
jQuery样式操作 click事件 jQuery选项卡特殊效果
2018-12-08
jQuery做选项卡 jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环元素绝对位置...
jQuery学习
jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环元素的绝对位置鼠标移入移出 in...
事件冒泡委托节点 ajax jsonp
事件冒泡事件委托节点操作 ajax ajax jQuery-jsonp

JQuery属性操作、特殊效果、事件、冒泡