开发者社区> usher.yue> 正文

jQuery文档分析4-属性的动态设置

简介: 例子1:  动态设置img的src属性  其他dom元素雷同 用于动态属性的设置    $(document).ready(    function(){     $("#load").
+关注继续查看
例子1:  动态设置img的src属性  其他dom元素雷同 用于动态属性的设置
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
   $(document).ready(
   function(){
    $("#load").click(function(){
   $("img").attr("src","admin.png") ;   //设置img的src属性
   $("img").attr("src") ;//返回所有img的src属性....
    }
    ) ;
    $("#unload").click(function(){
     $("img").removeAttr("src") ;  //删除img的src属性//
    }) ;
   }   
   ) ;
</script>
<title>Insert title here</title>
</head>
<body>
<img  src="">
<button id="load">显示</button>
<button id="unload">删除</button>
</body>
</html>
 
2、html text val的用法区别  ......
$('p').html();   是获取所有p标签下的html代码包括标签....
$('p').html("<a>xxx<a>"); 设置p下的html内容,和dom的innerHTML属性相对应  
 
$('p').text( );         同上设置或者获取..p标签下的所有文本...或者设置 ....这列的<a>dxx</a>都会解析成文本 
$("p").text("Hello world!");      
 
 
$("input").val();     获取或者设置 表单元素的值..具体可以结合筛选..选择器 选择我们的元素然后再获取或者设置值
$("input").val("hello world!");
 
3、通过动态设置dom元素的class 设置css属性
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
   $(document).ready(
   function(){
    $("#load").click(function(){ 
   $("p").addClass("styleme") ;   //增加class属性 styleme
    }
    ) ;
 $("#unload").click(function(){
     $("p").removeClass("styleme") ;  //卸载css属性
     
    }) ;
   }    
   ) ;
</script>
<style type="text/css">
.styleme{
   font-size: 20px ;
   color: blue; 
}
</style>
<title>Insert title here</title>
</head>
<body>
<p>23232d的</p>
<button id="load">显示</button>
<button id="unload">卸载</button>

</body>
</html>
 
$("p").toggleClass("selected");  //表示如果累不存在就添加一个类
 
4、设置/获取在匹配的元素集中的第一个元素的属性值。
$("input[type='checkbox']").prop("checked"); 获取input元素中type=checkbox 元素集合的第一个元素的checked属性值
$("input[type='checkbox']").prop("disabled", false);  禁用checkbox$("input[type='checkbox']").prop("checked", true);    设置checkbox选中、///
 
 
jQuery文档中目前就介绍了这些属性设置方法
 
 
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1673 0
jQuery EasyUI API 中文文档 - 组合表格(ComboGrid)
ComboGrid 组合表格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults,用 $.fn.combogrid.defaults 重写了 defaults 。
1020 0
jQuery EasyUI API 中文文档 - 时间微调器(TimeSpinner)
TimeSpinner 时间微调器 扩展自 $.fn.spinner.defaults,用 $.fn.timespinner.defaults 重写了 defaults。 依赖 spinner 用法 1. 1. $('#ss').timespinner({   2.     showSeconds:true 3. });  特性 其特性扩展自 spinner,下列是为 timespinner 增加的特性。
789 0
全面入门jQuery最佳实践(二)-jQuery的属性与样式
1 .attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。
1008 0
jQuery EasyUI API 中文文档 - 树(Tree)
Tree 树 用 $.fn.tree.defaults 重写了 defaults。 依赖 draggable droppable 用法 Tree 能在 元素里定义,此标记可以定义为叶节点和子节点。
995 0
jQuery EasyUI API 中文文档 - 数字框(NumberBox)
NumberBox 数字框 扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults 。 依赖 validatebox 用法 1. 1. $('#nn').numberbox({   2.     min:0,   3.     precision:2   4. });  特性 其特性扩展自 validatebox,下列是为 numberbox 增加的特性。
947 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1164 0
jQuery EasyUI API 中文文档 - 窗口(Window)
Window 窗口    扩展自 $.fn.panel.defaults,用 $.fn.window.defaults 重写了 defaults。 依赖 draggable resizable panel 用法 1.
678 0
jQuery EasyUI API 中文文档 - 数值微调器(NumberSpinner)
NumberSpinner 数值微调器 扩展自 $.fn.spinner.defaults 和 $.fn.numberbox.defaults,用 $.fn.numberspinner.defaults 重写了 defaults。
1005 0
+关注
usher.yue
算法相关技术专家
431
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载