jquery
是一个模块 一个库 js封装的一个库
导入jq
<script src="jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
$ == Jquery
dom对象 _> jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]
选择器
基本选择器
通用选择器 $('*')
标签选择器 $('div')
id选择器 $('#id')
类选择器 $('.class')
组合选择器 $('div.class1') 并集
$('div,p') 交集
层级选择器
后代选择器 $('div span')
子代选择器 $('#li>span')
毗邻选择器 $('#li+span')
弟弟选择器 $('#li~span')
属性选择器
$('[属性]')
$('[属性="值')
$('[属性!="值')
$('[属性^="值')
$('[属性$="值')
$('[属性*="值')
筛选器
$('选择器:筛选器')
:first 第一个
:last 最后一个
:eq(index) 按照索引
:has(选择器) 包含某个子代的父标签
:not(选择器) 排除
筛选方法
.first() last
.eq(index)
.siblings() 兄弟
.parent()
.children()
.next() .nextAll() .nextUntil('#l2')
.prev() .prevAll() .prevUntil()
.has() 包含某个子代的父标签
.filter('#l2') 当前标签包含选择器
.not(选择器) 不包含
值的操作
.text() 文本
.html() HTML标签
绑定事件
$('button').click(function () {
alert(123)
})
标签的操作
父标签.append(子标签) // 子标签添加到父标签的子代的最后
子标签.appendTo(父标签)
父标签.prepend(子标签) // 子标签添加到父标签的子代前面
子标签.prependTo(父标签)
a.after(b) // 在a标签后面添加b标签
a.before(b) // 在a标签前面添加b标签
删除
.remove() 删除标签和事件
.detach() 删除标签 保留事件
.empty() 清空标签中的内容
克隆 复制
.clone() 复制标签
.clone(true) 复制标签 也有事件
替换
a.replaceWith(b) // 用b替换a
b.replaceAll(a) // 用b替换a a可以是标签 选择器
属性的操作
.attr('属性') // 获取属性的值
.attr('属性','值') // 设置属性的值
.removeAttr('属性') // 删除某个属性
.prop('checked') // radio checkbox select(option)
.prop('checked',true)
值的操作
val()