工业设计网站有那些,宁阳网站建设,免费网站模板下载,免费宣传平台前面聊了很多选择器什么#xff0c;现在聊一些使用方法#xff0c;当然也是常用的方法#xff0c;而不是全部的方法#xff0c;毕竟官网文档很多。
然后看了官网api资源共享都是积分的#xff0c;打算上传一份免费大家使用#xff0c;但是不让上传说是资源重复#xff…前面聊了很多选择器什么现在聊一些使用方法当然也是常用的方法而不是全部的方法毕竟官网文档很多。
然后看了官网api资源共享都是积分的打算上传一份免费大家使用但是不让上传说是资源重复无语。所以通过百度云盘共享了各位有需要的话就下载。
链接: https://pan.baidu.com/s/1SH5gTBFkA43P2dcGBhcacw 提取码: u4uq 前面聊过通过js原生代码可以操作CSS演示自然jQuery也封装了可以操作CSS方法了所以本篇就是简单的聊一些操作CSS样式的方法。
对于CSS的操作有很多但是一般学习
css() - 设置或返回样式属性设置类型的方法 addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
为什么演示这个效果首先创建一个html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srcjquery-3.6.0.min.js/scripttitletest/titlestyle typetext/cssdiv{height: 200px;width: 200px;}#div1{background-color: blue;}#div2{background-color: red;}/style
/head
bodydiv iddiv1/divdiv iddiv2/div
/body
/html效果如下 这个操作有三种格式其效果又是不同的。
第一种 参数只写属性名返回的是属性值
$(选择器).CSS(属性名)演示如下 虽然显示不是设置的颜色名但是等同于rgb的值所以说还是返回的属性值。
第二种参数是属性名属性值两个参数这样就是设置属性值
$(选择器).CSS(属性名,属性值)可以看出修改了颜色不过还有神奇的操作那就是其还有一个隐式迭代的操作简单的来说给匹配到的所有元素进行循环遍历执行响应的操作而不用用户进行遍历操作。这个也是jQuery的一个优点。
比如如下操作
$(div).css(width,250px)第三种 参数也可以是对象形象方法设置多组样式属性名可以不带引号。
第二种格式如此设置多个属性毕竟还是有些麻烦的所以可以通过这种方式。
格式如下
$(div).css({属性名1:属性值1,属性名2:属性值2,……})设置类型的方法
首先来一个
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srcjquery-3.6.0.min.js/scripttitletest/titlestyle typetext/cssdiv{height: 200px;width: 200px;}.div1{border: 1px solid black;}.div2{background-color: red;}/style
/head
bodydiv classdiv1/div/body
/html然后我们依次操作来体验一下还是老规矩再控制台测试就不再html中写然后演示了。毕竟这样会让整个篇幅更小一下。
三个方法一定记住因为前面已经是有class了会告诉浏览器整个是一个操作类选择器的所以不需要再操作中添加 .
addClass()
对标签添加一个或多个类选择器的效果整个addClass相当于追加了类名不影响以前的类名。演示如下:
格式
// 选择器可以是各种格式为了体现后面不用带 . 所以直接用类选择器
$(.类名).addClass(类名 [类名 类名 …………])来一个例子
$(.div1).addClass(div2)可以看出整个变称了两个选择器的效果。
removeClass
删除元素或多个元素的类属性。
格式
// 选择器可以是各种格式为了体现后面不用带 . 所以直接用类选择器
$(.类名1 [, .类名2 …………]).addClass(类名)演示
$(.div1).removeClass(div1)toggleClass()
对被选元素进行添加/删除类的切换操作这个对于一些需要来回操作的方法就会很爽。当然如果绑定事件操作的话会更加真是不过现在还没有聊绑定事件只能通过控制台两次调用进行演示。
格式
// 选择器可以是各种格式为了体现后面不用带 . 所以直接用类选择器
$(.类名1 [, .类名2 …………]).toggleClass(类名)演示
$(.div1).toggleClass(div2)
