JQuery（学习笔记一）初识JQuery

客官°小女子只卖身不卖艺 2022-05-15 09:59 241阅读 0赞

# 一、JQuery语法 #

## （1）基础语法： **$(*selector*).*function*()** ##

*  $ 定义 jQuery
 *  selector查询元素
 *  function() 执行对元素的操作

实例:

*  $(this).function() -操作当前元素
 *  $("p").function() - 操作所有 <p> 元素
 *  $("p.test").function() - 操作所有 class="test" 的 <p> 元素
 *  $("\#test").function() - 操作所有 id="test" 的元素

## （2）文档就绪 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$(document).ready(function(){ </p> <p>// your Jq code</p> <p>});</p> <p>//也可以更如下</p> <p>$(function(){ </p> <p>// your Jq code</p> <p>});</p> <p>//JavaScript 入口函数</p> <p>window.onload = function(){ </p> <p>//your js code</p> <p>}</p> </td> 
  </tr> 
 </tbody> 
</table>

ready()防止文档在完全加载（就绪）之前运行 jQuery 代码，必须在 DOM 加载完成后对 DOM 进行操作。

jQuery 入口函数与 JavaScript 入口函数的区别：

*   jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
 *   JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

# 二、JQuery 选择器 #

## （1）元素选择器 ##

在页面中选取所有 <p> 元素:

## （2）\#id 选择器 ##

在页面中选取id为test元素:

## （3）.class 选择器 ##

在页面中选取class为test元素:

## （4）更多选取 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <th>语法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>$("*")</td> 
   <td>选取所有元素</td> 
  </tr> 
  <tr> 
   <td>$(this)</td> 
   <td>选取当前 HTML 元素</td> 
  </tr> 
  <tr> 
   <td>$("p.intro")</td> 
   <td>选取 class 为 intro 的 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$("p:first")</td> 
   <td>选取第一个 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$("ul li:first")</td> 
   <td>选取第一个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素&nbsp;</td> 
  </tr> 
  <tr> 
   <td>$("ul li:first-child")</td> 
   <td>选取每个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素&nbsp;</td> 
  </tr> 
  <tr> 
   <td>$("[href]")</td> 
   <td>选取带有 href 属性的元素</td> 
  </tr> 
  <tr> 
   <td>$("a[target='_blank']")</td> 
   <td>选取所有 target 属性值等于 "_blank" 的 &lt;a&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$("a[target!='_blank']")</td> 
   <td>选取所有 target 属性值不等于 "_blank" 的 &lt;a&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(":button")</td> 
   <td>选取所有 type="button" 的 &lt;input&gt; 元素 和 &lt;button&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$("tr:even")</td> 
   <td>选取偶数位置的 &lt;tr&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$("tr:odd")</td> 
   <td>选取奇数位置的 &lt;tr&gt; 元素</td> 
  </tr> 
 </tbody> 
</table>

# 三、JQuery常用事件 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>事件</td> 
   <td>事件类型</td> 
   <td>使用</td> 
  </tr> 
  <tr> 
   <td>click</td> 
   <td>鼠标事件</td> 
   <td>$(<em>selector</em>).click(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>dbclick</td> 
   <td>鼠标事件</td> 
   <td> <p>$(<em>selector</em>).dblclick(<em>function</em>)</p> </td> 
  </tr> 
  <tr> 
   <td>mouseenter</td> 
   <td>鼠标事件</td> 
   <td>$(<em>selector</em>).mouseenter(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>mouseleave</td> 
   <td>鼠标事件</td> 
   <td>$(<em>selector</em>).mouseleave(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>keypress</td> 
   <td>键盘事件</td> 
   <td>$(<em>selector</em>).keypress(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>keydown</td> 
   <td>键盘事件</td> 
   <td>$(<em>selector</em>).keydown(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>keyup</td> 
   <td>键盘事件</td> 
   <td>$(<em>selector</em>).keyup(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>hover</td> 
   <td>键盘事件</td> 
   <td>$(<em>selector</em>).hover(<em>inFunction,outFunction</em>)</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>表单事件</td> 
   <td>$(<em>selector</em>).submit(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>表单事件</td> 
   <td>$(<em>selector</em>).change(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>表单事件</td> 
   <td>$(<em>selector</em>).focus(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>表单事件</td> 
   <td>$(<em>selector</em>).blur(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>load</td> 
   <td>文档/窗口事件</td> 
   <td>$(<em>selector</em>).load(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>文档/窗口事件</td> 
   <td>$(<em>selector</em>).resize(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>文档/窗口事件</td> 
   <td>$(<em>selector</em>).scroll(<em>function</em>)</td> 
  </tr> 
  <tr> 
   <td>unload</td> 
   <td>文档/窗口事件</td> 
   <td>$(<em>selector</em>).unload(<em>function</em>)</td> 
  </tr> 
 </tbody> 
</table>