JQuery快速入门详解

LoisMay

已于 2022-08-27 23:15:00 修改

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript 前端经验分享 css

于 2022-08-27 22:36:53 首次发布

本文链接：https://blog.csdn.net/MeiJin_/article/details/126550733

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

一、JQuery简介
一、JQuery对象
二、JQuery基本使用
三、基本筛选器
四、表单筛选器

一、JQuery简介

	   jQuery是一个轻量级的 兼容多浏览器的JavaScript库
	   jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果
	   方便地进行Ajax交互 能够极大地简化JavaScript编程 它的宗旨就是：“Write less, do more.“
	 
	   JQuery的优势
	   1.一款轻量级的JS框架 jQuery核心js文件才几十KB 不会影响页面加载速度
	   
	   2.丰富的DOM选择器 JQuery的选择器用起来很方便 比如要找到某个DOM对象的相邻元素
	     JS可能要写好几行代码 而jQuery一行代码就搞定了 再比如要将一个表格的隔行变色 JQuery也是一行代码搞定
	     
	   3.链式表达式 jQuery的链式操作可以把多个操作写在一行代码里 更加简洁
	   
	   4.事件、样式、动画支持 JQuery还简化了js操作css的代码 并且代码的可读性也比js要强
	   
	   5.Ajax操作支持 JQuery简化了AJAX操作 后端只需返回一个JSON格式的字符串就能完成与前端的通信
	   
	   6.跨浏览器兼容 JQuery基本兼容了现在主流的浏览器 不用再为浏览器的兼容问题而伤透脑筋
	   
	   7.插件扩展开发 JQuery有着丰富的第三方的插件
	     例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件
	     并且用JQuery插件做出来的效果很炫 并且可以根据自己需要去改写和封装插件 简单实用
	
	   JQuery版本
	   1. x：兼容IE678,使用最为广泛的 官方只做BUG维护 功能不再新增 
	      因此一般项目来说 使用1.x版本就可以了 最终版本：1.12.4 (2016年5月20日)
	   2.x：不兼容IE678 很少有人使用 官方只做BUG维护 功能不再新增 
	      如果不考虑兼容低版本的浏览器可以使用2.x 最终版本：2.2.4 (2016年5月20日)
	   3.x：不兼容IE678 只支持最新的浏览器 需要注意的是很多老的jQuery插件不支持3.x版 目前该版本是官方主要更新维护的版本

一、JQuery对象

	   JQuery对象就是通过JQuery包装DOM对象后产生的对象 JQuery对象是JQuery独有的
	   如果一个对象是JQuery对象 那么它就可以使用JQuery里面的方法
	   
	    ex: $('#i1').html()  # 获取ID值为i1的元素的html代码 其中html()是JQuery里面的方法
	      上面一句话相当于：document.getElementById('i1').innerHTML;
	      
	   虽然JQuery对象是包装DOM对象产生的 但是JQuery对象无法使用DOM对象的任何方法 同理DOM对象也不能使用JQuery里的方法
	   一个约定 我们在申明一个JQuery对象变量的时候 需要在变量名前面加上一个$
	   
	    ex: var $variable = JQuery对象
	     	var variable = DOM对象
	     	$variable[0]   # JQuery对象转换成DOM对象
	
     		$('#i1').html();  #jQuery对象可以使用jQuery的方法
	        $('#i1')[0].innerHTML; #DOM对象使用DOM的方法
	
	   注意:使用jQuery必须要先导入(很容易忘)本质其实就是一个js文件
	    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>  # 也可以倒入本地JQ文件
	   
	   JQuery官方网站：  https://jquery.com/

  <p>今天非常的开心哦！</p>
  <p>因为今天星期天呀！</p>

在这里插入图片描述

二、JQuery基本使用

	    注意使用JQuery需要进行导入
	    选择器的使用：
	    ID选择器  $('#id')
	    标签选择器 $('divName')
	    类选择器  $('.className')
	    配合使用  $('div.c1') # 找到div里面拥有类c1的标签
	    组合选择器 $('#id, .className, div')
	    底层选择器
	             x和y可以为任意选择器
	             $("x y");// x的所有后代y（子子孙孙）
	             $("x > y");// x的所有儿子y（儿子）
	             $("x + y")// 找到所有紧挨在x后面的y
	             $("x ~ y")// x之后所有的兄弟y
	  
	   jQuery选择器查找标签之后的结果与js有何区别
	    结果集都是数组但是功能有区别
	        1.如果使用索引取值 那么都是标签对象
	              标签对象是无法调用jQuery提供的方法的      # 详细查看图一
	        2.标签对象如果想转换成jQuery对象需要使用 $()
	         转换成jQuery对象的目的是为了使用jQuery提供的更多方法  # 详细查看图二

在这里插入图片描述

三、基本筛选器

	   :first // 第一个
	   :last // 最后一个
	   :eq(index)// 索引等于index的那个元素
	   :even // 匹配所有索引值为偶数的元素，从 0 开始计数
	   :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
	   :gt(index)// 匹配所有大于给定索引值的元素
	   :lt(index)// 匹配所有小于给定索引值的元素
	   :not(元素选择器)// 移除所有满足not条件的标签
	   :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   </head>
   <body>
    <ul>
     <li>001</li>
     <li>002</li>
     <li>003</li>
     <li>004</li>
     <li>005</li>
     <li>006</li>
     <li>007</li>
     <li>008</li>
     <li>009</li>
    </ul>
   </body>
  </html>

在这里插入图片描述

四、表单筛选器

		  # 举例查找input标签
		  <input type="text">
		  <input type="password">
		  <input type="checkbox">
		  $("input[type='checkbox']");// 取到checkbox类型的input标签
		  $("input[type!='text']");// 取到类型不是text的input标签
		
		  表单筛选器可以看成是属性选择器优化而来
		  :text   # 获取文本类型
		  :password  # 获取密码类型
		  :file   # 获取文件类型
		  :radio   # 获取单选按钮类型
		  :checkbox  # 获取单选框类型
		  
		  :submit   # 获取提交按钮类型
		  :reset   # 获取重置按钮类型
		  :button   # 获取按钮类型
		      
		  :enabled  # 获取可以使用的类型
		  :disabled  # 获取被禁用的类型
		  :checked  # 获取单选框默认被选中的类型
		  :selected    # 获取下拉框默认被选中的类型