jQuery动画与ajax

1. jQuery 中, $(document).ready()是什么意思?

$(document).ready()表示页面的DOM元素已经加载完毕,这是为了防止页面元素加载完之前对DOM元素进行操作。原生JS我们通常使用window.onload来打到这个效果,不过两者还是有区别 ,onload是所有元素、图片、外部资源都加载完,而$(document).ready()只需要元素加载完成。所以onload比$().ready()要慢

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

.html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。

.text()得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容

    <div class="test1">
        <p>我是这样输出哒</p>
    </div>
    $('.test1').html() //<p>我是这样输出哒</p>
    $('.test1').text() //我是这样输出哒

3. $.extend 的作用和用法?

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

拷贝分深拷贝和浅拷贝:

jQuery.extend()
  • 当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。
  • 目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:
var object = $.extend({}, object1, object2);
  • 在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并

Example:合并两个对象,并修改第一个对象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

$.extend( object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

Example:采用递归方式合并两个对象,并修改第一个对象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

$.extend( true, object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

Example:合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend( {}, defaults, options );
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
//defaults -- {"validate":false,"limit":5,"name":"foo"}
//options -- {"validate":true,"name":"bar"}
//settings -- {"validate":true,"limit":5,"name":"bar"}

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

使用jQuery方法时,对象方法返回的是对象本身,可以调用此对象的其他jQuery方法,实现链条样式的调用。

 $this.addClass('active').siblings().removeClass('active');

5. jQuery 中 data 函数的作用?

data函数:存储任意数据到指定的元素,返回设置的值。

jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险

jQuery.data(element, key, value)
存储任意数据到指定的元素,返回设置的值。

jQuery.data( element, key )
返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据,或者元素上完整的数据存储。

$().data(key)、$().data()
从jQuery对象上读数据。

6.写出以下功能对应的 jQuery 方法:

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

$node.addClass('.active')
$node.removeClass('.active')

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

$node.show()
$node.hide()

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

$node.attr('id','newid')
$node.attr('arc','newsrc')
$node.attr('title','newtitle')

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

$node.data('data-arc','newsrc')

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

$ct.prepend($node)

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

$ct.append($node)

删除$node

   $node.remove()

把$ct里内容清空

 $ct.empty()

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

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

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

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

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

$(window).scrollTop()

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

$node.offset()

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

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

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

$node.each(function(){
    console.log($(this).text());
})

从$ct 里查找 class 为 .item的子元素

$ct.find('.item')

获取$ct 里面的所有孩子

$ct.children()

对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子

$node.parents('.ct').find('.panel')

获取选择元素的数量

$node.length()

获取当前元素在兄弟中的排行

$node.index()

【个人总结,如有错漏,欢迎指出】
:>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容