源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

了解了这些才能开始发挥jQuery的威力

  • 时间:2022-06-15 01:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:了解了这些才能开始发挥jQuery的威力
由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择器与attr方法,还有几个动画,如果只是如此,相比于其带来的开销,其实还不如不使用,下面介绍几个jQuery常用的方法,来让jQuery的威力发挥出来,否则只用有限的几个方法,相对于运行速度问题,真不如不用jQuery。 jQuery如此之好用,和其在获取对象时使用与CSS选择器兼容的语法有很大关系,毕竟CSS选择器大家都很熟悉(关于CSS选择器可以看看十分钟搞定CSS选择器),但其强大在兼容了CSS3的选择器,甚至多出了很多。 选择器 有了CSS选择器基础后,看jQuery的选择器就很简单了,不再详细一一说明
[b]基本选择器[/b]  
$(‘*') 匹配页面所有元素
$(‘#id') id选择器
$(‘.class') 类选择器
$(‘element') 标签选择器
   
[b]组合/层次选择器[/b]  
$(‘E,F') 多元素选择器,用”,分隔,同时匹配元素E或元素F
$(‘E F') 后代选择器,用空格分隔,匹配E元素所有的[b]后代(不只是子元素、子元素向下递归)[/b]元素F
$(E>F) 子元素选择器,用”>”分隔,匹配E元素的所有直接子元素
$(‘E+F') 直接相邻选择器,匹配E元素[b]之后[/b]的[b]相邻[/b]的[b]同级[/b]元素F
$(‘E~F') 普通相邻选择器(弟弟选择器),匹配E元素[b]之后[/b]的[b]同级[/b]元素F(无论直接相邻与否)
$(‘.class1.class2') 匹配类名中既包含class1又包含class2的元素
[b]基本过滤选择器[/b]  
$("E:first") 所有E中的第一个
$("E:last") 所有E中的最后一个
$("E:not(selector)") 按照selector过滤E
$("E:even")             所有E中index是偶数
$("E:odd")              所有E中index是奇数
$("E:eq(n)")           所有E中index为n的元素
$("E:gt(n)")           所有E中index大于n的元素
$("E:ll(n)")            所有E中index小于n的元素
$(":header") 选择h1~h7 元素
$("div:animated") 选择正在执行动画效果的元素
[b]内容过滤器[/b]  
$(‘E:contains(value)') 内容中包含value值的元素
$(‘E:empty') 内容为空的元素
$(‘E:has(F)') 子元素中有F的元素,$(‘div:has(a)'):包含a标签的div
$(‘E: parent') 父元素是E的元素,$(‘td: parent'):父元素是td的元素
[b]可视化选择器[/b]  
$(‘E:hidden') 所有被隐藏的E
$(‘E:visible') 所有可见的E
[b]属性过滤选择器[/b]  
$(‘E[attr]') 含有属性attr的E
$(‘E[attr=value]') 属性attr=value的E
$(‘E[attr !=value]') 属性attr!=value的E
$(‘E[attr ^=value]') 属性attr以value开头的E
$(‘E[attr $=value]') 属性attr以value结尾的E
$(‘E[attr *=value]') 属性attr包含value的E
$(‘E[attr][attr *=value]') 可以连用
[b]子元素过滤器[/b]  
$(‘E:nth-child(n)') E的第n个子节点
$(‘E:nth-child(3n+1)') E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)') E的index为偶数的子节点
$(‘E:nth-child(odd)') E的index为奇数的子节点
$(‘E:first-clild') 所有E的第一个子节点
$(‘E:last-clild') 所有E的最后一个子节点
$(‘E:only-clild') 只有唯一子节点的E的子节点
[b]表单元素选择器[/b]  
$(‘E:type') 特定类型的input
$(‘:checked') 被选中的checkbox或radio
$(‘option: selected') 被选中的option
[b]筛选方法[/b] .find(selector) 查找集合每个元素的子节点 Get the descendants(子节点) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
[url=http://www.1sucai.cn/article/27309.htm]jQuery三种事件绑定方式.bind(),.live(),.delegate()[/url] .trigger( eventType [, extraParameters ] ) JavaScript出发元素绑定事件 Execute all handlers and behaviors attached to the matched elements for the given event type.
[url=http://api.jquery.com/category/effects/]animation[/url] [url=http://api.jquery.com/category/ajax/]ajax[/url] ,或者 [url=http://www.1sucai.cn/article/42000.htm]jQuery的动画处理总结[/url],[url=http://www.1sucai.cn/article/42001.htm]ASP.NET 使用Ajax动画[/url] queue/dequeue/clearQueue delay/stop fadeIn/fadeOut/fadeTo/fadeToggle slideUp/slideDown/slideToggle show/hide Ajax $.ajax $.load $.get [b]最后[/b] 了解了上面这些内容,使用jQuery进行web开发的时候就可以体验到jQuery的威力了。本文不是jQuery学习指南,仅仅是个常用方法介绍,如果大家想学习jQuery,最好的教材还是jQuery API,本文中示例与英文解释全部来源于[url=http://api.jquery.com/]jQuery API[/url]。 另外文中介绍内容远远不是jQuery全部,但是首先掌握了这些可以对jQuery有一个比较全面的认识,然后再学习其他内容的时候就可以游刃有余了。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部