问答
1、 Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
作用：
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码,如果在文档没有完全加载之前就运行函数，操作可能失败。必须在文档加载完成后在执行操作，可使用ready事件，作用相当于我们把js写到body的末尾。
区别：
替代方法：
$(document).ready(function(){
//your code here
});
$().ready(function(){
//your code here
});
$(function(){
//your code here
});
2、$node.html()和$node.text()的区别?
html([string])
这是一个读写两用的方法，用于获取/修改元素的 innerHTML
- 当没有传递参数的时候，则表示获取第一个匹配元素的html内容
- 当传递了一个string参数的时候，则表示设置所有匹配元素的html内容
<body>
<div>
这是一段<strong>加粗的</strong>文本
</div>
<div>
这是一段<i>斜体的</i>文本
</div>
<script type="text/javascript">
console.log($("div").html()); //输出“ 这是一段<strong>加粗的</strong>文本”
$("div").html("<p>变换后的文本</p>") //会更改两个div的html内容
</script>
</body>
text(string)
和 html 方法类似，用于获取/修改元素的innerText 值，在该元素的html内容的基础上过滤掉所有HTML标记
- 如果没有指定textString参数，则表示获取合并了每一个匹配元素中的内容后的text内容；
- 如果指定了textString参数，则表示设置所有匹配元素的text内容。
<body>
<div>
这是一段<strong>加粗的</strong>文本
</div>
<div>
这是一段<i>斜体的</i>文本
</div>
<script type="text/javascript">
console.log($("div").text()); //输出“ 这是一段加粗的文本 这是一段斜体的文本”
$("div").text("<p>变换后的文本</p>") //会更改两个div的text内容,但是标签会被当成字符串输出，而不会被解析
</script>
</body>
3、 $.extend 的作用和用法?
jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。
用法一：jQuery 1.0 新增该用法。
jQuery.extend( target [, object1 ] [, objectN... ] )
用法二：jQuery 1.1.4 新增该用法。
jQuery.extend( [ deep ], target , object1 [, objectN... ] )
用法二是用法一的变体，参数deep用于指示是否深度递归合并。
注意事项：
- 该函数复制的对象属性包括方法在内。此外，还会复制对象继承自原型中的属性(JS内置的对象除外)。
- 参数deep的默认值为false，你可以为该参数明确指定true值，但不能明确指定false值。简而言之，第一个参数不能为false值。
- 如果参数为null或undefined，则该参数将被忽略。
- 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
- 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
demo
4、 JQuery 的链式调用是什么？
jQuery高效的原因之一就是其链式调用。链式调用原理很简单，就是通过对象上每个方法最后返回本对象---this。因为返回的是同一对象，所以链式操作就能持续下去。
var box=$('#box');
box.addClass("active").css("background-color","red").text('This is a message.')
链式调用的好处：
节省代码量，代码看起来更优雅；
返回的都是同一个对象，可以提高代码的效率。
另外还有一种就是让代码流程更清晰
回溯：
有时需要中间值而中断链式调用，或者链式调用中某个方法返回的this改变了，那么就需要回溯了。回溯帮你维持this的正确指向,回溯通过end()来实现。
box.find('p.info').text('This is a message.').end().find('p.result').text('ok');
//end()能返回之前的对象，即这里的box，也即回溯。
5、 JQuery ajax 中缓存怎样控制?
通过ajax函数中的cache参数来控制，默认为true,此时会开启浏览器的缓存。当向服务器发送的url跟之前是一样的，那么浏览器会查看本地缓存的数据，如果能在本地中找到，则会使用本地浏览器缓存的数据，而不会向服务器发送请求。如果想要获取实时的信息，则可以通过添加时间戳的方式，来让每次请求的url跟之前不一样。
6、jquery 中 data 函数的作用
data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
用法一：
jQueryObject.data( [ key [, value ] ])
以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。
用法二：
jQueryObject.data( object )
以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。
注意：
data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素。
<body>
<div>第一个div</div>
<div>第二个div</div>
<script type="text/javascript">
$("div").data("title","hello world");
$("div").data({
"color":"red",
"name":"div"
});
console.log($("div").data());
console.log($("div").data("name"));
</script>
</body>
代码
代码1
- 添加 /删除 class
$node.addClass("active");
$node.removeClass("active");
- 隐藏/显示元素
$node.show()
$node.hide()
$node..toggle()
- 获取元素$node 的 属性: id、src、title， 修改以上属性
var styleProps = $node.css(["id","src","title"]);
$node.css({
"id":"div",
"src":"image/xxx",
"title":"hello world"
})
- 给$node 添加自定义属性data-src
$node.attr("data-src","image/xxx")
- 在$ct 内部最开头/最末尾添加元素$node
$ct.prepend($node);
$ct.append($node);
- 删除$node/把$ct里内容清空
$ct.empty();
$ct.empty();
- 在$ct 里设置 html <div class="btn"></div>
$ct.html("<div class='btn'></div>");
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$ct.width();
$ct.width(500);
$ct.height();
$ct.height(500);
// 以下函数只能获取，不可设置值
$ct.innerWidth(); //包括内边距
$ct.innerHeight();
$ct.outerWidth(); //包括内边距、边框
$ct.outerHeight();
$ct.outerWidth(true) // 包括内边距、边框、外边距
$ct.outerHeight(true);
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop();
- 获取$node 到根节点水平、垂直偏移距离
$node.offset();
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
"font-size":"14px",
"color":"red"
})
- 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function () {
$(this).text();
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find(".item");
- 获取$ct 里面的所有孩子
$ct.children();
- 对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
$node.parents(".ct").find(".panel");
- 获取选择元素的数量
$node.length;
- 获取当前元素在兄弟中的排行
$node.index();
网友评论