首页 前端知识 jQuery知识点(一)

jQuery知识点(一)

2024-05-22 09:05:50 前端知识 前端哥 179 831 我要收藏

💻博主现有专栏:

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

                Y小夜-CSDN博客

目录

🎯jQuery介绍

🎃了解jQuery

🎃jQuery的特点

 🎃配置jQuery环境

🎯jQuery入口 函数

🎃jQuery入口函数的作用

🎃jQuery入口函数的三种写法

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

🎯jQuery对象与原生DOM对象

🎃什么是jQuery对象

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

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

🎃jQuery与JavaScript的混合使用

🎯jQuery选择器

🎃什么是jQuery选择器

🎃jQuery选择器的优点

🎃jQuery选择器的种类


🎯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功能更强大,浏览器的兼容性更好。

🎃jQuery选择器的优点

  1. 简洁的书写  $()           $(“选择器”)
  2. 支持CSS1到CSS3选择器,它还有独有的选择器,对页面元素的选择更加灵活。

🎃jQuery选择器的种类

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器
  • 表单对象属性过滤选择器

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9074.html
标签
评论
发布的文章

小米商城

2024-06-16 15:06:28

JSON转日期,变为数字串

2024-06-16 09:06:45

使用axios读取本地json文件

2024-06-16 09:06:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!