jQuery

jQuery

jQuery是一个js库，它可以让js的DOM操作更简单，在html中用<script></script>标签导入，但一个<script>标签在导入jQuery之后不能在内部写js代码

导入：

<script src="js/jquery.min.js" type="text/javascript"></script>

一、jQuery操作节点

1. 操作节点：$(css选择器)

$(‘#div2>a’) -----和后代选择器效果一样

$(‘p + a’) -----获取紧跟着p标签的a标签

$(‘#p1~*’)-----获取和id是p1的标签的后面的所有同级标签

$(‘div:first’)-----第一个div标签

$(‘p:last’)-----最后一个p标签

$(‘div *:first-child’)-----找到所有div标签中的第一个子标签

<div id="div1">
    <p>我是段落1</p>
    <p class="c1">我是段落2</p>
    <a href="">我是超链接</a>
</div>
<script>
    result=$('#div1>.c1')
    console.log(result)		
</script>

2. 创建、添加和删除节点

(1). 创建节点$(html代码)

例如：$('<div style="color:red">我是div</div>>')

<script>
    p=$('<p class="c1">我是段落4</p>')
    div=$('<div><span>苹</span></div>')
</script>

(2). 添加节点

a. 节点1.append(节点2)–在节点1中的最后添加节点2

b. 节点1.prepend(节点2)–在节点1中的最前添加节点2

c. 节点1.before(节点2)–将节点2放到节点1前面

d. 节点1.after(节点2)–将节点2放到节点1后面

<script>
    $('body').append(p)
    $('body').prepend(div)
    $('div').before('<img src="./img/car.png" alt="">')
</script>

(3). 删除节点

remove()–删除指定标签

empty()–清空指定标签

<script>
    $('#div1').remove()
</script>

3. 修改节点属性和节点内容

<a href="https://www.baidu.com" id="a1">百度</a>
<script>
    // (1)获取和修改标签内容
    //获取操作:标签.text()  标签.html()
    $('#a1').text()
    // 修改操作:标签.text(新数据)  标签.html(新数据)
    $('#a1').text('京东')
    // (2)普通属性的获取和修改 
    // 标签.attr(属性)
    // 标签.attr(属性,新属性)
    console.log($('#a1').attr('href'))
    $('#a1').attr('href','https://www.jd.com')


    // value属性
    // $('input').val()
    // $('input').val(新属性)
   	// 上面的函数不传参就是获取值，传参就是修改值
</script>

二、jQuery事件绑定

1. 直接绑定

<button id="btn1" class="c1">按钮1</button>
<button id="btn2" class="c1">按钮2</button>
<!-- jQuery绑定方式 -->
<script>
    $('.c1').on('click',function(){
        alert('你好！'+this.innerText)
    })
</script>
<!-- 原生js绑定方式 -->
<script>
    btns=document.getElementById('c1')
    for(i=0;i<btns.length;i++){
        btns[i].onclick=function(){
            alert('你好！'+this.innerText)
        }
    }
</script>

2. 间接绑定

通过父标签给指定的子标签绑定事件

标签.on(事件名,子标签选择器，函数)

<button id="btn1" class="c1">按钮1</button>
<button id="btn2" class="c1">按钮2</button>
<button id="add" onclick="add()">添加</button>
<script>
    $('body').on('click','.c1',function(){
        alert('你好！'+this.innerText)
    })
    num=4
    function add(){
        num++
        $('#add').before($('<button class="c1">按钮'+num+'</button>'))
    }
</script>

两种方法的区别：间接绑定可以作用后面添加的标签，但是直接绑定无法作用