问答
1、 Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
-
$(document).ready()指的是整个DOM页面绘制完毕后才执行ready括号里面的东西，绘制不要求图片也加载完，只要求DOM，是的DOM。 - 区别:
-
$(document).ready()指的DOM结构绘制完毕后就执行，不必等到所有的什么图片啊元素啊都到位。 -
window.onload指的是页面中包括任何一个图片和元素都加载完毕后才执行。 -
$(document).ready()可以同时编写多个而window.onload同时只能编写一个，如果有多个会被覆盖掉。 -
$(document).ready()可以简写成$( function(){} )，window.onload没有简写。
2、 $node.html()和$node.text()的区别?
-
$node.html()顾名思义获取节点的html结构以及文本内容。 -
$node.text()获取节点的html里面文本内容。
<div class="aa">
<p>我是一个试验品...</p>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
console.log($('.aa').html()); //<p>我是一个试验品...</p>
console.log($('.aa').text()); //我是一个试验品...
</script>
3、 $.extend 的作用和用法?
- 当我们提供两个或多个对象给
$.extend()，对象的所有属性都添加到目标对象（target参数）。
jQuery.extend([deep,] target [, object1 ] [, objectN ] )，其中deep为true的时候为深拷贝。
用法 - 1、
$.extend(target, object1, object2,…])target为目标对象，后面的object会合并到target中，改变target的内容。如果不想更改目标对象的值，可以把target替换成{},如果有相同属性会覆盖相同的属性。
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
var obj1 = {
name: "star",
age: "20",
hobby: {
food: 'egg tart',
job: 'design',
travel: 'yes'
}
}
var obj2 = {
name: "rain",
age: "22",
sex: "female",
hobby: {
food: 'Hamburger',
job: 'engineer'
}
}
var extendSum = $.extend(true,{}, obj1, obj2);
console.log(extendSum);
//为false的时候hobby部分会显示的是food: 'Hamburger',job: 'engineer'
//为true的时候hobby部分会显示的是food:"Hamburger"job:"engineer"travel:"yes"
</script>
extend.png
4、 JQuery 的链式调用是什么？
链式调用就是执行完一个结果后就返回对象本身，然后被返回的对象继续执行后面的方法。
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$('div').on('mouseover', function() {}).on('mouseleave', function() {});
</script>
5、JQuery ajax 中缓存怎样控制?
-
$.ajax()方法中有个cache：如果设置为 false ，浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"。cache默认值为true，如果datatype为"script"和"jsonp"的时候默认为false，如果值为false则浏览器不保存此页面，原理是在GET请求中附加时间戳url?t=new Date().getTime()
6、jquery 中 data 函数的作用
-
.data()存储任意类型的数据到指定的DOM元素上，并且可以设置返回值，避免了循环应用内存泄漏的风险。
$.data(el, key, value)=> element为需要绑定的数据的DOM元素,key是数据名,value是数据的值。
<div id=""></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$('div').data('name',23333);
console.log( $('div').data('name') );// output => 2333
</script>
代码题
1、写出以下功能对应的 Jq 方法：
- 给元素 $node 添加 class
active，给元素 $noed 删除 classactive
<div class="wrap">111</div>
<button class="btn">点击添加class</button>
<button class="btn2">点击移除class</button>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$('.btn').on('click',function(){
$('.wrap').addClass('ok');
})
$('.btn2').on('click',function(){
$('.wrap').removeClass('ok');
})
</script>
- 展示元素
$node, 隐藏元素$node
$node.show();
$node.hide();
- 获取元素
$node的 属性: id、src、title， 修改以上属性
$node.attr('id、src、title') ;//获取属性
$node.attr('id、src、title'，value);//设置属性
- 给$node 添加自定义属性
data-src
$node.attr('data-src',value);
- 在$ct 内部最开头添加元素$node
$ct.prepend($node);//或者
$node.prependTo($ct);
- 在$ct 内部最末尾添加元素$node
$ct.append($node);
$node.appendTo($ct);
- 删除$node
$node.remove();
- 把$ct里内容清空
$ct.empty();
- 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>');
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width();//获取宽度
$node.width('100px');
$nide.height();
$node.height('100px');
- 获取窗口滚动条垂直滚动距离
$('body').scrollTop();
- 获取$node 到根节点水平、垂直偏移距离
$node.offset();//返回的参数包括left&top.
- 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$('.node').css({
"color":"red",
"font-sieze":"14px"
})
- 遍历节点，把每个节点里面的文本内容重复一遍
<div>
<ul class="node">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$('.node').each(function() {
console.log($(this).text());
});
$.each($('.node').children(), function() {
console.log($(this).text())
});
</script>
每个节点里面的文本内容重复一遍
- 从$ct 里查找 class 为 .item的子元素
<div>
<ul class="ct">
<li class="item">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li class="item">555</li>
</ul>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$('.ct').find( $('.item').css('color','red') )
</script>
效果
- 获取$ct 里面的所有孩子
$('.ct').children()//find是查找某种类型的 children是全部
- 对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
$('.node').parent('.ct').find('.panel')
- 获取选择元素的数量
<div>
<ul class="ct">
<li class="item">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<ul>
<li></li>
</ul>
<li class="item">555</li>
</ul>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
console.log($('.ct li').length)//结果是6，这里可以看到会把深一层的也计算进入
</script>
- 获取当前元素在兄弟中的排行
<div>
<ul class="ct">
<li class="item">111</li>
<li class="item">222</li>
<li class="item ok">333</li>
<li class="item">444</li>
<p></p>
<li class="item">555</li>
</ul>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
console.log($('.item').index())//找到第一个item然后下标返回值
console.log($('.ok').index())//2，在同类元素中是第三个下标为2
console.log($('.item').index($('.ok')))//在item中寻找第一个ok的元素
//总之就是在前面一个中寻找后面一个的第一个位置是多少
console.log($('p').index())
</script>
2、 简单实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
ATTENTION!
以上回答都在这链接里面了
用 jquery ajax 实现如下效果。当点击加载更多会加载数据展示到页面。当鼠标放置上去会变色
http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.html
答:本地apache测试运行
