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,操作更方便哦
- JQuery的相关API,相关jquery文件,测试源代码已分享之百度网盘。使用时直接将相关jquery文件放入JS目录下,在html代码中引入即可。 ↩