jQueryの効果トラバーサルイベント

効果

  隠すと表示非表示()とshow()

  フェードフェードイン(速度、コールバック)、フェードアウト(速度、コールバック)、fadeToggle()メソッドを切り替えることができ、fadeToフェードイン()。フェードアウトとの間に(速度、不透明度、コールバック)()メソッド

  滑动$(セレクタ).slideDown(速度、コールバック); $(セレクタ).slideUp(速度、コールバック); $(セレクタ).slideToggle(速度、コールバック)。

内蔵反復合成写像

  $ .MAP(配列、関数は、(){});次いで、処理された各配列または機能のトラバーサルにアレイから採取します

VAR ATTR = [1,2,3]。
VAR newattr = $ .MAP(ATTR、関数(指数){ 
	リターン指数* 2; 
}); 
console.log(newattr); 
得到// newattr = [2,4,6]

  $ .Each(ATTR、関数(キー、値){});及び、各アレイ内のアレイまたはオブジェクトの処理を横断して処理または機能の関数の各々を横断することを目的とします

VAR ATTR = [ "名前"、 "年齢"、 "言います"]; 
$ .each(ATTR、関数(キー、値){ 
	アラート(ATTR [キー]); 
   //console.log(this); 
});

  $ .MAP()メソッドは、コールバック関数を介して、同時にアレイまたはオブジェクト部材を横断し、次に(これもあり、$ .each()の最大の差)は、別の新しい配列に切り替えることができます。

トラバーサル

  先祖  の親()メソッドは、直接の親要素の親要素を選択し()メソッドは、選択した要素のすべての要素の祖先を返し、それが文書のルート要素まで(<HTML>)までのすべての方法で返します

    parentsUntil()メソッドは、括弧内の選択された要素の要素との間に介在する全ての祖先要素を返します。これは、要素選択ブラケットから選ばれた元素が含まれていません

  子孫子供()メソッドは、選択した要素のすべての直接の子要素を返します。()メソッドが返す選択された要素の子孫要素、最後の世代までのすべての方法を見つけます。

  同胞の兄弟()メソッドは、選択された要素の同胞のすべての要素を返します。next()メソッドは、選択された要素の仲間の次の要素を返します。nextAll()メソッドは、すべての要素が要素を選択した同胞に従っ返します。nextUntil()メソッドの戻り全てとの間に介在する兄弟要素は、2つの指定されたパラメータに従います。

     上記方法と同様の作業PREV()、prevAll()とprevUntil()メソッド、

  濾過し、最初の()メソッドは、最初の要素の選択された要素を返します。最後に()メソッドは、選択された要素の最後の要素を返します。  EQ()メソッドは、要素が選択された要素のインデックス番号で指定されて戻ります。

      フィルタ()メソッドは、要素大会に一定の条件を返します。この方法では、条件を指定することができます。選択から削除不適格な要素は、予選の要素が返されます。一般検索要素を絞り込むために使用される方法は、選択された要素に結合されます。

      ない()メソッドは、基準に一致しないすべての要素を返します。代わりに、フィルタ付きではない()メソッド()。

      スライスは、()サブセットインデックス範囲指定されたマッチした要素のセットに縮小されます。。$( 'リー')スライス(2,4)の.css( '背景色'、 '赤')。

      各()     。$( "LI")各(関数(){$(この).ATTR(); })

イベント

  バインド()イベントハンドラは、一つ以上の整合素子に取り付けられました

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").bind("click",function(){
    alert("这个段落被点击了。");
  });
});
</script>
</head>
<body>

<p>点我!</p>

</body>
</html>

  


  blur() 触发、或将函数绑定到指定元素的 blur 事件  当元素失去焦点时发生 blur 事件。 blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。提示:该方法常与 focus() 方法一起使用。
  change() 触发、或将函数绑定到指定元素的 change 事件
  click() 触发、或将函数绑定到指定元素的点击事件
  dblclick() 触发、或将函数绑定到指定元素的双击事件
  delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>这个段落在 div 元素内。</p>
</div>
<p>这是一个段落。</p>

</body>
</html>

  


  die() 移除所有通过 live() 函数添加的事件处理程序。
  error() 触发、或将函数绑定到指定元素的 error 事件
  event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
  event.pageX 相对于文档左边缘的鼠标位置。
  event.pageY 相对于文档上边缘的鼠标位置。
  event.preventDefault() 阻止事件的默认动作。
  event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
  event.target 触发该事件的 DOM 元素。
  event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
  event.type 描述事件的类型。
  event.which 指示按了哪个键或按钮。
  focus() 触发、或将函数绑定到指定元素的 focus 事件
  keydown() 触发、或将函数绑定到指定元素的 key down 事件
  keypress() 触发、或将函数绑定到指定元素的 key press 事件
  keyup() 触发、或将函数绑定到指定元素的 key up 事件
  live() 为当前或未来的匹配元素添加一个或多个事件处理器
  load() 触发、或将函数绑定到指定元素的 load 事件
  mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
  mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件             注意:与 mouseover 事件不同,mouseenter 事件只有在鼠标指针进入被选元素时被触发,

                                  mouseover 事件在鼠标指针进入任意子元素时也会被触发。参见页面底部演示实例。
  mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
  mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
  mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
  mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
  mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
  one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
  ready() 文档就绪事件(当 HTML 文档就绪可用时)
  resize() 触发、或将函数绑定到指定元素的 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数
  scroll() 触发、或将函数绑定到指定元素的 scroll 事件
  select() 触发、或将函数绑定到指定元素的 select 事件
  submit() 触发、或将函数绑定到指定元素的 submit 事件
  toggle() 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
  trigger() 所有匹配元素的指定事件 

trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。

该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。

与 triggerHandler() 方法相比的不同之处:

它不会引起事件(比如表单提交)的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。

  


  triggerHandler() 第一个被匹配元素的指定事件
  unbind() 从匹配元素移除一个被添加的事件处理器
  undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来
  unload() 触发、或将函数绑定到指定元素的 unload 事件

<script type="text/javascript">
$(document).ready(function(){
  $("p, button, h1, h2").click(function(event){
    $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
  });
});
</script>
</head>

<body>
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件,下面的 div 会显示出哪个元素触发了该事件。</p>
<div></div>
</body>
</html>

  

おすすめ

転載: www.cnblogs.com/zqy6666/p/11876023.html