1. jQuery 中, $(document).ready()是什么意思?
当DOM准备就绪时,指定一个函数来执行里面的代码。
与load事件要在页面所有内容加载完后才执行不同,read事件只要在DOM结构完全加载后,就可以执行。
$(document).ready(function(){
});
可简写为:
$(function(){
})
2. $node.html()和$node.text()的区别?
$node.html():选取的是指定节点的html内容包括文本内容和标签
$node.text():选取的是指定节点的text内容只有文本内容
3. $.extend 的作用和用法?
作用:
- 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
- 如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的
用法:
//目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
var object = $.extend({}, object1, object2);
//如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。
//如果将 true作为该函数的第一个参数,那么会在对象上进行递归的合并。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
4. jQuery 的链式调用是什么?
jQuery链式调用:在对象上一次性调动多个方法
$(this).addClass("active").siblings().removeClass("active")
$(#ct).css('color','blue').show(400).hide();
因为大部分对象方法的最后是return this,所以有了链式调用,简易代码。
5. jQuery 中 data 函数的作用
data函数可以读取html标签中的data-xxx自定义属性,并且为标签对象储存各种自定义属性
//获取属性
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
//设置属性
$( "div" ).data( "role","newPage" )
6. 写出以下功能对应的 jQuery 方法:
给元素 $node 添加 class active,给元素 $node 删除 class active
$node.addClass('active');
$node.removeClass('active');
展示元素$node, 隐藏元素$node
$node.show();
$node.hide();
获取元素$node 的 属性: id、src、title, 修改以上属性
$node.attr('id');
$node.sttr('src');
$node.sttr('title');
$node.attr('id','1');
$node.sttr('src','2');
$node.sttr('title','3');
给$node 添加自定义属性data-src
$node.attr('data-src','123');
在$ct 内部最开头添加元素$node
$ct.prepend('node');
在$ct 内部最末尾添加元素$node
$ct.append('node');
删除$node
$node.remove();
把$ct里内容清空
$ct.html('');
在$ct 里设置 html
$ct.html('');
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//不包括内边距
$node.height(); //读取高度
$node.width(); //读取宽度
$node.height('50px'); //设置高度
$node.width('50px'); //设置宽度
//包括内边距
$node.innerHeight(); //读取高度
$node.innerWidth(); //读取宽度
$node.innerHeight( '50px' ); //设置高度
$node.innerHeight( '50px' ); //设置高度
//包括边框
$node.outerHeight(); //读取高度
$node.outerwidth(); //读取宽度
$node.outerHeight('50px'); //设置高度
$node.outerwidth('50px'); //设置宽度
//包括外边距
$node.outerHeight(true); //读取高度
$node.outerwidth(true); //读取宽度
获取窗口滚动条垂直滚动距离
$node..scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset();
修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({'color':'red','font-size':'14px'});
遍历节点,把每个节点里面的文本内容重复一遍
$element.each(function(){
var $this = $(this);
$this.text($this.text()+$this.text());
});
从$ct 里查找 class 为 .item的子元素
$ct.children('.item');
获取$ct 里面的所有孩子
$ct.children();
对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel');
获取选择元素的数量
$('div').length;
获取当前元素在兄弟中的排行
$node.index();
7. 用jQuery实现以下操作
当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色
var $btn = $('.btn');
$btn.on('click',function(){
$btn.css("background":"red");
setTimeout(function(){
$btn.css("background":"blue");
},1000);
});
当窗口滚动时,获取垂直滚动距离
$(document).on('scroll',function(){
var distance = $(document).scrollTop();
console.log(distance);
});
当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色
var $div = $('div');
$div.on('mouseover',function(){
$div.css("background":"red");
});
$div.on('mouseleave',function(){
$div.css("background":"white");
});
当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字
当选择 select 后,获取用户选择的内容
var $select = $('#select');
$select.on('change',function(){
console.log($(this).val());
})
8 用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面
客户端:
jQuery任务二
- 内容1
- 内容2
加载更多
服务端
app.get('/loading', function(req, res) {
var loadDate = req.query.len*req.query.start;
var array=[loadDate,loadDate+1,loadDate+2]
res.send({
status: 0,
array
});
});