jQuery慢慢啃之CSS(七)

1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){  // 在这里写你的代码...});

使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

$(function($) { // 你可以在这里继续使用$作为别名... });

2.on(events,[selector],[data],fn)//在选择元素上绑定一个或多个事件的事件处理函数。

data:当一个事件被触发时要传递event.data给事件处理函数。

$("p").on("click", function(){alert( $(this).text() );});//简单方式

function myHandler(event) {alert(event.data.foo);}$("p").on("click", {foo: "bar"}, myHandler)//传递一个jison值给事件event.data中

  $("form").on("submit", false)//取消提交并且取消冒泡

$("form").on("submit", function(event) {event.preventDefault();});//取消当前元素的默认动作,此处是提交

$("form").on("submit", function(event) {event.stopPropagation();});//终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播

3.off(events,[selector],[fn])//在选择元素上移除一个或多个事件的事件处理函数

最好的做法是安装和取下使用命名空间的事件,从而使代码不会无意中删除其他代码附加事件处理程序。

$("p").off()//删除所有的段落的事件

$("p").off( "click", "**" )//删除委托上的所有事件

var foo = function () {  };//定义方法事件$("body").on("click", "p", foo);//绑定事件$("body").off("click", "p", foo); //删除某一个事件上的一个方法

var validate = function () {};//定义事件$("form").on("click.validator", "button", validate);//绑定具有命名空间的事件$("form").on("keypress.validator", "input[type=‘text‘]", validate);//绑定具有命名空间的事件$("form").off(".validator");//删除命名空间下的所有事件

4.bind(type,[data],fn)//为每个匹配元素的特定事件绑定事件处理函数

type,[data],false //false: 将第三个参数设置为false会使默认的动作失效。

$("p").bind("click", function(){ alert( $(this).text() );});//当每个段落被点击的时候,弹出其文本。

$(‘#foo‘).bind(‘mouseenter mouseleave‘, function() {$(this).toggleClass(‘entered‘);});//同时绑定多个事件类型

$("button").bind({//同时绑定多个事件类型/处理程序
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");}, 
  mouseout:function(){$("body").css("background-color","#FFFFFF");} 
});

function handler(event) {alert(event.data.foo);}
$("p").bind("click", {foo: "bar"}, handler)
 //事件处理之前传递一些附加的数据

$("form").bind("submit", function() { return false; })//通过返回false来取消默认的行为阻止事件起泡

$("form").bind("submit", function(event){event.preventDefault();});//通过使用 preventDefault() 方法只取消默认的行为。

$("form").bind("submit", function(event){event.stopPropagation();});//通过使用 stopPropagation() 方法只阻止一个事件起泡

5.one(type,[data],fn)//为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

$("p").one("click", function(){alert( $(this).text() );});

6.trigger(type,[data])//在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行,如果要阻止这种默认行为,应返回false。

$("form:first").trigger("submit")//触发事件

$("p").click( function (event, a, b) {//先定义事件,在给传递带参数并且触发
  // 一个普通的点击事件时,a和b是undefined类型
  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

$("p").bind("myEvent", function (event, message1, message2) {alert(message1 + ‘ ‘ + message2);});//定义自己的事件
 $("p").trigger("myEvent", ["Hello","World!"]);//触发自定义事件

7.triggerHandler(type, [data])//这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡

这个方法的行为表现与trigger类似,但有以下三个主要区别:

* 第一,他不会触发浏览器默认事件。

* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>

$("#old").click(function(){$("input").trigger("focus");});
$("#new").click(function(){$("input").triggerHandler("focus");});
$("input").focus(function(){$("<span>Focused!</span>").appendTo("body").fadeOut(1000);});

8.unbind(type,[data|fn]])//bind()的反向操作,从每一个匹配的元素中删除绑定的事件

$("p").unbind()//把所有段落的所有事件取消绑定

  $("p").unbind( "click" )//将段落的click事件取消绑定

删除特定函数的绑定,将函数作为第二个参数传入

var foo = function () {// 处理某个事件的代码};
 $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
 $("p").unbind("click", foo); // ... 再也不会被触发 foo

9.live(type, [data], fn)//给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

$(‘.clickme‘).live(‘click‘, function() {alert("Live handler called."); });//后米添加的元素依然有事件$(‘body‘).append(‘<div class="clickme">Another target</div>‘);

$(‘.hoverme‘).live(‘mouseover mouseout‘, function(event) {// 同时绑定mouseover和mouseout事件  if (event.type == ‘mouseover‘) {    // do something on mouseover  } else {    // do something on mouseout  }});

$("a").live({  click: function() { // do something on click},  mouseover: function() { // do something on mouseover }});

其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的,

10.die//从元素中删除先前用.live()绑定的所有事件

function aClick() {
      $("div").show().fadeOut("slow");
  }
  $("#unbind").click(function () {
      $("#theone").die("click", aClick)
  });

11.delegate(selector,[type],[data],fn)//指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

//使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

$("div").delegate("button","click",function(){  $("p").slideToggle();});

delegate这个方法可作为live()方法的替代,使得每次事件绑定到特定的DOM元素。

以下两段代码是等同的:

$("table").delegate("td", "hover", function(){    $(this).toggleClass("hover");});
$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover");});});

12.undelegate([selector,[type],fn])//删除由 delegate() 方法添加的一个或多个事件处理程序$("p").undelegate();//从p元素删除由 delegate() 方法添加的所有事件处理器
$("p").undelegate( "click" )//从p元素删除由 delegate() 方法添加的所有click事件处理器

从form元素删除由 delegate() 方法添加的".whatever"命名空间

var foo = function () { //.....};
//用delegate() 方法给click事件增加".whatever"命名空间
$("form").delegate(":button", "click.whatever", foo);
$("form").delegate("input[type=‘text‘]", "keypress.whatever", foo); 

// 用undelegate()方法删除delegate()方法增加的".whatever"命名空间
$("form").undelegate(".whatever");
13.hover([over,]out)//一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
$("td").hover//鼠标悬停的表格加上特定的类
(  function () { $(this).addClass("hover");  },
  function () {  $(this).removeClass("hover");} );

14.toggle([speed],[easing],[fn])//用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件//如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
$(‘td).toggle();//对表格切换显示/隐藏
$("td").toggle(//对表格的切换一个类
  function () { $(this).addClass("selected");},
  function () { $(this).removeClass("selected"); }
);
$("p").toggle("slow");//用600毫秒的时间将段落缓慢的切换显示状态
$("p").toggle("fast",function(){ alert("Animation Done.");});//用200毫秒将段落迅速切换显示状态,之后弹出一个对话框。
$(‘#foo‘).toggle(showOrHide);
//相当于
if (showOrHide) {$(‘#foo‘).show();} else { $(‘#foo‘).hide();}      
 
15.blur([[data],fn])//当元素失去焦点时触发 blur 事件
$("p").blur();
$("p").blur( function () { alert("Hello World!"); } );

16.change([[data],fn])//当元素的值发生改变时,会发生 change 事件
$(selector).change();//触发被选元素的 change 事件。
$("input[type=‘text‘]").change( function() {  // 这里可以写些验证代码});
17.click([[data],fn])//触发每一个匹配元素的click事件。
$("p").click();//触发每一个匹配元素的click事件
$("p").click( function () { $(this).hide(); });//将页面内所有段落点击后隐藏
18.dblclick([[data],fn])//当双击元素时,会发生 dblclick 事件
19.error([[data],fn])//当元素遇到错误(没有正确载入)时,发生 error 事件。
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
$("img").error(function(){
  $(this).hide();
});
20.focus([[data],fn])//当元素获得焦点时,触发 focus 事件。
$(document).ready(function()//当页面加载后将 id 为 ‘login‘ 的元素设置焦点{  $("#login").focus();});

使人无法使用文本框:

$("input[type=text]").focus(function(){  this.blur();});
21.focusin([data],fn)//当元素获得焦点时,触发 focusin 事件,focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

22.focusout([data],fn)//当元素失去焦点时触发 focusout 事件,focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
23.keydown([[data],fn])//当键盘或按钮被按下时,发生 keydown 事件。
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});

24.keypress([[data],fn])//当键盘或按钮被按下时,发生 keypress 事件
$("input").keydown(function(){  $("span").text(i+=1);});
25.keyup([[data],fn])//当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。

26.mousedown([[data],fn])//当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
$("button").mousedown(function(){
  $("p").slideToggle();
});
27.mouseenter([[data],fn])//当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
28.mouseleave([[data],fn])//当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用

29.mousemove([[data],fn])//当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标

30.mouseout([[data],fn])//当鼠标指针从元素上移开时,发生 mouseout 事件

31.mouseover([[data],fn])//当鼠标指针位于元素上方时,会发生 mouseover 事件

32.mouseup([[data],fn])//当在元素上放松鼠标按钮时,会发生 mouseup 事件。
33.resize([[data],fn])//当调整浏览器窗口的大小时,发生 resize 事件

34.scroll([[data],fn])//当用户滚动指定的元素时,会发生 scroll 事件

35.select([[data],fn])//当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
36.submit([[data],fn])//当提交表单时,会发生 submit 事件。

37.unload([[data],fn])//在当用户离开页面时,会发生 unload 事件




时间: 2024-10-13 21:01:55

jQuery慢慢啃之CSS(七)的相关文章

jQuery慢慢啃之CSS(五)

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置 $("p").css("color","red");

jQuery慢慢啃之ajax(九)

1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFilter.success.complete. beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数. error 在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用

jQuery慢慢啃(四)

1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元素 $("p").eq(-2)//获取倒数匹配的第二个元素 2.$('li').first()//获取第一个元素 $('li').last()//获取最后个元素 $(this).hasClass("protected")和 $(this).is(".prote

jQuery慢慢啃之工具(十)

1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: safari opera  msie mozilla 3.jQuery.browser.version//浏览器渲染引擎版本号 4.jQuery.boxModel//浏览器是否使用标准盒模型渲染页面. 建议使用 jQuery.support.boxModel 代替.W3C CSS 盒模型. 5.j

jQuery慢慢啃之事件对象(十一)

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); 2.event.data//当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind. $("a").each(function(i) { $(this).bind('click', {index:i},

jQuery慢慢啃之文档处理(五)

1.append(content|fn)//向每个匹配的元素内部追加内容. $("p").append("<b>Hello</b>"); 2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中. $("p").appendTo("div"); appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几

jQuery慢慢啃之特效(八)

1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) //easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear" $("p").show() $("p").s

jQuery慢慢啃(三)

1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值. $("img").attr("src");//获取属性 $("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性 $("img").attr("src","test.jpg");/

jQuery 获取并设置 CSS 类

通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 实例样式表 下面的样式表将用于本页的所有例子: .important{font-weight:bold;