进阶14

作者: 饥人谷_醉眼天涯 | 来源:发表于2017-10-15 23:09 被阅读0次

题目1： jQuery 能做什么？

选择网页元素
改变结果集
元素的操作: 取值和赋值
元素的操作: 移动
元素的操作: 复制、删除和创建
工具方法
特殊效果
AJAX

题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？

区别
$('#container') // [div#container]
document.querySelector('#container') // <div id="container">...</div>
$('#container') === document.querySelector('#container') // false
jQuery 对象: jQuery库里面的API，都是jQuery对象的API。
原生对象对应用原生对象的方法。
举列说明:
$('#container').html('123'); // jQuery对象

document.querySelector('#container').innerHTML = '456'; // 原生对象
原生对象和jQuery对象之间，我们究竟应该如何转换。
$('#container li') // jQuery 对象
$('#container li')[0] // 添加一个下标，就变成了原生对象
document.querySelector('.active'); // 原生对象
$(document.querySelector('.active')); // 只要用$()包裹起来，就变成了jQuery对象

题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

绑定事件
在1.7之前的版本中jQuery处理事件有多个方法,（google搜索:jquery live bind degelate）
作用各不相同，后来统一的使用on/offf方法
.on(events[,selector][,data],handler(eventObject))
参数的意义
1.events: 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click",
"keydown.myPlugin", 或者".myPlugin"
2.selector: 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是null
或者忽略了该选择器，那么被选中的元素总是能触发事件
3.data: 当一个事件被触发时，要传递给事件处理函数的event.data
4.handler（eventObject）: 事件被触发时，执行的函数。若该函数只是要执行return false的话,
那么该参数位置可以直接写成false.
bind unbind delegate live on off 都有什么作用?

bind() 方法将选择的元素绑定一个或者多个事件,当事件发生的时候，触发一个函数。
用法
$(selector).bind(event, data, function, map)
举列说明

//绑定多个事件
$(document).ready(function() {
    $("p").bind("mouseover mouseout", function() {
        $("p").toggleClass("intro");    
    });
});

// 绑定多个事件并且触发函数
$(document).ready(function(){
    $("button").bind({
        click:function(){$("p").slideToggle();},
        mouseover:function(){$("body").css("background-color", "#E9E9E4");},  
        mouseout:function(){$("body").css("background-color", "#FFFFFF");}  
    });
});

// pass along data to the function
function handlerName(e){
    alert(e.data.msg);
}
$(document).ready(function(){
    $("p").bind("click", {msg: "You just clicked me!"}, handlerName)
});

The unbind() 方法为选择元素去除所有事件

$(selector).unbind(event, function, eventObj)

举列说明

// 解绑一个特定的函数
function alertMe() {
    alert("Hello World!");
}
$(document).ready(function(){
    $("p").click(alertMe);
    $("button").click(function(){
        $("p").unbind("click", alertMe);
    });
});

// unbind an event handler using an event object
<script>
$(document).ready(function(){
    var x = 0;
    $("p").click(function(event){
        $("p").animate({fontSize: "+=5px"});
    x++;
    if (x >= 2) {
        $(this).unbind(event);
    }
    });
});
</script>
<body>
<p style="font-size:20px;">Click this p element to increase its size. The size can only be increased 2 times.</p>
</body>

delegate 方法
$(selector).delegate(childSelector, event, data, function)
绑定一个事件或多个事件为指定的元素，这个指定的元素是选择的元素的子元素，当事件触发的时候，运行指定的函数。
举列说明

// 1、为将来的元素添加事件
$(document).ready(function(){
    $("div").delegate("p", "click", function(){
        $(this).slideToggle();
    });
    $("button").click(function(){
        $("<p>This is a new paragraph.</p>").insertAfter("button");
    });
});

// 2、pass along data to the function
<script>
function handlerName(e){
    alert(e.data.msg);
}
$(document).ready(function(){
    $("p").delegate({msg: "You just clicked me!"}, "click", handlerName)
});
</script>

live 方法

$(selector).live(event, data, function)

live() 方法绑定一个或多个事件为选择的元素，当事件触发的时候，运行一个指定函数

举列说明

// 添加事件为之后的元素
<script>
$(document).ready(function(){
    $("p").live("click", function(){
        $(this).slideToggle();
    });
    $("button").click(function(){
        $("<p>This is a new paragraph.</p>").insertAfter("button");
    });
});
</script>

on 方法
$(selector).on(event, childSelector, data, function, map)
绑定一个或多个事件为选择的元素和子元素
举列说明

// Attach multiple events
<script>
$(document).ready(function(){
    $("p").on("mouseover mouseout", function(){
        $(this).toggleClass("intro");
    });
});
</script>

//绑定多个事件使用参数映射的方式
$(document).ready(function(){
    $("p").on({
        mouseover: function(){
            $("body").css("background-color", "lightgray");
        },  
        mouseout: function(){
            $("body").css("background-color", "lightblue");
        }, 
        click: function(){
            $("body").css("background-color", "yellow");
        }  
    });
});

// 在一个元素上绑定定制的事件
$(document).ready(function(){
    $("p").on("myOwnEvent", function(event, showName){
        $(this).text(showName + "! What a beautiful name!").show();
    });
    $("button").click(function(){
        $("p").trigger("myOwnEvent", ["Anja"]);
    });
});

//添加事件为将来的元素
$(document).ready(function(){
    $("div").on("click", "p", function(){
        $(this).slideToggle();
    });
    $("button").click(function(){
        $("<p>This is a new paragraph.</p>").insertAfter("button");
    });
});

// 去除一个事件 用off()
$(document).ready(function(){
    $("p").on("click", function(){
        $(this).css("background-color", "pink");
    });
    $("button").click(function(){
        $("p").off("click");
    });
});

off 方法
off() 方法最多的被使用去去除事件，这些事件被绑定了on方法

$(selector).off(event, selector, function(eventObj), map)

举列说明

//去除所有的被on()方法添加的点击事件
$(document).ready(function(){
    $("body").on("click", "p", changeSize);
    $("body").on("click", "p", changeSpacing);
    $("button").click(function(){
        $("body").off("click", "p");
    });
});

// 去除一个事件使用事件对象
$(document).ready(function(){
    var x = 0;
    $("p").click(function(event){
        $("p").animate({fontSize: "+=5px"
    });
    x++;
    if (x >= 2) {
        $(this).off(event);
    }
    });
});

事件代理的写法
on 用事件代理的方法

举列说明

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <input type="text" id="ipt">
    <button id="btn">添加</button>
    <div id="wrap"></div>
    <script>
        $('.box>ul').on('click.hello', 'li', function() {  // 关键
            // console.log(this);
            var str = $(this).text();
            $('#wrap').text(str);
        })

        $('#btn').on('click', function() {
            var value = $('#ipt').val();
            
            $('.box>ul').append('<li>' + value + '</li>');
        })  

    </script>
</body>

题目4：jQuery 如何展示/隐藏元素？

$(selector).show();
$(selector).hide();

题目5： jQuery 动画如何使用？

举列说明

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
    <div style="width: 200px; height: 200px; background-color: red; position: relative"></div>
    <button id="btn1">变宽</button>
    <button id="btn2">复原</button>
    <button id="btn3">变宽变大移动</button>
    <button id="btn4">多个动画</button>
    <button id="btn5">finish</button>
    <button id="btn6">stop</button>
    <div class="ct">
        <ul>
            <li class="item">
                <h3>标题1</h3>
                <p>内容1</p>
            </li>
            <li class="item">
                <h3>标题2</h3>
                <p>内容2</p>
            </li>
            <li class="item">
                <h3>标题3</h3>
                <p>内容3</p>
            </li>
            <li class="item">
                <h3>标题4</h3>
                <p>内容4</p>
            </li>
        </ul>
    </div>
    <script>
        $('#btn1').on('click', function(e) {
            $('div').animate({width: '400px'});
        });

        $('#btn2').on('click', function() {
            $('div').animate({
                width: '200px',
                height: '200px',
                left: '0px',
                top: '0px',
                opacity: 1
            }, 500);
        });
        $('#btn3').on('click', function() {
            $('div').animate({
                width: '150px',
                height: '150px',
                left: '100px',
                top: '100px',
                opacity: 1
            }, 500, function() {
                alert('hello, world');
            });
        });

        var actions = [
            {width: 80, height: 80, left: 0, top: 0},
            {left: '200px'},
            {top: '200px'},
            {left: '0px'},
            {top: '0px'},
            {width: '80px', height: '80px'}
        ]

        
        $('#btn4').on('click', function() {
            $('div').animate({width: '150px', height: '150px', left: 0, top: 0});

            // $('div').animate({width: '80px', height: '80px'})
                //  .animate({left: '200px'})
                //      .animate({top: '200px'})
                //  .animate({left: '0px'})
                //  .animate({top: '0px'});

            // $('div').animate({left: '0px'});
            // $('div').animate({top: '0px'});
            //$('div').animate({width: '80px', height: '80px'}, function() {

            //});

            actions.forEach(function(action, idx) {
            // console.log(arguments);
            // console.log(action, idx);
            $('div').animate(action, 2000);
        })

        })

        $('#btn5').click(function() {
            console.log('finish');
            $('div').finish();
            // 点击finish, 立刻就清除动画队列
        })

        $('#btn6').click(function() {
            console.log('stop');
            $('div').stop(true, true);
            // 点击stop, 立刻把当前队列执行完
        });
        
        $('.ct .item').on('click', function() {
            $(this).find('p').slideToggle(100);
            $(this).siblings().find('p').slideUp(); 
        });

    </script>
</body>

题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

$(selector).html(); // 获取
$(selector).html('想要设置的html'); // 设置
$(selector).text(); // 获取内部文本
$(selector).text('想要设置的文本');

题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

$('input').val(); // 获取
$('input').val('想要设置的内容')
$(selector).attr('id'); // 获取元素属性
$(selector).attr('id', '设置的元素属性值');

进阶14

题目1： jQuery 能做什么？

题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？

题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

题目4：jQuery 如何展示/隐藏元素？

题目5： jQuery 动画如何使用？

题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

题目8：使用 jQuery实现如下效果

题目9：. 使用 jQuery 实现如下效果

题目10：实现如下效果

题目11：模仿视频6，完成左右切换的 Tab 效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

进阶14

题目1： jQuery 能做什么？

题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？

题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

题目4：jQuery 如何展示/隐藏元素？

题目5： jQuery 动画如何使用？

题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

题目8： 使用 jQuery实现如下效果

题目9：. 使用 jQuery 实现如下效果

题目10：实现如下效果

题目11： 模仿视频6，完成 左右切换的 Tab 效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

题目8：使用 jQuery实现如下效果

题目11：模仿视频6，完成左右切换的 Tab 效果