jQuery动画与ajax
2017-10-29 本文已影响0人
饥人谷_Jack
题目1： jQuery 中， $(document).ready()是什么意思？
- 当DOM准备就绪时，指定一个函数来执行。与JavaScript提供了window.onload事件的区别：
简单来说 window.onload是当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发
$(document).ready()只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数
题目2： $node.html()和$node.text()的区别?
- $node.html()是获得元素所有的标签和内容
- $node.text()是获取元素的内容
题目3： $.extend 的作用和用法?
- 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
var obj1 = {a:1,b:2}
var obj2 = {a:1,b:2,c:3}
var obj3 = {}
var obj4 = {d:4,e:5}
$.extend(obj3,obj1,obj2)
var obj5 = $.extend({},obj2,obj4)
console.log(obj3)
console.log(obj5)
题目4： jQuery 的链式调用是什么？
- 链式调用就是每次方法的使用返回的还是调用这个方法的元素本身
题目5： jQuery 中 data 函数的作用
- 在元素上存放或读取数据,返回jQuery对象。
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
题目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.attr('id','value')
$node.attr('src')
$node.attr('id','value')
$node.attr('title')
$node.attr('id','value')
- 给$node 添加自定义属性data-src
$node.attr('data-src','http://aaa.com')
- 在$ct 内部最开头添加元素$node
$ct.prepend($node)
- 在$ct 内部最末尾添加元素$node
$ct.append($node)
- 删除$node
$node.remove()
- 把$ct里内容清空
$ct.empty()
- 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width()
$node.height()
$node.innerWidth()//包括内边距
$node.innerHeight()//包括内边距
$node.outerWidth()//包括内边距和边框
$node.outerHeight()//包括内边距和边框
$node.outerWidth(true)//包括内边距和边框和外边距
$node.outerHeight(true)//包括内边距和边框和外边距
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
- 获取$node 到根节点水平、垂直偏移距离
$node.offset()
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({color:'red','font-size':'14px'})
- 遍历节点，把每个节点里面的文本内容重复一遍
$('div').each(function(){
var str = $(this).text()
$(this).text(str + str)
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
- 获取$ct 里面的所有孩子
$ct.find('*')
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
- 获取选择元素的数量
$node.length
- 获取当前元素在兄弟中的排行
$node.index()
题目7：用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$('button').on('click',function() {
$('.ct').css('background-color',"red")
setTimeout(function(){
$('.ct').css('background-color',"blue")
},600)
})
- 当窗口滚动时，获取垂直滚动距离
$(window).on('scroll',function(){
$('.ct').text($(window).scrollTop())
})
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$('.ct').on('mouseenter',function(){
$(this).css('background-color','red')
})
$('.ct').on('mouseleave',function(){
$(this).css('background-color','white')
})
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
$('input').on('focus',function(){
$('input').css('border-color','blue')
})
$('input').on('blur',function(){
$('input').css('border','')
})
$('input').on('change',function(){
var $val = $('input').val()
console.log($val.toUpperCase())
})
- 当选择 select 后，获取用户选择的内容
$('#city').on('change',function(e){
console.log($('#city option:selected').text())
题目8： 用 jQuery ajax 实现如下效果。
<div class="wrap">
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
</div>
<div class="btn">
<button>加载更多</button>
</div>
<script>
var pageIndex = 3;
$('.btn button').on('click', function () {
$.ajax({
url: '/loadMore',
type: 'get',
dataType: 'json',
data: { index: pageIndex, length: 5 }
}).done(function (data) {
add(data)
console.log(data)
}).fail(function () {
console.log('失败')
})
pageIndex += 5;
})
function add(str) {
for (var i = 0; i < str.length; i++) {
var html = ''
html += '<li>' + str[i] + '</li>'
$('.wrap>ul').append(html)
}
}
router.get('/loadMore', function(req, res) {
var pageIndex = req.query.index
var len = req.query.length
var data = []
for (var i = 0; i < len; i++) {
data.push('内容' + (parseInt(pageIndex) + i))
}
res.end(JSON.stringify(data))
})
