jQuery之元素操作及事件绑定

秋涛小哥_1424

秋涛小哥_1424

2016-11-05

956人浏览

原创

1、操作元素之属性:

  ①attr读:(“selector”).attr(“属性名”);=>getAttribute(“属性名”);改:(“selector”).attr(“属性名”);=>getAttribute(“属性名”);改:(“selector”).attr(“属性名”,值);=>setAttribute(“属性名”,值);*(*无法访问不再开始标签中存在的prop属性;例:checked,selected,disabled);

  ②prop读:(“selector”).prop(“属性名”);=>elem.属性名;改:(“selector”).prop(“属性名”);=>elem.属性名;改:(“selector”).prop(“属性名”,值);

  ③移除属性:$(“selector”).removeAttr(“属性名”);=>removeAttribute(“属性名”);

2、操作元素之内容:

  ①html原文:读:(“selector”).html();=>elem.innerHTML;改:(“selector”).html();=>elem.innerHTML;改:(“selector”).html(“html片段”);=>elem.innerHTML=”html片段”;清空元素:$(“selector”).empty();=>elem.innerHTML=””;

  ②纯文本:读:(“selector”).text();=>elem.textContent/innerText;改:(“selector”).text();=>elem.textContent/innerText;改:(“selector”).text(“文本”);

  ③表单元素的value:读:(“selector”).val();改:(“selector”).val();改:(“selector”).val(值);

3、操作元素之样式:

  ①直接操作CSS属性:(“selector”).css(“CSS属性名”);=>getComputedStyle();(“selector”).css(“CSS属性名”);=>getComputedStyle();(“selector”).css(“CSS属性名”,值);=>elem.style.CSS属性名=值;同时修改多个属性值:$(“selector”).css({属性名1:值1,属性名2:值2,……});*(css()能读取所有属性,但只能修改内联样式,属性名须去横线化驼峰);

  ②修改class属性:a、完整修改:(“selector”).attr(“class”,”类名”);b、追加:(“selector”).attr(“class”,”类名”);b、追加:(“selector”).addClass(“类名”);c、移除:(“selector”).removeClass(“类名”);d、清除:(“selector”).removeClass(“类名”);d、清除:(“selector”).attr(“class”,””);或者(“selector”).removeClass();e、判断是否包含:(“selector”).removeClass();e、判断是否包含:(“selector”).hasClass(“类名”);f、在有或没有指定类名之间切换:$(“selector”).toggleClass(”类名“);

4、遍历节点:

  ①获得父元素:$(“selector”).parent();=>elem.parentNode;或elem.parentElement;

  ②获得兄弟元素:下一个兄弟(“selector”).next([selector]);=>elem.nextElementSibling;前一个兄弟:(“selector”).next([selector]);=>elem.nextElementSibling;前一个兄弟:(“selector”).prev([selector]);=>elem.previousElementSibling;其他兄弟:$(“selector”).siblings([selector]);

  ③子元素:直接子元素:(“selector”).children([selector]);所有子代元素:(“selector”).children([selector]);所有子代元素:(“selector”).find(selector);*(find()必须加selector);

5、添加:

  ①创建节点:var elem=elem=(“完整html元素代码段”);

  ②添加:追加到parent下所有子节点末尾:(parent).append((parent).append(elem);作为parent的第一个子节点插入:(parent).prepend((parent).prepend(elem);插入到child之后:(child).after((child).after(elem);插入到child之前:       (child).before((child).before(elem);

jQuery 1.12.4
jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本,由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用,尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

6、其它操作:

  ①删除:$(要删除的元素).remove();

  ②替换:(old).replaceWith(新元素);或(old).replaceWith(新元素);或(新元素).replaceAll(old);

  ③复制:var clone=clone=(“selector”).clone([true]);*(true:为深度克隆包括事件处理函数);

7、事件绑定之bind:

  ①$(…).bind(“事件名”,fn)=>addEventListener;为同一元素的事件处理函数绑定多个函数对象;

  ②$(…).unbind(“事件名”,fn)=>removeEventListener;如果有可能移除事件处理函数,则绑定时必须用实名函数绑定,不能用匿名函数;重载:a、不带任何参数:移除元素上所有事件处理函数绑定;b、只带一个事件名称参数:移除元素上指定事件名称绑定的所有函数对象;c、带两个参数:仅移除事件元素上指定事件名称绑定的执行的函数对象;

8、事件绑定之delegate:

  ①事件代理:让指定父元素下所有符合要求的子元素都能使用事件处理函数(包括生成);原理:利用事件冒泡:a、仅将事件处理函数绑定在父元素;b、获得目标元素:e.target;c、仅响应符合条件的元素的事件;

  ②事件代理使用:将事件绑定到parent上(利用冒泡),只有符合selector条件的元素才能响应事件;(parent).delegate(“selector”,“事件名”,function(e)e.target);移除绑定:(parent).delegate(“selector”,“事件名”,function(e)e.target);移除绑定:(parent).undelegate(“selector”,”事件名”,function(e){e.target});

9、其它绑定:

  ①一次性事件:$(…).one(“事件名”,fn);只能执行一次事件处理函数,执行后自动解除;

  ②将元素所有事件绑定到document:(…).live(“事件名”,fn);(…).live(“事件名”,fn);(…).die(“事件名”,fn);

  ③仅为一个元素绑定事件处理函数:$(“target”).on(“事件名”,fn);

  ④利用冒泡:$(“parent”).on(“事件名”,“selector”,fn);解除绑定off;


相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

jquery

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

2026.11.12

80

15

Go-Zero安装与goctl环境配置教程
Go-Zero安装与goctl环境配置教程

本专题围绕Go-Zero的安装与工具链配置展开,讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置,说明多版本共存、升级回退与CI流水线安装的做法,并整理安装阶段的常见报错与验证步骤。

2026.11.12

60

15

Go-Zero零基础入门教程
Go-Zero零基础入门教程

本专题整理Go-Zero的入门知识,从框架定位、环境准备到跑通第一个API服务,讲清目录分层、配置加载、日志与中间件的基本用法,并对比Gin、Kratos的差异,帮助Go开发者建立整体认知,判断它是否适合当前项目。

2026.11.12

40

15

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

140

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

120

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

120

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

100

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

80

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

100

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery官方API文档
jQuery官方API文档

共0课时 | 0人学习

jQuery 教程
jQuery 教程

共42课时 | 16.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 19.7万人学习