Jquery 整理元素选取、常用方法一览表


Posted in Javascript onNovember 26, 2016

Jquery元素选取、常用方法

一:常用的选择器:

基本选择器
$(”#myDiv”) //匹配唯一的具有此id值的元素
$(”div”) //匹配指定名称的所有元素
$(”.myClass”) //匹配具有此class样式值的所有元素
$(”*”) //匹配所有元素
$(this) //匹配自身
$(”div,span,p.myClass”) //联合所有匹配的选择器层叠选择器
$(”form input”) //后代选择器,选择ancestor的所有子孙节点
$(”#main > *”) //子选择器,选择parent的所有子节点
$(”label + input”) //临选择器,选择prev的下一个临节点
$(”#prev ~ div”) //同胞选择器,选择prev的所有同胞节点

基本过滤选择器
$(”tr:first”) //匹配第一个选择的元素
$(”tr:last”) //匹配最后一个选择的元素
$(”tr:even”) //匹配集合中偶数位置的所有元素(从0开始)
$(”tr:odd”) //匹配集合中奇数位置的所有元素(从0开始)
$(”td:eq(2)”) //匹配集合中指定位置的元素(从0开始)
$(”div:animated”) //匹配所有正在运行动画的所有元素

内容过滤选择器
$(”div:contains('John')”) //匹配含有指定文本的所有元素
$(”td:empty”) //匹配所有空元素(只含有文本的元素不算空元素)
$(”div:has(p)”) //从原元素集合中再次匹配所有至少含有一个selector的所有元素
$(”div:hidden”) //匹配所有隐藏的元素,也包括表单的隐藏域
$(”div:visible”) //匹配所有可见的元素

属性过滤选择器
$(”div[id]”) //匹配所有具有指定属性的元素
$(”input[name='aa']”) //匹配所有具有指定属性值的元素素
$(”input[name^='aa']”) //匹配所有指定属性值以value开头的元素
$(”input[name$='aa']”) //匹配所有指定属性值以value结尾的元素
$(”input[name*='aa']”) //匹配所有指定属性值含有value字符的元素

子元素过滤选择器
$(”ul li:nth-child(n)”), //匹配父元素的第n个子元素
$(”div span:first-child”) //匹配父元素的第1个子元素
$(”div span:last-child”) //匹配父元素的最后1个子元素

表单元素选择器
$(”:input”) //匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
$(”:text”) //匹配所有类型为text的input元素
$(”:password”) //匹配所有类型为password的input元素
$(”:radio”) //匹配所有类型为radio的input元素
$(”:checkbox”) //匹配所有类型为checkbox的input元素
$(”:submit”) //匹配所有类型为submit的input元素
$(”:image”) //匹配所有类型为image的input元素
$(”:reset”) //匹配所有类型为reset的input元素
$(”:button”) //匹配所有类型为button的input元素
$(”:file”) //匹配所有类型为file的input元素
$(”:hidden”) //匹配所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器
$(”:enabled”) //匹配所有可操作的表单元素
$(”:disabled”) //匹配所有不可操作的表单元素
$(”:checked”) //匹配所有已点选的元素

 二:常用方法

//常用操作
.eq(i) //获取第几个元素
.text() //获取或设置元素文本内容
.html() //获取或设置元素html代码内容
.val() //获取或设置表单元素值
.attr() //获取或设置属性,适用于自定义属性
.removeAttr() //移除属性
.css() //获取或设置样式
.addClass() //设置class
.removeClass() //移除class
.prop() //操作属性,适用于固定属性
.trim() //去除空格

//追加移除
.after(); //在匹配元素后面添加内容
.append(); //将content作为元素的内容插入到该元素的后面
.appendTo(); //在content后接元素
.before(); //与after方法相反
.empty() //将该元素的内容设置为空
.remove(); //删除所有的指定元素

//相关元素
.filter( expr ) //返回与指定表达式匹配的元素集合
.children() //找子级元素
.parent() //找父级元素
.next(expr) //后面同辈元素的元素。
.prev(expr) //前面同辈元素的元素
.find(expr) //搜索所有与指定表达式匹配的元素。
.add(html) //追加元素

//事件
.unbind("blur") //移除事件
.bind("blur",function(){}) //绑定事件
.hover(function(){}) //鼠标移上

//动画
.show( ) 显示隐藏的匹配元素。
.hide( ) 隐藏所有的匹配元素。
.toggle( ) 切换元素的可见状态。
.slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。
.slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏起来。
.slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏或显示。
.fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
.fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
.fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
.stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
.queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
.queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
.queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
.dequeue( ) 执行并移除动画序列前端的动画
.animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
.animate( params, options ) 创建自定义动画的另一个方法

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS在IE下缺少标识符的错误
Jul 23 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 #Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 #Javascript
JS自定义混合Mixin函数示例
Nov 26 #Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 #Javascript
JS匿名函数类生成方式实例分析
Nov 26 #Javascript
正则表达式替换html元素属性的方法
Nov 26 #Javascript
js初始化验证实例详解
Nov 26 #Javascript
You might like
自己前几天写的无限分类类
2007/02/14 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
webpack打包js的方法
2018/03/12 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Python continue语句实例用法
2020/02/06 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
护士毕业生自荐信
2014/02/07 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
校园文明倡议书
2014/05/16 职场文书
社区科普工作方案
2014/06/03 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
社区节水倡议书
2015/04/29 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
技术转让协议书
2016/03/19 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP