二、jQuery核心

77 阅读 0 评论 51 点赞

我是靠谱客的博主内向小伙，最近开发中收集的这篇文章主要介绍二、jQuery核心，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、 jQuery核心函数

	
	+++ jQuery核心函数($/jQuery)
	
			 1) jQuery向外暴露的核心函数就是 $/jQuery。
			    引入jQuery库后,$或jQuery函数可以直接使用。 
	   	     
	   	     2) $与jQuery函数完全等价


	+++ jQuery核心函数的应用($/jQuery)
	
			1) 作为一般函数调用 $(param),将匹配的元素封装为一个jQuery实例对象。
					
					1) 参数为函数:延时加载运行该函数。
									相当于 window.onload=function(){}
									
					2) 参数为选择器字符串
									查找所有匹配的DOM元素，并包装为jQuery对象
					
					3) 参数为html标签字符串
									创建为标签对象，并包装为jQuery对象
					
					4) 参数为DOM对象
									将DOM对象包装为jQuery对象
						
						【注意:封装为jQuery对象就可以使用jQuery对象的方法 】
									
			2) 作为对象工具类使用 $.xxx()
			
					1) $.each() 遍历数组或对象
					
							$.each(arr,function(index,data){ ... })
							$.each(obj,function(key,value){ ... })

					2) $.trim() 去除两端空格

1.1 jQuery核心函数

1）jQuery向外暴露的核心函数就是 $或jQuery，在外部直接可以使用

jQuery核心代码


    //jQuery核心代码
    (function(window){
        jQuery = function( selector, context ) {
            return new jQuery.fn.init( selector, context );
        },

        //其他
		
		//jQuery向外暴露的核心核心函数就是$或jQuery
        window.$=window.jQuery=jQuery;
    })(window)

	
	由jQuery核心代码可知，
		1) jQuery向外暴露的函数就是$或jQuery,在外部可以直接访问
		2) $与jQuery完全等价。

2）$或jQuery完全等价


	    //1、jQuery核心函数
	    console.log($,typeof $);
	    console.log(jQuery, typeof jQuery);
	
	    console.log($===jQuery) //true


	    //2、jQuery对象 
	    //              执行jQuery函数得到jQUery核心对象
	    console.log($() instanceof Object)

在这里插入图片描述

1.2 jQuery核心函数的应用

1）$ 作为一般函数使用，返回jQuery实例对象

<body>
    
    <button id="btn1">新增文本框</button>

    <div id="div">
        <input type="text"><br/>

    </div>
</body>

<script type="text/javascript"   src="js/jquery-1.12.4.js"></script>
<script>

    /**1) 参数为函数，则表示延时加载*/
    $(function(){

        //2) 参数为css选择器，表示查找标签对象，并封装为jQuery对象返回
        $("#btn1").click(function(){

            //3) 参数为DOM，表示将DOM对象封装为jQuery对象并返回
            alert($(this).html())
            
            //4) 参数为html标签代码，表示创建标签对象，并封装为jQuery对象返回
            $('<input type="text"><br/>').appendTo('div');
            
        })
    })
  
  

</script>

在这里插入图片描述

>>>>>>> 参数为函数

参数函数，相当于延时加载。即window.onload

		 $(function(){
             alert("123")
         })

         //相当于
         window.onload=function(){
            alert("123")
         }

>>>>>>> 参数为选择器字符串、标签字符串

参数为选择器字符串。执行后返回一个jQuery伪数组实例对象，内部包含所有匹配的DOM对象
.
参数为标签字符串。执行后返回一个jQuery伪数组实例对象，内部包含创建的DOM对象

         //获取所有的div对象
         var $obj=$("div");
         console.log($obj.length) 
        
        //将创建的元素追加到div中
         var $obj2=$("<p>1212</p><span>2323</span>")
         $obj2.appendTo('div')

>>>>>>> 参数为DOM对象


	参数为DOM对象，将DOM对象封装为jQuery实例对象。
	封装后，就可以使用jQuery内部封装的方法。

2）$ 作为工具对象使用

$.each()遍历对象或数组


    /**1) 遍历数组      */
    $.each([1,2,3],function(index,d){
        console.log(index,d)
    })

    /** 2) 遍历对象     */
    $.each({"name":"hh","age":12},function(index,d){
        console.log(index,d)
    })

$.trim(str) 去除收尾空格

    console.log($.trim(" xxxxxxxxx          "))

二、jQuery核心实例对象

	
	+++ jQuery实例对象
	
			1) 执行jQuery函数,即执行$(), 返回的对象就是jQuery实例对象。
			2) jQuery实例对象的命名方式一般为$xxx
			
			3) 注意事项:
					a、jQuery对象是一个包含了所有匹配的DOM元素的伪数组对象（可能只有一个）
					b、jQuery对象拥有很多属性和方法，让程序员可以很方便的操作DOM

	
	+++ jQuery实例对象的基础访问
			
			[index]/get([index])  从DOM对象数组中取出对应的DOM元素或所有的DOM集合			
			
			each(function(index,domElem){ })  
								 遍历DOM元素
								 注意函数中的this指的是正在遍历的DOM元素	
									
			size() / length 	 获取DOM对象数组的个数
			selector 			 返回获取这个对象的选择器字符串
			
			index() 			    返回元素在同辈元素集合中的索引值
			index("css选择器字符串") 	返回元素在对应的选择器集合中索引值
			index(dom对象或jQuery对象) 	返回对象在对应的元素集合中索引值

2.1 jQuery核心对象

1）jQuery核心函数作为一般函数调用，就会返回jQuery实例对象


    //返回jQUery对象
    var $divs=$("div");

    //返回jQUery对象
    var $ps=$("<p>123</p><p>1212</>")

2）注意事项

>>>>>> jQuery实例对象是一个伪数组对象，我们可以通过下标的方式访问jQuery对象

    //返回jQUery对象
    var $divs=$("div");

    for(var i=0;i<$divs.length;i++){
        console.log($divs[i])
    }

>>>>>> 证明jQuery对象是一个伪数组

自定义一个伪数组


    /** 定义伪数组  */
    var weiArr={};
    weiArr.length=0;

    weiArr[0]='xxx';
    weiArr.length=1;

    weiArr[1]='xxx';
    weiArr.length=2;


    for(var i=0;i<weiArr.length;i++){
        console.log(weiArr[i])
    }

	
	伪数组只是简单模拟了数组的使用方式，
	但是数组特殊的方法是没有的，比如forEach等。我们可以通过访问forEach来辨别对象是否为真的数组

jQuery对象是一个伪数组，并不是真的数组

	
	jQuery对象内部维护了一个DOM元素对象的伪数组，
	虽然我们可以通过访问数组的方式访问这个伪数组，但是数组一些特殊的方法是没有的，比如forEach。


    var $divs=$("div");

    console.log($divs.length,$divs[0]);
    console.log($divs.forEach); //返回undefined，表名jQuery对象是一个伪数组

在这里插入图片描述

2.2 jQuery实例对象的基础访问

在这里插入图片描述

a）size() / length

获取jQuery实例对象包装的DOM的个数


	<body>  
	    
	        <div class="box">1</div>
	        <div class="box">2</div>
	        <div class="box">3</div>
	</body>

    <script>

            console.log( $(".box").size() )
            console.log( $(".box").length )

    </script>

b）[index]/get([index])

访问指定的dom元素


	<body>  

	        <div class="box">1</div>
	        <div class="box">2</div>
	        <div class="box">3</div>
	
	</body>

    <script>

            //访问第二个box
            var div =$(".box")[1]
            console.log(div.innerHTML) //2

            //访问第二个box
            var div =$(".box")[1]
            console.log(div.innerHTML)  //2         
    </script>

c）each(callback)


	<body>  
	        <div class="box">1</div>
	        <div class="box">2</div>
	        <div class="box">3</div>	
	</body>

    <script>

            //遍历包装的dom元素
            $('.box').each(function(index,domElem){
                
                //index指遍历的索引值
                //domElem指正在遍历的元素
                console.log("索引值:"+index+" ;对应的元素"+domElem);

                //this指正在遍历的元素
                console.log(this)
                console.log(this==domElem)
            })
            
    </script>

d）selector

	<body>  
	        <div class="box">2</div>
	</body>

    <script>
            console.log($(".box").selector)            
    </script>

在这里插入图片描述

e）index([selector|element])

>>>>>> index( ) 获取原有元素在同辈元素中的索引值

注意：index() 获取的是元素在同辈元素中的索引值。

<body>


    <div class="box-wrapper">
        <span>11</span>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box b1" >3</div>
    </div>
     <div class="b2" >3</div>
</body>

<script>

        //获取元素在同辈元素中的索引值
        console.log( $(".b1").index() ); //3
        console.log( $(".b2").index() ); //1

</script>

在这里插入图片描述

>>>>>> 参数为选择器字符串，获取原有元素在集合中的索引值

<body>


    <div class="box-wrapper">
        <span>11</span>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box b1" >3</div>
    </div>
</body>

<script>
        
        //参数为选择器字符串，获取原有元素在集合中的索引值
        console.log($('.box:last').index('.box'));


</script>

在这里插入图片描述

>>>>>> 参数为dom对象或jQuery对象，获取对象在原有元素中的索引值

<body>


    <div class="box-wrapper">
        <span>11</span>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box b1" id="bb">3</div>
    </div>
</body>

<script>

    console.log( $(".box").index(document.getElementById("bb")))

</script>

在这里插入图片描述

三、 jQuery核心应用

3.1 jQuery函数、jQuery对象要点

	
	+++ jQuery函数要点
	
			1、jQuery函数可以将匹配的DOM元素封装为jQuery实例对象。
						
						传入函数：延时函数
						传入CSS选择器字符串：将匹配的DOM元素封装为jQuery实例对象。
						传入标签字符串：创建标签对象，并封装为jQuery实例对象。
						传入DOM元素:封装为jQuery实例对象。
			
			2、jQuery函数可以作为工具类使用。


	+++ jQuery对象要点
			
			1、jQuery可以实现链式调用。
			
			2、jQuery对象可以使用简化DOM操作的API。
			3、如果jQuery实例对象相关API是操作单个元素的，而jQuery实例对象包含了多个DOM，则默认操作第一个DOM元素。

3.2 jQuery函数、jQuery对象与DOM对象的区别

				
	1、jQuery核心函数: $/jQuery  
						
						a、jQuery向外暴露的函数就是$/jQuery。
						   这两个函数在底层完全等价。
						   
						b、通过函数可以直接调用工具类API。


	2、jQuery核心对象：执行$()返回的对象就是jQuery实例对象。	
	   					
	   					a、jQuery实例对象是一个伪数组对象。
	   					   它内部包含了所有匹配的DOM元素。
						
						b、通过jQuery实例对象, 可以使用简化DOM操作的API。
												
						c、如果jQuery实例对象相关API是操作单个元素的，而jQuery实例对象包含了多个DOM，则默认操作第一个DOM元素。
						


	3、DOM对象
						js原生对象

3.4 切记【 jQuery核心函数应用】

		
	1、$、jQuery是jQuery暴露出的两个唯一函数，完全等价。
	
	2、$作为一般函数调用，将匹配的DOM元素封装为jQuery伪数组对象。然后操作DOM。		
	
	3、jQuery可以实现链式调用。
	
	4、遍历jQuery实例对象


	4、jQuery实例对象是一个伪数组对象，内部包含了所有匹配的DOM元素。
	   而jQuery提供的API操作的就是DOM元素。
	   
		   		1) jQuery读取相关API操作的是匹配的DOM元素中的第一个。
		   		2) jQuery设置相关API操作的是所有匹配的DOM元素。
				
				3) 如果jQuery实例对象相关API是操作单个元素的，而jQuery实例对象包含了多个DOM，则默认操作第一个DOM元素。


	5、严格区分操作对象的类型。
							
				1) 如果对象是DOM对象，则不能使用jQuery内部提供的API.			
	   		    2) 只有jQuery实例对象才能访问jQuery内部提供的简化DOM操作的API。


	6、严格区分jQuery实例对象API中this。		
		
				1) jQuery继承:传入的js对象。js对象中函数中的this指的是jQuery实例对象。
				
				2) jQuery实例对象API(不含以上API):
								传入函数，函数中的this指的是DOM元素。
								比如内置动画API、绑定事件API。

1）$、jQuery是jQuery暴露出的两个唯一函数，完全等价。

2）$作为一般函数调用，将匹配的DOM元素封装为jQuery伪数组对象。然后操作DOM

3）jQuery可以实现链式调用

>>>>>> 案例1


    $("div").first().click(function(){
        console.log("1")
    }).dblclick(function(){
        console.log("2")
    }).mousemove(function(){
        console.log("3")
    })

>>>>>> 案例2


<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    
    <button>新增li</button>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>

       //获取li的第一个元素，然后获取同辈元素，赋予点击事件
       $("li").first().siblings().click(function(){
           alert(this.innerHTML)
       })
       
       //获取第一个元素操作css样式
       $("li").first()
                .css('background-color','red')
                .css('color','yellow')
                .css('font-weight','bolder')
</script>

在这里插入图片描述

3）遍历jQuery实例对象


   $("div").each(function(index,elem){
          console.log("index:",index,"  elem:",elem)
    })

4）jQuery读取相关API操作的是匹配DOM元素中的第一个。jQuery设置相关API操作的是所有匹配的DOM元素

>>>>>> jQuery读取相关API操作的是所有匹配的DOM元素的第一个


<body>
    
    <input type="text" value="1">
    <input type="text" value="2">

</body>

<!-- 引入jQuery库-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>

<script>

   console.log( $("input").attr('value') )

</script>

在这里插入图片描述

>>>>>> jQuery设置相关API操作的是所有匹配的DOM元素

<body>
    
    <input type="text" value="1">
    <input type="text" value="2">

</body>

<!-- 引入jQuery库-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>

<script>

   console.log( $("input").attr('value','1212') )

</script>

在这里插入图片描述

5）严格区分操作对象的类型


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box1{
        width:200px;
        height:200px;
        background-color: blue;

        display: inline-block;
        
    }

    #box1 .inner{
        width:100px;
        height:100px;
        background-color: red;

        margin:17% auto;
    }


    #box2{
        width:200px;
        height:200px;
        background-color: blue;

        display: inline-block;
        
    }

    #box2 .inner{
        width:100px;
        height:100px;
        background-color: red;

        margin:17% auto;
    }
</style>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>

    $(function(){
        
        //获取第一个按钮DOM元素
        var btn0=$("button")[0];

        //绑定事件
        //注意：如果想使用jQuery的API，则需要封装为jQuery实例对象
       $(btn0).click(function(){     
           $("#box1").mouseenter(function(){
               console.log("鼠标移入")
           })
       })

         
        //获取第二个按钮DOM元素
        var btn1=$("button")[1];

       $(btn1).click(function(){
           $("#box1").off();
       })


    })
 

</script>
<body>
    <button>绑定移入事件</button>    
    <button>解绑移入事件</button>

    <div id="box1">
        <div class="inner"> </div>
    </div>

    <div id="box2">
        <div class="inner"> </div>
    </div>
</body>
</html>

6）严格区分jQuery实例对象中的this

>>>>>> jQuery继承:传入的js对象。js对象中函数中的this指的是jQuery实例对象。

    $.fn.extend({
        'sayHello':function(){
            console.log(this)
        }
    })


    $("div").sayHello();

在这里插入图片描述

>>>>>> jQuery实例对象API(不含以上API)：传入的函数，函数中的this指的是DOM元素

动画函数：传入函数，函数中的this指的是DOM元素

    $("div").show(function(){
        console.log(this)
    });

在这里插入图片描述

绑定事件：传入函数，函数中的this指的是DOM元素


   $("body").click(function(){
        console.log(this)
    })

在这里插入图片描述

>>>>>> this综合问题

	
	//jQuery继承
    $.fn.extend({
        'sayName':function(){

            //这里的this指的是jQuery实例对象
            console.log(this)
			
			//遍历jQuery实例对象中的DOM元素
            this.each(function(index,elel){

                //这里的this指的是正在遍历的DOM元素
                console.log(this)
            })
        }
    })


    $("div").sayName();

最后

以上就是内向小伙为你收集整理的二、jQuery核心的全部内容，希望文章能够帮你解决二、jQuery核心所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：WEB基础-jQuery
浏览次数：77 次浏览
发布日期：2024-01-22 22:55:51
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_okf0_14_j_22_z.html

二、jQuery核心

概述

一、 jQuery核心函数

1.1 jQuery核心函数

1）jQuery向外暴露的核心函数就是 $或jQuery，在外部直接可以使用

2）$或jQuery完全等价

1.2 jQuery核心函数的应用

1）$ 作为一般函数使用，返回jQuery实例对象

>>>>>>> 参数为函数

>>>>>>> 参数为选择器字符串、标签字符串

>>>>>>> 参数为DOM对象

2）$ 作为工具对象使用

二、jQuery核心实例对象

2.1 jQuery核心对象

1）jQuery核心函数作为一般函数调用，就会返回jQuery实例对象

2）注意事项

>>>>>> jQuery实例对象是一个伪数组对象，我们可以通过下标的方式访问jQuery对象

>>>>>> 证明jQuery对象是一个伪数组

2.2 jQuery实例对象的基础访问

a）size() / length

b）[index]/get([index])

c）each(callback)

d）selector

e）index([selector|element])

>>>>>> index( ) 获取原有元素在同辈元素中的索引值

>>>>>> 参数为选择器字符串，获取原有元素在集合中的索引值

>>>>>> 参数为dom对象或jQuery对象，获取对象在原有元素中的索引值

三、 jQuery核心应用

3.1 jQuery函数、jQuery对象要点

3.2 jQuery函数、jQuery对象与DOM对象的区别

3.4 切记【 jQuery核心函数应用 】

1）$、jQuery是jQuery暴露出的两个唯一函数，完全等价。

2）$作为一般函数调用，将匹配的DOM元素封装为jQuery伪数组对象。然后操作DOM

3）jQuery可以实现链式调用

>>>>>> 案例1

>>>>>> 案例2

3）遍历jQuery实例对象

4）jQuery读取相关API操作的是匹配DOM元素中的第一个。jQuery设置相关API操作的是所有匹配的DOM元素

>>>>>> jQuery读取相关API操作的是所有匹配的DOM元素的第一个

>>>>>> jQuery设置相关API操作的是所有匹配的DOM元素

5）严格区分操作对象的类型

6）严格区分jQuery实例对象中的this

>>>>>> jQuery继承:传入的js对象。js对象中函数中的this指的是jQuery实例对象。

>>>>>> jQuery实例对象API(不含以上API)：传入的函数，函数中的this指的是DOM元素

>>>>>> this综合问题

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

3.4 切记【 jQuery核心函数应用】

发表评论取消回复