二、jQuery核心

最新推荐文章于 2021-09-27 08:50:18 发布
最新推荐文章于 2021-09-27 08:50:18 发布
阅读量242 收藏 1
点赞数
分类专栏： WEB基础-jQuery 文章标签： jquery javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/120075594
版权

一、 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();
二旬、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery基础核心知识
10-18
详细介绍了jQuery的一些核心知识以及基础，理解jQuery
高效学习JQuery
ASDASDADF的博客
08-26 196
jQuery的学习 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题 jQuery 的好处 jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。 注
jQuery核心技术 (二)
春水上行的博客
07-21 684
jQuery教程 jQuery筛选 元素过滤 eq(index|-index): index：整数，从开头获得指定索引的元素。索引从0开始，0表示第一个 -index：负数，从尾部获得指定索引的元素。索引从-1开始，-1表示最后一个 first() 选择第一个元素 last() 选择最后一
jQuery 基础核心
wuhan_yking的博客
10-15 223
一、代码风格 ①不管是页面元素的选择还是内置功能函数，都是用“$”起始的； ②$就是一个jQuery对象； ③$是jquery的缩写； $===jQuery；// 相等、恒等； ④ $(function(){ alert($); // jQuery对象的内部 alert($()); // 返回的jQuery对象 alert($('#box')).css('color','red')
jQuery核心
tianyafeng123xin的博客
01-20 469
1、jQuery核心之jQuery核心函数 1.1、jQuery(expression, [context]) 该函数接收一个包含CSS选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery核心功能是通过该函数实现的。jQuery中的一切都基于这个函数，或者说都是以某种方式使用这个函数。这个函数最基本的用户就是向它传递一个表达式（通常由CSS选择器组成），然后根据这个表达
jQuery核心（二）
qq_46199553的博客
09-27 105
5.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
浅谈Jquery核心函数
10-24
本文给大家简单介绍了jQuery的核心函数，以及详细介绍了7种重载方法中的3种，十分的实用，有需要的小伙伴可以参考下。
jQuery 核心函数以及jQuery对象
10-29
首先介绍 jQuery 的几个核心函数，在 jQuery 中它们起着至关重要的作用，在实际的前端开发过程中用到最多的也是它们。
谈一谈jQuery核心架构设计
10-22
主要和大家谈一谈jQuery核心架构设计，什么是jQuery核心架构设计，多方面了解jQuery核心架构设计，感兴趣的小伙伴们可以参考一下
jquery和js核心api
01-04
**jQuery和JavaScript核心API概述** 在Web开发领域，jQuery和JavaScript是两个不可或缺的工具，它们极大地简化了HTML文档操作、事件处理、动画效果以及Ajax交互。这个压缩包包含"JavaScript核心参考手册.chm"和...
JQuery核心包
08-09
本人使用很长时间，很稳定！另外此核心包涵盖了不少api文档中描述的功能特效！
jquery完整包
02-26
最完整的 jquery版本，包括 jquery1.10.1，jquery1.10.2，jquery1.11.0， jquery1.32， jquery1.42，jquery1.44， jquery1.5，jquery1.5.1，jquery1.5.2， jquery1.6，jquery1.6.4， jquery1.7， jquery1.8，jquery1.8.1，jquery1.8.2，jquery1.8.3， jquery1.9，jquery1.9.1， jquery2.0，jquery2.0.2，jquery2.0.3， （jQuery 2.x 不支持。 ） jquery2.1.0（jQuery 2.x 不支持。 ）
jquery的核心包1.4.2
03-26
jquery使用的jquery1.4.2.js 方便使用jquery
Jquery核心库源代码打包下载
05-18
Jquery核心库1.26到2.03版本未加密源代码打包下载 学习jq源码
jquery中ready()函数执行的时机和window的load事件比较
10-24
主要介绍了jquery中ready()函数执行的时机和window的load事件比较的相关资料,需要的朋友可以参考下
jQuery核心--核心函数
前端
03-01 2565
核心函数 函数列表 函数 说明 jQuery() 主要用于获取HTML DOM元素并将其封装为jQuery对象 函数说明 jQuery(): jQuery()函数是jQuery库的最核心函数，jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便于使用jQuery对象提供的其他属性和方法对DOM元...
jQuery核心技术 (一)
春水上行的博客
07-19 2704
jQuery教程jQuery简介 jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互 jQuery功能 -H
jq核心函数和 jq对象
WY001的博客
04-25 279
jq核心函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.4.js"></script> <sc...
jQuery学习之二---jq核心
等，你的到来。
11-25 510
还是那句话，我在这边只选择一些我已经看懂的，不能传播错误信息不是吗，哈哈，然后就是我个人觉得比较重要的，OK，下面开始学习，加油啊，一起加油！ 1、jquery([selector,[context]]) 这个函数接收两个参数， 第一个是包含CSS选择器的字符串，然后通过这个字符串去匹配一组元素。其实通俗来说就是用选择器以jq的方式去获取匹配到元素。比如：用jQuery去获取div中的p标签
jQuery核心技术与实战指南
"jQuery基础教程，适合初学者，涵盖了jQuery1.10.x和jQuery2.0.x，讲解核心组件如选择符、事件、动画、DOM操作、Ajax，并介绍jQueryUI、jQueryMobile及自定义插件开发，深入探讨高级技术，包含JavaScript闭包和QUnit...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值