JQuery

简介: 本章讲述关于 JQuery的介绍、使用方法和选择器

JQ简述1

1、 jQuery出现的背景(Javascript遇到的问题)

选择器功能弱
DOM操作繁琐之极
浏览器兼容性不好
动画效果弱

2、什么是 jQuery(概念)

jQuery (javaScriptQuery)JavaScript 代码库
官方网站: http://jquery.com/

3、目前 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,只支持最新的浏览器。除非特殊要求,一般不会使用 3.x 版本的,很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。
注:推荐学习时使用1.x版本,功能更加完善,所学习到的东西更多。

jQuery 中$的含义

作用

1:$(function) 相当于 window.onload=function(){}

2.功能比window.onload更强大
(1) window onload一个页面只能写一个,但是可以写多个$() 而不冲突

(2) window onload要等整个页面加载完后再执行(包括图片、超链接、音视频等), 但是$的执行时间要早

3.完整形式是$(document).ready(…….);

作用 2:$(selector) 选择器

 jQuery具有强大的选择器功能

在这里插入图片描述

使用前的准备

在这里插入图片描述

JQ中常用的选择器

一、基本选择器

1、id选择器

通过元素id获取相关元素 在这里插入图片描述

2、元素选择器

获得body内的相关元素,如div、input等
在这里插入图片描述

3、类选择器

通过元素类名获取相关元素,eq()方法获取元素,下标从0开始
在这里插入图片描述

4、通用选择器

找到每一个元素
在这里插入图片描述

5、分组选择器

找到匹配任意一个类的元素。
在这里插入图片描述

二、层级选择器

1、ancestor descendant

在给定的祖先元素下匹配所有的后代元素
在这里插入图片描述

2、parent > child

在给定的父元素下匹配所有的子元素
在这里插入图片描述
3、prev + next
匹配所有紧接在 prev 元素后的 next 元素
在这里插入图片描述

4、prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素(同级别/同辈)
在这里插入图片描述

三、子元素选择器

1、:nth-child

匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

在这里插入图片描述
在这里插入图片描述

四、属性选择器

$("input[type=属性名]")。除了type属性,name、value等也可以
在这里插入图片描述

五、表单选择器

匹配所有 input, textarea, select 和 button 元素

在这里插入图片描述

链接:https://pan.baidu.com/s/19SSKjR11eYBzHs2gjmwpqw
提取码:klrx
复制这段内容后打开百度网盘手机App,操作更方便哦


  1. JQuery的相关API,相关jquery文件,测试源代码已分享之百度网盘。使用时直接将相关jquery文件放入JS目录下,在html代码中引入即可。
相关文章
|
12月前
|
存储 JavaScript 前端开发
JQuery
JQuery
108 0
|
23天前
|
Web App开发 JavaScript 前端开发
什么是jQuery
什么是jQuery
26 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是Jquery?
什么是Jquery?
|
6月前
|
SQL JavaScript 前端开发
|
11月前
|
存储 JavaScript 前端开发
jQuery01
jQuery01
58 0
|
JavaScript CDN
|
JavaScript 前端开发
JQuery01
JQuery01
133 0
JQuery01
|
设计模式 JavaScript 前端开发
html+js+Jquery(四)
html+js+Jquery(四)
152 0
html+js+Jquery(四)
|
JavaScript 前端开发 程序员
jQuery的介绍
jQuery是对JavaScript的封装
129 0
|
JavaScript 前端开发
用jQuery写一个简单的跑酷游戏
jQuery写一个跑酷游戏,让小车在地面即可得分,代码不复杂,通俗易懂,十分合适拿来入门练手。在文章下面附上代码链接,水平有限,欢迎沟通。
335 0
用jQuery写一个简单的跑酷游戏