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~

相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)1 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠5 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5