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代码中引入即可。
相关文章
|
7月前
|
JavaScript 前端开发
jQuery
jQuery 选择器是 jQuery 中的核心功能之一,它允许我们通过 CSS 选择器语法来选择 HTML 文档中的元素。jQuery 选择器比 CSS 选择器更加强大,因为它可以用于查找、筛选、选择和操作 HTML 元素,而且不需要了解浏览器的兼容性问题。
37 2
|
2月前
|
JavaScript 前端开发
JQuery 什么是JQuery?
JQuery 什么是JQuery?
34 0
|
4月前
|
设计模式 JavaScript 前端开发
什么是Jquery?
什么是Jquery?
|
7月前
|
JavaScript UED 开发者
jQuery Growl
jQuery Growl 是一个基于 jQuery 的通知插件,它可以在网页上显示各种类型的通知,如成功、错误、警告等。Growl 插件基于 jQuery UI 主题,可以自定义通知的样式、位置和显
115 6
|
JavaScript 前端开发 索引
初识jQuery
初识jQuery
104 0
|
JavaScript
jquery效果-20
jquery效果-20
97 0
jquery效果-20
|
JavaScript
|
JavaScript
jquery的使用-4
jquery的使用-4
90 0
jquery的使用-4
|
JavaScript 前端开发
用jQuery写一个简单的跑酷游戏
jQuery写一个跑酷游戏,让小车在地面即可得分,代码不复杂,通俗易懂,十分合适拿来入门练手。在文章下面附上代码链接,水平有限,欢迎沟通。
337 0
用jQuery写一个简单的跑酷游戏
|
Web App开发 JSON JavaScript
Jquery就是这么简单
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为什么要使用Jquery? 我觉得非常重要的理由就是:它能够兼容市面上主流的浏览器,我们学习AJAX就知道了,IE和FireFox获取异步对象的方式是不一样的,而Jquery能够屏蔽掉这些不兼容的东西.
1710 0