热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JQ速查

1JQ选择器1.1基础选择器$(#id)ID选择器$(.class)类选择器$(element)元素选择器$(*)全选择器$(prevnext)选择下一个兄弟$

1 JQ选择器

1.1 基础选择器

$("#id") ID选择器
$(".class") 类选择器
$("element") 元素选择器
$("*") 全选择器
$("prev+next") 选择下一个兄弟
$("prev~siblings") 选择以下所有兄弟
$("parent>child") 选择子代
$("ancestor descendant") 选择后代

1.2 基本筛选

$(" :first") 第一个元素
$(" :last") 最后一个元素
$(" :not(selector)") 过滤
$(" :eq(index)") 选择第n个元素
$(" :gt(index)") 选择所有索引大于n的元素
$(" :lt(index)") 选择所有索引小于n的元素
$(" :even") 选择索引为偶的元素
$(" :odd") 选择索引为奇的元素
$(" :header") 选择所有标题元素
$(" :lang(language)")
$(" :root") 选择根元素
$(" :animated") 选择所有动画元素

1.3 内容筛选

$(" :contain(text)") 选择包含某文本的元素
$(" :parent") 选择有后代的元素
$(" :empty") 选择无后代的元素
$(" :has(selector)") 包含某元素

1.4 可见性筛选

$(" :visible") 选择占用布局的可见和隐藏元素
$(" :hidden") 选择不占用布局的隐藏元素

1.5 属性值筛选

暂缺

1.6 子元素筛选

$(" :first-child") 选择第一个子元素
$(" :last-child") 选择最后一个子元素
$(" :only-child") 选择独生子
$(" :nth-child[ ]") 选择第n个子元素
$(" :nth-last-child[ ]") 选择倒数第n个子元素

1.7 表单元素筛选

$(" :input") 选择所有input元素
$(" :text") 选择所有文本框
$(" :password") 选择所有密码框
$(" :radio") 选择所有单选按钮
$(" :checkbox") 选择所有复选框
$(" :submit") 选择所有提交按钮
$(" :image") 选择所有图像域
$(" :reset") 选择所有重置按钮
$(" :button") 选择所有button按钮
$(" :file") 选择所有文本域

1.8 表单属性筛选

$(" :enabled") 选择所有可用表单
$(" :disabled") 选择所有不可用表单
$(" :checked") 选择默认选中的元素
$(" :selected") 选择被选中的元素

1.9 特殊

$("this")


2 JQ元素及内容、属性、样式方法

2.1 属性方法

.attr() 读取/设置属性值
.removeAttr() 删除属性

2.2 元素及内容方法

.html() 读取/写入html结构
.text() 读取/写入合并文本
.val() 读取/写入表单当前被选中的值

2.3 样式方法

.addClass() 增加类
.removeClass() 删除类
.toggleClass() 增加和删除类切换开关
.css() 读取/设置样式


3 JQ DOM操作方法

3.1 创建节点

$("HTML结构")

3.2 插入节点

.append() 元素内部最后插入节点
.appendTo()
.prepend() 元素内部最前面插入节点
.prependTo()
.before() 元素前面插入节点
.insetBefore()
.after() 元素后面插入节点
.insetAfter()
.wrap() 加个父元素
.unwrap() 删除父元素
.wrapAll() 所有元素加上同一个父元素
.wrapInner() 元素内部加个父元素

3.3 删除/复制/替换节点

.empty() 清空元素内部
.remove() 删除元素及内部
.detach() 删除并托管元素
.clone() 浅克隆
.clone(true) 深克隆(克隆事件)
.replaceWith() 替换节点
.replaceAll()

3.4 JQ DOM遍历

.children()  遍历并返回指定子元素的集合 (找儿子)
.find()  遍历并返回指定后代元素的集合 (找后代)
.parent()  遍历并返回指定父元素的集合 (找爸爸)
.parents()  遍历并返回指定祖辈元素的集合 (找祖、父)
.closest()  从自身开始,找到并返回最近的指定祖辈元素的集合 (找最亲近的祖、父)
.next()  遍历并返回指定的下一个兄弟元素的集合 (找下一个兄弟)
.prev()  遍历并返回指定的上一个兄弟元素的集合 (找上一个兄弟)
.siblings()  遍历并返回指定的所有兄弟元素的集合 (找所有兄弟)
.add()  在JQ集合中添加元素对象
.each()  for循环迭代器


4 JQ事件

4.1 绑定和解绑事件

.on() 绑定事件
.off() 解绑事件

4.2 鼠标事件

.click() 单击
.dblclick() 双击
.mousedown() 按下鼠标
.mouseup() 放开鼠标
.mousemove() 鼠标指针移动
.mouseover() 鼠标指针移入
.mouseout() 鼠标指针移出
.mouseenter() 鼠标指针移入
.mouseleave() 鼠标指针移出
.hover(function(),function()) 鼠标指针进出切换效果
.focusin() 点击聚焦
.focusout() 失去焦点

4.3 表单事件

.focus() 点击聚焦(不支持冒泡和捕获)
.blur() 失去焦点(不支持冒泡和捕获)
.change() 改变值
.select() 选中文本
.submit() 提交表单

4.4 键盘事件

.keydown() 按下键盘
.keyup() 松开键盘
.keypress() 输入字符


5 JQ动画

.hide() 隐藏元素
.show() 显示元素
.toggle() 显示与隐藏切换开关
.slideDown() 下拉动画
.slideUp() 上卷动画
.slideToggle() 下拉与上卷动画切换开关
.fadeOut() 淡出动画
.fadeIn() 淡入动画
.fadeToggle() 淡入与淡出动画切换开关
.fadeTo() 指定淡入淡出效果
.animate() 动画
stop() 停止动画

转:https://www.cnblogs.com/ghost96169/p/8118124.html



推荐阅读
  • angular.element使用方法及总结
    2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]
  • Commit1ced2a7433ea8937a1b260ea65d708f32ca7c95eintroduceda+Clonetraitboundtom ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 怎么在PHP项目中实现一个HTTP断点续传功能发布时间:2021-01-1916:26:06来源:亿速云阅读:96作者:Le ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • PHP反射API的功能和用途详解
    本文详细介绍了PHP反射API的功能和用途,包括动态获取信息和调用对象方法的功能,以及自动加载插件、生成文档、扩充PHP语言等用途。通过反射API,可以获取类的元数据,创建类的实例,调用方法,传递参数,动态调用类的静态方法等。PHP反射API是一种内建的OOP技术扩展,通过使用Reflection、ReflectionClass和ReflectionMethod等类,可以帮助我们分析其他类、接口、方法、属性和扩展。 ... [详细]
  • 获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法
    本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ... [详细]
  • jqueryajax怎么通过header传递参数?
    /这个是全局的ajax请求头设置,所有的ajax请求都会加上这个请求头 ... [详细]
  • 某天看jQuey的deffered对象的时候,突然想起了曾经面试的一个关于ajax的问题,就是同时发送三个ajax请求,当三个请求都成功的时候输出1,当时不知道jQuery的$.w ... [详细]
  • 一、前言元素定位可以说是学自动化测试中必会技能之一,也可以说是通往自动化之路的开门钥匙。就元素定位方法,除了我们常用并熟知的8种元素定位方法之外,还有一种定位方法可以说是一种特殊的 ... [详细]
  • backgroundposition和长图实现鼠标悬浮动画效果
    以下图片及代码均来自京东云点击这里进入京东云思路和效果图:background-position:00可以用js动态的将长图按帧数一帧一阵的展示出来效果类似gif,红框就是可视界面 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 前端不规则图像点击_如何在前端开发的潮流中快速学习学好学以致用?
    大家好,我是致力于前端开发,前端设计,前端入门的前端小姐姐,今天为大家带来的前端新知识是【雪碧图和滑动门】,不 ... [详细]
  • 使用HTML创建弹出框以便用户输入信息
    在做项目的过程中,我们时常需要进行一些弹框操作,比如在后台管理时需要进行的一些增删改操作,这个时候我们需要使用到弹框,或者在 ... [详细]
  • 这篇文章主要介绍了C++实现图形界面开发Qt教程,涉及坐标函数的应用及图形界面程序设计,需要的朋友可以参考下,希望能给你带来帮助目录嵌套圆环图运行示例总结Qt是一个跨平台框架,通常 ... [详细]
author-avatar
mobiledu2502901287
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有