首页 > web前端 > js教程 > 如何更好的使用jQuery的常用方法总结

如何更好的使用jQuery的常用方法总结

伊谢尔伦
发布: 2017-06-19 14:28:31
原创
1310 人浏览过

jQuery如此之好用,和其在获取对象时使用与CSS选择器兼容的语法有很大关系,毕竟CSS选择器大家都很熟悉(关于CSS选择器可以看看十分钟搞定CSS选择器),但其强大在兼容了CSS3的选择器,甚至多出了很多。

选择器

有了CSS选择器基础后,看jQuery的选择器就很简单了。

基本选择器  
$(‘*’) 匹配页面所有元素
$(‘#id’) id选择器
$(‘.class’) 类选择器
$(‘element’) 标签选择器
   
组合/层次选择器  
$(‘E,F’) 多元素选择器,用”,分隔,同时匹配元素E或元素F
$(‘E F’) 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
$(E>F) 子元素选择器,用”>”分隔,匹配E元素的所有直接子元素
$(‘E+F’) 直接相邻选择器,匹配E元素之后相邻同级元素F
$(‘E~F’) 普通相邻选择器(弟弟选择器),匹配E元素之后同级元素F(无论直接相邻与否)
$(‘.class1.class2’) 匹配类名中既包含class1又包含class2的元素
基本过滤选择器  
$("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 元素
$("p:animated") 选择正在执行动画效果的元素
内容过滤器  
$(‘E:contains(value)’) 内容中包含value值的元素
$(‘E:empty’) 内容为空的元素
$(‘E:has(F)’) 子元素中有F的元素,$(‘p:has(a)’):包含a标签的p
$(‘E: parent’) 父元素是E的元素,$(‘td: parent’):父元素是td的元素
可视化选择器  
$(‘E:hidden’) 所有被隐藏的E
$(‘E:visible’) 所有可见的E
属性过滤选择器  
$(‘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]’) 可以连用
子元素过滤器  
$(‘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的子节点
表单元素选择器  
$(‘E:type’) 特定类型的input
$(‘:checked’) 被选中的checkbox或radio
$(‘option: selected’) 被选中的option

筛选方法

.find(selector) 查找集合每个元素的子节点

$('li.item-ii').find('li').css('background-color', 'red');
登录后复制

.filter(selector) 过滤当前集合内元素

$('li').filter(':even').css('background-color', 'red');
登录后复制

基本方法

.ready(handler) 文档加载完成后执行的方法,区别于window.onload

$(document).ready(function() {  // Handler for .ready() called.});
登录后复制

.each(function(index,element)) 遍历集合内每个元素

$("li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});
登录后复制

jQuery.extend( target [, object1 ] [, objectN ] ) 合并对象

var object = $.extend({}, object1, object2);
登录后复制

以上是如何更好的使用jQuery的常用方法总结的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板