Blogger Information
Blog 16
fans 7
comment 1
visits 11484
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月19日- jQuery简单选择器
Eric
Original
641 people have browsed it

1、ID选择器$(#name)

  1. <button id="btn">按钮</button>
  2. <script>
  3. $(function () {
  4. // 点击按钮改变按钮的颜色
  5. $('#btn').click(function () {
  6. $(this).css('color','red');
  7. });
  8. });
  9. </script>

2、类选择器$(.name)

  1. <p class="text">这里是一段文字</p>
  2. <button id="btn">按钮</button>
  3. <script>
  4. $(function () {
  5. // 点击按钮隐藏文字
  6. $('#btn').click(function () {
  7. $('.text').hide();
  8. });
  9. });
  10. </script>

3、元素选择器$('元素')

  1. <ul>
  2. <li>网站首页</li>
  3. <li>产品中心</li>
  4. <li>新闻资讯</li>
  5. <li>文档下载</li>
  6. </ul>
  7. <script>
  8. $(function () {
  9. // hover 菜单改变颜色
  10. $('li').hover(function () {
  11. $(this).css('color','#df8348');
  12. },function () {
  13. $(this).css('color','#666666');
  14. });
  15. });
  16. </script>

4、兄弟选择器$('~')

  1. <ul>
  2. <h2>中文网</h2>
  3. <p>php中文网</p>
  4. <li>网站首页</li>
  5. <li>产品中心</li>
  6. <li>新闻资讯</li>
  7. <li>文档下载</li>
  8. </ul>
  9. <script>
  10. $(function () {
  11. // p后面所有的li 被选中
  12. $('p ~ li').hover(function () {
  13. $(this).css('color','#df8348');
  14. },function () {
  15. $(this).css('color','#666666');
  16. });
  17. });
  18. </script>

5、子代选择器$('ul > p')

  1. <ul>
  2. <h2>中文网</h2>
  3. <p>php中文网</p>
  4. <li>网站首页</li>
  5. <li>产品中心</li>
  6. <li>新闻资讯</li>
  7. <li>文档下载</li>
  8. </ul>
  9. <script>
  10. $(function () {
  11. $('ul > p').hover(function () {
  12. $(this).css('color','#df8348');
  13. },function () {
  14. $(this).css('color','#666666');
  15. });
  16. });
  17. </script>

6、后代选择器$('ul li')

  1. <ul>
  2. <div>
  3. <li>菜单一</li>
  4. <li>菜单二</li>
  5. </div>
  6. <li>网站首页</li>
  7. <li>产品中心</li>
  8. <li>新闻资讯</li>
  9. <li>文档下载</li>
  10. </ul>
  11. <form action="">
  12. 用户:<input type="text">
  13. 密码:<input type="password">
  14. </form>
  15. <script>
  16. $(function () {
  17. //ul元素里面所有的li被选中
  18. $('ul li').hover(function () {
  19. $(this).css('color','#df8348');
  20. },function () {
  21. $(this).css('color','#666666');
  22. });
  23. });
  24. </script>

7、紧邻选择器$('h2 + p')

  1. <ul>
  2. <h2>标题</h2>
  3. <p>段落</p>
  4. <li>网站首页</li>
  5. <li>产品中心</li>
  6. <li>新闻资讯</li>
  7. <li>文档下载</li>
  8. </ul>
  9. <script>
  10. $(function () {
  11. //h2后面的p被选中
  12. $('h2 + p').hover(function () {
  13. $(this).css('color','#df8348');
  14. },function () {
  15. $(this).css('color','#666666');
  16. });
  17. });
  18. </script>

THE END !

Correcting teacher:西门大官人西门大官人

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!