jQuery必会的东西............
感觉最近这几天都懵懵的 还是记录一下 防止随着年龄的增长记忆力退化.......
jquery是啥 jquery就是一个js文件。。开发方便
首先附上jquery官网网址和下载地址
下载地址：https://code.jquery.com/jquery/
下载之后会有两个文件 一个有min 一个没有min 有min的是压缩版 在项目上线的时候使用 没有min的是开发版（请允许我那么叫他）顾名思义在开发的时候使用 代码可读性更强 需要在html <script></script>中引入
<script src="./lib/jquery-1.12.4.js"></script>
虽然jQuery有好几个版本 但只有1.x系列的兼容IE低版本 2.x和3.x均不支持
emmmm jQuery有什么好处呢....和原生js相比 代码量少 开发效率高 在开发中可以达到“少写 多做”的效果 其隐式迭代 可以为我们省下好多写for循环的时间.....链式编程 尽管大胆的去点（.）
其次啦。。。主要插件比较多（姨母笑）还可以自己写插件
更重要的是！！！选择器好写多了 （相对于原生js）
说到这里.......让我们回忆一下原生js是怎么写的
原生js的获取元素方式：
documen.getElementById （‘’）根据id名获取一个元素 注意 是一个 不是一堆
document.getElementsByTagName （‘’）根据标签名获取一堆元素
document.getElementsByClassName （‘’）根据class名获取一堆元素
document.querySelector （‘’）根据里面写的选择器 ，匹配的第一个元素 如果没有匹配项，返回null
document.querySelectorAll （‘’）根据里面写的选择器 匹配所有获取到的一堆元素 如果没有匹配项 返回空的nodelist(节点数组)
ps 上面俩返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。 这两个方法都可以接受三种类型的参数：id(#id) class(.xxx) 标签<></>
-------------------------------------------------------回忆结束--------------------------------------------
jquery对象初识：
jquery对象的标志性代表：美元符号 $
这不是美元 代表的是一个function
在引入jQuery文件的页面console.log 搜索$或者jquery 会发现是 f（selector，context） selector 选择器 context 形参 里面的这俩东西就不多赘述了 不然要说好久= =不符合题目jquery基础
认识$标识符
- // ① $ 标识符是一个函数 function(selector)
- // ② 选择器selector,表示将来要接收用户传入的字符串格式的选择器 '#box'
- // ③ 函数要调用 $('#box')
- // ④ 调用完毕后，返回一个jQuery对象
获取jquery对象 ：
基本语法： $('选择器') 返回值是jQuery对象
jQuery对象的本质：是一个伪数组 只有length 索引值等 基本属性 是有序的
【重点】dom对象转jQuery对象
获取dom对象在前面写过了 就不再copy一遍 通过doument.获取的是dom对象 dom】对象只能调用dom对象里提供的属性和方法 不能直接dom对象去. jQuery里的属性或者方法
要想转换成jQuery对象 要在前面加标符$(' ');
但是一般没人会先用document获取一下之后再转换成jQuery对象。。除非是里面写的是this--当前触发的事件或事件源。
同样 jQuery对象也只能用自家对象提供的属性和方法
【非重点】 jQuery对象转dom对象
emmm 其实也不是转 可以说是拿 因为是根据索引值去找的
语法：jQuery对象[索引]
！！记住这里 到后面会有个坑 记住 jQuery对象后面直接跟中括号[索引值] 是一个dom对象！！！！
jQuery注册事件
还记得dom的注册事件么。。onclick onmouseleave这种的
在jquery中 不需要加on 因为在这里是方法
举个小例子：
<body>
<ul>
<li>我是一个可爱的li</li>
<li>哈哈哈哈哈</li>
<li>我是一个可爱的li一号</li>
<li>我是一个可爱的li二号</li>
<li>我是一个可爱的li三号</li>
<li>我是一个可爱的li四号</li>
<li>我是一个可爱的li五号</li>
<li>我是一个可爱的li六号</li>
</ul>
<!-- 先链入jquery文件 -->
<!-- emmm 好想吃江边城外的怪味烤鱼 -->
<script src="./lib/jquery-1.12.4.js"></script>
<script>
// 我们要做的效果是 点击哪个li 哪个li就弹框他的文本文字
// 先获取所有的li 因为不用写循环 直接写点击事件
$('li').click(function(){
// 用变量接收一下当前点击的li
// 括号里是this的话就不用加引号
var lis = $(this).text();
alert(lis);
})
//或者直接连写也可以
//alert($(this).text());
</script>
jQuery的css方法操作样式
回顾一下在dom中是如何操作css的
dom对象元素.style.样式属性名=值；
设置样式
设置单个样式
jQuery对象.css（‘name’，‘value’）；
设置单个样式的时候 一定要加‘’引号 因为是字符串 也就是说 里面不是数字的 就都要写成字符串的格式
设置多个样式
jQuery对象.css（{
name：value，
name：value，
name：value，
name：value
}）;
设置多个的时候 name value加不加引号都可以 不同的name：value键值对用逗号分开
需要注意的一点是：如果name 不加引号 遇到中间有-的、多个单词组在一起的属性名 要写成驼峰
例：font-size 要不写成加引号的‘font-size’ 要不去掉中间的- 用驼峰命名法 写成fontSize
获取样式
其实和设置是同理的。。只不过设置是传两个参数进去 获取是传一个参数进去
语法：jQuery对象.css（‘样式属性名name’）；
这里的 name 依旧是字符串类型
样式获取只能单个获取 不能多个获取
比如要获取width 默认在console.log里打印的是黑色的 要想变成蓝色的数字类型 可以加一个 parseInt（jQuery对象.css.（‘name’））；
通过选择器获取jQuery对象
这个是我们用jQuery写代码的基础
基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $('#id') | 获取指定ID的元素 |
| 类选择器 | $('.class') | 获取同一类class的元素 |
| 标签选择器 | $('div') | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li') | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $('div.redClass') | 获取class为redClass的div元素 |
层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $('ul > li') | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $('ul li') | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
过滤器选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq(index) | $('li:eq(2)').css('color', 'red') | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $('li:odd').css('color', 'red') | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even').css('color', 'red') | 获取到的li元素中，选择索引号为偶数的元素 |
关于odd 和even 一般我们在表格隔行换色的时候 比如 让偶数行变红色 奇数行变蓝色 不能写
$(tbody tr:even).css('background','red')；
这样出来的是奇数行变为蓝色 因为 odd和even 是根据索引值去寻找的
在找用户看到的偶数行2 4 6 的时候 因为下标索引值是从0开始的 用户看到的偶数行其实是代码中的奇数行 所以 要想实现奇数行变蓝色 偶数行变红色 就要在奇数行写
$('tbody tr:even').css.('background','biue'）;
在偶数行写
$('tbody tr:odd').css.('background','red');
选择器筛选方法
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法
我们先来一个小小的页面
<body>
<div id="dv">
<p>哈哈哈</p>
<p>哈哈哈</p>
<a href="#"></a>
<a href="#"></a>
<h2>喵喵喵</h2>
<a href="#"></a>
<a href="#"></a>
<h3>???</h3>
<div class="box">
<p>孙子元素</p>
<p>孙子元素</p>
</div>
</div>
</body>
通过 .children（） 获取所有子元素
eg:获取id为dv的div下的p
一般方法：
$(‘#dv>p’)
用children方法：
$('#dv').chileren('p')
语法：父元素.children（子元素）
补充一下 鼠标悬停在方法上的时候 会有个弹框 里面会告诉你会有几种方法去实现这个 如果方法后面有问号？ 就是括号里面可选择写或者不写
拿children来说 如果后面的括号不写 那么就是去找div下的所有子元素 包括p本身；如果后面括号里写指定的子元素 那么只会找到指定的子元素（的集合 伪数组）；
通过.find（）方法获取所有后代（子子孙孙）
eg:去获取id为dv的div 下的所有的p
一般方法：
$('#dv p')
用find方法：
$('#dv').find('p');
语法：jQuery对象.find（‘必须写的子元素’）
这里括号里面必须写 你问我为什么 因为代码提示框里告诉我必须写。。。
用.next（）方法去寻找下一个兄弟元素
eg：去获取id为dv的div里面的h2标签的下一个兄弟元素
用next方法：
$('#dv h2').next()
语法：jQuery对象.next（）；
里面也是可写可不写。。但是我看觉得写了也没用 因为她只找自己
用.prev（）方法寻找上一个兄弟元素
eg：去获取id为dv的div里面的h2标签的上一个兄弟元素
$('#dv h2 ').prev()
语法：jQuery对象.prev（）；
寻找上一个和寻找下一个里面也是可写可不写。。但是我觉得写了也没用 因为她只找自己的直接上一个和直接下一个 不会再下面或者上面的一堆里去找。
通过.parent（）去寻找父元素
eg：去获取class为box的div的父元素
$('.box').parent()
语法： jQuery对象.parent（）；
通过siblings（selector）去寻找不包含自己的兄弟节点
eg：获取id为dv的div标签下的h2标签的兄弟节点
$('#dv h2 ').siblings();
语法：jQuery对象.siblings（）；
括号里也是可写可不写 不写是查找所有兄弟节点的伪数组 写的话是查找特定的兄弟元素（伪数组）；
用.index（）方法获取索引值
语法：jQuery对象.index（）；
作用;返回一个数字 表示当前元素在同级元素这个数组里的索引值
这个伪数组的长度有多少 取决于这个html结构 比如说 我一个大div里有8个小div 我的长度就是8 最大下标为7 你在这个div下面在来一个兄弟div 抱歉 和我没关系 我管不着了~~
用.eq（index） 查找这个索引值代表的元素
语法：$('#dv').eq(2) 【推荐使用】
相当于 ** $('#dv:eq(2)')** 在里面的index不确定的时候 需要些index 则需要拼接 但是用上一种方法就不需要
是去查找id为dv的div的第三个子元素
！注意 有的时候可能会不注意就写成了 $('#dv')[2] 这样是非常非常错误的！！！因为这个时候 你写的东西已经是一个dom对象 不是jQuery对象了！！
jQuery操作类名
目的：管理类名样式
在dom对象中 我们管理类名是：dom对象.className=‘类名 类名’；
检测类名是否存在
语法：jQuery对象.hasClass（‘类名’）；
返回的是布尔值 即true 或者false true表示有 false表示没有
添加类名【常用】
语法：jQuery对象.addClass（‘类名 类名’）；
可以添加多个类名 用空格分隔开
删除类名【常用】
语法： jQuery对象 .removeClass（‘类名’）
括号里也是可选写或者不写 写 就是删除指定的类名 不写就是删除所有类名 括号里的是参数
切换类名
语法：jQuery对象.toggleClass（‘类名’）；
toggle 切换
如果写进去的这个类名存在 则会被移除 如果不存在 就会被添加
一般在同一个按钮切换类名使用
啊啊啊啊啊啊啊啊啊 总结了一下午+一晚上 。。累的一批。。。。。。。。。。。。。。。。。。。。。。。。。
网友评论