JQuery的属性操作和循环

最新推荐文章于 2022-03-03 14:09:10 发布

SpecYue

最新推荐文章于 2022-03-03 14:09:10 发布

阅读量286

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_34788903/article/details/86571005

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

取出或者设置html内容

var $htm= $("#div").html  取出
$("#div").html("<span>文字</span>")  设置

取出或者设置某个属性的值

var $src=$('#img1').prop('src')  取出

$('#img1').prop({src:'test.jpg',alt:"test Image"}) 设置

设置a标签的属性

跳转到百度的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $a=$('.link');
            console.log($a.prop('class'));/*没有设置的属性要是读的话会读为空*/
            $a.prop({href:'http://www.baidu.com',title:'百度'});/*设置属性*/
        })
    </script>
</head>
<body>
    <a href="#" class="link">这是一个a标签</a>
</body>
</html>

JQuery的循环

对JQuery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用到each方法

$(function(){
	$('.list li').each(function(i){
		$(this).html(i)
	})
})

得到list类下面的每一个li，赋值加上i。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $li=$('.list li');
            $li.each(function (index) {
                // $(this).css()
                if($(this).index()%2==0){
                    $(this).css({backgroundColor:'gold'});
                }
            })
        })
    </script>
</head>
<body>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>