jQuery 中， $(document).ready()是什么意思？
$(document).ready()的作用是当文档中的DOM节点加载完成后，在加载外部图片和资源前，执行ready()里面的操作。window.load是整个页面加载完成（包括图片，css，脚本等）之后再执行onload()中的操作。并且window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 （后者会覆盖前者）。
注意:
$(document).ready(function(){})可以简写成$(function(){})。
$node.html()和$node.text()的区别?
-
.html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。（不解析后代元素） -
.text()仅仅得到匹配元素集合中每个元素的文本内容，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
- 当包含参数的时候，html(str)为替换html内容为参数值，text(str)为替换文本内容为参数值。
<div class="demo-container">
<div class="demo-box"></div>
<ul>
<li>list item 1</li>
</ul>
</div>
$( "div.demo-container" ).text() // list item1
$( "div.demo-container" ).html() // <div class="demo-box"></div><ul><li>list item 1</li></ul></div>
注意
The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method.
$.extend 的作用和用法?
.extend([deep], target, object1, [objectN])
扩展方法，将对象的所有属性都添加到目标对象。
$.extend还可以深拷贝。
目标对象（第一个参数）将被修改，并且将通过$.extend()返回
<script>
var obj1 = {a:1};
var obj2 = {b:2,c:3};
var obj3 = {b:10,d:4};
var obj4 = {} //如果想保留原对象，可以通过传递一个空对象作为目标对象
$.extend(obj1,obj2) //obj1 ={ a:1,b:2,c:3};
$.extend(obj1,obj2,obj3) //obj1 = { a:1 ,b:10 ,c:3 ,d:4}
//两种方式将目标对象传递给空对象
$.extexd(obj4, obj1, obj2, obj3)
var obj5 = $.extend({},obj1, obj2, obj3)
</script>
jQuery 的链式调用是什么？
- 链式调用：使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法
例：$(this).siblings().removeClass('active');
jQuery 中 data 函数的作用
data([key],[value])
在元素上存放或读取数据,返回jQuery对象。
$().data(key, value), $().data(obj) //是为jQuery对象中的所有DOM对象分别附加数据
$().data(key), $().data() //从jQuery对象上读数据
写出以下功能对应的 jQuery 方法：
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active);
$node.removeClass('active');
- 展示元素$node, 隐藏元素$node
$node.show();
$node.hidden();
- 获取元素$node 的 属性: id、src、title， 修改以上属性
//获取
$node.attr('id');
$node.attr('src');
$node.attr('titile');
//修改
$node.attr('id','newId');
$node.attr('src','newSrc');
$node.attr('title','newTitile');
- 给$node 添加自定义属性data-src
$node.attr('data-src','xxx')
- 在$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({
"font-size":"14px",
"color":"red"
})
- 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function (){
console.log($(this).text());
})
- 从$ct 里查找 class 为 .item的子元素
$ct.find('.item') ;
- 获取$ct 里面的所有孩子
$ct.childern()
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel');
- 获取选择元素的数量
$node.length;
- 获取当前元素在兄弟中的排行
$node.index();
用jQuery实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
