1.获取元素文本、属性、内部结构、表单中的值
获取标签中所夹的文本内容:text()
获取标签的属性值:prop('属性名')
获取表单元素的内容:如 文本框中的内容 val()
获取元素的内部html结构:html()
2.筛选选择器
筛选选择器:'选择器:条件' 例如: 选中的选项:'input:checked'
1)获取选择器中第一个元素: '选择器:first'
2)获取选择器中最后一个元素: '选择器:last'
3)获取选择器中第几个元素: '选择器:eq(数字)' 数字是下标 从0开始
4)获取选择器中奇数下标的元素: '选择器:odd'
5)获取选择器中偶数下标的元素: '选择器:even'
// 以下情况 后来者居上 会覆盖之前样式
// 1、 获取选择器中第一个元素: '选择器:first'
// 将第一行的背景颜色设置成粉色
$('tr:first').css('background-color', 'pink')
// 2、 获取选择器中最后一个元素: '选择器:last'
// 将最后一行的背景颜色设置成兰色
$('tr:last').css('background-color', 'blue')
// 3、 获取选择器中第几个元素: '选择器:eq(数字)' 数字 是下标 从0开始
// 将第三行的背景颜色设置成黄色
$('tr:eq(2)').css('background-color', 'yellow')
// 4、 获取选择器中奇数下标的元素: '选择器:odd'
// 将奇数下标的行的背景颜色设置成红色
$('tr:odd').css('background-color', 'red')
// 5、 获取选择器中偶数下标的元素: '选择器:even'
// 将偶数下标的行的背景颜色设置成绿色
$('tr:even').css('background-color', 'green')
3.jQuery中循环遍历元素
隐式迭代:根据选择器获取同类型元素,绑定事件 会作用到每一个元素上
假如每个元素的事件不一样 需要循环遍历
$('选择器').each(function(index,dom){
// index是下标 dom是DOM对象 想要转换成jQuery对象 $(DOM对象)
})
<ul>
<li>同学1</li>
<li>同学2</li>
<li>同学3</li>
<li>同学4</li>
<li>同学5</li>
</ul>
<script src="../jquery-3.7.0.js"></script> // jquery-3.7.0.js文件需要导入
<script>
// 循环遍历所有的li 弹窗提示这是第几个li
$('li').each(function(index,dom){
// 给元素对象绑定单击事件
$(dom).click(function(){
alert(`这是第${index+1}个li`)
})
})
</script>
4.添加元素、删除元素
在html中添加标签(元素):标签写在字符串里
创建jQuery元素: $('标签')
添加jQuery元素:
添加子元素
元素1.append(元素) 将元素添加到元素1里边,位置处于后边
元素1.prepend(元素) 将元素添加到元素1里边,位置处于前边
添加兄弟元素
元素1.before(元素) 位置处于元素1的前边
元素1.after(元素) 位置处于元素1的后边
删除jQuery元素:
1)删除元素本身 元素.remove()
2)删除元素内部所有内容 元素.empty() 自己还在
3)删除元素内部所有内容 元素.html('') 自己还在