介绍以下 jQuery 函数的用法和范例
2018-07-26 本文已影响0人
初入前端的小菜鸟
.val().attr().removeAttr().prop().css().addClass().removeClass().hasClass().toggleClass()
用法和范例
-
.val()
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
代码
<input type="text" value="haha">
$('input').val()
image
如果没有
value值<input type="text">
$('input').val('hello')
页面出现，但是在页面body中不会出现
-
.attr()
获取元素特定属性的值
代码
<input text="text" value="haha">
$('input').attr('value')
image
-
.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性（attribute）
.removeAttr()方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
代码：
<p class="p2" style="color:red">删除元素中的一个属性</p>
<p class="p2" style="color:yellow">删除元素中的一个属性</p>
$('p').removeAttr('style')
image
-
.prop()
设置或返回被选元素的属性和值
prop和attire
关于它们两个的区别：
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
示例
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
prop
image
像
checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果使用attr方法就会出现下面的情况:
image
-
.css()
这是个和attr非常相似的方法，用来处理元素的css
代码
<p style="font-size:20px"><p>
$('p').css('font-size')
image
-
.addClass()
为元素添加class，不是覆盖原class，是追加，也不会检查重复
代码
<p style="font-size:20px"><p>
$('p').addClass('p1')
image
-
.removeClass()
移除元素单个/多个/所有class
代码
<p class="test p1">Click Here</p>
$('p').removeClass('p1')
image
-
.hasClass()
检查元素是否包含某个class，返回true/false
代码
<p class="test p1">Click Here</p>
$('p').hasClass('p1')
image
-
.toggleClass()
toggle是切换的意思，方法用于切换，switch是个bool类型值
代码
<style>
.box1{
width:50px;
height:25px;
border:1px solid;
}
.box2{
background:#ccc;}
</style>
<body>
<div class="box1"></div>
</body>
$('div').toggleClass('box2')
image
背景颜色切换成灰色
当我们在进行
$('div').toggleClass('box2')切换时，背景颜色消失
我们第一次执行$('div').toggleClass('box2')时
变化成为
<div class="box1 box2"></div>
再次执行时变化成为
<div class="box1"></div>
通过切换来进行一个点击切换图标的小dom
代码（矢量图自己引入）
引入jQuery
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.iconfont {
font-size: 40px;
}
</style>
</head>
<body>
<span class="s1"><i class='iconfont icon-bofang'></i></span>
<script>
$('.s1').on('click',function(){
$(this).find('.iconfont') //查找符合选择器的后代元素 我们查询iconfot
.toggleClass('icon-bofang') //进行切换
.toggleClass('icon-zanting') //进行切换
})
</script>
点击查看：切换效果
