一、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之后所有的兄弟yjQuery选择器查找标签之后的结果与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    # 获取下拉框默认被选中的类型

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

JQuery快速入门详解相关推荐

python符号格式化设置区间_Python 数值区间处理_对interval 库的快速入门详解
使用 Python 进行数据处理的时候,常常会遇到判断一个数是否在一个区间内的操作.我们可以使用 if else 进行判断,但是,既然使用了 Python,那我们当然是想找一下有没有现成的轮子可以用. ...
Spring 快速入门详解
Spring 入门详解简介 Spring就是指Spring framework是分层的 Java SE/EE 一站式轻量级开源框架,Spring 框架是全家桶(spring mvc.spring b ...
asm使用指南中文-md版快速入门详解
asm4-guide-英文.pdf asm4-guide-中文还是人家官网文档写得好,什么快速入门都不如官方文档,阅读两小时,就知道怎么回事了. ASM使用指南中文版 1. 介绍 1.1. 动机 1 ...
ElasticSearch最新版快速入门详解
写在前面:我是「且听风吟」,目前是某上市游戏公司的大数据开发工程师,热爱大数据开源技术,喜欢分享自己的所学所悟,现阶段正在从头梳理大数据体系的知识,以后将会把时间重点放在Spark和Flink上面. ...
ElasticSearch快速入门详解（亲测好用，强烈推荐收藏）
3.快速入门接下来快速看下elasticsearch的使用 3.1.概念 Elasticsearch虽然是一种NoSql库,但最终的目的是存储数据.检索数据.因此很多概念与MySQL类似的. ES中 ...
SpringMVC拦截器-快速入门详解(应用)
拦截器在预处理后什么情况下会执行目标资源,什么情况下不执行目标资源,以及在有多个拦截器的情况下拦截器的执行顺序是什么? 再编写一个拦截器2, public class MyInterceptor2 i ...
python语言编程基础-Python语言入门详解！快速学成Python！
原标题:Python语言入门详解!快速学成Python! 很多技能是被职场所需要的,但很可惜... 这些技能在大学中并学习不到. 大学和职场现实存在的横沟对大部分同学来说难以跨越或碰得头破血流... ...
python语言入门-Python语言入门详解！快速学成Python！
原标题:Python语言入门详解!快速学成Python! 很多技能是被职场所需要的,但很可惜... 这些技能在大学中并学习不到. 大学和职场现实存在的横沟对大部分同学来说难以跨越或碰得头破血流... ...
python语言入门m-Python语言入门详解！快速学成Python！
今日主题 "Python语言入门详解" 近两年来,Python语言借着数据科学和人工智能的"东风"成为了最流行的编程语言--街头巷尾人们口口相传.同时,Pyth ...
FFmpeg入门详解之104：Win10快速安装OpenSSL（不用编译源码）
win10x64安装OpenSSL:不用编译源码网上一堆的教程教你去下载opensll源代码并用vs进行编译,虽然我有安装vs2015,但是看到那么长的编译步骤,太心累了. 懒人只得找简单的方法,最 ...

JQuery快速入门详解

文章目录

一、JQuery简介

一、JQuery对象

二、JQuery基本使用

三、基本筛选器

四、表单筛选器

JQuery快速入门详解相关推荐

最新文章

热门文章