介绍以下 jQuery 函数的用法和范例

  1. .val()
  2. .attr()
  3. .removeAttr()
  4. .prop()
  5. .css()
  6. .addClass()
  7. .removeClass()
  8. .hasClass()
  9. .toggleClass()

用法和范例

  1. .val()
    这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值

代码

$('input').val()

image

如果没有value

$('input').val('hello')

介绍以下 jQuery 函数的用法和范例_第1张图片
页面出现,但是在页面body中不会出现

  1. .attr()
    获取元素特定属性的值
    代码

$('input').attr('value')

image

  1. .removeAttr()
    为匹配的元素集合中的每个元素中移除一个属性(attribute)
    .removeAttr()方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法,并且它解决了跨浏览器的属性名不同的问题。

代码:

删除元素中的一个属性

删除元素中的一个属性

$('p').removeAttr('style')

介绍以下 jQuery 函数的用法和范例_第2张图片
image

  1. .prop()
    设置或返回被选元素的属性和值
    propattire
    关于它们两个的区别:
  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    示例
是否可见
是否可见

prop

介绍以下 jQuery 函数的用法和范例_第3张图片
image

checkboxradioselect这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果使用attr方法就会出现下面的情况:

介绍以下 jQuery 函数的用法和范例_第4张图片
image

  1. .css()
    这是个和attr非常相似的方法,用来处理元素的css
    代码

$('p').css('font-size')

image

  1. .addClass()
    为元素添加class,不是覆盖原class,是追加,也不会检查重复
    代码

$('p').addClass('p1')

image

  1. .removeClass()
    移除元素单个/多个/所有class
    代码

Click Here

$('p').removeClass('p1')

介绍以下 jQuery 函数的用法和范例_第5张图片
image

  1. .hasClass()
    检查元素是否包含某个class,返回true/false
    代码

Click Here

$('p').hasClass('p1')

介绍以下 jQuery 函数的用法和范例_第6张图片
image

  1. .toggleClass()
    toggle是切换的意思,方法用于切换,switch是个bool类型值
    代码


$('div').toggleClass('box2')

介绍以下 jQuery 函数的用法和范例_第7张图片
image

背景颜色切换成灰色

当我们在进行$('div').toggleClass('box2')切换时,背景颜色消失

我们第一次执行$('div').toggleClass('box2')
变化成为

再次执行时变化成为

通过切换来进行一个点击切换图标的小dom
代码(矢量图自己引入)
引入jQuery


 
    


    
    

点击查看:切换效果

你可能感兴趣的:(介绍以下 jQuery 函数的用法和范例)