Jquery学习----选择器
Posted 再见吧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery学习----选择器相关的知识，希望对你有一定的参考价值。
学习Jquery选择器之后，可以发现与css的选择器几乎相同，可能也就是最新的css选择器还不能在jquery中实现，但那都很少用。
下面是Jquery中常见的选择器：
一、基本选择器
$("div").css("background-color", "red");//表示对所有的div增加背景颜色--红色。
$(".divClass").css("background", "gray");//表示对所有class为‘divClass‘的元素设置背景色--灰色
二、层次选择器
//下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span
$(".spanclass+span").css("color", "blue").css("font-size", 33);
$(".spanclass").next().next().css("color", "blue").css("font-size", 33);
//下面这两个表示所有的后面的同辈元素
$(".spanclass~span").css("color", "blue").css("font-size", 33);
$(".spanclass").nextAll().css("color", "blue").css("font-size", 33);
//下面这个表示与其同辈的无论前后的span，不包括本身
$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 10 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 11 <style> 12 div { 13 border: 1px solid blue; 14 width: 200px; 15 height: 250px; 16 } 17 </style> 18 19 </head> 20 21 <body> 22 23 <h1><span>Jquery Selector Test子代</span></h1> 24 <h1> 25 <p>aaaaa<span>wo在span中是子代的子代</span></p> 26 </h1> 27 <div style="float:left">我是div1</div> 28 <div class="divClass" style="float:left"><span class="spanclass">我是div2</span><span>紧跟的部分哈哈</span><span>紧跟的部分哈哈</span></div> 29 <div style="float:left"><span>我是div3</span></div> 30 <div style="float:left"><span>我是div4</span></div> 31 <div style="float:right"><span>我是div5</span></div> 32 <div style="clear:both"></div> 33 <div class="divClass">我是div6</div> 34 35 36 37 <script> 38 //写法一：dom加载完就执行内部 39 $(document).ready(function() { 40 //dom加载完就执行的部分 41 $("div").css("background-color", "red"); 42 43 }) 44 45 //写法二：dom加载完就执行内部简写 46 $(function() { 47 $("div").css("background-color", "yellow"); 48 49 }) 50 //Jquery可以无限次的写dom加载完之后执行的方法，不同于window.onload,只能写一次 51 $(function() { 52 $(".divClass").css("background", "gray"); 53 }) 54 55 /* $(function() { 56 $("span,.divClass").css("color", "red").css("font-size", 20); 57 }) */ 58 //$("h1 span").css("color", "blue"); //这个是h1下所有的子代，孙子辈也可以 59 //$("h1>span").css("color", "blue"); //这个是h1下第一子代，孙子不可以 60 //下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span 61 //$(".spanclass+span").css("color", "blue").css("font-size", 33); 62 // $(".spanclass").next().next().css("color", "blue").css("font-size", 33); 63 //下面这两个表示所有的后面的同辈元素 64 //$(".spanclass~span").css("color", "blue").css("font-size", 33); 65 $(".spanclass").nextAll().css("color", "blue").css("font-size", 33);
//下面这个表示与其同辈的无论前后的span，不包括本身
$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
66 </script> 67 68 </body> 69 70 </html>
以上是关于Jquery学习----选择器的主要内容，如果未能解决你的问题，请参考以下文章