jQuery

Yeah..super Strong

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

$(document).ready()是一个jQuery事件。一旦DOM准备就绪，JQuery的方法就被调用（这意味着浏览器已经解析了HTML并构建了DOM树）。这样就可以在文档准备好被操纵之后立即运行代码。

要点$(document).ready()：
它不会等待图像被加载。
用于在DOM完全加载时执行JavaScript。
可多次使用。
当收到“$未定义”时，使用jQuery替换$。
如果要操作图像，则不使用。使用$(window).load()来代替。

引发另个问题：JavaScript window.onload
和jQuery的$(document).ready()
方法有什么区别？

ready事件的目的是在文档加载后尽可能早地发生，从而为页面中的元素添加功能的代码不必等待所有内容加载。
window.onload()当您的页面上的所有内容都已加载时，包括DOM（文档对象模型），横幅广告和图像。该事件会触发，两者之间的另一个区别是，虽然我们可以有多个$(document).ready()函数，但我们只能有一个onload函数。

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

html()获取集合中第一个匹配元素的HTML内容设置每一个匹配元素的html内容。
text():得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

区别：

html是获取节点内的所有内容，包括标签、文本。
text是获取节点内的文本。

<pre><body> <input id ="one" type="text" placeholder="xx"> <p id = 'paragraph'><b>Test</b> Paragraph.</p> <input id ="two" type="text" placeholder="xx"> <script> $('#one').val($('#paragraph').html()) $('#two').val($('#paragraph').text()) </script></pre>

效果图

$.extend 的作用和用法?

提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
请记住，目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

<pre>//语法： jQuery.extend( target [, object1 ] [, objectN ] ) //将两个或更多对象的内容合并到第一个对象。</pre>

/* 把 object2 合并到 object1 /
$.extend(object1, object2);
/创建一个printObj函数*/
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
//二元判断,如果 JSON 不等于 'undefined'，那么使用JSON.stringify()
//方法将目标值转换为一个JSON字符串否则运用匿名函数
var arr = [];//新增一数组
$.each(obj, function(key, val) {//遍历
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
//判断是否为属性值是否为纯粹的对象，是的话，在运用匿名函数再进行遍历次得到值
arr.push( next );//
});
console.log(arr)
return "{ " + arr.join(", ") + " }";
};

$("#log").append( printObj(object1) );
</script>

</body>
`</pre>

jQuery 的链式调用是什么？

链式操作仅仅是通过对象上的方法最后return this把对象再返回回来，对象就又可以继续调用方法，所以就可以链式操作了。

<pre>`
//定义一个JS类
function Demo() {

}
//扩展它的prototype
Demo.prototype ={
setName:function (name) {
this.name = name;
return this;
},
getName:function () {
return this.name;
},
setAge:function (age) {
this.age = age;
return this;
}
};

////工厂函数
function D() {
return new Demo();
}
//去实现可链式的调用
D().setName("Rui").setAge(88).setName();
`</pre>

Original.Url

jQuery 中 data 函数的作用

在匹配元素上存储任意相关数据. 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。通过.data(name, value)或HTML5 data-* 属性设置

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

<pre>`
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
`</pre>

给元素 $node 添加 class active，给元素 $noed 删除 class active
<pre>$node.addClass('active');//添加 $node.removeClass('active');//删除</pre>
展示元素$node, 隐藏元素$node
<pre>$node.show(); //展示 $node.hide(); //隐藏</pre>
获取元素$node 的属性: id、src、title，修改以上属性
<pre>//获取 $node.attr('id'); $node.attr('src'); $node.attr('title'); //修改 $node.attr('id','someid'); $node.attr('src','somesrc'); $node.attr('title','sometitle');</pre>
给$node 添加自定义属性data-src
<pre>$node.data('src','somesrc');</pre>
在$ct 内部最开头添加元素$node
<pre>$('.ct').prepend($node);</pre>
在$ct 内部最末尾添加元素$node
<pre>$('.ct').append($node);</pre>
删除$node
<pre>$(node).remove();</pre>
把$ct里内容清空
<pre>$(node).empty();</pre>
在$ct 里设置 html <div class="btn"></div><pre>$ct.html('<div class="btn"></div>);</pre>
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
<pre>$node.width();//不包括内边距宽度,仅包括内容 $node.height();//不包括内边距高度,仅包括内容 $node.innerWidth();//包括内容和内边距宽度 $node.innerHeight();//包括内容和内边距高度 $node.outerWidth();//包括内容,内边距,边框宽度 $node.outerHeight();//包括内容,内边距,边框高度 $node.outerHeight(true);//包括内容,内边距,边框,外边距高度 $node.outerWidth(true);//包括内容,内边距,边框,外边距宽度</pre>
获取窗口滚动条垂直滚动距离
<pre>$(window).scrollTop()</pre>
获取$node 到根节点水平、垂直偏移距离
<pre>$node.offset()</pre>
修改$node 的样式，字体颜色设置红色，字体大小设置14px
<pre>$node.css({"color":"red", "font-size": "14px"});</pre>
遍历节点，把每个节点里面的文本内容重复一遍
<pre>$node.each(function(){ console.log($(this).text()); });</pre>
从$ct 里查找 class 为 .item的子元素
<pre>$(".ct").find(".item");</pre>
获取$ct 里面的所有孩子
<pre>$(.ct).children();</pre>
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
<pre>$node.parents(".ct").find(".panel");</pre>
获取选择元素的数量
<pre>$node.length; $node.size();</pre>
获取当前元素在兄弟中的排行
<pre>$node.index();</pre>
//==================================//
http://luckyman.xyz/gadget/jQueryApiAllDemo.html
还没关联上服务器：http://luckyman.xyz/gadget/news.html