jQuery改变元素

简介: 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");


相关文章
|
7月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
7月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
97 0
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
47 10
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
25 2
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
30 6
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
4月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
23 1
|
4月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
35 0
|
4月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
45 0
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作