jquery 常用方法&ajax
问答
- Jquery 中$(document).ready()是什么意思？和window.onload 的区别?还有其他什么写法或者替代方法？
如果你想要一个事件运行在你的页面上，你必须$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。
区别：
1、window.onload只能编写一个，即使编写多个也只执行一个，而$(document).ready()则可编写多个并且都可得到执行；
2、window.onload需要等到页面所有的元素（含图片的加载）加载完成后才执行，而$(document).ready()只需等到DOM准备就绪时就执行（不必等待所有元素加载完后再执行）；
3、window.onload是原生js中的，而 $(document).ready()需在调用jquery库后才能使用；
4、window.onload不可简写，而$(document).ready()可简写成
$(function(){})
或者
$().ready(function(){})
2.$node.html()和$node.text()的区别?
- $node.html()是获取集合中第一个匹配元素的html内容;当()里面含有参数时则表示设置每个匹配元素的html内容；
- $node.text()是获取匹配集合中每个元素的合并文本，包括他们的后代;当()里含有参数时，表示设置每个匹配元素的文本内容为指定文本内容；另外，$node.text()与$node.html()的不同在于$node.text()能够在xml文档中使用，而html不可以。
3.$.extend 的作用和用法?
$.extend的作用是将两个或以上的对象内容合并到第一个对象；
举个例子
相同替换，不同叠加
相同替换，不同叠加
4.JQuery 的链式调用是什么？
$('.ct').hide(3000).show(2000).css('background-color','yellow');
3秒隐藏后，3秒出现，背景色变为黄色。（这里有个小问题，按钮点击后背景色马上变为黄色 且同时发生hide动作，自以为大概是语句执行的快，展示动作慢）
例子 JS bin
5.JQuery ajax 中缓存怎样控制?
-
1 .在请求的url后面加上一个随机参数（*.do?random=Math.random)；
-
2.给jquery ajax请求设置禁用缓存的全局设置我们都知道在jquery ajax的的方法中有个cache参数，如果设置为false，那么就不进行缓存。用ajaxSetup() 方法，该方法可以为所有的ajax请求统一设置默认参数。那么可以设置如下代码：
$(function(){ $.ajaxSetup ({
cache: false ;//关闭AJAX缓存
});
});
6.jquery 中 data 函数的作用。
Paste_Image.png
代码
写出以下功能对应的 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');//修改title
4.给$node 添加自定义属性data-src
$node.attr('data-src','value');
5.在$ct 内部最开头添加元素$node
$ct.pretent($node);
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.width('value');//设置宽度
$node.height('value');//设置高度
//包括内边距
$node.innerWidth();//获取包括内边距的宽度
$node.innerHeight();//获取包括内边距的高度
$node.innerWidth('value');//设置包括内边距的宽度
$node.innerHeight('value');//设置包括内边距的高度
//包括边框
$node.outerWidth();//获取包括边框宽度
$node.outerHeight();//获取包括边框高度
$node.outerWidth('value');//设置包括边框宽度
$node.outerHeight('value');//设置包括边框高度
//包括外边距
$node.outerWidth(true);//获取包括外边距宽度
$node.outerHeight(true);//获取包括外边距高度
11.获取窗口滚动条垂直滚动距离
$node.scollTop();
12获取$node 到根节点水平、垂直偏移距离
$node.offset();//返回到根节点的top和left值
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
'color': 'red',
'font-size': '14px';
});
14.遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(idx,val){
console.log($(this).text(););
});
15.从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
16.获取$ct 里面的所有孩子
$ct.children();
17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到.panel的孩子
$node.parents('.ct').find('.panel');
18.获取选择元素的数量
$node.length;
19.获取当前元素在兄弟中的排行
$node.index();
代码2 代码预览
代码3 代码预览
本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源
