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 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
javascript json 新手入门文档
Dec 03 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue3.0 上手体验
Sep 21 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
Javascript函数的参数
2015/07/16 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python数据可视化之画图
2019/01/15 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
应用电子专业学生的自我评价
2013/10/16 职场文书
财务部岗位职责
2013/11/19 职场文书
感恩节活动方案
2014/01/27 职场文书
就业协议书怎么填
2014/04/11 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
优秀教师单行材料
2014/12/16 职场文书
公务员个人总结
2015/02/12 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
合同审查法律意见书
2015/06/04 职场文书
雷锋之歌观后感
2015/06/10 职场文书
公司员工培训管理制度
2015/08/04 职场文书
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers