JQuery常用实用的事件[较容易忽略的方法]

                              JQuery常用实用的事件

注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!
JQuery 事件处理
ready(fn)
代码:
     $(document).ready(function(){
     });
作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操

纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

bind(type.[data],fn)
代码:
  $("p").bind("click",function(){
    alert($(this.text()));
  });
作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)
代码:
  $("td").toggle{
    function(){
    $(this).addClass("selected");
  },
    function(){
  $(this).removeClass("selected");
  }
  };

作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点

击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。(

像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)

jQuery外观效果
  addClass(class)和removeClass(class)
代码:
  $(".stripe tr").mouseover(function(){
    $(this).addClass("over");}).mouseout(function(){
    $(this).removeClass("over");})
  });
也可以写成这样:
  $(".stripe tr").mouseover(function() { $(this).addClass("over") });
  $(".stripe tr").mouseout(function() { $(this).removeClass("over") }
作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的

代码

css(name,value)
代码:
$("p").css("color",red);
作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有

点类似。

  slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
代码:

  $("#btnShow").bind("click",function(event){ $("#divMsg").show() });
  $("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() })
作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优

雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])
作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。

find(expr)
HTML 代码:
< SPAN>Hello< /SPAN>

jQuery 代码:
  $("p").find("span")
结果:
[< SPAN>Hello< /SPAN> ]

作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)

HTML 代码:
< IMG>< IMG>

jQuery 代码:
  $("img").attr("src","test.jpg");

作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。

如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)

HTML 代码:

< DIV>
Hello

< /DIV>
jQuery 代码:

  $("div").html();

结果:

Hello

作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内

容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

功时回调函数。

代码:

  $("#feeds").load("feeds.aspx", {limit: 25}, function(){
    alert("The last 25 entries in the feed have been loaded");
});

作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()

HTML 代码:

Results:

< FORM>
< SELECT name=single> < OPTION selected>Single< /OPTION>
< OPTION>Single2< /OPTION> < /SELECT>
< SELECT multiple name=multiple> < OPTION selected>Multiple< /OPTION>
< OPTION>Multiple2< /OPTION> < OPTION selected>Multiple3< /OPTION> < /SELECT>

< INPUT value=check1 type=checkbox name=check> check1
< INPUT value=check2 type=checkbox name=check
checked="checked"/> check2
< INPUT value=radio1 type=radio name=radio
checked="checked"/> radio1
< INPUT value=radio2 type=radio name=radio> radio2
< /FORM>
jQuery 代码:

  $("#results").append( "< TT>" + $("form").serialize() + "< /TT>" );
作用:序列化表格内容为字符串。用于 Ajax 请求。

工具

  jQuery.each(obj,callback)

代码:

  $.each( [0,1,2], function(i, n){
    alert( "Item #" + i + ": " + n );
  });//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );//遍历对象
});
作用:通用例遍方法,可用于例遍对象和数组。

  jQuery.makeArray(obj)

HTML 代码:

First
< DIV>Second< /DIV>
Third< /DIV>
< DIV>Fourth
< /DIV>

jQuery 代码:

  var arr = jQuery.makeArray(document.getElementsByTagName("div"));
结果:

Fourth

Third

Second

First

作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

  jQuery.trim(str)

作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。

小结:在实际的开发中我们可能会用到其他的方法和属性,以上只是个人认为新手初学jQuery时,必须掌

握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

时间: 2024-10-10 20:54:17

JQuery常用实用的事件[较容易忽略的方法]的相关文章

jQuery监控文本框事件并作相应处理的方法

本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document)  .on('input propertychange', '#query', function(){   var input = $(this).val();   show(input);  });  var show = function(txt){   var info = '监听:<b>' + txt + '</b><br /><

jQuery常用表单事件执行顺序

<input type="text" id="input"/> <script> // 点击测试 var input = document.getElementById("input"); $('input').hover(function(){ console.log("hover-in"); },function(){ console.log("hover-out"); });

前端09 /jQuery标签操作、事件、补充

目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 2.1值操作 2.2插入标签 2.3 删除标签 remove.detach和empty 2.4 (替换)修改标签 replaceWith和replaceAll 2.5 克隆标签 clone 3.属性操作 3.1 attr() 设置属性值.者获取属性值 3.2 removeAttr() 移除属性 3.3 prop() 4.class类

jquery常用事件(整理)

Jquery事件 (一).事件列表. 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单击时触发. 4.dblclick()  当鼠标双击时触发. 5.error() 当javascript出错或img的src属性无效时触发. 6.focus()   当元素获取焦点时触发.注意:某些对象不支持. 7.focusin()   当元素或其子元素获取焦点时触发,与focus()区别在于能够检

jQuery常用事件-思维导图

jQuery常用事件 jQuery常用事件

JQuery常用技巧总结

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法.2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象.普通的dom对象一般可以通过$()转换成jquery对象.如:$(document.getElem

jQuery常用技巧-使用的总结

1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

jquery常用技巧及常用方法列表集合

jquery常用技巧及常用方法列表集合 jquery常用技巧及常用方法列表集合,学习jquery的朋友可以收藏下.方便查找学习. 1.关于页面元素的引用  通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换  只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注

Jquery常用的语法有哪些?

本文和大家分享的主要是jquery常用的一些语法,一起来看看吧,希望对大家学习jquery有所帮助. 1. 控制字体style < style > .fontcolor { color:#FF0000; font-size:15px; font-weight:bold; } </style > 2. td中换行,以及for展示 <td>    <ul>      #foreach($model in $!data.list1)        <li&g