JavaScript-jQuery2-笔记

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('')  自己还在