JQuery常见应用

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

理想的页面加载方式：
解析HTML结构。
加载并解析外部脚本。
DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded
加载图片、样式表文件等外部文件。
页面加载完毕。//window.onload

• $(document).ready(handler)
  当DOM结构已完全加载时，传递给.ready()方法的处理函数就开始执行，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。并且可以同时编写多个并执行。

$(document).ready(handler)
$(handler)
$().ready(handler)
document.ready = handler　　//JavaScript

• $(document).load(handler)
  如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。注意window.onload不能同时编写多个，如果页面有多个window.onload,只会执行最后一个。

$(document).load(handler)
window.onload = handler　　//JavaScript写法

• DOMContentLoaded（IE8及其以下不兼容）

DOMLoading
浏览器开始解析dom树的时间点
DOMInteractive
表示浏览器已经解析好dom树了。
DOMContentLoaded
同步的JS已经执行完毕了。

JavaScript提供的，当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。效果和 $(document).ready()类似。

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
</script>

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

• $node.html()获取/设置被选元素的节点包括html结构

$(".box").html() //获取元素内部的html内容，类似于innerHTML
$(".box").html("<p>设置了一个段落</p>")//设置了元素内部的html内容,标签生效

• $node.text()获取/设置被选元素的文本节点

$(".box").text() //获取元素内部的text文本，类似于innerText
$(".box").text("设置了一个文本")//设置了元素内部的text文本，标签不生效

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

• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（第一个参数）并返回，重复的属性会覆盖，如果没有{}将赋值到第一个对象。
  用法为：

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

如：

var obj1 = {
  name : 'John',
  age : 12,
  sex : 'man',
  class: {Chinese : 'classV',English : 'classII'}
}
var obj2 = {
  name : 'King',
  age : 22,
  sex : 'man',
  career: 'doctor', 
  class : {History : 'class1'}
}

var newObj = $.extend({},obj1,obj2)
console.log(newObj)
//{age:22,career:"doctor",class:{History: "class1"},name:"King",sex:"man"}

当一个参数为true时，将会进行递归的深拷贝合并。
用法为：

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

更改上边的例子，变为：

var newObj = $.extend(true,{},obj1,obj2)
console.log(newObj)
//{age:22,career:"doctor",class:{Chinese: "classV", English: "classII", History: "class1"},name:"King",sex:"man"}

4、jQuery 的链式调用是什么？

• 指的是在JQ环境下，函数的返回对象可以连续的使用.jq()的方法进行连续调用而不报错

• 链式操作仅仅是通过对象上的方法最后

return this

把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了。

• 作用
  节省代码量，代码看起来更优雅。
  但是所有对象的方法返回的都是对象本身，也就是说没有返回值，这不一定在任何环境下都适合。

5、 jQuery 中 data 函数的作用

• jquery data()的作用
  data() 方法向被选元素附加数据，或者从被选元素获取数据。
  通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。
  该函数属于jQuery对象(实例)。移除通过data()函数存放的数据，使用 removeData() 函数。
• jquery data的使用方式
  • 获取附加的data的值
    $(selector).data(name)
    name：可选。规定要取回的数据的名称。
    如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。
  • 用name和value为对象附加数据
    $(selector).data(name,value)
    selector：为需要附加或者获取数据的对象。
    name：参数为数据的名称。
    value：参数为数据的值。
  • 使用对象向元素附加数据
    使用带有名称/值对的对象向被选元素添加数据。
    除了以提供 name 和 value 的方式进行赋值，我们还可以直接传入另一个对象作为参数。对象的属性名称和属性值将被视为多个键值对，从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。
    $(selector).data(object)
    object：必需。规定包含名称/值对的对象。

6、常见功能对应的 jQuery 方法

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

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

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

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

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

$node.attr('id/src/title','el') 
//只有第一个参数代表获取元素属性，第二个可选参数el为需要设置的属性

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

$node.attr('data-src','...')
//data-src值为'...'

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

$ct.prepend($node)
$node.prependTo($ct)

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

$ct.append($node)
$node.appendTo($ct)

• 删除$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().left
$node.offset().top

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

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

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

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

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

$ct.find('.item')

• 获取$ct 里面的所有孩子

$ct.children()  //获取直接子元素
$ct.find('*')  //获取所有后代元素

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

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

• 获取选择元素的数量

$node.length;
$node.size();

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

$(selector).index()

7、用jQuery实现以下操作

• 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

$("#btn").click(function(){
    $(this).css("background-color","red")
    setTimeout(function(){
      $("#btn").css("background-color","blue")
    },500)
  })

• 当窗口滚动时，获取垂直滚动距离

$(document).scroll(function(){
    console.log($(this).scrollTop()+'px')
  })

• 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

$('.div').on("mouseenter",function(){
    $(this).css("background","red");
});
$('.div').on("mouseleave",function(){
    $(this).css("background","#fff");
});
或：
$(".div").on("mouseover",function(){
    $(this).css("background-color","red");
});
$(".div").on("mouseout",function(){
    $(this).css("background-color","");
});

• 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

$('#ipt').on("focus",function(){
   $(this).css("outline-color","blue");
});
$('#ipt').on('keyup',function(){
    $(this).val($(this).val().toLocaleUpperCase());
});
$('#ipt').on('blur',function(){
     $(this).css("outline-color","none");
     if($(this).val()!=""){
         console.log($(this).val());
     }
});

• 当选择 select 后，获取用户选择的内容

$('#sel').on('change',function(){
    //或者console.log($(this).val());
    console.log($(this).find('option:selected').val());
});

8、用 jQuery ajax 实现加载更多

代码地址：https://github.com/zh-yang/resume/blob/master/task2-14/jq-clickmore/index-jq.html
server-mork如下：

920-1.gif

9、 实现一个天气预报页面

自己试着做了一下，不知道还有没有 bug （或者错误），改出来一些了。

代码地址：https://github.com/zh-yang/resume/tree/master/task2-14
预览地址：https://zh-yang.github.io/resume/task2-14/get-wearher/getWeatherII.html
预览截图：

920-2.gif