<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>