一、简介
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
二、选择器
1.id选择器
<body> <div>我是一个div</div> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('#demo').css('color','red'); </script> </body>
2.元素标签名选择器element
<body> <div>我是一个div</div> <div>我是一个div</div> <div>我是一个div</div> <h3>标题1</h3> <h3>标题2</h3> <h3>标题3</h3> <h3>标题4</h3> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('div').css('color','red'); $('h3').css('color','red').css('font-size','30px'); </script> </body>
3.类选择器
<body> <h3>我是一个拥有class的h3</h3> <h3>我是一个拥有class的h3</h3> <h3 >我是一个拥有class的h3</h3> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('.demo').css('color','red'); </script>
4.*选择器（匹配所有元素）
<body> <div>我是一个div</div> <div>我是一个div</div> <div>我是一个div</div> <div>我是一个div</div> <h3>标题1</h3> <h3>标题2</h3> <h3>标题3</h3> <h3>标题4</h3> <h3>我是一个拥有class的h3</h3> <h3>我是一个拥有class的h3</h3> <h3 >我是一个拥有class的h3</h3> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('*').css('color','red'); //选择所有元素 <script> </body>
5.群组选择器
<body> <div>我是一个div</div> <h3>标题1</h3> <h3>我是一个拥有class的h3</h3> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('#demo,.demobox,h3').css('color','red'); </script> </body>
6.后代选择器
<body> <ul> <li> <a>ul的li的a标签</a> <a>ul的li的a标签</a> <a>ul的li的a标签</a> </li> </ul> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('ul li a').css('color','red'); </script> </body>
6.指定选择器
<body> <div>class的div</div> <p>class的p</p> <div>普通div</div> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('div.demo').css('color','red'); </script> </body>
7.子选择器
<body> <div> <p>子p1</p> <p>子p2</p> <p>子p3</p> <div> <p>孙子p1</p> <p>孙子p2</p> <p>孙子p3</p> </div> </div> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('#demo>p').css('color','red'); </script> </body>
8.next(选择器)
<body> <p>p1</p> <p>p2</p> <p>p3</p> <div>div</div> <P>p4</P> <p>p5</p> <p>p6</p> <P>p7</P> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> //$('#demo').next('p').css('color','red'); //第一种方法 $('#demo+p').css('color','red'); //第二种方法 </script> </body>
9.nextall(选择器)
<body> <p>p1</p> <p>p2</p> <p>p3</p> <div>div</div> <P>p4</P> <p>p5</p> <p>p6</p> <P>p7</P> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> //$('#demo').nextAll().css('color','red'); //第一种方法 $('#demo~p').css('color','red'); //第二种方法 </script> </body>
10.prev方法
<body> <p>p1</p> <p>p2</p> <p>p3</p> <div>div</div> <P>p4</P> <p>p5</p> <p>p6</p> <P>p7</P> <script src="https://www.jb51.net/jquery-2.2.3.min.js"></script> <script> $('#demo').prev().css('color','red'); </script> </body>
11.prevall方法