jQuery

74 阅读1分钟

jquery 可以理解为是 js原生封装了很多的好用的方法

<body>
    <p id="p1" class="p1 p2">马上要过年了,好激动,不想上学</p>
    <p class="p1 p2">马上要过年了,好激动,不想上学</p>
    <p class="p1">马上要过年了,好激动,不想上学</p>

</body>

标签选择器

$('p').css('background','red')

css方法 第一个参数是属性 第二个参数是值 都是字符串类型

类选择器

$('.p1').css({'background':'green','fontSize':'30px'}

id选择器 唯一的 只要有一个id选择器其他同名的就不生效了

$('#p1').css('background','red')

$('.p1.p2').css('background','red')

并集选择器

$('#p1,.p1').css('background','red')

既要有.p1 又要有.p2

$('.p1.p2').css('background','red')

全局选择器

属性值 支持数字和字符串

$('*').css({margin:0,padding:0})

 <!-- <p>我要加入饿了么的队伍中</p><br>
    <a>我要加入美团的队伍,成为一名合格的黄袍加身的人</a><br>
    <a href="" class="a1">我要去阿里巴巴</a><br>
    <a class="a2">我要去腾讯加入马化腾的队伍</a><br>
    <h1>我要加入滴滴的公司</h1> -->
    <a href="http://www.baidu.com">我要去加入百度</a><br>
    <a href="www.baidu.cn">我要去百度搜索</a><br>
    <a href="baidu.com">我不要去百度</a><br>

    <script src="./jquery-1.12.4.js"></script>
    <script>

属性选择器可以根据是否包含某属性来选取元素

$('a[href]').css('color','red')

选取不等于属性是某个特定值的元素

$('a[class!=a1]').css('color','red')

指定属性值以指定值开头的元素

$('a[href^=www]').css('background','red')

指定属性值以指定值结尾的元素

(a[href('a[href=com]').css('background','red')

指定属性值包含指定值的元素

$('a[href*=baidu]').css('background','red')

  /* 后代选择器 */
    // $('ul p').css('background','red');
    /* 子级选择器 */
    // $('ul > p').css('background','red');
    // $('li > p').css('background','red');

    /* 相邻选择器用来选取紧邻目标元素的下一个元素 */
    // $('p+li').css('background','red');

    /* 同辈选择器用来选取目标元素之后的所有同辈元素 */
    // $('p ~ li').css('background','red');