题目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', '设置的元素属性值');
网友评论