jQuery学习- 获取与设置属性的函数

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性访问与设置</title>
            <script src="js/jquery.js"></script>
        <style>
        .astyle{ border: 1px solid red;}
        </style>
        
        <script type="text/javascript">    
            //页面加载完成简写形式
            $(function(){
                //设置baidu超链接地址,attr()函数的用意是设置或获取指定属性的内容
                //attr()函数不是javascript自带函数,而是由jQuery进行扩展的函数
                //使用attr函数设置属性值的时候需要两个参数:参数名,参数值
                $("#abaidu").attr("href","http://www.baidu.com");
                
                //设置img的 图片为1.jpg ,宽度300px  ,提示信息:图片
                $("#img1").attr("src","img/1.jpg");
                $("#img1").attr("alt","图片");
                $("#img1").attr("width","300px");
                
                //简化多次赋值,多次复值 时候参数为json对象
                $("#img2").attr({"src":"img/2.jpg","width":"200","alt":"图2"});
                
                //取得第二张图片的名称
                var r = $("img:eq(1)").attr("src");
                alert(r);
                
                //为全部checkbox设置为选中状态
                //$("input[type='checkbox']").attr("checked","checked");
                
                //将第一个和第四个checkbox设置红色边框 使用组合选择器
                $("input[type='checkbox']:eq(0),input[type='checkbox']:eq(3)").attr("checked","checked");
            })
        
        </script>
    </head>
    <body>
    <div>
        <a href="#" id="abaidu">baidu</a>
        <a href="#">sina</a>
        <a href="#">1688</a>
        <a href="#">taobao</a>
        <a href="#">tianya</a>
        <br>
        <img id="img1" />图1
        <img id="img2" />图2 
        <input type="checkbox" name="letter" value="A" />A
         <input type="checkbox" name="letter" value="B" />B
         <input type="checkbox" name="letter" value="C" />C
         <input type="checkbox" name="letter" value="D" />D
        <input type="checkbox" name="letter" value="E" />E                                                        
        
    </div>
    </body>
</html>

 

posted @ 2016-11-15 17:28  whzym111  阅读(464)  评论(0编辑  收藏  举报