jQuery的知识总结(1)
jQuery的基础知识,常用的API
什么是jQuery
- jQuery是一个JavaScript函数库。jQuery是一个轻量级的”写的少,做的多”的JavaScript库。
- jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
<script src="https://cdn.jsdelivr.net/gh/Rr210/[email protected]/js/jquery-3.5.1.min.js"></script>
jQuery对象
- 等待页面加载完毕
$(document).ready(function(){})
或者$(function(){})
$
是jQuery的别称,dollar符号,顶级对象- 原生jsDOM对象,jQuery对象
$()
里面不能使用原生属性和方法
相互转化
- DOM对象转化为jQuery对象,
$(obj)
- jQuery对象转化为DOM对象
$('div')[index]
或者$('div').get(index)
jQuery API
- 选择器
$('')
与css获取一致 - 隐式迭代
$('').css('','')
(伪数组形式存储)
筛选选择器
筛选元素的方法-
first/last/eq(index)/odd/even
1
2
3
4
5
6
7
8$(function(){
$('ul li:first').css('color','red'); //获取第一个元素
$('ul li:last').css('fontSize','20px');//获取最后一个
$('ul li:eq(4)').css('backgroundColor','#ccc');//获取指定元素
$('ul li:odd').css('textShadow','1px 2px 3px #ccc'); //获取偶数元素
$('ul li:even').css('textIndent','10px');//获取奇数元素
$('ul').css('listStyle','none')
})筛选方法
parent()
,最近一级的父代children()
亲儿子find()
包括儿子和孙子$().mouseover/mouseout
$(this)
当前元素,this
不要加引号兄弟元素
$().siblings
,除了自身的所有元素nextAll([])
,查找元素之后所有的同辈元素,prevAll([expr])
查找之前的所有同辈元素hasClass('类名')
, 检查当前元素是否含有某个特定的类,如果有,返回trueeq(index)
或者使用选择器$(li:eq(index))
partent()
children()`` find()`` eq()
$(this).index()
得到当前元素的索引号
查看案例
1 |
|
jQuery获取
查看答案
- jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$(“span”).parent()或者$(“span”).parent(“.class”)
- jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
- jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
- jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点
- jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
- jQuery.prevAll(),返回所有之前的兄弟节点
- jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
- jQuery.nextAll(),返回所有之后的兄弟节点
- jQuery.siblings(),返回兄弟姐妹节点,不分前后
- jQuery.find(expr),跟jQuery.filter(expr)完全不一样:
- jQuery.filter(),是从初始的jQuery对象集合中筛选出一部分,而
- jQuery.find(),的返回结果,不会有初始集合中的内容,比如$(“p”).find(“span”),是从
元素开始找
<span>
,等同于$("p span")
操作方法
- 属性名一定要加引号,数值不需要加引号
- 符合属性,用
,
隔开,并用驼峰名法.css({,})
- 设置类样式
- 添加类
addClass('不需要加.')
- 删除类`removeClass(‘类名’)
- 切换类
toggleClass('类名')
- 链式操作
jQuery效果
显示隐藏
- show() hide() toggle() 显示 隐藏 切换
- show([speed,[easeing],[fn]])
滑动
- slideDown() 向下滑动
- slideUp() 向上滑动
- slideToggle()
- hover(over,out) 事件切换
- 包括鼠标经过离开的符合写法
- 只写一个参数 使用
sildeToggle()
, 使用stop() 结束上一次动画
淡入淡出
fadeIn()
淡入效果fadeOut()
淡出效果fadeToggle()
淡入淡出切换fadeTo('[speed],opacity,[easeing],[fn]')
自定义动画
- animate(params,[speed])
- params 以对象形式传递{ },属性名可以不带引号,复合属性使用驼峰命名法
手风琴案例
1 | <style> |
查看案例
prop() 属性值
element.prop('属性名')
获得固有属性值prop('属性名','属性值')
attr()
attr('属性名')
元素的自定义属性- 设置和prop方法一致
数据缓存
data('key','value')
存放在元素的内存里面- 获取的时候(
data('key')
) - 或者H5自定义属性,不需要加
data-
,而且返回的是数字型
全选prop()案例
1 | <body> |
获取内容
html()
带有标签text()
只获取文本- 表单中的值
val()
- 获取指定的祖先元素
$(this).partents('类名')
, (n*n).toFixed(2)
保留两位小数
元素操作
- 遍历元素
$('类').each(回调函数function(index,domEle))
可以自己命名 $.each($('类')
,function(index,domELe))
,遍历数组
购物车经典案例
1 | $(function () { |
查看效果
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论