-----用最少的代码解决最多的问题-----
jQuery是一个JavaScript库。极大简化了对页面元素的操作。1.jQuery的特点
-
轻量级 -
功能强大 -
拓展性强 -
插件广泛 -
链式操作、隐式迭代 : 具有自动遍历节点的功能 -
兼容性、免费开源 -
....
jquery版本
使用jQuery,需要下载jQuery //根据情况选择版本
官网:jQuery
1.x ? ? 支持IE6/7/8
2.x ? ? 不支持低版本IE
3.x ? ? 不支持IE低版本
链入
//外链jQuery库时注意:jQuery库需要在自己写的代码上边,否则会报错
//方法一:使用离线版
<script src="./js/jquery.js"></script>
/方法二:使用在线版
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//代码块
</script>
1.代码风格
在jQuery程序中,不管是页面元素的选择,内置的功能函数,都是美元封号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:
$(function(){}); ? //执行一个匿名函数
$('#box'); ? ? ? ? //进行执行的ID元素选择
$('#box').css('color','red'); //执行功能函数
注:$===jQuery
任意连缀
$('#box').css('color','red').css('font-size','50px'); //连缀
2.jQuery 语法
-
jQuery 通过定义$(美元符) 对HTML元素进行获取(查找HTML元素) -
通过各种类似于.css() 的方法进行对页面元素的操作 例: <script>
$('div').css('background','skyblue')//直接获取
$('.div').css('background','skyblue')//class类名获取
$('#div').css('background','skyblue')//id获取
</script>
4.jQuery常用的效果方法
$().css() 对元素进行样式操作
$().hide() 隐藏被选的元素
$().show() 显示被选的元素
$().html() 设置或返回匹配的元素集合中的html内容
$().text() 设置或返回匹配的元素集合中的text内容
$().val() 设置或返回匹配元素的值
$().toggle() 对被选元素进行隐藏和显示的切换
$().slideDown() 通过调整高度来滑动显示被选元素
$().slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换
$().slideUp() 通过调整高度来滑动隐藏被选元素
$().fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见
$().fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏
$().fadeTo() 把被选元素逐渐改变至给定的不透明度
$().animate() 对被选元素应用“自定义”的动画
5.jQuery元素操作方法
$().children() 返回被选元素的所有下一级子元素。可选参数来过滤对子元素的查找
$().find() 返回被选元素的后代元素,一直往下级找,可选参数来过滤对后后代元素的查找
$().parent() 返回被选元素的上一级父元素
$().parents() 返回被选元素的所有上级元素,直到文档的根元素 (<html>),可选参数来过滤对所有上级元素的查找
$().siblings() 返回被选元素的所有同胞元素。过滤对同胞元素的搜索
$().next() 返回被选元素的下一个同胞元素
$().prevAll() 返回匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)
$().nextAll() 返回匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)
$().first() 将匹配元素集合缩减为集合中的第一个元素
$().last() 将匹配元素集合缩减为集合中的最后一个元素
$().prev() 返回的是前面的同胞元素
$().index() 返回指定元素相对于其他指定元素的 index 位置
$().each() 对对象进行迭代,为每个元素执行函数,(item,index)
$().toArray() 以数组的形式返回 jQuery 选择器匹配的元素
$().eq() 指定索引的新元素
$().get() 获得由选择器指定的 DOM 元素
$().size() 返回被 jQuery 选择器匹配的元素的数量
$().remove() 删除被选元素(及其子元素)
$().empty() 从被选元素中删除子元素
$().removeAttr() 从所有匹配的元素中移除指定的属性
$().removeClass() 从所有匹配的元素中删除全部或者指定的类
$().append() 在被选元素的结尾插入内容
$().prepend() 在被选元素的开头插入内容
$().after() 在被选元素之后插入内容
$().before() 在被选元素之前插入内容
$().toggleclass() 从匹配的元素中添加或删除一个类
$().attr() 设置返回匹配元素的属性和值(通过匿名函数 function(){}来进行指定参数设置值)
$().addClass() 向匹配的元素指定的类名
注:
parent()、prev()、first()、last()、next()、eq() 返回一个元素。
parents()、siblings()、nextAll()、prevAll() 返回一个集合
注:以官方为准!
|