1. Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
$(document).ready()内的元素或事件会在DOM完成加载之后立即加载。
document.ready()和传统的方法window.onload相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。
ready事件可以同时注册多个，执行时，按照注册的先后顺序执行。就算是注册不同元素的ready事件，也是按照先后顺序执行。
ready事件与window.onload(或<body onload=””>)是冲突的，如果使用了window.onload(或<body onload=””>)，将导致ready事件不执行。
其他写法：
$(document).ready(function)
$().ready(function)
$(function)
2. $node.html()和$node.text()的区别?
$node.html()获取被选元素的节点包括html结构
$node.text()获取被选元素的文本节点
3. $.extend 的作用和用法?
$.extend(target [,object1] [,objectN])将两个或更多对象的内容合并到第一个对象.
如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。不支持第一个参数传递 false。
4. JQuery 的链式调用是什么？
执行完一个方法之后就返回本身（return this）；然后被返回的对象继续执行后面的方法，如：
$("has_children").click(function({
$(this).addClass("highlight").children("a")
.show().end().siblings().removeClass("highlight")
.children("a").hide();});
5. JQuery ajax 中缓存怎样控制?
cache：如果设置为 false ，浏览器将不缓存此页面。
注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"
6. jquery 中 data 函数的作用
向元素附加数据，也可以取回该数据：
$.data( element, key, value )
element
类型: Element
要存储数据的DOM对象
key
类型: String
存储的数据名
value
类型: Object
新数据值
代码
1. 写出以下功能对应的 Jq 方法：
1. 给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass("active");
$node.removeClass("active");
2. 展示元素$node, 隐藏元素$node
$node.show();
$node.hide();
3. 获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr("id"); //获取id
$node.attr("src"); //获取src
$node.attr("title"); //获取title
$node.attr("id","value"); //修改id
$node.attr("src","value"); //修改src
$node.attr("title","value"); //修改value
4. 给$node 添加自定义属性data-src
$node.attr("data-src","value");
5. 在$ct 内部最开头添加元素$node
$ct.prepend("$node");
//or
$node.prependTo("$ct");
6. 在$ct 内部最末尾添加元素$node
$ct.append("$node");
7. 删除$node
$node.remove();
8. 把$ct里内容清空
$ct.empty();
9. 在$ct 里设置 html <div class="btn"></div>
$ct.html("<div class="btn"></div>");
10. 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();
$node.height();
$node.innerWidth();//包括padding
$node.innerHeight();
$node.outerWidth();//包括padding border
$node.outerHeight();
$node.outerWidth(true);//包括padding border margin
//括号内有数值时即为设置
11. 获取窗口滚动条垂直滚动距离
.scollTop();
12. 获取$node 到根节点水平、垂直偏移距离
$node.offset();
13. 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
"color": "red"
"font-size": "14px"
});
14. 遍历节点，把每个节点里面的文本内容重复一遍
$xx.each(function(){
$(this).html();
})
15. 从$ct 里查找 class 为 .item的子元素
$ct.find(".item");
$ct.children(".item"); //仅仅能找到元素的一下级的子元素
16. 获取$ct 里面的所有孩子
$ct.children();
17. 对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
$node.parents(".ct").find(".panel");
18. 获取选择元素的数量
$node.length;
$node.size();
19. 获取当前元素在兄弟中的排行
$node.index() + 1;
2. 简单实现以下操作
1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
2. 当窗口滚动时，获取垂直滚动距离
3. 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
4. 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
5. 当选择 select 后，获取用户选择的内容
6.用 jquery ajax 实现如下效果。当点击加载更多会加载数据展示到页面。当鼠标放置上去会变色
<?php
// 后端 php 测试接口文件
$start = $_GET['start'];
//2
$len = $_GET['len']; //6
$items = array();
for($i = 0; $i < $len; $i++){
array_push($items, '内容' . ($start+$i));
}
$ret = array('status'=>1, 'data'=>$items);
//{status: 1, data: ['内容1','内容2','内容3']}
sleep(0.5);
echo json_encode($ret);
网友评论