jQuery操作属性与元素

操作元素的属性  
attr(attr)  获取属性的值
attr(attr,val) 给指定属性赋值
removeAttr(attr) 去掉指定属性

prop(prop)  获取属性的值
prop(prop,val) 给指定属性赋值
       jQuery 1.6增加了.prop()方法。
       如 checked, selected、readonly、disabled 使用prop()等,返回值是true或者false
       更加方便处理。
       
each(index)  对符合条件的元素逐个处理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM操作-操作属性</title>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function changeA(){
                //获取超链接
                //var aElem = $("a#a1");
                alert($("a#a1").attr("href")+" "+$("a#a1").attr("target"));
                //修改文本
                $("a#a1").html("京东");
                //修改两个属性 href target
                $("a#a1").attr("href","http://www.jd.cn");//setAttribute()
                $("a#a1").attr("target","_self");
                alert($("a#a1").attr("href")+" "+$("a#a1").attr("target"));
            }
            
            function changeSubmit(){
                //获取协议框的值
                //var flag = $("#agreement").attr("checked");
                //alert(flag);
                var flag = $("#agreement").prop("checked");//Property Attribute
                alert(flag);
                //根据协议框的值修改提交按钮的状态
                /*
                if(flag){
                    $("#sub1").prop("disabled",false);
                }else{
                    $("#sub1").prop("disabled",true);
                }*/
                $("#sub1").prop("disabled",!flag);
            }
            
            function changeImg(){
                //$("img").attr("src","img/img1.jpg");//此时不能使用隐式迭代了,因为每个元素的属性值不同
                //var arr = $("img");
                /*
                for(var i=0;i<arr.length;i++){
                    arr[i].src = "img/img"+(5-i)+".jpg";
                }
                */
                $("img").each(function(i){
                    //this.src = "img/img"+(5-i)+".jpg";
                    $(this).attr("src","img/img"+(5-i)+".jpg");
                });
            }
        </script>
    </head>
    <body>
        <h3>注册用户</h3>
        <form action="doRegister.jsp" method="get">
            <table border="0" width="40%">                        
                <tr>
                    <td>手机号码</td>
                    <td><input  type="text"  name="username" id="username" value="请输入姓名"/></td>
                </tr>
                <tr>
                    <td>密&nbsp;码</td>
                    <td><input  type="password" name="pwd" id="pwd" /></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" name="repwd" id="repwd"/></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="checkbox" name="agreement" id="agreement"  onchange="changeSubmit()"/>我同意该协议</td>
                </tr>
                <tr>
                    <td colspan="2"  align="center">
                        <input id="sub1" type="submit" disabled="disabled" value="提交"  />
                        <input type="reset" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
        
        <a id="a1"  href="http://www.taobao.com" target="_blank">淘宝</a>
        <input type="button" value="改变超链接" onclick="changeA()"/>
        <hr />
        <img  src="img/img1.jpg"/>
        <img  src="img/img2.jpg"/>
        <img  src="img/img3.jpg"/>
        <img  src="img/img4.jpg"/>
        <img  src="img/img5.jpg"/>
        <input  type="button" value="改变图片" onclick="changeImg()"/>
    </body>
</html>

 

 

DOM节点操作
append()、appendTo() 添加子元素(末尾)
prepend()  prependTo() 添加子元素(前置)
insertBefore()、before() 添加平级元素(前面)
insertAfter() 、 after()添加平级元素(后面)

replaceWith()和replaceAll() 用于替换某个节点
remove() 删除元素  empty() 删除子元素

$作用4:$(HTML代码)
        将HTML代码转换成jQuery对象

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM操作-操作元素</title>
        <style type="text/css">
            div{
                font-size:16px;
                border:1px solid #003a75;
                margin:5px;
            }
            .myClass{
                background-color:#7FFFD4;
            }
        </style>
        <!-- 
            
        <div>
            <p>口才训练课</p>
        </div>
        -->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                var newDiv = $("<div><p>口才训练课</p></div>")
                //append()、appendTo() 添加子元素(末尾)
                //$("div").append(newDiv);
                //newDiv.appendTo($("div:first"));
                //prepend()  prependTo() 添加子元素(前置)
                //$("div").prepend(newDiv);
                //newDiv.prependTo($("div:last"));
                //insertBefore()、before() 添加平级元素(前面)
                //$("div:first").before(newDiv);
                //insertAfter() 、 after()添加平级元素(后面)
                //$("div:first").after(newDiv);
                
                //
                //replaceWith()和replaceAll() 用于替换某个节点
                //$("div:last").replaceWith(newDiv);
                //remove() 删除元素  empty() 删除子元素
                //$("div:first").remove(); //自己讲自己删除
                //$("div:first").empty();
                
                //删除上级(多层上级)
                //$("#p1").parent().parent().remove();
                //$("#p1").parents("body").remove();
                //删除自己
                //$("#p1").remove();
                //删除下级(多层下级)
                //$("#div1").children().remove();
                //$("#div1").find("p#p1").remove();
                
                //删除平级
                //$("#p8").nextAll().remove();
                $("p").has("span").remove();
            });
            
        </script>
    </head>
    <body>
        
        <div id="div1">
            <p id="p1">1. JavaSE</p>
            <p>2. Oracle</p>             
        </div>
    
        <div>            
            <p>3. HTML/CSS/JS</p>
            <p>4. jQuery/EasyUI</p>
            <p>5. JSP/Servlet/Ajax</p>
           
        </div>
        
        <div>
            <p>6. SSM</p>
            <p>7. SpringBoot/SpringCloud/SpringData</p>
            <p id="p8">8. Maven/Linux</p>
            <p><span>9. Redis/Solr/Nginx</span></p>
             <p>10. SpringBoot/SpringCloud/SpringData</p>
        </div>
        
        <div>
            <p>11. 就业指导</p>
        </div>
    </body>
</html>

 

 

通过函数间接的查找元素
平级元素  first()  last()
          next()  nextAll() prev() prevAll()
          siblings()  has()
上级元素:parent()  parents()
下级元素:children() find()  

       以上很多函数可以通过选择器直接实现

       注意:如果html代码中出现了多级单引号和双引号,需要使用转义字符来实现转义,保证正确运行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM操作-操作元素</title>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function addFileItem2(){
                //1.创建一个tr
                var newRow = $('<tr>'+
                    '<td> </td>'+
                    '<td>'+
                        '<input type="file" name="photo" id="photo"/>'+
                        '<input type="button"  value="删除"  onclick="delFileItem(this)"/>'+ 
                    '</td>'+                    
                '</tr>');
                //2.将新创建的tr加入到指定的位置
                $("#lastrow").before(newRow);
            }
            function delFileItem2(obj){
                //console.info(obj);
                //$(obj).parent().parent().remove();
                $(obj).parents("tr").remove();
            }
            
            function addFileItem(){
                //1.创建一个tr
                var newRow = $('<tr>'+
                    '<td> </td>'+
                    '<td>'+
                        '<input type="file" name="photo" id="photo"/>'+
                        '<input type="button"  value="删除"  onclick="delFileItem(\'bjsxt\')"/>'+ 
                    '</td>'+                    
                '</tr>');
                //2.将新创建的tr加入到指定的位置
                $("#lastrow").before(newRow);
            }
            function delFileItem(obj){
                //console.info(obj);
                //$(obj).parent().parent().remove();
                //$(obj).parents("tr").remove();
                alert(obj);
                //console.info(this);
            }
        </script>
    </head>
    <body>
        <h3>注册用户</h3>
        <form action="doRegister.jsp" method="get">
            <table id="table1" border="1" width="40%">                        
                <tr>
                    <td>用户名</td>
                    <td><input  type="text" name="username" id="username" value="请输入姓名"/></td>
                </tr>
                <tr>
                    <td>照片 </td>
                    <td>
                        <input type="file" name="photo" id="photo"/>
                        <input type="button"  value="添加"  onclick="addFileItem()"/> 
                    </td>                    
                </tr>
                        
                
                <tr id="lastrow">
                    <td colspan="2"  align="center">
                        <input  type="submit" value="提交" />
                        <input type="reset" value="重置"/>                        
                    </td>                    
                </tr>
                
            </table>
        </form>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值