JQuery基础小白
2022-03-18 11:19:40 12 举报AI智能生成
JQuery一些基础重要内容
作者其他创作
大纲/内容
jQuery简介与使用方式
引入jQuery库
引入方式
本地引入
<script src"JQuery存储路径"></script>
CDN远程引入
引入版本
测试版（未压缩版）
生产版（压缩版）
使用jQuery
使用jQuery函数：$/jQuery
使用jQuery对象：$xxx(执行$()得到的)
jQuery的功能
HTML元素操作
CSS操作
HTML事件处理
扩展新的JQuery插件
ajax封装
使用jQuery核心函数
函数调用：$(param)
param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
选择器
分类
基本选择器
基本常用的选择器
ID选择器
$(" #title")选取id为title的元素
标签选择器
$("h2" )选取所有h2元素
类选择器
$(" .title")选取所有class为title的元素
*通配符
$("*" )选取所有元素
selector1,selector2,selectorN并集选择器
$("div,p,.title" )
selector1selector2selectorN交集选择器
$("h2.title")
层次选择器
用来查找子元素，后代元素，兄弟元素的选择器
parent child后代选择器
parent >child子选择器
prev+next相邻元素选择器，选取紧邻prev元素之后的next元素
prev~sibings同辈元素选择器，选取prev元素之后的所有siblings元素
过滤选择器
基本过滤选择器
:first选取第一个元素
:last选取最后一个元素
:even选取索引是偶数的所有元素（index从0开始）
:odd选取索引是奇数的所有元素（index从0开始）
:eq(index)选取索引等于index的元素（index从0开始）
:lt(index)选取索引小于index的元素（index从0开始）
:not(selector)选取去除所有与给定选择器匹配的元素
:focus选取当前获取焦点的元素
属性选择器
[attribute]选取包含给定属性的元素
[attribute=value]选取等于给定属性是某个特定值的元素
[attribute !=value]选取不等于给定属性是某个特定值的元素
[attribute^=value]选取给定属性是以某些特定值开始的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素
[selector] [selector2] [selectorN]选取满足多个条件的复合属性的元素
使用jQuery对象
. 属性和方法
属性
操作内部标签的属性或值
attr()获取属性值
attr(value)修改属性值
removeAttr()删除属性
attr(value)修改属性值
removeAttr()删除属性
addClass()添加类样式函数
removeClass()
removeClass()
html()获取html+文本
val()获取表单的值
val()获取表单的值
CSS
设置css样式/读取css值
css(styleName):
根据样式名得到对应的值
根据样式名得到对应的值
css(styleName, value):
设置一个样式
设置一个样式
css(json格式):
设置多个样式
设置多个样式
文档
对标签进行增删改操作
添加/替换元素
append(content)/appendTo(content)
向当前匹配的所有元素内部的最后插入指定内容
向当前匹配的所有元素内部的最后插入指定内容
prepend(content)/prependTo(content)
向当前匹配的所有元素内部的最前面插入指定内容
向当前匹配的所有元素内部的最前面插入指定内容
before(content)/(content)insertBefore(JQ对象)
将指定内容插入到当前所有匹配元素的前面
将指定内容插入到当前所有匹配元素的前面
after(content)//(content)insertAfter(JQ对象)
将指定内容插入到当前所有匹配元素的后面替换节点
将指定内容插入到当前所有匹配元素的后面替换节点
replaceWith(content)
用指定内容替换所有匹配的标签删除节点
用指定内容替换所有匹配的标签删除节点
删除元素
empty()
删除所有匹配元素的子元素
删除所有匹配元素的子元素
remove()
删除所有匹配的元素
删除所有匹配的元素
筛选
根据指定的规则过滤内部的标签
first()
获取第一个元素
获取第一个元素
last()
获取最后一个元素
获取最后一个元素
eq(index|-index)
获取下标位置元素
获取下标位置元素
not(selector) 除什么之外的元素
children(): 子标签中找
find() : 后代标签中找
parent() : 父标签
parents("标签"):一直查找到指定标签名的祖辈标签
prev() : 获取紧邻匹配元素的前一个标签
next() : 获取紧邻匹配元素的后一个标签
siblings() : 前后所有的兄弟标签
find() : 后代标签中找
parent() : 父标签
parents("标签"):一直查找到指定标签名的祖辈标签
prev() : 获取紧邻匹配元素的前一个标签
next() : 获取紧邻匹配元素的后一个标签
siblings() : 前后所有的兄弟标签
事件
处理事件监听相关
on(eventName, funcion(){})
通用的绑定事件监听
通用的绑定事件监听
事件解绑：
off(eventName)
off(eventName)
效果
实现一些动画效果
淡入淡出:
不断改变元素的透明度来实现的
不断改变元素的透明度来实现的
fadeIn():
带动画的显示
带动画的显示
fadeOut():
带动画隐藏
带动画隐藏
fadeToggle():
带动画切换显示/隐藏
带动画切换显示/隐藏
滑动动画
slideDown():
带动画的展开
带动画的展开
slideUp():
带动画的收缩
带动画的收缩
slideToggle():
带动画的切换展开/收缩
带动画的切换展开/收缩
显示隐藏，
默认没有动画
默认没有动画
show():
带动画的显示
带动画的显示
hide():
带动画的隐藏
带动画的隐藏
toggle():
带动画的切换显示/隐藏
带动画的切换显示/隐藏
0 条评论
下一页
