jQuery核心函数和工具方法

jQuery第二天

jQuery的核心函数

$();就代表调用jQuery的核心函数

1.接收一个函数

$(function () {
	alert("hello");
});

2.1接收一个字符串

返回一个jQuery对象,对象中保存了找到的BOM元素

var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);

2.2.接收一个代码片段

如果传递的是一个字符串的代码片段会根据字符串的代码片段，创建对应的DOM元素

返回一个jQuery对象,对象中保存了创建的BOM元素

var $p = $("<p>我是段落</p>"); //如果传递的是一个字符串的代码片段会根据字符串的代码片段，创建对应的dom元素
//验证
console.log($p);
$box1.append($p);

3.接收一个DOM元素

会被包装成一个jQuery对象返回给我们

//会被包装成一个jquery对象返回给我们
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);

jQuery对象

1.什么是jQuery对象

​ jQuery对象是一个伪数组

2.什么是伪数组？

​ 有0到length-1的属性，并且有length属性

$(function () {
    /*
    *1.什么是jQuery对象
    *jQuery对象是一个伪数组
    *
    * 2.什么是伪数组？
    * 有0到length-1的属性，并且有length属性
    */
    var $div = $("div");
    console.log($div);

    var arr = [1, 3, 5];
    console.log(arr);
});

jQuery对象的静态方法和实例方法

静态方法是直接添加给类的，实例方法是添加给类的原型的，静态方法是通过类名直接调用，而实例方法是通过类对应的对象来调用。

//1.定义一个类
      function AClass() {}
      // 2.给这个类添加一个静态方法
      //直接添加给类的就是静态方法
      AClass.staticMetgod = function () {
        alert("staticMetgod");
      };

      //静态方法通过类名调用
      AClass.staticMetgod();
      //3.给这个类添加一个实例的方法
      AClass.prototype.instancMethod = function () {
        alert("instancMethod");
      };
      //实例方法通过类的实例调用
      //创建一个是实例(创建一个对象)
      var a = new AClass();
      //通过实例调用实例方法
      a.instancMethod();

静态方法$.each方法

原生方法：

第一个参数:遍历到的元素
第二个参数：当前遍历到的索引

注意点：原生的forEach方法只能遍历数组，不能遍历伪数组

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
/*
第一个参数:遍历到的元素
第二个参数：当前遍历到的索引
注意点:
原生的forEach方法只能遍历数组，不能遍历伪数组
*/

arr.forEach(function (value, index) {
	console.log(index, value);
});
// obj.forEach(function (value, index) {
//   console.log(index, value);
// });

jQuery的each静态方法遍历数组:

第一个参数：当前遍历到的索引
第二个参数:遍历到的元素

注意点：jQuery的each方法是可以遍历伪数组的

//1.利用jquery的each静态方法遍历数组
/*
第一个参数：当前遍历到的索引
第二个参数:遍历到的元素
注意点：jquery的each方法是可以遍历伪数组的
*/
$.each(obj, function (index, value) {
	console.log(index, value);
});

静态方法$.map方法

原生方法：

第一个参数：当前遍历到的元素

第二个参数：当前遍历到的索引

第三个参数：当前被遍历的数组

注意点：

和原生的forEach一样，不能遍历的伪数组

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };

arr.map(function (value, index, array) {
	console.log(index, value, array);
});
arr.obj(function (value, index, array) {
	console.log(index, value, array);
});

jQuery的each静态方法遍历数组:

第一个参数：要遍历的数组

第二个参数：每遍历一个元素之后执行的回调函数

回调函数的参数：

第一个参数：遍历到的元素

第二个参数：遍历到的索引

注意点：和jQuery中的each静态方法一样,map静态方法也可以遍历伪数组

jQuery中的each静态方法和map静态方法的区别：

each静态方法默认的返回值就是，遍历谁就返回谁

map静态方法默认的返回值是一个空数组

each静态方法不支持在回调函数中对遍历的数组进行处理

map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后形成一个新的数组返回

var res = $.map(obj, function (value, index) {
    console.log(index, value);
    return value + index;
});

var res2 = $.each(obj, function (index, value) {
	console.log(index, value); 
});

静态方法$.trim()方法

作用：去除在字符串两端的空格

参数：需要去除空格的字符串

返回值：去除空格之后的字符串

var str = "    lnj    ";
var res = $.trim(str);
console.log("---" + str + "---");
console.log("---" + res + "---");

静态方法$.iswindow()方法

作用：判断传入的对象时候是window对象

返回值：true/false

//真数组
var arr = [1, 3, 5, 7, 9];
//伪数组
var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
//对象
var obj = { name: "fxy", age: "33" };
//函数
var fn = function () {};
//window对象
var w = window;

/*
var res = $.isWindow(arr);
console.log(res); //false

var res = $.isWindow(arrlike);
console.log(res); //false

var res = $.isWindow(obj);
console.log(res); //false

var res = $.isWindow(fn);
console.log(res); //false
*/

var res = $.isWindow(w);
console.log(res); //true

静态方法$.isArray()方法

作用：判断传入的对象是否是指针数组

返回值：true/false

var res1 = $.isArray(arr);
console.log(res1); //true
var res2 = $.isArray(arrlike);
console.log(res2); //false

静态方法$.isFunction()方法

作用：判断传入的对象是否是一个函数

返回值：true/false

注意点：

jQueru框架本质上是一个函数

因为jQueru源码是一个匿名函数

(function(window,undefined){})(window);

var res3 = $.isFunction(fn);
console.log(res3); //true

var res4 = $.isFunction(jQuery);
console.log(res4); //true//jQueru框架本质上是一个函数

静态方法$.isFunction()方法

作用：暂停ready执行

$.holdReady(true);
    $(document).ready(function () {
    alert("ready");
});

jQurey内容选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
      div {
        width: 50px;
        height: 50px;
        background: red;
        margin-top: 5px;
      }
    </style>
    <script>
      $(function () {
        //:empty 作用：找到既没有文本内容也没有子元素的指定元素
        // var $div = $("div:empty");
        // console.log($div);

        //:parent作用：找到有文本内容或有子元素的指定元素
        // var $div = $("div:parent");
        // console.log($div);

        //:contains(text)作用：找到包含指定文本内容的指定元素
        // var $div = $('div:contains("我是div")');
        // console.log($div);

        //:has(selector)作用：找到包含指定子元素的指定元素
        var $div = $('div:has("span")');
        console.log($div);
      });
    </script>
  </head>
  <body>
    <div></div>
    <div>我是div</div>
    <div>我是div2</div>
    <div><span></span></div>
    <div><p></p></div>
  </body>
</html>

:empty 作用：找到既没有文本内容也没有子元素的指定元素

var $div = $("div:empty");
console.log($div);

:parent用：找到有文本内容或有子元素的指定元素

var $div = $("div:parent");
console.log($div);

:contains(text)作用：找到包含指定文本内容的指定元素

var $div = $('div:contains("我是div")');
console.log($div);

:has(selector)作用：找到包含指定子元素的指定元素

var $div = $('div:has("span")');
console.log($div);