JavaScript进阶内容——jQuery

  • JavaScript进阶内容——jQuery已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库


JavaScript进阶内容——jQuery

我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库

这篇文章主要是为了为大家大致讲解JavaScript库以及使用方法,本篇不会完全讲解jQuery的全部语法

如果希望完全掌握,可以参考网站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

JavaScript库

JavaScript库:

  • 即library,是一个封装好的特定的集合(包括许多属性和方法)。
  • 从封装一大堆函数的角度来理解库,就相比于Java的类,里面封装了许多方法,我们可以直接导入并且调入其方法
  • 简单理解:就是一个JS文件,里面对我们的原生JS代码进行了封装,存放在里面,这样我们就可以快速高效的使用这些封装好的功能
  • 比如jQuery,就是为了快速操作DOM对象,里面封装的基本都是函数(方法)

常见的JavaScript库:

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • zepto

jQuery概述

jQuery概念:

  • jQuery是一个快速,简洁的JavaScript库,其设计的宗旨是:“Write Less,Do More”,即提倡更少的代码做更多的事

jQuery优点:

  • 轻量级,核心文件只有不到100kb,不会影响页面加载速度
  • 跨浏览器兼容,基本兼容所有浏览器
  • 链式编程,隐式迭代
  • 对事件,样式,动画,大大的简化了DOM操作
  • 支持插件开发拓展,支持第三方软件
  • 免费且开源

jQuery基本格式:

  • $(选择器).action()

jQuery使用顺序

jQuery是开源的JS文件代码,我们需要先获得其JS文件,才能够使用

  1. 在官网中下载jQuery的JS文件,或者复制其代码,自定义一个jQuery代码

JavaScript进阶内容——jQuery

JavaScript进阶内容——jQuery

JavaScript进阶内容——jQuery

JavaScript进阶内容——jQuery

  1. 在我们需要使用jQuery的文件中导入该JS文件
<!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>     <!-- 在开头导入jQuery文件 -->     <script src="jQuery.min.js"></script> </head> <body>      </body> </html> 

jQuery入口函数

jQuery的使用位置和JavaScript的使用位置一样,都是在script中进行,同样存放在body底部

$(function(){ 	...//页面DOM加载完成后进行 })  $(document),ready(function(){ 	...//页面DOM加载完成后进行 }) 

上述两种方法可以使jQuery的书写位置任意存放

  • 等待DOM结构渲染完毕后即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装
  • 相当于原生JS中的DOMContentLoaded
  • 更推荐第一种方法(简单快捷)

代码展示:

<!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>      <!-- 我们需要先导入jQuery的js文件 -->     <script src="jQuery.min.js"></script>      <!-- 这里设置div样式,我们希望将div的display设置为none -->     <style>         div {             height: 200px;             width: 200px;             background-color: pink;         }     </style> </head> <body>     <script>         // 首先我们先来介绍一下入口函数,等同于DOMContentLoaded,可以将script写于任意位置          // 1.$(function() {})第一种入口函数         $(function() {             alert('1');         })          // 2.$(document).ready(function(){})第二种入口函数         $(document).ready(function(){             // 这个意思是隐藏div,暂时做个了解即可             $('div').hide();         })     </script>       <div></div> </body> </html> 

jQuery的顶级对象$

我们在这里介绍一下jQuery出场率最高的$符号:

  • $是jQuery的别称,在代码中我们可以用$代替jQuery,但一般为了方便,我们习惯写$
  • $是jQuery的顶级对象,类似于JavaScript中的window对象,把元素利用$包装成jQuery对象,就可以调用jQuery的方法

代码展示:

<!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>      <script src="jQuery.min.js"></script> </head> <body>     <script>         // 1.$是 jQuery的别称          // 下面两种代码的运行结果是一致的:          $(function(){             console.log('1');         })          jQuery(function(){             console.log('1');         })          // 2.$是jQuery的顶级对象,你可以从中调用任何函数,类似于window               </script> </body> </html> 

jQuery对象和DOM对象以及互相转换

我们需要注意jQuery对象和DOM对象是两种完全不同的对象:

  • 用原生JS获得来的对象就是DOM对象
  • 用jQuery获得来的对象就是jQuery对象
  • jQuery对象的本质是: 利用$对DOM对象包装后产生的对象(伪数组形式存储)

代码展示:

<!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>      <script src="jQuery.min.js"></script> </head> <body>     <div></div>     <span></span>      <script>         // 1.DOM对象,由原生JS获得的对象         var div = document.querySelector('div');         var span = document.querySelector('span');         console.log(div);          // 2.jQuery对象,由jQuery方法获得的对象         // $('标签')创建对象         $('div');         $('span');         // 注意:获得的是一个伪数组         console.log($('div'));          // 3.两种对象,只能使用各自的方法,不能混合使用:         div.style.display = 'none';         $('div').hide();     </script> </body> </html> 

虽然两种对象不尽相同,但我们仍旧可以进行转换:

  • DOM对象 -> jQuery对象
$('选择器') == $(DOM对象) 
  • jQuery对象 -> DOM对象
$('选择器')[index] $('选择器').get(index) 

注意:因为原生JS比jQuery更大,原生的一些属性和方法jQuery并没有封装,所以如果想使用这些属性和方法就需要把jQuer对象转换为DOM对象才能使用

代码展示:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=, initial-scale=1.0">     <title>Document</title>     <script src="jQuery.min.js"></script> </head> <body>     <video src="#"></video>      <script>         // 1.DOM对象转化为jQuery对象: $('标签') == $(DOM对象)         var myVideo = document.querySelector('video');          $(myVideo);          // 2.jQuery对象转化为DOM对象: $('标签')[索引号]  $('标签').get(索引号)         $('video');          $('video')[0];         $('video').get(0);     </script> </body> </html> 

jQuery选择器

jQuery的选择器与CSS的选择器完全相同:

  • 标签选择器
  • 类选择器
  • ID选择器
  • 层次选择器
  • 兄弟选择器

代码展示:

<!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> <body>     <script>         // 我们来比较一下原生创建和jQuery创建          // 原生选择器相对繁琐         document.getElementsByTagName('div');         document.getElementById('#id');         document.getElementsByClassName('.class');                  // 在HTML5产生的document.querySelector('')便综合了上述所有选择器,类似于jQuery的创建         document.querySelector('');          // jQuery创建的格式:$(选择器).action()         // 这里的选择器完全符合CSS选择器的格式,action我们会在下一部分讲到         $('div').click();         $('.class').click();         $('#id').click();     </script> </body> </html> 

如果想要了解更多选择器,可以访问页面:https://jquery.cuishifeng.cn/index.html

jQuery事件

jQuery的鼠标事件和键盘事件与JavaScript原生代码事件完全相同:

鼠标事件 触发条件
click 鼠标点击左键触发
mouseover 鼠标经过触发
mouseout 鼠标离开触发
focus 获得鼠标焦点触发
blur 失去鼠标焦点触发
mousemove 鼠标移动触发
mouseup 鼠标弹起触发
mousedown 鼠标按下触发
键盘事件 说明
keyup 某个键盘按键被松开时触发
keydown 某个键盘按键被按下时触发
keypress 某个键盘按键被按下时触发(不能识别功能键,如ctrl,shift,左右箭头)

代码展示:

<!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>     <script src="jQuery.min.js"></script>      <!-- 我们希望在盒子里移动鼠标时,上面显示鼠标位置 -->     <style>         div {             height: 400px;             width: 400px;             border: 1px solid red;         }     </style> </head> <body>     mouse: <span></span>     <div></div>      <script>         // 这里的鼠标操作和JavaScript原生的addEventListener中的方法完全相同         $('div').mousemove(function(e){             // 这里的text改变其文本内容             $('span').text("x:" + e.pageX + "y:" + e.pageY);         })     </script> </body> </html> 

如果想要了解更多事件,可以访问页面:https://jquery.cuishifeng.cn/index.html

jQuery操作DOM元素

对于DOM元素的操作分为许多种,下面仅做出实例介绍:

  1. 节点文本操作:

    // 这里获得值 $('').text(); // 这里设置值 $('').text(''); // 这里获得值 $('').html(); // 这里设置值 $('').html(''); 
  2. CSS操作:

    $('').css('',''); $('').css({'':'','':''}); 
  3. 元素的显示和隐藏(本质是display:block/none)

    //元素隐藏 $('').hide(); //元素显示 $('').show(); 

代码示例:

<!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>     <script src="jQuery.min.js"></script> </head> <body>     <ul id="test-ul">         <li name="java">Java</li>         <li class="javascript">JavaScript</li>     </ul>      <script>         // 我们仅做出最简单的入门演示          // 1.节点文本操作:          // 注意:这里的选择器采用了层次选择器,且在选择的li中加入了判定条件,用[]包裹         // 文本修改的两种方法有text和html          // 这里获得值         $('#test-ul li[name=java]').text();         // 这里设置值         $('#test-ul li[name=java]').text('JJJJava');         // 这里获得值         $('#test-ul li[name=java]').html();         // 这里设置值         $('#test-ul li[name=java]').html('Java');          // 2.css操作:          // 这里css操作直接action为css,然后后面加入两个字符串,第一个是属性,第二个是属性值         $('#test-ul li[class=javascript]').css("color","red");         // 当需要修改多个属性时,用{}包括起来,里面用“,”隔开,并且以“:”的形式赋值         $('#test-ul li[class=javascript]').css({"color":"blue","backgroundColor":"yellow"});          // 3.元素的显示和隐藏          // 元素显示用show(),隐藏用hide()         $('ul').hide();         $('ul').show();              </script> </body> </html> 

如果想要了解更多操作,可以访问页面:https://jquery.cuishifeng.cn/index.html

结束语

关于jQuery的内容我们仅做出相关介绍,后期我会出一期jQuery的常用操作,希望可以为你带来帮助!