jQuery选择器上

最新推荐文章于 2024-11-02 12:42:04 发布

aipmunj7655

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Itwonderful/p/5678726.html

版权

<body>
<div id="jquery">jQuery
   <p>1</p> 
   <p>2</p> 
   <p>3</p> 
 </div>
   <p>4</p> 
   <p>5</p>
   <p>6</p>
  </div>
</div>
<div class="1 2">jQuery1</div>
<div class="1">jQuery2</div>
<span bs='1'>今天天气不错</span>
<span bs='2'>卡屯~海瑟搜</span>
<span bs='num1'>卡屯~海瑟搜</span>
<span bs='num2'>卡屯~海瑟搜</span>
<span bs='no'>卡屯~海瑟搜</span>
<span bs='222no1222'>卡屯~海瑟搜</span>
</body>
</html>
<script>
$(document).ready(function(e) {
    jQuery.noConflict();//jQuery 将$所有权让出
    var $$ = jQuery;
    $$("#jquery").css('color','red');
    //alert($$("#jquery").get(0));//返回DOM中索引为0的元素
    $('div').eq(1).css('color','green');
    $('div>p').css('color','blue');//div中的儿子变蓝色
    //群组选择器用逗号分隔，多个class直接跟着写，后代选择器用空格分隔
    $('.1.2').css('color','maroon');
    //层次选择器
    find();//后代选择器
    children();//子选择器
    next();//当前节点同级的下一个节点
    nextAll();//当前节点同级的下面所有节点
    prev();//当前节点同级的上一个节点
    prevAll();//当前节点同级的上面所有节点
    nextUntil('p');//当前节点同级的下面所有节点 遇到p标签就停止
    prevUntil('p');//当前节点同级的上面所有节点 遇到p标签就停止
    siblings();//当前节点同级的上下所有节点
    //属性选择器
    $('span[bs]').css('color','red');//选取所有包含bs属性的元素
    $('span[bs = 1]').css('color','orange');//选取含有属性bs并且bs属性值是1的元素
    $('span[bs != 1]').css('color','orange');//选取含有属性bs并且bs属性值不是1的元素
    $('span[bs^=num]').css('color','blue');//选取含有属性bs并且bs属性值以num开头的元素
    $('span[bs$=num]').css('color','blue');//选取含有属性bs并且bs属性值以num结尾的元素
    $('span[bs*=no1]').css('color','red');//选取含有属性bs并且属性值包含no1字符串的元素
    
});
</script>