jQuery 中， $(document).ready()是什么意思？
在文档加载完毕后，激活函数 ；
DOM（文档对象模型） 加载完毕后，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中。与window.onload不同的是后者需要图片等其他资源全部加载完毕才会执行后续函数中的代码。
主要有三种语法：
$(document).ready(function);
$.ready(function);
$(function);
$node.html()和$node.text()的区别?
$node.html()指的是设置或返回被选元素的内容（innerHTML）；包括标签本身；当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
$node.text()指的是获取节点当中的所有文本内容，不包括标签。当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。
当该方法用于设置内容时，则重写所有匹配元素的内容。
$.extend 的作用和用法?
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象;
语法：$.extend( target [, object1 ] [, objectN ] )；
深度合并：$.extend( [deep ], target, object1 [, objectN ] )；
deep： 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并；
target：目标对象，其他对象的成员属性将被附加到该对象上。
jQuery 的链式调用是什么？
举例：
$('div').css("width","100px").hide().show();
//简单的封装原理
window.$=function(){
return new _$(id);
}
function _$(id){
//获取元素
return document.getElementById(id);
}
_$.prototype= {
constructor:_$,
hide(){
console.log(hide);
return this;
},
show(){
console.log(show);
return this;
},
setName(){
....
return this;
}
}
实际原理是每次执行玩函数后，return执行函数的对象本身，接下来就能调用其它函数。
jQuery 中 data 函数的作用
.data(key,value);
以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据
.data(obj);
以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。
data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
给元素 $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','xxxx');$node.attr('src','xxxx');$node.attr('title','xxxxx');
给$node 添加自定义属性data-src
<div data-options='{"name":"li"}' data-role="page"></div>
$('div').data('options');//{"name":"li"}
$('div').data('role');//page
在$ct 内部最开头添加元素$node
$ct.prepend($node);
$node.prependTo($ct);
在$ct 内部最末尾添加元素$node
$ct.append($node);
$node.appendTo($ct);
删除$node
$node.remove();
把$ct里内容清空
$node.empty();
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
获取实际内容的宽高：
$node.width()和$node.height()
获取加padding的宽高：
$node.innerWidth()和$node.innerHeight()
获取加padding和border的宽高：
$node.outerWidth()和$node.outerHeight;
获取加padding，border，margin的宽高：
$node.outerWidth(true)
$node.outerHeight(true);
获取窗口滚动条垂直滚动距离
$node.scrollTop()
获取$node 到根节点水平、垂直偏移距离
$node.offset().left;
$node.offset().top;
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
'color':'red',
'fontSize':14
});
遍历节点，把每个节点里面的文本内容重复一遍
$node.each((index,item) => {
$(item).text($(item).text()+$(item).text());
})
从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
获取$ct 里面的所有孩子
$ct.children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parent('.ct').find('.panel');
获取选择元素的数量
$('div').length;
获取当前元素在兄弟中的排行
$('li').index();
用jQuery实现以下操作当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$btn.on('click',function(){
$(this).css('background','red');
setTimeout(() => {
$(this).css('background','blue');
},1000)
})
当窗口滚动时，获取垂直滚动距离
$(function(){
$(document).scroll(function () {
console.log($(this).scrollTop());
});
})
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$(function () {
$('div').on('mouseenter',function () {
$(this).css('background','red');
})
$('div').on('mouseleave',function () {
$(this).css('background','skyblue');
})
})
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展 示输入框里的文字
$(function () {
$('input').focus(function () {
$(this).css('borderColor','blue');
});
$("input").change(function(){
$(this).val($(this).val().toUpperCase());
});
$('input').blur(function () {
$(this).css('borderColor','');
console.log($(this).val());
})
})
当选择 select 后，获取用户选择的内容
$('select').change(function () {
console.log($(this).val());
})
用 jQuery ajax 实现如下效果。当点击加载更多会加载数据展示到页面效果预览322
利用server-mock模拟后台获取数据；
<div class="detail-area">
<ul class="content">
</ul>
<button id="btn">点击加载更多</button>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.detail-area {
text-align: center;
}
#btn {
padding: 5px 10px;
border: 2px solid red;
border-radius: 3px;
color: red;
background: #fff;
font-size: 15px;
outline: none;
margin-top: 10px;
}
.content {
width: 100%;
padding: 0 5px;
}
.content li{
width: 100%;
height: 30px;
line-height: 30px;
border: 2px solid blue;
color: green;
text-align: center;
margin: 5px 0;
border-radius: 5px;
}
</style>
$(function () {
var ind = 0;//加载的次数
var len = 5;//每次加载的数量
var btnClick = false;//防止重复点击
$('#btn').on('click',function (){
if(btnClick){
return;
}
btnClick = true;
$.ajax({
url:'/getNews',
methods:'GET',
data:{ind:ind,len:len},
success:function (res) {
console.log(res);
var str = '';
for(var i=0;i<res.length;i++){
str+='<li>'+res[i]+'</li>';
}
console.log(str);
$('.content').append(str);
ind+=5;
btnClick = false;
},
error:function () {
alert('通信错误');
}
})
})
})
router.js后台代码
router.get('/getNews', function(req, res) {
var curIndex = req.query.ind;
var len = req.query.len;
var data = [];
for(var i=0;i<len;i++){
data.push('内容'+(parseInt(curIndex)+i));
}
res.send(data);
});
9. 实现一个天气预报页面，UI 如下图所示(可自由发挥)。数据接口:
获取当前用户所在城市接口：//jirenguapi.applinzi.com/city.php
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据
获取某城市对应的天气接口：//jirenguapi.applinzi.com/weather.php?city=北京
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据, 如果不传递参数默认获取当前用户所在城市的天气
weather.jpg1186x846 109 KB虽是选做题目，推荐大家完成，可作为个人简历中的一个小项目
网友评论