$(document).ready()是什么意思？
当DOM加载完成时执行相应的函数,
原生js提供load事件，当所有资源加载完成后才触发相应事件。大多情况下当DOM结构加载完成时脚本即可运行，所以说，使用$(document).ready()不失为一种适当的形式。
以下两种形式皆为正确及等价
- $(handler)
- $(document).ready(handler)
$node.html()和$node.text()的区别
- $node.html()
获取集合中第一个匹配元素的HTML内容，返回一个包含标签及内容的字符串； - $node.text()
得到匹配元素集合中每个元素的内容及它们的后代，返回的也是一个字符串；
$.extend 的作用和用法
作用：将两个或更多个对象的内容合并到第一个对象;提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值，就可以了解这一点。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。
用法：$.extend([deep],target, [,object1] [,objectN])
jQuery的链式调用是什么？
对一个jQuery对象进行多次多种方法调用，其原理是大多方法最后返回原来的对象（this），因为返回的是同一对象，所以链式操作可以持续下去。
链式调用的好处是节省代码，代码美观；
提高代码效率；
让代码流程更清晰（因为Javascript是无阻塞语言，通过事件来驱动，异步来完成一些本需要阻塞进程的操作。异步编程，编写代码时也是分离的，这就使代码可读性变差。而链式操作，代码流程清晰，改善了异步体验。）；
jQuery中的data函数的作用
在匹配元素上储存相关数据或者返回在匹配的元素集合中的第一个元素的给定名称的数据存储的值。
- .data(key,value) 匹配元素上的存储的相关数据
- .data(obj) 设置一个元素的数据对象可以扩充元素上原先存储数据
- .data(key) 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
- .data() 返回匹配元素中存储的数据的值
以下功能对应的 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("src");
$node.attr("tittle");
//修改属性
$node.attr("id","newId");
$node.attr("src","newSrc");
$node.attr("title","newTitle");
- 给$node 添加自定义属性data-src
$(node).attr("data-src","456");
- 在$ct 内部最开头添加元素$node
$(node).prepend("<p>new</p>")
$("<p>new</new>").prependTo($(node))
- 在$ct 内部最末尾添加元素$node
$(node),append("<p>new</p>")
$("<p>new</p>").appendTo($(node))
- 删除$node
$(node).remove() //会删除与其绑定的事件及与该元素相关的jQuery数据，不想删除这些应采用下条方法
$(node).detach()
- 把$ct里内容清空
$(ct).empty()
- 在$ct 里设置 html <div class="btn"></div>
$(ct).html('<div class="btn"></btn>')
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//获取宽高
$(node).width() //返回一个没有单位的数值
$(node).height()
$(node).css("height") //返回一个带单位的字符串
//设置宽高
$(node).width(500) //当需要添加单位时需为一个字符串
$(node).height(500)
$(node).css("height",500) //当需要添加单位时需为一个字符串
// 计算时不包含内边距的为(不包含border)
$(node).width()
$(node).height()
$(node).css("height")
//计算时包含内边距的为（不包含border）
$(node).innerHeight()
$(node).innerWidth()
//计算时包含内边距和边框（如果设置为ture,那么也将包含margin）
$(node).outerWidth(ture)
$(node).outerHeighth(ture)
- 获取窗口滚动条垂直滚动距离
$(node).scrollTop()
- 获取$node 到根节点水平、垂直偏移距离
$(node).offset().left
$(node).offset().top
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$(node).css({"color":"red","font-size":"14px"})
- 遍历节点，把每个节点里面的文本内容重复一遍
$(node).each(function(){
$(this).text($(this).text() + $(this).text())
})
- 从$ct 里查找 class 为 .item的子元素
$(node).children(".item")
- 获取$ct 里面的所有孩子
$(ct).children()
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$(node).parents(".ct").children(".panel")
- 获取元素的属性
$(node).length()
- 获取当前元素在兄弟中的排行
···
$(node).index()
···
用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
代码实现 - 当窗口滚动时，获取垂直滚动距离
代码实现 - 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
代码实现 - 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
代码实现
用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览
<!doctype html>
<html>
<head>
<title>tab切换效果</title>
<meta charset="UTF-8">
<style>
li {
list-style: none;
}
.item {
width: auto;
padding: 15px;
margin: 20px auto;
border: 1px solid lightgrey;
}
.item:hover {
background-color: green;
color: white;
}
a {
display: block;
width: 65px;
margin: 20px auto;
text-decoration: none;
border: 1px solid red;
border-radius: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div class="ct">
<li class="item">内容一</li>
<li class="item">内容二</li>
</div>
<a href="">加载更多</a>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
var page = 0;
$("a").on("click",function(){
$.get("/getNews",{pageIndex:page}).done(function(data){
appendHtml(data);
page++;
}).fail(function(){
console.log("系统异常！！！")
});
});
function appendHtml(news){
var htmls = '';
for(var i=0; i<news.length; i++) {
htmls += '<li class="item"> '+ news[i] + '</li>';
}
$(".ct").append(htmls);
}
</script>
</body>
</html>
mock
app.get('/getNews', function (req, res) {
var news = [];
var index = req.query.pageIndex;
var length =3;
var start = index*length;
var final = start + length;
for(i= start+1; i<= final; i++ ){
news.push("内容"+ i);
}
res.send(news);
})
网友评论