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 条评论
登录 后参与评论

相关文章

来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

第一种方法: 用了转义字符把>和<替换掉,然后就没有问题了。 SELECT * FROM test WHERE 1 = 1 AND start_da...

1849
来自专栏柠檬先生

Angularjs基础(十)

ng-blur  描述:规定blur 事件的行为       实例:当输入框失去焦点的(onblur)时执行表达式:         <input ng...

1955
来自专栏偏前端工程师的驿站

JS魔法堂:追忆那些原始的选择器

一、前言                                                                            ...

1967
来自专栏阮一峰的网络日志

CSS 变量教程

今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

33811
来自专栏前端架构与工程

jQuery源码——.html()方法原理解析

在将字符串转化为html碎片时,一般会将字符串作为容器的innerHTML属性赋值。但innerHTML有很多局限性,比如我们想转化的字符串中有<script>...

2018
来自专栏小壮和前端

es6之深入理解promise对象

790
来自专栏liulun

riot.js教程【四】Mixins、HTML内嵌表达式

前文回顾 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二】组件撰写准则...

2117
来自专栏柠檬先生

Angularjs基础(十二)

ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框的值scope 变量中。 ...

19610
来自专栏与神兽党一起成长

unslider源码分析

根据Bootstrap中文网的介绍,Unslider一个超小的 jQuery轮播(slider)插件,参照这个汉化版的介绍页面,这个插件有你需要的优点,但是本...

921
来自专栏xingoo, 一个梦想做发明家的程序员

简单选择排序

选择排序时间复杂度也为O(n^2) 算法思想: 选择排序即每次length-i的长度内选择一个最小的元素,与第一个进行替换,这样大循环length次后,就可以得...

1946

扫码关注云+社区