jQuery动画与ajax

2017-06-12  本文已影响0人  北城_荒

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

>当所有的文档加载完成之后,执行后面的操作

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

$node.html()里面的参数可以是html代码,而document.createTextNode()则只能显示文本,eg:

$node.html()//选中返回元素的内容,包含html标签及内容

$node.text()//选中返回元素的内容,不包含html标签

题目3: $.extend 的作用和用法?

Query的extend扩展方法:
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
一、Jquery的扩展方法原型是:
extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。```
如下例:
```var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})```
那么合并后的结果
```result={name:"Jerry",age:21,sex:"Boy"}```
也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。


题目4: jQuery 的链式调用是什么?
>链式操作就是分步骤地对jQuery对象实现各种操作,举个栗子:
$("#Test").css('color','red').show(200).removeClass('style');
上面的例子就是链式操作,在一行代码里,对id为Test的对象进行了三项操作:先设置其字体颜色为红色,再显示对象,最后移除对象的“style”这个样式。再炒个板栗:
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
上面的例子意为:先为id为Test的对象添加"style"这个样式,再找寻其下的第一个div标签,并使其淡出。
作用:
1.代码更精简。链式操作能大大精简代码量,多项操作一行代码一气呵成,搞定;
2.优化性能。使用链式操作,所有操作代码共享一个jQuery对象,省去了逐步查询DOM元素的性能损耗。

题目5: jQuery 中 data 函数的作用
>jquery data的使用方式

>1、获取附加的data的值
$(selector).data(name)
参数说明
 name:
可选。规定要取回的数据的名称。
如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。

 

>2、用name和value为对象附加数据
$(selector).data(name,value)
参数说明
selector:为需要附加或者获取数据的对象。
name:参数为数据的名称。
value:参数为数据的值。

 

>3、使用对象向元素附加数据
使用带有名称/值对的对象向被选元素添加数据。
除了以提供 name 和 value 的方式进行赋值,我们还可以直接传入另一个对象( “another” )作为参数。这种情况下,“another” 的属性名称和属性值将被视为多个键值对,从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。 
 $(selector).data(object)



题目6:


写出以下功能对应的 jQuery 方法:
给元素 $node 添加 class active,给元素 $noed 删除 class active

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

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

$node.hide()```


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

```$node.attr('id')
$node.attr('id')
$node.attr('id’,'a')
$node.attr('src')
$node.attr('src’,'a')
$node.attr('title')
$node.attr('title’,'a')```


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

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



在$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'})```

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

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



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

$ct.find('.item')```

获取$ct 里面的所有孩子

$ct.children()```



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

$node.parent('.ct').find('.panel')```

获取选择元素的数量

$node.length```




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

$(this).index()```

上一篇下一篇

猜你喜欢

热点阅读