一、为什么要学 jQuery ?
简单粗暴,不需要考虑兼容性问题。
二、什么是jQuery?
是基于 js 的一个库, 里面封装了一些 Js 的用方法,
jQuery 可以理解为是 js 的一个工具。
三、使用 jQuery 的步骤:
1. 引入 jQuery 文件
2. 写入口函数
JQuery大版本分类
1.x 版本:能够支持IE678浏览器
2.x版本:不支持IE678浏览器
为了方便管理,1.x 和 2.x 版本都不在更新版本了,目前只更新3.x 版本。所以我们主要使用1.x版本的Jquery。
3.x版本: 不兼容IE678,更加的精简(在国内不流行,因为国内使用的主要目的是兼容IE678)。
JQuery压缩版.min.js和未压缩版.js
JQuery.1.x.min.js : 压缩版本,适用于生产环境,因文件比较小,去除了注释、换行、空格等东西,但是基本没有可阅读性。
JQuery.1.x.js : 未压缩版本,适用于学习开发环境,源码清晰,方便阅读。
1.$(function () {})
2.$(document).ready(function () {})
使用 js 的方式获取到的元素就是 DOM对象(js对象)。
使用 jq 的方式获取到的元素就是 jq 对象。
jq 对象其实是一个封装好的类数组对象,里面存放了很多 js 对象。
js对象不能直接调用 jq 的方法,可以将 js 对象转换为 jq 对象再进行调用。
DOM ---> JQuery 使用$()
jq 对象不能直接调用 js 的方法,可以将 jq 对象转换为 js 对象再进行调用。
jQuery ---> DOM $li[0] or $li.get(0)
五、“ $ ” 的实质
在引入 jQuery 的情况下,
console.log($ === jQuery)
返回 true。
六、选择器(常用)
基本选择器:
标签("div")
类(".demo")
id选择器("#demo")
交集("div.demo")
并集("div,.demo,#test")
层级选择器:
子代选择器("div>p")
后代选择器("div p")
过滤选择器:
选取所有奇数的 div 元素"div:odd"
选取所有偶数的 div 元素"div:even"
选取指定下标的 div 元素"div:eq()"
选取第一个 div 元素"div:first"
选取最后一个 div 元素"div:last"
选取所有下标大于2 的 div 元素"div:gt(2)"
选取所有下标小于2 的 div 元素"div:lt(2)"
筛选选择器
选取 div 里所有为 p 的子元素 div.children("p")
选取 div 元素内所有为 p 的元素 div.find("p")
选取一个元素的直接父元素 parent()
选取一个元素的除自己外的所有同级元素siblings()
选取某个下标为 1 的元素 eq(1)
选取下一个同级元素 next
选取上一个同级元素 prev
扩展1:
index()
返回当前元素在所有兄弟元素里面的索引。
扩展2:
get() 和 eq() 的区别
eq() 返回的是jQuery对象
同一个下标的 li,返回的结果不同
console.log($('li').eq(1))
get() 返回的是js 对象
同一个下标的 li,返回的结果不同
console.log($('li').get(1))