jQuery动画与ajax

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();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

package reflect

reflect包实现了运行时反射,允许程序操作任意类型的对象。典型用法是用静态类型interface{}保存一个值,通过调用TypeOf获取其动态类型信息,该函...

963
来自专栏灯塔大数据

技术 | Python从零开始系列连载(八)

导读 上一期学习了Python特色数据类型(列表)上半节,相信大家都已经熟悉啦,我们这一期就来学习Python特色数据类型(列表)下半节吧! 列表切片 列表切片...

3356
来自专栏项勇

笔记72 | 将姓放在名的后面,排序按姓氏首字母排列的修改笔记

1575
来自专栏WD学习记录

牛客网 和为S的两个数字

输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的。

1144
来自专栏csxiaoyao

LESS 学习demo

3437
来自专栏Golang语言社区

[Go语言]实现可以枚举的map

在golang-nuts上看到有人问怎么样去枚举一个map。在go语言层面,并不支持支持枚举map,也就是说你不能获得一个枚举器在任意时刻去枚举这个map,只能...

3517
来自专栏https://www.cnblogs.com/L

【Scala篇】--Scala初始与基础

scala 中的object是单例对象,相当于java中的工具类,可以看成是定义静态的方法的类。object不可以传参数。另:Trait不可以传参数

791
来自专栏深度学习与计算机视觉

时间复杂度的计算

如果我们想验证一段代码的效率,一个最直接的办法就是编出来之后运行一下,这个方法称为事后统计方法,但是这个方法存在着非常大的弊端,比如我们需要时间编写代码,而代码...

1928
来自专栏人工智能LeadAI

为什么算法容易忘记之快速排序

本文用来帮助大家理解记忆快速排序,方法和上篇文章一样,着重理解算法基本思想及其代码中的循环控制变量的意义。 基本思想 快速排序属于拿着元素找位置的算法。思路非常...

3334
来自专栏Golang语言社区

[Go语言]实现可以枚举的map

在golang-nuts上看到有人问怎么样去枚举一个map。在go语言层面,并不支持支持枚举map,也就是说你不能获得一个枚举器在任意时刻去枚举这个map,只能...

2757

扫码关注云+社区