首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery动画与ajax

jQuery动画与ajax

作者头像
小胖
发布2018-06-27 15:55:22
2.8K0
发布2018-06-27 15:55:22
举报

1: jQuery $(document).ready()与window.onload的区别?

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

1.执行时间

  • window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  • $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕 .

2.编写个数不同

  • window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
  • $(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法

  • window.onload没有简化写法
  • $(document).ready(function(){})可以简写成$(function(){})。当$()不带参数时,默认参数就是document,因此还可以简写成:$().ready(function(){});

2: $node.html()和$node.text()的区别?

  • $node.html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。
  • $node.text()得到匹配元素集合中每个元素的文本内容,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
<div class="ct">  
    hello 
    <p>world</p>
</div>
<script>
console.log( $('.ct').html());   
/* hello
    <p>world</p>*/
console.log( $('.ct').text()); 
/* hello
    world*/
</script>      

Paste_Image.png

3. $.extend 的作用和用法

作用:将两个或更多对象的内容合并到第一个对象。

用法

//用法1
jQuery.extend( target [, object1 ] [, objectN ] ) ;
//用法2
jQuery.extend( [deep ], target, object1 [, objectN ] );

用法一参数说明:

Paste_Image.png

用法二参数说明:

Paste_Image.png

当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。

如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

注意,目标对象(第一个参数)将被修改,并且将通过$.extend()返回。

<script>
    var a={name:'xuguojun'},b={name:'xuziqian',age:25},c={sex:'man'};
    //a被修改
    var object=$.extend(a,b,c);
    console.log(object);
    console.log(a);
</script> 

Paste_Image.png

如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象

var object = $.extend({}, object1, object2);

4: jQuery 的链式调用是什么?

由于jQuery 对象上的方法最后会返回该对象,jQuery的链式调用就是可以在对象返回后再次调用该对象使用jQuery方法的一种操作。

举例:

$('.ct').find('.ipt').text('HelloWorld').end().find('.prh').text('ChainCalls');

链式调用的好处:

  • 节省代码量,代码看起来更优雅;
  • 返回的都是同一个对象,可以提高代码的效率。
  • 让代码流程更清晰。

5. jQuery AJAX中缓存怎样控制

当使用GET方法发送数据时,ajax的参数cache默认设置为true,将缓存页面;将cache设置为false,浏览器将不会缓存页面,每当发起ajax请求时,都会向后台请求数据。 当使用POST方法时,则每次都会被认为是新的请求,不会缓存页面。

6. jQuery 中 data 函数的作用

作用:在匹配元素上存储任意相关数据, 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。该方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

用法1:在匹配元素上存储任意相关数据。

.data( key, value )
/*key,类型: String,一个字符串,用户存储数据的名称。
value,数据值,它可以是任意的Javascript数据类型,除了undefined。*/
.data( obj )
//obj,类型: Object,一个用于更新数据的 键/值对。

demo:

$("body").data("age", 35);
$("body").data("say", { input: "name", xiaoming});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data()); 
// { age: 35, say: { input: "name", xiaoming}, arr: [0, 1, 2] }

用法2:返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data( key )
/* key,类型: String,存储的数据名;如果那个元素上没有设置任何值,那么将返回undefined。*/
.data()

demo:

<script>
$("body").data("age", 35);
$("body").data("say", { input: "name"});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data("say")); //{ input: "name"}
console.log($("body").data());//{ age: 35, say: { input: "name", }, arr: [0, 1, 2] }
</script>  

Paste_Image.png

7:用jQuery方法实现一些功能

1.给元素 $node 添加 class active,给元素 $noed 删除 class active

$node.addClass("active");//为匹配元素添加class
$node.removeClass("active")为匹配元素删除class

2.展示元素$node, 隐藏元素$node

$node.hide();//隐藏匹配元素
$node.show();//展示匹配元素

3.获取元素$node 的 属性: id、src、title, 修改以上属性

$node.attr("id");//获取匹配元素的id属性值
$node.attr("id","tab");//修改匹配元素的id属性值为tab
$node.attr("src");//获取匹配元素的src属性值
$node.attr("src","brush-seller.jpg");//修改匹配元素的src属性值为brush-seller.jpg
$node.attr("title");//获取匹配元素的title属性值
$node.attr("title","follow your heart");//修改匹配元素的title属性值为follow your heart
//还可以一次设置多个属性值
$node.attr({
  id: 'tab',
  src: 'brush-seller.jpg',
  title:'follow your heart'
});

4.给$node 添加自定义属性data-src

$node.attr('data-src','string')

5.在$ct 内部最开头添加元素$node

$ct.prepend($node)

6.在$ct 内部最末尾添加元素$node

$ct.append($node)

7.删除$node

$ndoe.remove()

8.把$ct里内容清空

$ct.empty();//DOM中移除集合中匹配元素的所有子节点

9.在$ct里设置 html<div class="btn"></div>

$ct.html('<div class="btn"></div>')

10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

11.获取窗口滚动条垂直滚动距离

$(window).scrollTop()

12.获取$node到根节点水平、垂直偏移距离

$node.offset()

13.修改$node 的样式,字体颜色设置红色,字体大小设置14px

$node.css({"color":"red","font-size":"14px"})

14.遍历节点,把每个节点里面的文本内容重复一遍

$node.each(function(){
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();
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.05.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1: jQuery $(document).ready()与window.onload的区别?
  • 2: $node.html()和$node.text()的区别?
  • 3. $.extend 的作用和用法
  • 4: jQuery 的链式调用是什么?
  • 5. jQuery AJAX中缓存怎样控制
  • 6. jQuery 中 data 函数的作用
  • 7:用jQuery方法实现一些功能
相关产品与服务
数据保险箱
数据保险箱(Cloud Data Coffer Service,CDCS)为您提供更高安全系数的企业核心数据存储服务。您可以通过自定义过期天数的方法删除数据,避免误删带来的损害,还可以将数据跨地域存储,防止一些不可抗因素导致的数据丢失。数据保险箱支持通过控制台、API 等多样化方式快速简单接入,实现海量数据的存储管理。您可以使用数据保险箱对文件数据进行上传、下载,最终实现数据的安全存储和提取。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档