1. jQuery 中， $(document).ready()是什么意思？
当DOM准备就绪时，指定一个函数来执行。与load事件要在页面所有内容加载完后才执行不同，read事件只要在DOM结构完全加载后，就可以执行。使用read方法，能保证在DOM准备好后就执行函数，所以，这里是进行所有事件绑定及运行其它jQuery代码的地方。
2.$node.html()和$node.text()的区别?
-
html()
1.不传参
html()：不管取得的jQuery对象是否为多个，只获取匹配的第一个元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String//html页面代码 <div> <p><span>早上</span></p> <p><span>好</span></p>; </div> //jquery代码 $("p").html(); //结果 <span>早上</span>;2.传参
html(val)：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。如果传参包括HTML节点，则会以生成元素节点的形式添加。返回一个jQuery对象//html页面代码 <div>这里会显示： <p></p> <p></p> </div> //jquery代码 $("p").html("<span>早上</span>"); -
text()
1.不传参
text()：取得所有匹配元素的内容并返回拼接后的字符串。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String//html页面代码 <div> <p><span>早上</span></p> <p><span>好</span></p>; </div> //jquery代码 $("p").text();
2.传参
text(val)：设置所有匹配元素的文本内容，与 html()类似，但如果传参包含’<’或’>’，将会转义成文本显示在文本节点中。返回一个jQuery对象
//html页面代码
<div>这里会显示：
<p></p>
<p></p>
</div>
//jquery代码
$("p").text("<span>早上</span>");
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最方便的一点就是，它的大部分方法返回的都是jQuery对象，因此可以链式操作。也就是说，后一个方法可以紧跟着写在前一个方法后面。
5.jQuery 中 data 函数的作用
data函数可以读取html标签中的data-xxx自定义属性,并且为标签对象储存各种自定义属性
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
//获取属性
$( "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，给元素 $noed 删除 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 <div class="btn"></div>
$ct.html('<div class="btn"></div>'); -
获取、设置$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;
7.用jQuery实现以下操作
-
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
var $btn = $('#btn');
$btn.on('click', function(e) {
var $this = $(this);
$this.css({
'background-color': 'red'
});setTimeout(function() { $this.css({ 'background-color': 'blue' }) }, 1000) }) -
当窗口滚动时，获取垂直滚动距离
$(window).on('scroll', function(e) { var scrollTop = $(this).scrollTop(); console.log(scrollTop); }) -
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
var $div = $('#div'); $div.on('mouseenter', function(e) { $(this).css({ 'background-color': 'red' }); }) $div.on('mouseleave', function(e) { $(this).css({ 'background-color': '#fff' }); }) -
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
var $input = $('input'); $input.on('focus', function(e) { $(this).css({ 'outline': '2px solid blue' }); }) $input.on('blur', function(e) { $(this).css({ 'outline': 'none' }); console.log($(this).val()); }) $input.on('keyup', function(e) { var $this = $(this); var valStr = $this.val(); valStr = valStr.toUpperCase(); $this.val(valStr); }) -
当选择 select 后，获取用户选择的内容
var $select = $('#select'); $select.on('change', function(e) { console.log($(this).val()); })
8.用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面
<html>
<head>
</head>
<style>
.ct {
width: 800px;
margin: 50px auto;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
height: 22px;
padding: 10px;
margin: 10px;
border: 1px solid #777;
cursor: pointer;
}
ul li:hover {
background: yellowgreen;
}
#load-more {
display: block;
width: 80px;
height: 40px;
line-height: 40px;
border: 1px solid #E27272;
border-radius: 5px;
color: #E27272;
text-decoration: none;
text-align: center;
margin: 10px auto;
}
#load-more:hover {
background-color: #E27272;
color: #000;
}
#load-more.disabled {
background-color: #ccc;
color: #777;
border-color: #777;
}
#load-more img {
height: 40px;
width: 40px;
}
</style>
<body>
<div class="ct">
<ul class="content-ct">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<a href="javascript:void(0)" id="load-more" data-sending="false">加载更多</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function() {
var $btn = $('#load-more')
var index = 1;
var length = 5;
$btn.on('click', function() {
if (isSending()) {
return false;
}
$.ajax({
url: '/news',
method: 'get',
data: {
index: index,
length: length
}
}).done(function(result) {
render(result);
index = index + length;
//完成请求后解锁
setSending(false);
loadMoreDisplay(isSending());
}).fail(function(jqXHR, textStatus) {
consloe.log(textStatus);
});
//设置锁
setSending(true);
//设置按钮样式
loadMoreDisplay(isSending);
})
function setSending(val) {
$btn.data('sending', val)
}
function isSending() {
return $btn.data('sending') === 'true' ? true : false;
}
function render(content) {
var $ul = $('.content-ct');
var $df = document.createDocumentFragment();
content.forEach(function(element) {
var $li = $('<li></li>');
$li.text(element);
$ul.append($li);
});
}
function loadMoreDisplay(isSending) {
if (isSending) {
$btn.html('');
} else {
$btn.html('加载更多');
}
}
})
</script>
</body>
</html>