jQuery改变元素

1、获取HTML文本

**('标签').text()**例:console.log(('p').text());

2、改变HTML文本

**('选择器').text('文本')** 例:console.log(('.c2').text('啦啦啦啦啦'));

新文本会覆盖原来的内容,如果设置的文本中包含标签,是不会把这个标签解析出来的。

3、获取CSS样式

**('选择器').css('属性')**例:console.log(('.c2').css('width'));

获取包含多个dom元素的jQuery对象的样式,他只会获取到第一个dom对象的样式

4、改变CSS样式

**("选择器").css("属性","属性值")** 例("#test1").css("border","3px solid red")

$('.c2').css({ 'width':'300px'; 'height':'300px'; })

设置的样式是行内样式

5、CSS方法返回值

css方法有返回值,返回值就是设置这个方法的元素本身

例:$(".c1").css("opacity",1).siblings(".c2").css("opacity",0.4)

6、class类使用

**切换类 toggleClass(类名);**例:$("#div1").toggleClass("lei1");注意:如果元素有某个类就移除这

个类,如果元素没有这个类就添加这个类

判断类 hasClass(类名);

例:console.log($("#div1").hasClass("lei1"));注意:判断一个元素有没有某个类,有返回true,没有返回false

**移除类 removeClass(类名1 类名2);**例:$("#div1").removeClass("lei1 lei2"); 注意:若不给参数

时,会移除所有类集/属性。 例:$("#div1").addClass()

**添加类: addClass(类名1 类名2);**例:$("#div1").addClass("lei1 lei2");

7、获取或设置表单内容

val()方法不给参数就是获取例:console.log($("#div").val());

val()方法 给参数就是设置例:$("#div").val("我是设置的值");

8、jQuery操作属性

attr()方法

**设置属性:**选择器.attr("属性","属性值");$("img").attr("src","992.gif");

注:元素有这个属性时会修改当前的属性值,若没有会添加新属性和属性值

attr()方法可以设置多个属性例:$("img").attr({ src:"992.gif", aaa:"hahaha"});

获取属性:选择器.attr("属性名");console.log($("img").attr("src"));

注:若没有这个属性,获取到的是undefined;

removeAttr()方法

移除属性:选择器.removeAttr("属性名");例:$("img").removeAttr("src");

注:此方法**也可以移除多个属性,**例:$("img").removeAttr("src aaa bbb");

ヾ( ̄▽ ̄)Bye~Bye~

相关推荐
今天AI了吗2 分钟前
2026年三大AI桌面智能体横评:Codex vs Hermes vs WorkBuddy
大数据·前端·css·人工智能·架构
kill52216 分钟前
interface vs type:到底该用哪个
前端
敲代码的嘎仔23 分钟前
从零实现视频续播 + 学习进度统计:前端心跳、条件更新、GROUP BY 统计全链路拆解
java·前端·数据库·学习·面试·职场和发展·音视频
做萤石二次开发的哈哈25 分钟前
海康移动交通四款设备技能接入实战:布控球+取证终端+测速仪+出入口终端,Web/App/小程序移动交通应用快速生成
前端·物联网·萤石开放平台·蓝海aiot一站式工作台·aiot开发·移动交通
HwJack2026 分钟前
用 HML + CSS + JS 三段式写鸿蒙界面
javascript·css·harmonyos
IT_陈寒39 分钟前
我TM竟然被Java的空指针坑了第三次!
前端·人工智能·后端
xcLeigh42 分钟前
AI 编程学习路线图:一份覆盖前端、后端、全栈的系统学习计划
前端·人工智能·学习
linux_cfan1 小时前
HTML5 视频交互标注实践:用开源播放器 ZWPlayer 实现热区、测验与分支节点(附接入代码)
前端·javascript·音视频
小羊没烦恼!1 小时前
Office文件的奥秘——.NET平台下不借助Office实现Word、Powerpoint等文件的解析(完)
java·大数据·前端·网络·word·powerpoint·.net
风骏时光牛马1 小时前
AI提示词工程:高效构建精准指令的方法论
前端