JQuery快速入门详解

文章目录

  • 一、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文件
	      # 也可以倒入本地JQ文件
	   
	   JQuery官方网站:  https://jquery.com/
  <p>今天非常的开心哦!</p>
  <p>因为今天星期天呀!</p>

JQuery快速入门详解_第1张图片
JQuery快速入门详解_第2张图片

二、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提供的更多方法  # 详细查看图二

JQuery快速入门详解_第3张图片
JQuery快速入门详解_第4张图片

三、基本筛选器

	   :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>

JQuery快速入门详解_第5张图片

四、表单筛选器

		  # 举例查找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    # 获取下拉框默认被选中的类型

JQuery快速入门详解_第6张图片

技术小白记录学习过程,有错误或不解的地方请指出,如果这篇文章对你有所帮助请点点赞收藏+关注谢谢支持 !!!

你可能感兴趣的:(HTML,jquery,javascript,前端,经验分享,css)