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文档中目前就介绍了这些属性设置方法
 
 
 
目录
相关文章
|
5月前
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
29 0
|
28天前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
10 0
|
29天前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
9 0
|
1月前
|
JavaScript
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
19 2
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0
|
3月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)
|
3月前
|
开发者
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
17 0
|
4月前
|
JavaScript
jQuery中如何来获取和设置属性?
jQuery中如何来获取和设置属性?
30 0
|
5月前
|
JavaScript
jQuery动态拼接多张图片并且获取每张图片名称
jQuery动态拼接多张图片并且获取每张图片名称
26 1
|
5月前
|
JavaScript
jQuery动态增加一行元素和删除一行元素
jQuery动态增加一行元素和删除一行元素
18 0