JQUERY effect traversal event

effect

  Hide and display hide () and show ()

  Fade fadeIn (speed, callback), fadeOut (speed, callback), fadeToggle () method can be switched, fadeTo (speed, opacity, callback) between fadeIn (). FadeOut and () method

  滑动  $(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);

Built-iterate function

  $ .Map (array, function () {}); taken from an array to each array or a traversal of the function then treated

var attr = [1,2,3];
var newattr = $.map(attr, function(index) {
	return index*2;
});
console.log(newattr);
得到//newattr = [2,4,6]

  $ .Each (attr, function (key, value) {}); and then the processing of an array or an object in each array is traversed and processed or an object to traverse each of the function in the function

var attr = ["name","age","say"];
$.each(attr, function(key,value) {
	alert(attr[key]);
   //console.log(this);
});

  $ .Map () method can traverse an array or object member at the same time, through the callback function, and then switch to another new array (which is also and $ .each () the biggest difference).

Traversal

  Ancestors   parent () method returns the immediate parent element parents selected elements () method returns the ancestor of all the elements of the selected element, it is all the way up until the document root element (<html>)

    parentsUntil () method returns all ancestor elements interposed between elements of the selected element in brackets. It does not contain an element selected from elements selected brackets

  Offspring children () method returns all the direct child elements of the selected element. find () method returns the descendent elements of the selected element, all the way down to the last generations.

  Compatriot siblings () method returns all elements of the selected element compatriots. next () method returns a fellow next element of the selected element. nextAll () method returns all elements follow countrymen selected element. nextUntil () method returns the sibling element interposed between all follow the two given parameters.

     Work prev (), prevAll () and prevUntil () method similar to the above method,

  Filtered first () method returns the selected elements of the first element. last () method returns the last element of the selected element.  EQ () method returns the element is designated with the index number of the selected element.

      filter () method returns the element meet certain conditions. This method allows you to specify a condition. Ineligible elements removed from the selection, qualifying element will be returned. The method generally used to narrow the search elements are combined in the selected element.

      not () method returns all elements that do not match the criteria. not () method with the filter () instead.

      slice () is reduced to the set of matched elements specified subset index range. . $ ( 'Li') slice (2, 4) .css ( 'background-color', 'red');

      each()     $("li").each(function(){$(this).attr();})

event

  bind () event handler attached to one or more matching elements

<!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>

  

Guess you like

Origin www.cnblogs.com/zqy6666/p/11876023.html