jQuery记要
jQuery记录
1隐式迭代(一般不需要for循环遍历dom对象) 2css88.com 3jQuery1.x支持低版本和非标准浏览器 a) 谷歌CDN: http://www.google-jquery-cdn.com/ b) 百度CDN:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs c) 微软CDN:http://msdn.microsoft.com/zh-cn/library/ee517318.aspx d) 新浪CDN:http://sae.sina.com.cn/?m=devcenter&catId=147 注意:优先引入CDN上的jquery,如果失效再引入本地的jquery,引入必须在head标签里。 4jQuery对象转换为Dom对象的两种方法[index]或get(index) Dom对象转换为jQuery对象只需要用$()把Dom对象包装起来 length、toString等等是公用的 5val()、html()、click() 6jQuery库和其他库共存的两种办法(即释放$权限) jQuery.noConflict(); alert("这是prototype弹出的:"+$F('a')); alert("这是jQuery弹出的:"+jQuery('#a').val()); 率先引入jQuery库,还有后面的$换为jQuery <script src="jquery.js"></script> <script src="prototype.js"></script> 选择器 css中div>a选择div下的一级子元素,低版本浏览器不兼容,但jQuery(‘div>a’)却不会存在兼容性的问题! $(“body *”) div+p选择div的下一个兄弟相当于next()方法 div~p选择div的后面的所有兄弟节点 相当于nextAll()方法 基本过滤选择器 p:first 第一个p p :first p元素的所有子孙元素的第一个 :not()、:even、:odd、:eq()、:gt(2)大于2的下标、:lt(2)小于2的下标、:animated 内容过滤选择器 :contains()选取含有指定文本内容的元素 :has()选择含有指定标签(元素)的元素 :empty选择不包含子元素或文本的空元素 :parent选择含有子元素或文本的元素 可见性选择器 :hidden选取所有不可见元素 :visible选取所有可见元素 例如:$(‘div:hidden’)选取不可见的div 注意:opacity:0或visibility:hidden虽然不可见但都占据空间用所以:hidden是选择不到的 属性选择器 $(“div[title=js]”)选取有属性title且属性名为js的div元素(属性不一定是title,可以自定义的) $(“div[title]”)选取有属性为title的元素,而不论属性名如何 子元素过滤选择器 :first-child选择父元素第一个子元素 :last-child选择父元素最后一个子元素 :only-child选择父元素只包含一个子元素的子元素 例如$(“div p:only-child”) $(“div p:nth-child(2n)”)注意:索引从1开始 表单元素选择器 :input选择所有表单元素包括textarea、select等 :text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden等 $(“input:disabled”)或$(“input[disabled=disabled]”)选择不能修改的表单元素 $(“select option[selected=selected]”)或$(“select option:selected”) $('p').eq(0).css('background','red'); $('p:eq(0)').css('background','green'); $('p').filter(":odd").css('background','red');//参数也可为类名 $('p').first().css('background','red'); $('p').click(function(){ if($(this).is('.box'))//如果类型为box则...... { $(this).css('background','red'); } }); $('p').not(':first').css('background','green');//除去第一个不加样式 $('p').slice(1,5).css('background','red');//第一个开始第五个结束,包一不包五 遍历查找 $(“#wrap”).children().not(“div”)选取id为wrap的子元素不包括div $(“#wrap”).children(‘p’)选取id为wrap的子元素仅包括p parent() parents()和parentsUntil()是一样的 offsetParent()返回父元素中第一个其position设为relative或absolute的元素,仅指可见元素 next()、nextAll()、prev()、prevAll() siblings()除本身之外的所有兄弟元素 注意:只要是返回一组元素的都可以加参数 .end()返回上一级匹配的节点 .addBack()与end一样,只不过位置不同 分别弹出每个input的值each() $(function(){ $('input').each(function(){ alert($(this).val()); }); }); \\[\\]特殊字符 $("#tab1 tr:even").css("background","red"); $("#tab1 tr:odd").css("background","green"); 合并 $("#tab1 tr").filter(":even").css("background","red").end(). filter(":odd").css("background","green"); 选择器的优化 1.优先使用id选择器 2.在class选择器前添加标签名 3.采用find(),而不使用上下文查找 4.强大的链式操作比缓存更快 5.从左值右的模型 Dom操作 创建(两种方式) var newElement='<div>我是用字符串创建的div标签</div>'; var newElement=$('<div>我是$符创建的div标签</div>'); $('body').append(newElement); 内部插入 后插入的两种方法append和appendTo var str=$("<strong>大家好,我是后来插入的</strong>"); //$("p").append(str); str.appendTo($("p")); 前插入的两种方法prepend和prependTo //$("p").prepend(str); str.prependTo($("p")); 外部插入 后插入的两种方法after和insertAfter //$("p").after(str); str.insertAfter($('p')); 前插入的两种方法before和insertBefore 包裹节点 wrap()讲所有匹配元素单独包裹 wrapAll()将所有匹配元素用一个元素包裹 WrapInner讲所有匹配的元素的子内容用其他标签包裹 删除节点 remove()、empty() 清除标签及内容,但仍占用位置 unwrap()仅删除父元素(不包括子元素本身及父元素的内容即不包括父元素的子元素) 复制节点 Clone克隆标签及及标签包含的事件注意:标签包含的事件要写在克隆事件的后面或写成clone(true) $("a").click(function(){ alert("hello boy!"); }); var newA=$("a").clone(true); $("body").append(newA); 替换标签 replaceWith与replaceAll $("a").replaceWith("<p>我是p标签</p>"); $("<p>我是p标签</p>").replaceAll($("a")); 操作dom属性 attr()获取或添加或修改属性值 prop removeAttr()删除属性值 removeProp 样式操作 addClass()添加样式(可以连续用两个addClass,也可以用一个,Class间用空格隔开) removeClass()移除样式 toggleClass()切换样式(有和无之间切换,上面两个的交换) hasClass()判断是否有样式,返回布尔值 css()设置匹配元素的css(行内样式) height()获取高度 innerHeight()获取包括padding的高度 outerHeight(l)获取包括border的高度 outerHeight(true)获取包括margin的高度 width() innerWidth() outerWidth(bool) offset()使用方法:先获取offset对象,然后left、top等 相对于文档 与原生js不同 position()相对于有定位的父级 设置或获取节点内的元素(html和文本) text()获取或设置匹配元素的文本节点(无参为获取,有参则设置) html()获取匹配元素的dom节点或文本节点 查看、修改和删除实例 children指的是一级子元素 关于z-index与position的关系 事件和对象 $.holdReady(bool)暂停或恢复ready事件 jQuery的工具函数 事件 click() dblclick()双击鼠标左键 focusin()获得焦点事件,可作用于父爷级 focusout()失去焦点事件,可作用于父级 mouseenter、mouseleave可以阻止冒泡的 键盘事件:keydown、keyup、keypress 绑定和移除事件:bind()、unbind、on、off、one执行一次事件,然后销毁该事件、delegate.... $("body").delegate("p","click",function(){ $(this).append("<p>我是新增加的p标签</p>");//新增标签也有绑定事件,相当于on }); $("p").bind("click",function(){ $("body").append("<p>我是新增加的p标签</p>");//新增标签没有绑定事件 }); 事件命名空间 click点命名空间 event.preventDefault()阻止浏览器默认的行为 动画 基础动画、渐变动画、滑动动画、自定义动画、动画队列 obj.hide(300)、obj.hide(“fast/slow/normal”) 模拟toggle $("a").click(function(){ if($("p").is(":visible")) { $("p").hide(300); } else { $("p").show(300); } }); div里面的文字自动换行 white-space:normal; word-break:break-all; overflow:hidden; fadeIn()自动显示 透明度从0变到100 fadeOut自动隐藏 fadeTo(执行到目标所需的时间,0.2,回调函数) slideDown()、slideUp()、slideToggle() animate({...},所需时间,回调函数) 动画队列 stop()、dequeue()、finish()、delay() hover(函数一,函数二) $("a").hover(function(){ $("#div1").stop(false,true).slideDown(); },function(){ $("#div1").stop(false,true).slideUp(); }); 表格搜索实例 $("#tab1 tr:not('#header')").hide().filter(":contains('"+oT+"')").show(); 微博发布限制字数 注意:关于val()和text()的区别? jQuery中的Ajax jqueryDom.load(); $.get(); $.post(); $.ajax(); $(".load").load("ccc.html");