jq操作基本、节点操作、插入节点

jq操作基本

• removeClass删除样式
• addClass 添加样式
• toggleClass 模拟了addClass()与removeClass实现切换的过程
• hasClass() 方法判断是否含指定的样式 有就返回true 没有就返回false
• hover()可以写两个方法 第一个方法表示移入第二个表示移出两个方法用逗号隔开 只写一个表示移入和移出都执行
• html()用于获取第一个匹配元素的html内容或文本内容 与innerhtml相像
• text() 与innertext相像
• val() val表示原生中value的意思

例如：

有个div 鼠标移入div显示红色边框 移出边框消失 div 里面的 我爱学习 学习让我自由 获取div的字 点击div的时候 把字显示到 input中

<style>
    .d{
        border: 1px solid red;
    }
</style>
    <div> 我爱学习，学习让我自由
        <input type="text">  
    </div>
<script>
    $('div').hover(function(){
        $(this).toggleClass('d')
    })
    $('div').click(function(){
        $('input').val($('div').text().trim())//加trim去除前后空格
    })
</script>
复制代码
复制代码

jq节点操作

• $(selector):通过选择器获取节点
• $(element):把Dom节点转化成jQuery节点
• $(html):使用html字符串创建jQuery节点

jq插入节点

• $(A).append(B)表示将B追加到A中
• appendTo(B)表示把A追加到B中
• prepend(B)表示将B前置插入到A中
• prepend(B)表示将A前置插入到B中
• $(A).after(B)表示将B插到A之后 与A同辈
• $(A).insertAfter(B) 表示将A插入到B之后
• $(A).before(B)表示将B插到A之前 与A同辈
• $(A).insertBefore(B) 表示将A插到B的前面 同辈

例如：

点击按钮随机生成一个头像，插入到div中

<style>
    .img1{
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
</style>
<button>点我</button>
<div style="border: 1px solid #ccc;width: 200px;display: none;"></div>
<script>
    let arr=['img/1.webp','img/2.webp','img/3.webp','img/4.webp'];
    $('button').click(function(){
        var i = Math.floor(Math.random()*(3-0+1))+0 //表示生成随机数0~4
        $('div').show(); 
      $('div').append($('<img src="'+arr[i]+'" class="img1">'))
        console.log(i);
    })
</script>