网站建设资讯

NEWS

网站建设资讯

jquery样式,jquery样式的特点

jquery样式与css样式有什么区别?

不存是jquery样式这么一说,其实就是通过js来动态设置css,而通常我们说的css样式则是静态的。如果真要说什么区别,那就是css样式是页面一开始就有的,而jquery动态设置的样式则可以在页面运行的时候随时改变。

创新互联专注骨干网络服务器租用十年,服务更有保障!服务器租用,重庆服务器托管 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

jquery 选中文本框 jquery 文本框样式 jquery 改变样式

首先需要获取到文本框元素,然后通过Jquerycss操作方法修改样式。

Jquery可以根据标签名、id、类等很多方式选取元素。

ID选择器

# 选取带有唯一的指定 id 的元素。id 引用 HTML 元素的 id 属性。相同的 id 值只能在文档中使用一次。

类选择器

. 选择器选取带有指定 class 的元素。class 引用 HTML 元素的 class 属性。与 id 选择器不同,class 选择器常用于多个元素。这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式

标签名选择器

element 选择器选取带有指定标签名的元素。标签名引用 HTML 标签的 与 之间的文本。

如题根据文本框的样式选择标签,我们可以通过以下代码实现。

\\比如文本框的class="text1",则通过类选择器选取。即:

$(".text1")

Jquery修改样式的方法有css,addClass,removeClass等方法.

例如如修改文本框的class="text1"的样式我们可以通过Css方法这样实现:

$(".text1").css({width:"70px",height:"20px",border:"1px solide gray"});

也可通过直接给该元素新增一个样式达到修改效果:

\*我们有一个text2的样式*\

.text2{

width:70px;height:20px;border:1px solide gray;

}

\\然后我们直接添加这个class

$(".text1").addClass("text2");

\\如担心之前已有样式和新增样式冲突,我们可以在添加的同时移除新样式。

$(".text1").addClass("text2").removeClass("text1");

JQuery切换样式

这个用jQuery实现一般是添加一个类和删除一个类。

首先要有一个写好的class样式类。通过下面这个代码实现:

var obj2 = $("div"); // 改变样式的对象

obj2.addClass("className"); // 添加样式,className为已经存在一个class名字

obj2.removeClass("className"); // 删除样式

切换样式

JQuery中有一个方法toggle(),JQuery代码如下:

1 toggleBtn.toggle(function(){

2 //元素显示 代码③

3 }, function(){

4 //元素隐藏 代码④

5 })

toggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。

另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。

1 $("p").toggleClass("another"); //重复切换类名“another”

当不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。

jquery 点击当前添加一个样式,在次点击取消这个样式,

1、首先打开hbuilder编辑器,在html文件中写入5个li标签,第一个li标签设置class样式,再在上方设置li标签的高度、宽度、字体大小、行高的等属性,再设置第一个li标签的样式,给它加一个外边框。

2、然后在下方先引入jQuery的库文件,在script标签中先用$选择器得到li标签的dom对象并给li标签设置一个点击事件,当点击li标签的时候,先调用siblings方法找到同级的li标签去除设置的css样式,然后在给点击的li标签添加样式就可以了。

3、最后打开浏览器,可以看到并排的5个li标签,第一个li标签是有红色边框的。

4、当点击其他的li标签的时候,原来的li标签的边框就没有样式了,点击后的li标签会增加红色边框。                       


当前名称:jquery样式,jquery样式的特点
文章起源:http://njwzjz.com/article/hogdhd.html