[jQuery]：jQuery的基础知识、遍历方式和构造函数

最新推荐文章于 2021-03-17 17:25:07 发布

南纬的风

最新推荐文章于 2021-03-17 17:25:07 发布

阅读量426

点赞数

分类专栏： H5/CSS/JS/jQuery 文章标签： jQuery each jQuery构造函数

本文链接：https://blog.csdn.net/fengwei4618/article/details/78108061

版权

H5/CSS/JS/jQuery 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

jQuery基础语法：$(selector).action()

$符号：jQuery的简写形式，等同于jQuery(selector).action()。
selector：jQuery的选择器，继承了CSS和Xpath的部分语法，和使用CSS选择器差不多，用于获取元素。
action()：jQuery对象要执行的操作，例如text()、html()和attr()等方法。

关于jQuery对象

jQuery框架只有一个jQuery对象，其所有的函数方法都来自该对象，该对象不会同原生JS和别的JS框架产生冲突。

使用$(selector)会返回一个jQuery对象，该对象是对DOM对象的包装，但不等价于DOM对象，它们的方法不是共用的。

jQuery对象是元素对象集合，包含了匹配的所有元素，可通过 [index] 或 $(selector).get(index) 获取相应元素，但会被转成JS对象。
jQuery对象的方法都被设计成自动操作对象集合，这意味着无需循环遍历元素，jQuery对象方法会自动对所有对象集合都执行相同的方法。而原生JS获取的元素为对象集合时，则要循环遍历每个元素才能调用相应方法。
jQuery和原生JS可以混用，如果要使用对方的方法，则jQuery对象和DOM对象需要相互转换。

获取一个jQuery对象，即元素节点。

 <div>
    <p>段落1</p>
    <p>段落2</p>
 </div>
 <script>
    var $p = $("div p"); //获取div块中所有p元素，返回jQuery对象
    console.log($p.text()); //对jQuery对象包含的所有节点都执行text()
 </script>

jQuery对象方法会自动操作对象集合，例如html()、hide()等。也就是jQuery对象无论包含多少个元素，每个节点对象都会调用该方法。

但这种方式也有弊端，就是会一次性执行，如果要限制执行次数，可以对jQuery对象进行循环遍历，单独操作。

 var $p = $("div p"); 
 for(var i = 0; i < $p.length; i++){
    //使用$p[i]形式，会转换为JS对象，不能调用jQuery对象方法
    console.log("JS对象方式：" + $p[i].innerText);
    //$()将DOM对象转成jQuery对象
    var $p2 = $($p[i]);
    console.log("jQuery对象形式：" + $p2.text());
 }

通过上面实例可以看出jQuery对象和JS对象(DOM对象)进行了转换，使用的方法也不同，但作用是一样的。

jQuery对象和JS对象相互转换

        var $a = $("seletor");
        //转成JS对象
        var abc = $a[0]; 
        var abc1 = $a[1];
	var abc2 = $a.get(3); //jQuery对象的get(index)方法
        //JS对象转成jQuery对象
        var $b1 = $( abc );
        var $b1 = $( abc1 );

使用说明：jQuery对象是一个元素对象集合，直接使用可以调用JQuery对象方法。但通过下标获取单独对象时就会转成JS对象，这点要注意。而将JS对象转成jQuery对象只需将JS对象传入$()，相当于jQuery()传入构造参数，就转换成jQuery对象。

建议：定义jQuery对象类型变量时，尽量使用$开头，以便区分。

技巧：如果不知道变量是什么类型，可以通过编辑器(例如vscode)来调用变量的方法，通过提供的方法就能看出是什么对象类型。

jQuery的each()方法

jQuery的each()方法可用于遍历一切集合(数组、对象集合)，可以代替for和foreach。each()有两种用法：$.each() 和 $().each()。

$.each() == jQuery.each()，相当于jQuery的静态方法，该方式可以遍历一切集合。
$().each()则是jQuery对象的方法，用于遍历jQuery对象包含的元素节点对象。

两种each()方法的参数列表

 //JQuery.each(func: (index: number, elem: Element) => any): JQuery
 $p.each(); 
 //JQueryStatic.each<T>(collection: T[], callback: (indexInArray: number, valueOfElement: T) => any): any (+1 overload)
 $.each();

$.each(Object[] ,function(index, element)) 遍历数组，则函数的两个参数必须存在，第一个作为索引值，而第二个参数则是获取的数组值，如果只写一个，那么只能拿到索引值，还需要通过数组名[index]调用。如果是遍历对象集合，函数可以选择不添加参数，直接用this访问。如果写了参数就需要两个都写，因为第一个参数永远是索引值。

$().each(function(index, element)) 使用方式就和$.each()遍历对象集合一样，这里就不说了，看实例。

如果遍历的是jQuery对象，也会和for或者foreach一样，得到是DOM对象，所以要使用jQuery方法，还需要使用$()再次转换。

$().each()实例——遍历jQuery对象

<ul>
    <li>列表1</li>
    <li>列表2</li>
</ul>
<script>
    var $li = $("ul li");
    //i ：jQuery对象集合的索引值，elem ：获取的是DOM对象
    $li.each(function(i, elem){
        console.log(i + ".." + elem.innerText);
    });

    //2.采用this指向当前DOM对象
    $("ul li").each(function(index, domEle){
        $(this).text("OK"); //把DOM对象转成jQuery对象
    });
 </script>

如果要限制遍历次数，可以在each()方法外定一个变量，each()方法中自增，满足次数就return false，则后续DOM对象不再遍历。

$.each()实例——遍历一切集合(数组、对象集合)

    //遍历一维数组
    var arr = [3,12,43,34,61];
    $.each(arr, function(index, value){
        console.log(value);// 也可以省略value, 使用arr[index]
    });
    //foreach方式， for省略，因为差不多。
    for(var i in arr){
        console.log(arr[i]);
    }

//遍历二维数组
var arr = [[3, 12, 43], [34, 61, 51], [45, 86, 26]];
$.each(arr, function (i, val) { //这里val是二维数组
  $.each(val, function (i, vals) {//这里对二维数组遍历取值
       console.log(vals);
   });
}); 
for(var i in arr){
   for(var j in arr[i]){
       console.log(arr[i][j]);
    }
}

使用each()获取数组值和常规方式遍历数组获取值，看起来差不多，但省略了循环遍历，虽然简便了，但隐藏了细节。而且each()是jQuery独有的，所以基本方式还是要掌握。

除了遍历数组，$.each()遍历对象属性非常好用，即json对象。

    //json对象 key-value格式
    var person = { name : "小天", age : 18, sex : "男" };
    $.each(person, function(key, val){
        console.log(key + "--" + val);
        //可以只通过key,拿到相应value   person[key]
    });

有多个json对象时，即json对象数组。使用$.each()来遍历也比较方便。

    //遍历json对象数组
    var all_person = [
        {name : "小天", age : 18, sex : "男"},
        {name : "小云", age : 29, sex : "女"},
        {name : "小黑", age : 35, sex : "男"}
    ];
    //这里的idx是数组下标，用于获取每个json对象。objVal则是获取到的json对象
    $.each(all_person, function(idx, objVal){
       console.log( objVal.name + "|" + objVal.age + "|" + objVal.sex);
    });

    //常规方式
    for(var i = 0; i < all_person.length; i++){
        //对数组中的每个json对象进行遍历
        for(var key in all_person[i]){
            console.log(all_person[i][key]); //key表示属性，通过key拿到相关value
        }
    }

$.each()遍历jQuery对象，也就是将jQuery对象作为集合参数，两者比较如下

    <div>
        <ul>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ul>
    </div>
    <script>
        var li = $("div ul li");
        $.each(li, function(i, domElem){
            console.log(i, domElem); //元素序列， DOM对象
        });

        li.each(function(){
            console.log(this);
        });
    </script>

相较于jQuery对象的each()，$.each()方式会更加灵活。使用时，可根据个人情况来选择相应用法。

jQuery构造函数用法

jQuery构造函数是jQuery的核心，该构造函数需要传入字符串，然后根据传入的内容作出不同的操作。下面将会详细jQuery构造函数的各种用法。

用法1 jQuery(selector , [context])

传入CSS选择器格式，匹配相关元素集合，返回一个jQuery对象。context参数是可选的，没有context参数，就从document文档中开始查找；指定context参数，则在context中查找相应元素。

 $("#d2 p") //获取 id=d2 元素中所有p元素
 $("div .c1", "p"); //从p元素中查找，匹配的是div元素中包含类名c1的元素

但这种方式逻辑很不好，所以可以采用find(“selector”)方法来代替context参数。例如：

     //获取div元素中包含c1类名的p元素
     $("div p[class='c1']"); 
     //先获取所有div元素，再在div元素中查找包含c1类名的p元素。
     $("div").find("p[class='c1']");

注意：find()方法是在对指定元素的后代元素进行查找。所以这里不能写成$("div p").find("[class='c1']"); 因为p元素中没有其他元素。

这种方式是jQuery的基础，和document.querySelector()/querySelectorAll()一样，使用的好不好取决于选择器水平，所以jQuery选择器是非常重要的。

用法2 jQuery(domElement) ：DOM对象转成jQuery对象。最常用的就是遍历DOM对象时，$(this)转换当前DOM对象。

用法3 jQuery(jQuery对象) ：克隆传入的jQuery对象，返回一个该jQuery对象的副本。

    var $p = $("div p");
    var $clone = $($p); //两者包含的DOM对象是一样的。

用法4 jQuery(function)

在DOM文档加载完成后，执行传入的函数。等同于$(document).ready(function);

        $(function(){
           //....
        });
        $(document).ready(function(){
           //....
        });

用法5 jQuery(html) ：创建一个新元素节点，作用和document.createElement()一样。

传递一个HTML字符串，可以选择手动创建，也可以由函数动态返回。创建单个元素时，记得使用闭合标签或者HTML语法。实例如下：

        var $p = $("<p/>");
        var $p1 = $("<p></p>");

如果是$("<p>")这种格式，jQuery会解析成$(document.createElement(“span”))，所以不推荐。成功创建DOM节点后，则会返回一个引用该DOM元素的jQuery对象。

这里随便提一下添加元素节点方法：append() 和 appendTo()。

    <div id="d1"></div>
    <script>
        var $p = $("<p/>");
        $("#d1").append($p); //为指定元素添加元素节点，和原生DOM的append()一样。
        //将元素节点添加到指定节点中
        $("<p>还可以</p>").appendTo("#d1");
    </script>

至于jQuery的其他DOM操作，由于篇幅问题，不再详述，会另外用一遍文章介绍。

至此，关于jQuery的基本语法和使用方式、jQuery对象遍历方式和jQuery构造函数的用法已基本介绍完成。如果想了解jQuery和Javascript的不同建议去查看相关资料。