jQuery精要-优快云博客

本文链接：https://blog.youkuaiyun.com/Sam_Wsp/article/details/102383896

本文深入解析jQuery框架，涵盖其设计理念、核心功能及应用实例，包括选择器、表单过滤、属性选择器等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. jQuery的意义：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二.jQuery中的选择器

1.基本选择器
（1）.ID选择器：#ID的名称
（2）.类选择器：以“.”开头“.类名”
（3）.元素选择器：标签的名称
（4）.通配符选择器：*
（5）.选择器类选择器：选择器1.选择器2

2.jQ中的层级选择器
（1）.子元素选择器：选择器1>选择器2
（2）.后代选择器: 选择器1 儿孙
（3）.相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
（4）.找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟

3.jQ中的表单过滤器

$(function() {
   //:表单类型
   $(':text').css('backgroundColor','pink');
   $('#btn').click(function() {
    $('select option:selected').css('backgroundColor', 'red');
    alert($('select option:selected').size());
   });
  })

<body>
 <input type="text">
 <select multiple="multiple">
  <option>OP1</option>
  <option>OP2</option>
  <option>OP3</option>
  <option>OP4</option>
 </select>
 <input type="button" value="点我" id="btn">
</body>

4.基本过滤器

<!-- 1.导入jq文件 -->
  <script type="text/javascript" src="jquery-2.1.0.js"></script>
  <!-- 2.文档加载事件 -->
  <script type="text/javascript">
   $(function() {
    $('#btn1').click(function() {
     $('div:first').css('background-color','pink');
    });
    $('#btn2').click(function() {
     $('div:even').css('background-color','deeppink');
    })
    $('#btn3').click(function() {
     $('div:odd').css('background-color','hotpink');
    })
    //gt  great than 大于
    //lt  less than 小于
    //eq  equlas 等于
    $('#btn4').click(function() {
     $('div:eq(2)').css('background-color', 'lightblue');
    })
   })
  </script>

<style type="text/css">
   div,span,p {
     width:140px;
     height:140px;
     margin:5px;
     background:#aaa;
     border:#000 1px solid;
     float:left;
     font-size:17px;
     font-family:Verdana;
   }
   div.mini { 
     width:55px;
     height:55px;
     background-color: #aaa;
     font-size:12px;
   }
   div.hide { 
     display:none;
   }
  </style>

<body>
  <input type="button" value="过滤出所有div中第一个元素" id="btn1" />
  <input type="button" value="过滤出所有div中偶数位的div" id="btn2" />
  <input type="button" value="过滤出所有div中奇数位的div" id="btn3" />
  <input type="button" value="过滤出所有div中找出索引大于2" id="btn4" />
  <br />
  <div id="one">  <!-- 0 -->
   <div class="mini">1-1</div>  <!-- 1 -->
  </div>
  <div id="two">  <!-- 2 -->
   <div class="mini">2-1</div> <!-- 3 -->
   <div class="mini">2-2</div> <!-- 4 -->
  </div>
  <div id="three">
   <div class="mini">3-1</div>
   <div class="mini">3-2</div>
   <div class="mini">3-3</div>
  </div>
  <span id="four">span</span>
 </body>

5.JQ中的属性选择器

<script type="text/javascript" src="jquery-2.1.0.js"></script>
 <script type="text/javascript">
  $(function() {
   //通过属性选择器找到含title的a标签
   $('a[href]').css('color', 'red');
   //找多个属性
   $('a[href][title]').css('color', 'pink');
   //属性值确定
   $('a[href][title="test2"]').css('color', 'deeppink');
  })
 </script>

<body>
 <a href="javasript:void(0)">国庆</a>
 <a href="javasript:void(0)" title="test">元旦</a>
 <a href="javasript:void(0)" title="test2">清明</a>
</body>

6.js和jq的转换

<script type="text/javascript" src="jquery-2.1.0.js"></script>
 <script type="text/javascript">
  $(function() {
   //给按钮绑定事件
   $('#btn').click(function() {
    //$('#div1').html('修改内容');
    //$('#div1').innerHTML = '1111';
    //将jq转换成js
    // var jsDiv = $('#div1')[0];
    // jsDiv.innerHTML = '111';
    //将js转换成jq
    var div = document.getElementById('div1');
    // div.html('111');
    var $div = $(div);
    $div.html('222');
   })
  });
 </script>

<body>
 <div id="div1">
  明天放假啦！！！
 </div>
 <input type="button" value="点点" id="btn">
</body>

jQ基础