美文网首页
第35章 介绍以下 jQuery 函数的用法,给出范例

第35章 介绍以下 jQuery 函数的用法,给出范例

作者: kzc爱吃梨 | 来源:发表于2019-05-29 23:36 被阅读0次

1. .val()

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

<input type="text" value="haha">
$('input').val()
img.png
<input type="text">
$('input').val('hello')
页面出现,但是在页面body中不会出现

2. .attr()

获取元素特定属性的值
代码

<input text="text" value="haha">
$('input').attr('value')

3. .removeAttr()

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

<p class="p2" style="color:red">删除元素中的一个属性</p>
<p class="p2" style="color:yellow">删除元素中的一个属性</p>

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

image

4. .prop()

设置或返回被选元素的属性和值
propattire
关于它们两个的区别:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    示例:
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

prop

image

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

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

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

image

5. .css()

这是个和attr非常相似的方法,用来处理元素的css
代码
<p style="font-size:20px"><p>
$('p').css('font-size')

image

6. .addClass()

为元素添加class,不是覆盖原class,是追加,也不会检查重复
代码
<p style="font-size:20px"><p>
$('p').addClass('p1')

image

7. .removeClass()

移除元素单个/多个/所有class
代码

<p class="test p1">Click Here</p>

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

image

8. .hasClass()

检查元素是否包含某个class,返回true/false
代码

<p class="test p1">Click Here</p>

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

image

9. .toggleClass(className)

toggle是切换的意思,方法用于切换,switch是个bool类型值,这个看例子就明白

<div class="tumble">Some text.</div>

第一次执行

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>

第二次执行

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

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

相关文章

网友评论

      本文标题:第35章 介绍以下 jQuery 函数的用法,给出范例

      本文链接:https://www.haomeiwen.com/subject/czkptctx.html