Jquery属性中获取与设置的示例分析
这篇文章给大家分享的是有关Jquery属性中获取与设置的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联-专业网站定制、快速模板网站建设、高性价比鹿邑网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式鹿邑网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖鹿邑地区。费用合理售后完善,十余年实体公司更值得信赖。
jquery是什么
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
Jquery属性的获取与设置
//找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性 $("input:last").removeAttr('value'); //得到.first-div内的文本,并以此来设置最后一个p内的文本 $('p:last').text( $(".first-div").text() ) //.html() 不传入值,就是获取.first-div类的HTML内容,不仅仅是文本 //.html( htmlString ) 用之前得到的内容来设置第一个p标签的html内容 $('p:first').html( $(".first-div").html() ) ; //.val()获取表单id为single元素的值 $("p").text( $("#single").val() ); //设置表单text字段内的值 $("input[type='text']").val('修改表单的字段')
.html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其子元素,.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
JQuery添加与删除样式
//为class=left下的div元素增加一个新样式 $('.left div').addClass('newClass') //找到所有的div,然后通过addClass函数增加类名 $("div").addClass(function(index,className) { //找到类名中包含imooc的元素,为其添加类名 if(-1 !== className.indexOf('imooc')){ $(this).addClass('imoocClass') //this指向匹配元素集合中的当前元素 } }); //class=left下div元素删除newClass样式 $('.left div').removeClass('newClass'); //如果该元素存在该类名就去除,否则就添加 $('.left div').toggleClass('newClass'); //获取class=first的字体大小样式值 $('p:eq(1)').text( $('.first').css("font-size")); //获取一组属性值并返回为一个对象 var value = $('.first').css(['width','height']); //通过对象访问到对应的值 document.write( "widht:" + value.width + " height:" +value.height) ; //设置样式属性值 $('.fourth').css("background-color","red"); //设置多个属性值 $('.seventh').css({ 'font-size' :"15px", "background-color" :"#40E0D0" });
addClass与css两个方法均用于操作页面样式,两者比较。
可维护性:.addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类。css方法是通过JavaScript改变元素的样式。通过.addClass()我们可以批量的给相同的元素设置统一规则,变动起来比较方便,可以统一修改删除。如果通过.css()方法就需要指定每一个元素一一修改,比较麻烦。
灵活性:通过.css()方式可以很容易动态的去改变具体一个元素的属性,不需要繁琐的定义一个class类的规则。一般来说在不确定开始布局规则,通过动态生成的HTML代码结构中,都是通过.css()方法处理的。
样式值:.addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,.css()可以获取到指定的样式值。
样式的优先级:css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下:外部样式 < 内部样式 < 内联样式。
.addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上,通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的通过.css方法设置的样式属性优先级要高于.addClass()方法
总结:
.addClass与.css方法各有利弊,一般若是静态的结构,且确定了布局的规则,可以用addClass的方法,增加统一类规则。如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式
感谢各位的阅读!关于“Jquery属性中获取与设置的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
新闻名称:Jquery属性中获取与设置的示例分析
链接分享:http://myzitong.com/article/gjiche.html