jQuery基础选择器

日期:2018-02-25 15:24:49 章节:  jquery选择器

jQuery基础选择器包括:

(1) #id :根据id属性获取元素

(2)Element :根据标签名获取元素

(3)selector1,selector2 :匹配列表中所有元素

(4).class :根据class属性获取元素

首先新建demo1.html,并引入jquery文件。

<script src="js/jquery-3.2.1.min.js"></script>

写html测试标签元素如下:

<div id="idBox">ID选择器</div>
<span>标签名选择器</span>
<div id="selector">
    <p>这是标题</p>
    <p>文章内容</p>
</div>
<div class="idBox">class选择器</div>

在body结尾处写入js脚本。分别做如下操作

(1)将id为idBox的color变为红色

(2)将span内容变成黄色

(3)将id为selector下所有p内容变为蓝色

(4)class选择器,将字体大小改为24px

代码如下:

<script>
    $(function () {
       //将id为idBox的color变为红色
        $("#idBox").css("color","red");
        //选择页面中所有span标签元素
        var spanList=$('span');
        spanList[0].style.color='yellow';
        //选择id为selector下所有的p
        var pList=$("#selector p");
        pList.each(function (key, item) {
            item.style.color='blue';
        })
        //class 选择器
        $('.idBox').css('font-size','24px');
    });
</script>

原文地址:http://www.isoftvip.com/topics/jquery-vedio/jquery-id-class-selector.html

最终效果如下图,就说明你代码正确啦

TIM截图20180225151111.png