jQuery里面用this和用$(this)有什么区别

表示对象不同：this表示的是javascript提供的当前对象，$(this)表示的是用jquery封装候的当前对象。

$('img').each(function(){
        if( checkWindow($(this)) && !isLoad($(this))){
            loadImg($(this))
        }
    })
function checkWindow( $img ) //$img等于each遍历里的$(this)

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

当DOM准备就绪时，指定一个函数来执行。与JavaScript提供了window.onload事件的区别：

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.
简单来说 window.onload是当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发
$(document).ready()只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数

node.text()的区别?

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

$.extend 的作用和用法?

语法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )
1. 当我们提供两个或多个对象给.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

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

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

在默认情况下，通过$.extend()合并操作不是递归的;

如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

JQuery 的链式调用是什么？

链式调用：使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法

例：$(this).siblings().removeClass('active');

原理（伪代码）：

    window.onload = function(){
        // jQuery构造器
        var jQuery = function(selector, context) {
            return new jQuery.fn.init(selector, context);
        }
        jQuery.fn = jQuery.prototype = {
            constructor: jQuery,
            //给所有元素设置颜色
            setColor: function(color) {
                for (var i = 0; i < this.length; i++) {
                    this[i].style.color = color
                }
                return this;
            },
            //返回第一个元素
            first: function() {
                return this[0]
            }
        }
        var init = jQuery.fn.init = function(selector, context) {
            var elem = document.querySelectorAll(selector)
            for (var i = 0; i < elem.length; i++) {
                this[i] = elem[i]
            }
            this.length   = elem.length;
            this.context  = document;
            this.selector = selector;
            return this;
        }
        init.prototype = jQuery.fn;
        var $div = jQuery('div')
        $div.setColor('red').first()
    }

jQuery 中 data 函数的作用

用法：jQuery.data( element, key, value )
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。
例：

[ image

image.jpg1992x752 62.3 KB](https://jscode.me/uploads/default/original/2X/1/13c80f027c70d1f222e36279dd690669f5141681.jpg "image.jpg")

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

$(ele).addClass('.active')
$(ele).removeClass('.active')

展示元素node

$(ele).show()
$(ele).hide()

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

$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改

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

$node.data("src",str)

在node

$(".ct").prepend(node);

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

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

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

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

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

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

$ct.find('.item')

获取$ct 里面的所有孩子

$ct.children()

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

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

获取选择元素的数量

$(ele).length
$(ele).size()

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

$(ele).index();

7. 用jQuery实现以下操作

• 当点击btn 的背景色变为红色再变为蓝色
  btn.css("background","red")
  setTimeout(function(){
  $btn.css("background","blue")
  },2000)
  })

• 当窗口滚动时，获取垂直滚动距离
  (window).scrollTop())
  });

• 当鼠标放置到div 背景色改为红色，移出鼠标背景色变为白色
  div.css("background","red")
  })

   $dic.on("mouseleave",function(){
   $dic.css("background","white")
   })
  

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

    $("input").on("focusin",function(){
        $("input").css("border-color","blue")
  
        $("input").on("keyup",function(){
        $("input").val($("input").val().toLowerCase())
        })
  })
  
  $("input").on("blur",function(){
        $("input").css("border-color","white")
            console.log($(this).val())
      })
  

• 当选择 select 后，获取用户选择的内容
  ("p").text($(this).val())
  })

8.用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面 效果预览

代码