题目1.Jquery中, $(document).ready()是什么意思?和window.onload 的区别? 还有其他什么写法或者替代方法?
- $(document).ready()方法:为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾.
$(document).ready(function(){ });
可简写为:
$(function(){ })
- window.onload:必须等网页中所有的元素全部加载完毕才能执行.不能同时写多个,否则后面覆盖前面.
题目2.$node.html()和$node.text()的区别?
- $node.html(),返回所选择元素内的html内容,包含html标签和文本内容
- $node.text(),返回所选择元素内的文本内容,不包含html标签,只包含文本内容
题目3.$.extend 的作用和用法?
- $.extend()将多个对象合并到一起,可以传入多个参数。$.extend([deep,] target,…)。[deep,]为布尔值默认情况不是深拷贝,可设置true为深拷贝
//定义一个对象
var obj={
name:'gaoyang',
age:25,
sex:'man'
};
//定义一个新对象
var newObj={
name:'jirengu',
age:30
};
//extend方法接受多个参数,并且第一个对象被覆盖
$.extend(obj,newObj,{
name:'gg',
age:25,
like:'eat'
});
console.log(obj);
//object{
//age:25,
//like:"eat",
//name:"gg",
//sex:"man"
//
}
题目4.JQuery 的链式调用是什么?
$('#ct').css('color','blue').show(400).hide();
题目5.jquery 中 data 函数的作用?
task26
题目6写出以下功能对应的 Jq 方法:
$node.addClass('active');
//添加一个class
$node.removeClass('active');
//删除一个class
2.展示元素$node, 隐藏元素$node
$node.show();
//展示
$node.hide();
//隐藏
3.获取元素$node 的 属性: id、src、title, 修改以上属性
$node.attr('id');
//获取
$node.attr('id’,'值');
//修改
$node.attr('src');
//获取
$node.attr('src’,'值');
//修改
$node.attr('title');
//获取
$node.attr('title’,'值');
//修改
4.给$node 添加自定义属性data-src
$node.attr("data-src",'str')
5.在$ct 内部最开头添加元素$node
$(".ct").prepend($node);
6.在$ct 内部最末尾添加元素$node
$(".ct").append($node);
7.删除$node
$(node).remove();
8.把$ct里内容清空
$node.empty();
9.在$ct里设置 html
$ct.html('')
10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();
//不包括内边距宽度,仅包括内容
$node.height();
//不包括内边距高度,仅包括内容
$node.innerWidth();
//包括内容和内边距宽度
$node.innerHeight();
//包括内容和内边距高度
$node.outerWidth();
//包括内容,内边距,边框宽度
$node.outerHeight();
//包括内容,内边距,边框高度
$node.outerHeight(true);
//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);
//包括内容,内边距,边框,外边距宽度
11.获取窗口滚动条垂直滚动距离
$(window).scrollTop()
12.获取$node到根节点水平、垂直偏移距离
$node.offset()
13.修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
14.遍历节点,把每个节点里面的文本内容重复一遍
$node.each(function(){ console.log($(this).text()) })
15.从$ct 里查找 class 为 .item的子元素
$(".ct").find(".item")
16.获取$ct 里面的所有孩子
$(".ct").children()
17.对于$node,向上找到 class 为’.ct’的父亲,在从该父亲找到’.panel’的孩子
$node.parents(".ct").find(".panel")
18.获取选择元素的数量
$node.length;
$node.size();
19.获取当前元素在兄弟中的排行
$node.index();
题目7
1.用jQuery实现以下操作当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色
$('.btn').on('click',function(){
setTimeout(function(){
$('.btn').css('background-color','red')
},0)
setTimeout(function(){
$('.btn').css('background-color','blue')
},500)
setTimeout(function(){
$('.btn').css('background-color','red')
},1000)
})
2.当窗口滚动时,获取垂直滚动距离
$(window).scrollTop()
3.当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色
$('div').on('mouseleave',function(){
$(this).removeClass('active')
})
$('div').on('mouseenter',function(){
$(this).addClass('active')
})
4.当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字
var $input = $('input');
$input.focus(function(){
$(this).addClass('active')
})
$input.blur(function(){
$(this).removeClass('active')
console.log($(this).val())
})
$input.keyup(function(){
$(this).val( $(this).val().toUpperCase())
})
5.当选择 select 后,获取用户选择的内容
题目8 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览87
//router.js
app.get('/getNews', function(req, res) {
var page = parseInt(req.query.page);
var len = parseInt(req.query.len);
var arr = [];
for(var i = page*len;i
gaoyang