var obj1 = {a:1}
var obj2 = {b: 2, c:3}
var obj3 = {b:3, d:5}
$('.box>ul>li').each(function(index, node){
//node是原生dom
var str = $(node).text()
$(node).text(str + str)
//var str = $(this).text()
//$(this).text(str+str)
//node.innerText = node.innerText + node.innerText
//console.log(arguments)
})
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
$('.div>ul>li').each(function(index, node){
var str = $(node).text()
$(node).text(str + str)
console.log(arguments)
//或者
//console.log(this)
//var str = $(this).text()
//$(this).text(str+str)
//console.log(arguments)
})
//写法1：
$.ajax({
url: '/hello',
method: 'get',
dataType: 'json',
data: {
a: 1,
b: 2
},
success: function(ret){
console.log(ret)
},
error: function(){
}
})
//写法2：
$.ajax({
url: '/hello',
method: 'post',
dataType: 'json',
data: {
a: 1,
b: 2
}
}).done(function(ret){
}).error(function(){
})
//简写
$.get('/hello', {}).done(function(ret){
console.log(ret);
})
$.get('/user/100', {name:"ruoyu", age: 28})
.done(function(ret){
console.log(ret);
}).fail(function(){
console.log('error');
})
题目1： jQuery 中， $(document).ready()是什么意思？
$(callback)
$(document).ready(handler) 等DOM完全加载完成之后再去执行函数
题目2： $node.html()和$node.text()的区别?
$node.html() 选取的是指定节点的html
$node.text()：选取的是指定节点的text内容只有文本内容
题目3： $.extend 的作用和用法?
用于对象的拓展
var object = $.extend({ }, object1, object2); //将object1 object2扩展到空对象上
var obj1 = {a:1}
var obj2 = {b:2, c:3}
var obj3 = {b:3, d:5}
var obj4 = {}
$.extend(obj1, obj2) //obj1 == {a:1 b:2 c:3}
$.extend(obj1, obj2, obj3) // {a:1, b:3, c:3, d:5}
$.extend(obj4, obj1, obj2, obj3)
var obj5 = $.extend({}, obj1, obj2, obj3)
题目4： jQuery 的链式调用是什么？
对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象
$div.hide().show().css() //第一个函数执行完返回JQuery对象,所以可以再次执行函数
$div.hide()
.show()
.css()
题目5： jQuery 中 data 函数的作用
题目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.attr('src')
$node.attr('title')
$node.attr('id', '1')
$node.attr('src', '2')
$node.attr('title', '3')
```
```
给$node 添加自定义属性data-src
$node.attr('data-src', '12345')
```
```
在$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.height();
$node.width();
$node.height('50px');
$node.width('50px');
```
```
//包括内边距
$node.innerHeight();
$node.innerWidth();
$node.innerHeight('50px');
$node.innerWidth('50px');
```
```
//包括边框
$node.outerHeight()
$node.outerWidth()
$node.outerHeight('50px')
$node.outerWidth('50px')
```
```
//包括外边距
$node.outerWidth(true)
$node.outerHeight(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('.panel1')
```
获取选择元素的数量
```
$('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 输入框时让输入框边框变为蓝色，当输入框内容改
变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框
蓝色，控制台展示输入框里的文字
<style>
.border{
border-color: blue;
}
</style>
<input type="text" id="int">
<script>
var $int = $('#int');
$int.on('focus',function(){
$(this).addClass("border");
}).on('keyup',function(){
$(this).val($(this).val().toUpperCase());
}).on('blur', function(){
$(this).removeClass("border");
console.log($(this).val());
})
</script>
http://js.jirengu.com/naqohoyuxe/1/edit
//当选择 select 后，获取用户选择的内容
var $select = $('#select');
$select.on('change', function(){
console.log($(this).val());
})
题目8: 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面
客户端：
<body>
<div class="container">
<ul class="list">
<li>内容1</li>
<li>内容2</li>
</ul>
<a href="javascript:;" id="btn">加载更多</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var $btn = $('#btn')
var $list= $('.list')
var page = 0;
$btn.on('click',function() {
$.ajax({
url:'/loadmore',
method:'get',
data:{
page: page,
length: 5
}
}).done(function(res){
if (res.status===0) {
show(res.data)
} else {
alert('加载数据错了')
}
}).fail(function(){
alert('系统异常')
})
})
function show(news) {
for (var i = 0; i < news.length; i++) {
var $node=$('<li></li>');
$node.text( news[i] )
$list.append($node);
};
page+=5;
}
</script>
</body>
<style>
* {
padding: 0;
margin: 0;
font-size: 20px;
}
body {
padding: 10px;
}
li {
list-style: none;
border: 1px solid #ccc;
line-height: 2;
margin-top: 10px;
cursor: pointer;
}
#btn {
display: block;
width: 100px;
padding: 5px;
margin: 10px auto;
border: 1px solid #E27272;
border-radius: 3px;
color: #E27272;
text-decoration: none;
text-align: center;
}
li:hover {
background: green;
}
<style>
router.js
router.get('/loadmore',function(req,res) {
var index = req.query.page;
var len = req.query.length;
var data=[];
for (var i = 0; i < len; i++) {
data.push('新闻'+(parseInt(index)+i))
};
res.send({
status:0,
data:data
});
})
题目9(选做)： 实现一个天气预报页面，UI 如下图所示(仅供参考，可自由发挥)。
数据接口:
获取天气接口：http(s)://weixin.jirengu.com/weather
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据，返回
数据以及使用方式参考 http://api.jirengu.com
更多接口:
http://api.jirengu.com
施工中
网友评论