追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


JQUERY操作html--获取和设置内容、属性、回调函数

2019-9-25 释然 前端及开发文章及欣赏


一:jQuery - 获取内容和属性

1.获得内容 - text()、html() 以及 val()

      text() - 返回所选元素的文本内容

      html() - 返回所选元素的内容(包括 HTML 标记)

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">圣诞快乐,<b>新年快乐</b></p>   //给p元素里边的文本一部分加上b标签
<button id="b1">显示文本</button>
<button id="b2">显示html</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    
    $("#b1").click(function(){        
    alert(  $("#p1").text() );        //获取文本
        });
        
    $("#b2").click(function(){        
    alert(  $("#p1").html()  );      //获取html内容  结果会包含b标签
    
        });
}); </script>

         val() - 返回表单字段的value值

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip" value="nihao">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        alert($("#ip").val());   结果返回表单元素的value值(nihao)
        
        });

}); </script>

 

2.获取属性 - attr()

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr("href"));
       });
}); </script>


 


 

二、jQuery - 设置内容和属性

1设置内容和回调函数 - text()、html() 以及 val()

         text() - 设置所选元素的文本内容

         html() - 设置所选元素的内容(包括 HTML 标记)

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1"></p>
<button id="b1">显示文本</button>
<button id="b2">显示html</button>

</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    
    $("#b1").click(function(){   
         
    $("#p1").text("圣诞快乐,<b>新年快乐</b>") ; //设置文本  });
        
    $("#b2").click(function(){    
        
   $("#p1").html("圣诞快乐,<b>新年快乐</b>") ; //设置html内容  结果会包含b标签  });
}); </script>

 text()、html()回调函数

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<p id="p1">新年快乐</p>
<button id="b1">显示文本</button>
<button id="b2">显示html</button>

</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    
    $("#b1").click(function(){   
         
    $("#p1").text(function(){ return "happy new year";         //调用函数,返回一个新的文本
        }
         ) ;        
        });
        
    $("#b2").click(function(){    
        
   $("#p1").text(function(){ return "happy <b>new</b> year";     //调用函数,返回一个新的文本
        }      
    
       );
       });
}); </script>

     val() - 设置表单字段的value值和回调函数 

 

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        $("#ip").val("happy"); 
        
        });

}); </script>

val()的回调函数

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<input type="text" id="ip">
<button id="but">显示value值</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
    $("#but").click(function(){
        $("#ip").val(function(){ return "happay";
            }); 
        
        });

}); </script>

 

2.设置属性  attr()

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com">11111</a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr( {  "href":"http://news.baidu.com/"  } ));  //attr()里边,要加{}号  });
}); </script>

 attr()的回调函数

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<body>
<a id="aa" href="www.baidu.com"></a>
<button id="but">显示元素属性</button>
</body>
</html>
<script type="text/javascript"> $(document).ready(function(e) {
   $("#but").click(function(){
       alert($("#aa").attr({  "href":function(){return "http://news.baidu.com/" } } )); //attr()里边,要加{}号  }); 
	

}); </script>

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: JQUERY操作html--获取和设置内容、属性、回调函数 « three.js 的简单实例 | jQuery-获取内容和属性»


订阅Rss