jQuery初学

jQuery认识

jQuery是一个JavaScript的第三方模块（第三方类库）

jQuery快速上手

• 下载jQuery

Download the compressed, production jQuery 3.7.1

• 点击后另存即可

寻找标签（与css选择器一致）(直接寻找)

可以用$(“XXX”)进行寻找标签

ID选择器

<h1 id='txt'>1</h1>


$('#txt')

样式选择器（类选择器）

<h1 class='txt'>1</h1>


$('.txt')

标签选择器

<h1>1</h1>


$('txt')

层级选择器

<h1 id='txt'>
    <div class='t'>
         <a>1</a>   
    </div>
</h1>


$('#txt .t a')

多选择器

<h1 id='c1'>c1</h1>
<h1 id='c2'>c2</h1>



$('#c1 #c2')

属性选择器

<h1 id='txt' name='c1'>1</h1>
<h1 id='txt' name='c2'>2</h1>
<h1 id='txt' name='c3'>3</h1>


$("h1[name='c2']")

间接寻找标签

找寻上一个兄弟

<div>
    <div></div>
    <div id="c1"></div>
    <div></div>
</div>

$("#c1").prev() 

找寻下一个兄弟

<div>
    <div></div>
    <div id="c1">
        <div></div>
    </div>
    <div></div>
</div>

$("#c1").next()        //下一个
$("#c1").next().next()    //下一个的下一个

找寻所有的其他的兄弟

<div>
    <div></div>
    <div id="c1">
        <div></div>
    </div>
    <div></div>
</div>

$("#c1").siblings()

找父子

<div>
    <div>1</div>
    <div id="c1">
        <div>2</div>
    </div>
    <div>3</div>
</div>
<div>
    <div>4</div>
    <div id="c2">
        <div class="d1">5</div>
    </div>
    <div>6</div>
</div>


$("#c1").parent()  //找父亲
$("#c1").children()  //找孩子
$("#c2").children(".d1")  //找孩子中的d1
$("#c1").find("div")  //找所有子孙中的div

标签的修改

删除某个标签的样式

$("div").removeClass("c1");

判断标签是否有样式

$("div").hasClass("c1");

添加某个标签的样式

$("div").addClass("c1");