jQuery基础2 —— 元素查找与事件

淩亂°似流年 2023-08-17 16:07 82阅读 0赞

###### 写在前面 ######

> jQuery可以进行链式操作，但最多3-4个链，尽量避免多链

$("ul").css().attr().addClass();
    $("ul").css().addClass().children().addClass()

###### 1. jQuery元素查找 ######

> `next/nextAll/prev/prevAll`方法取得的都是元素集合，而不是单个元素。在调用这几个方法的是一个元素集合，则按照以下规则匹配：  
> ① 调用`next`、`nextAll`会获取元素集合中的最后一个元素的下一个/之后所有满足条件的元素。  
> ② 调用`prev`、`prevAll`会获取元素集合中第一个元素的前一个/之前所有满足条件的元素

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>children(expr)</code></td> 
   <td>若无参代表查找父元素的所有子元素。若有参，参数为匹配条件</td> 
  </tr> 
  <tr> 
   <td><code>next(expr)</code></td> 
   <td>匹配当前元素的下一个紧邻的满足条件的同胞元素</td> 
  </tr> 
  <tr> 
   <td><code>nextAll(expr)</code></td> 
   <td>匹配当前元素之后的所有满足条件的同辈元素</td> 
  </tr> 
  <tr> 
   <td><code>prev(expr)</code></td> 
   <td>匹配当前元素的前一个紧邻的满足条件的同胞元素</td> 
  </tr> 
  <tr> 
   <td><code>parent(expr)</code></td> 
   <td>匹配当前元素的满足条件的父元素</td> 
  </tr> 
  <tr> 
   <td><code>parents(expr)</code></td> 
   <td>匹配当前元素的满足条件的祖先元素</td> 
  </tr> 
  <tr> 
   <td><code>siblings(expr)</code></td> 
   <td>匹配当前元素的满足条件的同辈元素（之前之后的都会匹配到）</td> 
  </tr> 
  <tr> 
   <td><code>each()</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>map()</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>add(expr|ele|html|obj)</code></td> 
   <td>将括号里匹配到的元素添加到最终的匹配结构集中</td> 
  </tr> 
 </tbody> 
</table>

<p>Hello</p><span>Hello Again</span>
    <p>Hello</p><p><span id="a">Hello Again</span></p>
    <javascript>
    	$("p").add("span")
    	$("p").add(document.getElementById("a"))
    </javascipt>

###### 2. jQuery事件 ######

> 1.  `[]`内的内容可不写
> 2.  该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
> 3.  所有事件中绑定的data可通过e.data来获取
> 4.  只有在鼠标离开被选元素时才会触发`mouseleave`事件。若鼠标离开任何子元素，仍会触发`mouseout`事件
> 5.  不论鼠标指针穿过被选元素或其子元素，都会触发 `mouseover` 事件。只有在鼠标指针穿过被选元素时，才会触发 `mouseenter` 事件。

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>blur([data],fn)</code></td> 
   <td>表单元素失去焦点时触发</td> 
  </tr> 
  <tr> 
   <td><code>change([data],fn)</code></td> 
   <td>当元素的值发生改变时，会发生 change 事件</td> 
  </tr> 
  <tr> 
   <td><code>click([data],fn)</code></td> 
   <td>点击</td> 
  </tr> 
  <tr> 
   <td><code>dbclick([data],fn)</code></td> 
   <td>双击元素</td> 
  </tr> 
  <tr> 
   <td><code>focus([data],fn)</code></td> 
   <td>获取焦点</td> 
  </tr> 
  <tr> 
   <td><code>keydown([data],fn)</code></td> 
   <td>键盘按键下</td> 
  </tr> 
  <tr> 
   <td><code>keyup([data],fn)</code></td> 
   <td>键盘按键起</td> 
  </tr> 
  <tr> 
   <td><code>keypress([data],fn)</code></td> 
   <td>键盘按键下和起的衔接处</td> 
  </tr> 
  <tr> 
   <td><code>mousedown([data],fn)</code></td> 
   <td>当鼠标移动到某一元素后按下，与<code>mouseup</code>搭配使用</td> 
  </tr> 
  <tr> 
   <td><code>mouseup([data],fn)</code></td> 
   <td>当鼠标移动到某一元素后松开</td> 
  </tr> 
  <tr> 
   <td><code>mouseover([data],fn)</code></td> 
   <td>进入子元素时也会触发某一元素的<code>mouseover</code>事件。一般与<code>mouseout</code>搭配使用</td> 
  </tr> 
  <tr> 
   <td><code>mouseout([data],fn)</code></td> 
   <td>离开某一元素的子元素时也会触发<code>mouseout</code>事件</td> 
  </tr> 
  <tr> 
   <td><code>mouseenter([data],fn)</code></td> 
   <td>进入某一个元素，大多数会和<code>mouseleave([data],fn)一起使用</code></td> 
  </tr> 
  <tr> 
   <td><code>mouseleave([data],fn)</code></td> 
   <td>离开某一个元素</td> 
  </tr> 
  <tr> 
   <td><code>mousemove([data],fn)</code></td> 
   <td>在某一个元素上移动。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标</td> 
  </tr> 
  <tr> 
   <td><code>hover([over],out)</code></td> 
   <td>事件切换。over为鼠标移到元素上要触发的函数。out为鼠标移出元素要触发的函数。若只写一个函数，则代表移入和移出时都触发该函数</td> 
  </tr> 
  <tr> 
   <td><code>bind(type,[data],fn)</code></td> 
   <td>type中可写多个事件，且不同事件用空格分隔开.一般与<code>unbind</code>事件搭配</td> 
  </tr> 
  <tr> 
   <td><code>unbind(type,[data|fn])</code></td> 
   <td>从每一个匹配的元素中删除绑定的事件。若没有参数，则删除所有绑定的事件。若有两个参数，则删除该处理函数，即该函数不会再触发(一个类型的事件可以有多个绑定函数)</td> 
  </tr> 
  <tr> 
   <td><code>on(events,[selector],[data],fn)</code></td> 
   <td>该方法中，若绑定多个事件，需要用空格间隔开。可以使用该方法实现事件委托（只能将事件委托给后代）。也可以使用该方法定义自定义事件</td> 
  </tr> 
  <tr> 
   <td><code>off(events,[selector],[fn])</code></td> 
   <td><code>seletor</code>用来找到事件委托的对象</td> 
  </tr> 
  <tr> 
   <td><code>one(type,[data],fn)</code></td> 
   <td>为某一个元素绑定一次性事件函数</td> 
  </tr> 
  <tr> 
   <td><code>trigger(type,[data])</code></td> 
   <td>自动触发指定类型事件（可在type处写用on方法定义的自定义事件的名称）。传参必须写成数组形式。当当前元素的父元素有相同类型的事件时，也会触发，一直到根元素。</td> 
  </tr> 
 </tbody> 
</table>

$("p").click( function (event, a, b) { 
      // 一个普通的点击事件时，a和b是undefined类型
      // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
    } ).trigger("click", ["foo", "bar"]);
    
    $("input").select(function () { 
            $(this).css("color", "red");
        }).trigger("select").on("my", function () { 
            console.log("自定义事件");
        }).trigger("my");

###### 3. 事件的执行参数 ######

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>timeStamp</code></td> 
   <td>时间戳(从打开浏览器到触发事件之间的毫秒数)</td> 
  </tr> 
  <tr> 
   <td><code>currentTarget</code></td> 
   <td>最终冒泡到的最高级元素</td> 
  </tr> 
  <tr> 
   <td><code>target</code></td> 
   <td>最初触发事件的dom元素</td> 
  </tr> 
  <tr> 
   <td><code>data</code></td> 
   <td>传递的参数</td> 
  </tr> 
  <tr> 
   <td><code>stopPropagation()</code></td> 
   <td>阻止事件冒泡</td> 
  </tr> 
  <tr> 
   <td><code>preventDefault()</code></td> 
   <td>阻止事件的默认行为</td> 
  </tr> 
  <tr> 
   <td><code>return false</code></td> 
   <td>阻止冒泡+阻止默认行为</td> 
  </tr> 
 </tbody> 
</table>

###### 4. 文档处理 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>append(content|fn)</code></td> 
   <td>向每个匹配的元素内部追加内容。若<code>content</code>为标签或<code>function</code>返回值为html,则是向每个匹配的元素内部追加一个dom元素。写选择器当做字符串处理。也可以写jQuery对象。fn返回html字符串</td> 
  </tr> 
  <tr> 
   <td><code>appendTo(content)</code></td> 
   <td>向<code>content</code>内部追加调用该方法的对象集合中的每个元素。content为jQuery对象、已经在页面存在的dom元素</td> 
  </tr> 
  <tr> 
   <td><code>prepend(content|fn)</code></td> 
   <td><code>content</code>为要插入到目标元素内部最前面的内容。content可为jQuery对象、标签元素。fn只能返回html字符串！</td> 
  </tr> 
  <tr> 
   <td><code>prependTo(content)</code></td> 
   <td>向<code>content</code>匹配的元素的初始处插入调用该方法的元素</td> 
  </tr> 
 </tbody> 
</table>