当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery学习笔记

发表于: 2014-05-30   作者:18289753290   来源:转载   浏览:
摘要: 以前做项目的时候都用js,现在想该用jquery,所以学习了jquery基本的语法,下面是我总结和手机的jquery语法 1.常用事件    $(document).ready(function) 文档的就绪事件    $(selector).click(function) 被选元素的点击事件    $(selector).dbl
以前做项目的时候都用js,现在想该用jquery,所以学习了jquery基本的语法,下面是我总结和手机的jquery语法
1.常用事件
   $(document).ready(function) 文档的就绪事件
   $(selector).click(function) 被选元素的点击事件
   $(selector).dblclick(function) 被选元素的双击事件
   $(selector).focus(function)    被选元素获得焦点事件
   $(selector).mouseover(function) 被选元素鼠标悬停事件
2.jQuery效果
   $(selector).hide() 隐藏被选元素
   $(selector).show() 显示被选元素
   $(selector).toggle() 切换(在隐藏与显示之间)被选元素
   $(selector).slideDown() 向下滑动(显示)被选元素
   $(selector).slideUp() 向上滑动(隐藏)被选元素
   $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
   $(selector).fadeIn() 淡入被选元素
   $(selector).fadeOut() 淡出被选元素
   $(selector).fadeTo() 把被选元素淡出为给定的不透明度
   $(selector).animate() 对被选元素执行自定义动画
   参数:"slow", "fast", "normal" 或毫秒
   回调函数:callback
   $("p").hide(1000,function(){
   alert("The paragraph is now hidden");
   });
jQuery的HTML操作
   $(selector).html(content) 改变被选元素的(内部)HTML
   $(selector).append(content) 向被选元素的(内部)HTML 追加内容
   $(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
   $(selector).after(content) 在被选元素之后添加 HTML
   $(selector).before(content) 在被选元素之前添加 HTML
3.jQuery的CSS操作
   $(selector).css(name,value) 为匹配元素设置样式属性的值
   $(selector).css({properties}) 为匹配元素设置多个样式属性
   $(selector).css(name) 获得第一个匹配元素的样式属性值
   $(selector).height(value) 设置匹配元素的高度
   $(selector).width(value) 设置匹配元素的宽度
4.jquery的delegate方法
  Jquery方法为指定元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定这些事件发生时运行的函数,使用delegate方法的事件处理程序用于当前或未来的元素。
语法:$(selector).delegate(childSelector,event,data,function)
参数说明
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
5.jquery each:
$("input[type='checkbox']").each(function (){
                 $(this).prop("checked",true);
                  ids.push($(this).val());
             }); 
var obj = { one:1, two:2, three:3, four:4};    
$.each(obj, function(key, val) {    
    alert(obj[key]);          
});

jquery学习笔记

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近闲暇下来,决定学习学习Jquery。以后准备把Jquery的学习整理成笔记,方便自己以后学习参考。 首
今天要做个小例子,一个网页上有几张图片,当鼠标滑过的时候,将展示这个图片的大图,鼠标离开的时
什么都不说了,先上代码再解释 <script type="text/javascript"> $(document).ready(function(
国庆无聊,宅在家里重温了一下jQuery,以前自学过,但在工作中一次都没用上。本身就对jQuery情有独
JQuery学习笔记 在回北京的火车上,闲来无事,突然想起了前一段时间学习JQuery的时候的经历,就随手
比较:1javascript 自身3个弊端:复杂的文档对象模型(DOM)、不一致的浏览器实现、缺乏便捷的开发
最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables。 功能是很强大,
1.one()与bind()的区别 bind():给一个对象绑定事件,可以绑定一个事件,也可以绑定多个事件。 one
jquery学习笔记-2 1、开发环境的搭建: 这里强烈推荐大家使用Firefox并安装firebug。 首先我们下载
j-query学习笔记-1 一、认识jquery jquery是John Resig于2006年1月开发的一个开源项目,(官网是:
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号