jQuery动画与ajax

jQuery 中， $(document).ready()是什么意思？

$(document).ready()方法：为防止文档在完全加载（就绪）之前运行Jquery代码。若在文档未完全加载前就运行函数，操作可能失败。必须在文档加载完后执行操作，可使用ready事件，作用相当于把js写到body末尾。
以下三个语法全部是等价的：

- $(document).ready(handler)
- $().ready(handler) (this is not recommended)
- $(handler)

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

$.extend 的作用和用法?

作用：将两个或更多对象的内容合并到第一个对象。
目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

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

  // 定义一个对象
  var obj = {
    a: 1,
    b: 2,
    c: 3
  };
  // 定义一个新对象
  var newobj = {
    a: 4,
    c: 6
   };

 //extend方法接受多个参数,并且第一个对象被覆盖
 $.extend(obj,newobj)
 //extend方法想保留原对象，传递一个空对象作为目标对象
 $.extend({},obj,newobj)

jQuery 的链式调用是什么？

当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用。

 例：  $('.ct').find(''.ct-btn).eq(index)addClass('active');

jQuery 中 data 函数的作用

在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value)
在匹配元素上存储任意相关数据.

$("div").data("human",{age:20,sex:"男"});
console.log( $("div").data("people").age    );  //20

.data(key)
返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。通过.data(name, value)或HTML5 data-* 属性设置
```
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
```

下面通过data()函数获取里面的值

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

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

给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass('active');   // 添加 class active
$node.removeClass('active');    // 删除 class active

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

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

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

$(node).attr('id');       // 获取id
$(node).attr('src');     // 获取src
$(node).attr('title');    // 获取title
 ~~~~~~~~~~~~~~
$(node).attr('id', 'class');            // 修改id
$(node).attr('src', 'somesrc');      //修改scr  
$(node).attr('title', 'sonetitle');      // 修改title

给$node 添加自定义属性data-src
```
$(node).data('src', 'somesrc');  
```
在$ct 内部最开头添加元素$node
```
$(ct).prepend($node);
```
在$ct 内部最末尾添加元素$node
$(ct).append($node);
删除$node
```
$(node).remove();
```
把$ct里内容清空
```
$(node).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("border: 1px solid #ccc", font-size: 14px);
```
遍历节点，把每个节点里面的文本内容重复一遍
```
$node.each(function(){
   console.log($(this).text());
});
```
从$ct 里查找 class 为 .item的子元素
```
$('.ct').find('item');
```
获取$ct 里面的所有孩子
```
$(ct).find();
```
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
```
$(node).parents('.ct').find('.panel');
```
获取选择元素的数量
```
$node.length;
$node.size();
```
获取当前元素在兄弟中的排行
```
$node.index();
```

最后编辑于：2017.12.11 03:36:08