初识Jquery（一）

骑猪看日落 2022-06-02 07:57 302阅读 0赞

现在来每天整理一下笔记，希望以后会有点用处。今天主要是讲一个Jquery选择器吧

## 一、js与jquery的文档就绪事件 ##

### js的文档就绪事件 ###

window.onload=function(){ 
    $(document.getElementById("text")).hide();
    }

### jquery的文档就绪事件 ###

$(document).ready(function(){ 
    $("#text").show(2000);//表示用2s显示元素
    })
    //简写是$(function(){ 
    })

1.  onload，指示页面包含图片等文件在内的所有元素都加载完成。如果定义多个，js的文档就绪事件执行最后一个。
2.  ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；jquery就绪事件全部都会执行（效率高于js）

## 二、toggleClass与toggle ##

1.  toggleClass()：样式规则的来回切换`toggleClass("highLight")`
2.  toggle()：显示，隐藏的来回切换

## 三、Jquery选择器 ##

#### 1.基本选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>#id</code></td> 
   <td>根据id属性值选取元素</td> 
   <td>单个元素</td> 
  </tr> 
  <tr> 
   <td><code>.class</code></td> 
   <td>根据class属性值选取元素</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>element</code></td> 
   <td>根据给定的标签定选取元素</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>*</code></td> 
   <td>选取所有元素，包括<code>&lt;html&gt;</code>和<code>&lt;body&gt;</code></td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>selector1,selector2,...</code></td> 
   <td>将每一个选择器匹配到的元素合并后一起返回</td> 
   <td>元素集合</td> 
  </tr> 
 </tbody> 
</table>

#### 2.过滤选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>first()或:first</code></td> 
   <td>获取第一个元素</td> 
   <td>单个元素</td> 
  </tr> 
  <tr> 
   <td><code>last()或last</code></td> 
   <td>获取最后一个元素</td> 
   <td>单个集合</td> 
  </tr> 
  <tr> 
   <td><code>:not(selector)</code></td> 
   <td>获取除给定选择器之外的所有元素</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:even</code></td> 
   <td>获取索引值为偶数的元素，索引从0开始</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:odd</code></td> 
   <td>获取索引值为奇数的元素，索引从0开始</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:eq(index)</code></td> 
   <td>获取索引值为index的元素，索引从0开始</td> 
   <td>单个元素</td> 
  </tr> 
  <tr> 
   <td><code>:gt(index)</code></td> 
   <td>获取索引值大于为index的元素，索引从0开始</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:lt(index)</code></td> 
   <td>获取索引值小于为index的元素，索引从0开始</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:header</code></td> 
   <td>获取所有标题元素，如h1~h6</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:animated</code></td> 
   <td>获取正在执行动画效果的元素</td> 
   <td>元素集合</td> 
  </tr> 
 </tbody> 
</table>

#### 3.内容选择器（根据元素中的文字内容或所包含的子元素特征获取元素） ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:contains(text)</code>（区分大小写）</td> 
   <td>获取含有文本内容为text的元素</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:empty</code></td> 
   <td>获取<strong>不包含</strong>后代元素或者文本的空元素</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:has(selector)</code></td> 
   <td>获取包含后代元素为selector元素</td> 
   <td>元素集合</td> 
  </tr> 
  <tr> 
   <td><code>:parent</code></td> 
   <td>获取含有后代元素或者文本的非空元素</td> 
   <td>元素集合</td> 
  </tr> 
 </tbody> 
</table>

#### 4.属性过滤选择器（根据元素的某个属性获取元素） ####

#### 5.层次选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>语法</th> 
   <th>功能</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>后代选择器</td> 
   <td>selector1 selector2</td> 
   <td>从selector1的后代元素里选取selector2</td> 
   <td>元素集合，如<code>$("#nav span")</code>表示选取#nav下的<code>&lt;span&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>子选择器</td> 
   <td>selector1 &gt; selector2</td> 
   <td>从selector1的子元素里选取selector2</td> 
   <td>元素集合，如<code>$("#nav&gt;span")</code>表示选取#nav下的<code>&lt;span&gt;</code>元素</td> 
  </tr> 
  <tr> 
   <td>相邻元素选择器</td> 
   <td>selector1+selector2</td> 
   <td>从selector1后面的第一个兄弟元素里选取selector2</td> 
   <td>元素集合，如<code>$("h2+dl ")</code>表示紧邻<code>h2</code>元素之后的同辈元素dl</td> 
  </tr> 
  <tr> 
   <td>同辈元素选择器</td> 
   <td>selector1~selector2</td> 
   <td>从selector1后面的所有兄弟元素里选取selector2</td> 
   <td>元素集合，如如<code>$("h2~dl ")</code>表示选取<code>h2</code>元素后面的所有同辈元素dl</td> 
  </tr> 
 </tbody> 
</table>

#### 6.表单选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:enabled</code></td> 
   <td>选取可用的表单元素</td> 
  </tr> 
  <tr> 
   <td><code>:disabled</code></td> 
   <td>选取不可用的表单元素</td> 
  </tr> 
  <tr> 
   <td><code>:checked</code></td> 
   <td>选取被选中的<strong>复选框</strong>元素</td> 
  </tr> 
  <tr> 
   <td><code>:selected</code></td> 
   <td>选取被选中的<strong>下拉框</strong>元素</td> 
  </tr> 
 </tbody> 
</table>