jQuery知识点（一）

最新推荐文章于 2024-06-12 11:13:48 发布

Y小夜

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量1k

点赞数 23

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/shsjssnn/article/details/138467967

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

💻博主现有专栏：

C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：

Y小夜-CSDN博客

🎃jQuery入口函数和window.onload的区别

🎯jQuery对象与原生DOM对象

🎃什么是jQuery对象

🎃jQuery对象与原生DOM对象的联系与区别

🎃jQuery对象与原生DOM对象的转换

🎃jQuery与JavaScript的混合使用

🎯jQuery介绍

🎃了解jQuery

jQuery是一个快速、简洁的JavaScript类库，即js文件，由John Resig（约翰.瑞思格）在2006年1月首次发布。

jQuery以简洁的语法和跨平台的兼容性，有效的提高了程序开发效率。在遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作时备受JavaScript开发人员的推崇。

🎃jQuery的特点

jQuery 的理念: write less,do more(写得少, 做得多)

🎃配置jQuery环境

（1）进入jQuery官方网站jQuery下载最新的jQuery库文件

(2)jQuery版本

jQuery 1.x：兼容IE6/7/8，官方只做BUG维护，不再更新；
jQuery 2.x：不兼容IE6/7/8，官方也只做BUG维护，不再更新；
jQuery 3.x：不兼容IE6/7/8，官方继续更新，只支持最新的浏览器，更加精简（在国内不流行，因为国内使用jQuery的主要目的是兼容IE6-8浏览器）。

jQuery压缩版本：

使用于生产环境，去掉了注释、换行、空格等与逻辑无关的内容删除，并进行一些优化，文件比较小，但不宜阅读。 jQuery非压缩版本：使用于学习与开发环境，源码清晰，易阅读。

(3)jQuery文件不需要安装，把下载的js文件放在网站上的一个公共位置，当某个页面上使用jQuery时，只需在相关的HTML文档中引入该库文件即可，就可以使用jQuery的功能。
      <script src=“jquery-1.12.4.js" type="text/javascript"></script> 
另外，一些CDN（内容分发网络）也提供了jQuery文件，可以直接引入：
<script src=“https://code.jquery.com/jquery-3.6.0.js"></script>

🎯jQuery入口函数

<head>
	<meta charset="UTF-8">
	<title>体验jQuery</title>
	<script src="libs/jquery-1.12.4.js"></script>
	<script>
	    /*window.onload=function(){	    	document.getElementsByTagName('button')[0].onclick=function(){alert("hello,jQuery!");}
	    }	*/	
	    $(document).ready(function(){
	    	$("button").click(function(){alert("hello,jQuery!");});
	    });		
	</script>
</head>

🎃jQuery入口函数的作用

在上面例子的代码中，有一段jQuery特有的代码：
           $(document).ready(function() {
	        // 程序段
           })
    这段代码类似于Javascript中通常使用的代码：
          window.onload=function(){
             // 程序段
          }
     作用：用于在页面加载完毕之后执行相应的程序段

🎃jQuery入口函数的三种写法

          1.$(document).ready(function(){   
                  //程序段  
            })
 
           2.$().ready(function(){   
                 //程序段   
            }) 

           3.$(function(){ 
                 //程序段   
            })

🎃jQuery入口函数和window.onload的区别

执行时机不同
window.onload必须在页面全部内容(包括图片、文件)加载完毕后执行。
$(document).ready()在网页结构加载完毕后就执行，执行效率高于window.onload。
执行数量不同
如果页面包含多个window.onload或者$(document).ready()时， window.onload只执行最后一个，而$(document).ready()在页面加载完成后全部执行

🎯jQuery对象与原生DOM对象

由于jQuery本身就是在Javascript语言基础上进行封装的，因此jQuery代码本质上也是Javascript代码，二者经常相互混合使用。但它们之间又有一定的区别，因此在使用时必须分清哪些是jQuery对象，哪些是原生DOM对象。

🎃什么是jQuery对象

jQuery对象是使用jQuery中的方法获取页面中的元素返回的对象。
jQuery对象是jQuery独有的，如果一个对象是jQuery对象，就可以使用jQuery里的方法。
利用jQuery对象能够更加方便的操作HTML文档。

🎃jQuery对象与原生DOM对象的联系与区别

jQuery对象与原生DOM对象的联系

        jQuery对象是DOM对象的一个集合，即jQuery对象是对DOM对象的封装，是一个伪数组，里面存放了一堆DOM对象。

jQuery对象与原生DOM对象的区别
DOM对象可以调用DOM对象的方法和属性。例如:var td=document.getElementById("test"); //td是DOM对象 td.innerHTML=“aa”; //innerHTML是DOM对象的属性
jQuery对象是jQuery独有的，jQuery对象只可以使用jQuery里的方法。例如： $(“#test”).html(“aa”) //设置ID为test的元素内的html代码为aa。其中$(“#test”)返回的jQuery对象，html()是jQuery对象的方法，同时在调用html()后返回的依然是该jQuery对象，因此可以用链式操作继续操作该对象。例如： $("#test").html("aa").css("backgroundColor","#999") //设置ID为test的元素内的html代码为aa,并把该元素的背景色设置为"#999"。
原生DOM对象不能进行链式操作。
jQuery对象无法使用原生DOM对象的任何方法，原生DOM对象也不能使用jQuery里的方法。比如：$("#test").innerHTML

                document.getElementById(“test”).html()之类的写法都是错误的。

建议变量约定：如果存储的是 jQuery 对象, 那么要在变量前面加上 $

                var $obj1 = jQuery 对象

                var obj = DOM 对象

🎃jQuery对象与原生DOM对象的转换

         jQuery 对象不能使用原生DOM 中的方法, 但如果对 jQuery 对象的方法不熟悉，或jQuery中没有封装想要的方法, 不得不使用原生DOM方法的时候, 有如下两种方法进行转换:

        jQuery 对象是一个伪数组对象, 可以通过下标的形式得到对应的 DOM对象。          var $mm=$(“#msg”); //jQuery对象

         var m=$mm[0]; //DOM对象

         例如：

$("li"); //获取页面中的所有<li>集合对象。

$("li")[0]; //返回集合中的第一个对象，该对象是一个DOM对象

alert($(“li”)[0].innerHTML) //返回第1个列表项的内容

        使用jQuery本身提供get(index)方法得到相应的原生DOM 对象参数index是相应索引号位置的DOM对象。

        例如：

        $("li"); //jQuery对象

        $("li").get(0); //DOM对象

        alert($("li").get(0).innerHTML) ) //返回第1个列表项的内容

以下几种写法都是正确的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").get(0).innerHTML;获取元素

$("div").eq(3)[0].innerHTML;

        对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包括起来，就可以获得一个 jQuery 对象。即：$(DOM对象)

例如：

$(document.getElementById("msg")) 转换后就可以使用 jQuery 中的方法了

🎃jQuery与JavaScript的混合使用

(1)网页中引入jQuery库文件后，仍然还可以使用JavaScript编写代码，两者并不冲突。不过为了充分发挥jQuery的优势，一旦涉及文档操作、事件处理、动画特效、Ajax交互等内容，就应该尽可能使用jQuery命令。

(2)虽然jQuery命令成为了程序的主体部分，但是“数据类型”、“变量”、“运算符”、“表达式”、“控制语句”、“对象”、“数组”、“函数”等等这些JavaScript基本语法依旧会穿插在整个程序中，是不可缺少的。

🎯jQuery选择器

🎃什么是jQuery选择器

jQuery选择器是jQuery提供的一组可以更加方便的获取到页面元素的方法。注意jQuery选择器返回的是jQuery对象。

jQuery选择器的语法格式为：$(selector)

$("div") $("#p1") $(".dd")

jQuery选择器完全继承了CSS选择器的风格，基本兼容了从CSS1到CSS3的绝大部分的选择器。

jQuery选择器的写法与CSS选择器的写法相似，但两者作用不同。

CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为。而且jQuery中设计操作CSS样式的功能比单纯的CSS功能更强大，浏览器的兼容性更好。