jQuery学习之旅 Item3 属性操作与样式操作
2015-10-26 13:27
639 查看
本节将Dom元素的操作:属性操作、样式操作、设置和获取HTML,文本和值、Css-Dom操作。
方法:attr() attribute属性
使用:
1、 attr(名称); 获得元素节点对应的属性信息
2、 attr(名称,值) 设置元素节点的属性信息
3、 attr(json对象) 同时可以修改多个属性信息
4、 attr(key,function(){}) 通过函数返回值,设置属性信息
5、 removeAttr(name) 删除指定的属性(type属性特殊一般不允许删除)
具体实例:
另外也有单独操作class 属性的方法:
1、 addClass() ——给元素设置class属性信息
2、 removeClass() ——把元素对应的class指定属性值给删除 ,
3、 toggleClass(class) ——开关class设置属性,有就给删除,没有就给添加上
4、hasClass()——检查匹配的元素是否含有某个特定的类
和attr 和removeAttr(class)有区别,这里只能全部修改,而addClass 和removeClass可以操作多个class中的一个。
PS: addClass()和attr()方法设置样式的不同,attr方法把元素的属性名对应的属性值设为方法中的参数值,addClass()则把属性值
添加到属性名对应的属性值中。例:已有元素
innerHTML不是w3c标准的内容,在有的地方改属性不起作用 例如操作 xml
1、 html() 获取元素包含的内容
2、 html(参数) 设置元素包含的内容
特点:
① 可以设置元素包含的文本内容
② 也可以设置元素包含的html标签内容
PS:该方法可以用于XHTML文档,不能用于XML文档。
获取内容:
html() 获取 : hello worldmilk
text() 获取 : hello worldmilk
设置内容
内容1:百度
内容2:http://www.baidu.com’>百度
text和html方法区别
获取内容:text:获取内容只关心文本内容,不理会html标签; html:获取内容html和文本内容都起作用
设置内容:text:设置内容,html标签内容转化为符号实体内容;html: html标签和普通文本内容都可以设置
PS: 该方法对html和XML文档都适用。
val(参数) 设置指定元素的value信息
attr()
form表单会经常操作value属性:密码框、下拉列表、复选框、单选按钮、文本域、隐藏域
css(name,value) 设置样式属性信息
css(json对象) 同时设置多个样式属性信息
另附:offset()、position()、scrollTop()和scrollLeft()
offset()方法——用于获取元素相对当前窗体的偏移量,其返回对象包括两个属性:top和left。方法如下:
PS: offset()只对可见元素有效。
position()方法——用于获取元素于最近的个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。方法如下:
scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下:
也可以添加参数将元素滚动到指定的位置。例:
1、属性操作
<input type=”text” name=”username” value=”jack” class=”apple”>
方法:attr() attribute属性
使用:
1、 attr(名称); 获得元素节点对应的属性信息
$(“input”).attr(‘class’); //apple $(“input”).attr(‘type’); //text
2、 attr(名称,值) 设置元素节点的属性信息
$(“input”).attr(‘name’,’useremail’); $(“input”).attr(‘value’,’tom’);
3、 attr(json对象) 同时可以修改多个属性信息
var jn = {name:’userqq’, value:’123987’, class:’pear’}; $(“input”).attr(jn);
4、 attr(key,function(){}) 通过函数返回值,设置属性信息
$("#usernm").attr('value',function(){ //相关程序 return "linken"; });
5、 removeAttr(name) 删除指定的属性(type属性特殊一般不允许删除)
$("#usernm").removeAttr('class'); $("#usernm").removeAttr('value');
具体实例:
<script>
function f1(){
//获得元素节点对应的属性信息
console.log($("#usernm").attr('type')); //text
console.log($("#usernm").attr('name')); //username
console.log($("#usernm").attr('class')); //apple
//修改元素的属性信息attr(name,value)
$("#usernm").attr('name','useremail');
$("#usernm").attr('id','user');//本身可以修改,但是后边的选择器就失效了
$("#usernm").attr('value','tom');
$("#usernm").attr('class','orange');
//console.log($("#usernm").attr('value'));
//同时修改多个属性信息
var jn = {name:'userqq',value:'987345',class:'pear'};
$("#usernm").attr(jn);
//通过函数返回值设置属性信息
$("#usernm").attr('value',function(){ //相关程序 return "linken"; });
//修改type属性(低版本火狐允许修改type属性)
//$("#usernm").attr('type','radio');
//删除指定属性
$("#usernm").removeAttr('class'); $("#usernm").removeAttr('value');
$("#usernm").removeAttr('name');
//$("#usernm").removeAttr('type');
$("#usernm").removeAttr('id');
}
</script>
<body>
<h2>属性操作</h2>
<input id="usernm" type="text" name="username" value="jack" class="apple" />
<input type="button" value="触发" onclick="f1()">
</body>
2、class类别快捷操作方法
可以用上面的方法来修改class属性:<div class=”apple”> $(“div”).attr(“class”); //apple 获得属性信息 $(“div”).attr(“class”,’pear’) //修改属性信息
另外也有单独操作class 属性的方法:
1、 addClass() ——给元素设置class属性信息
2、 removeClass() ——把元素对应的class指定属性值给删除 ,
3、 toggleClass(class) ——开关class设置属性,有就给删除,没有就给添加上
4、hasClass()——检查匹配的元素是否含有某个特定的类
和attr 和removeAttr(class)有区别,这里只能全部修改,而addClass 和removeClass可以操作多个class中的一个。
<sccript> function f1(){ //$("div").attr('class','apple'); //添加class属性 //addClass() $("div").addClass('pear'); } function f2(){ //删除class属性 $("div").removeClass("banana"); //删除指定的class属性值 //$("div").removeAttr("class"); //$("div").attr("class","banana"); } function f3(){ //开关效果 $("div").toggleClass('apple'); } </script> <body> <h2>class快捷操作方法</h2> <div class="banana">this is computer</div> <input type="button" value="添加class" onclick="f1()"> <input type="button" value="删除class" onclick="f2()"> <input type="button" value="开关class" onclick="f3()"> </body>
PS: addClass()和attr()方法设置样式的不同,attr方法把元素的属性名对应的属性值设为方法中的参数值,addClass()则把属性值
添加到属性名对应的属性值中。例:已有元素
<p class='class1'>元素样式</p>,使用attr()和addClass()分别添加新样式。
$("p").attr("class","another").结果是<p class='another'>元素样式</p> $("p").addClass("class","another")结果是<p class='class1 another'>元素样式</p>
3、html()获取或设置一个元素包含的内容
<div id=”one”>hello</div> document.getElementById(‘one’).innerHTML; //可以获得元素标签包含的内容:hello
innerHTML不是w3c标准的内容,在有的地方改属性不起作用 例如操作 xml
1、 html() 获取元素包含的内容
2、 html(参数) 设置元素包含的内容
特点:
① 可以设置元素包含的文本内容
② 也可以设置元素包含的html标签内容
<script> function f1(){ console.log($("div").html()); //<span>this</span> is <a>computer</a> } function f2(){ //可以同时设置元素包含的“文本”和“html”标签内容 $("div").html("<a href='http://www.baidu.com'>hello world</a>"); } </script> <body> <h2>html快捷操作方法</h2> <div class="banana"><span>this</span> is <a>computer</a></div> <input type="button" value="获得元素包含的内容" onclick="f1()"> <input type="button" value="设置元素包含的内容" onclick="f2()"> </body>
PS:该方法可以用于XHTML文档,不能用于XML文档。
4、text()方法获取或设置元素包含的内容
text ——-针对文本发生作用<div><a>hello world</a>milk</div>
获取内容:
html() 获取 : hello worldmilk
text() 获取 : hello worldmilk
设置内容
内容1:百度
html(内容): <div>百度</div> text(内容): <div>百度</div>
内容2:http://www.baidu.com’>百度
html(内容): <div><a href=’http://www.baidu.com’>百度</a></div> text(内容): <div><a href=’http://www.baidu.com’>百度</a></div> // text(参数)作用参数html标签会被转化为符号实体
text和html方法区别
获取内容:text:获取内容只关心文本内容,不理会html标签; html:获取内容html和文本内容都起作用
设置内容:text:设置内容,html标签内容转化为符号实体内容;html: html标签和普通文本内容都可以设置
<script> function f1(){ //文本和元素标签内容都可以获得<span>this</span> is <a>computer</a> //console.log($("div").html()); //获取纯文本内容this is computer //console.log($("div").text()); $("div").html($("div").html()+'abc'); } function f2(){ //可以同时设置元素包含的“文本”和“html”标签内容 //$("div").html("<a href='http://www.baidu.com'>hello world</a>"); //$("div").text("<span>百度</span>"); //<span>百度</span> } </script> <body> <h2>text快捷操作方法</h2> <div class="banana"><span>this</span> is <a>computer</a></div> <input type="button" value="获得元素包含的内容" onclick="f1()"> <input type="button" value="设置元素包含的内容" onclick="f2()"> </body>
PS: 该方法对html和XML文档都适用。
5、操作value属性快捷方法val()
val() 获得指定元素的value信息val(参数) 设置指定元素的value信息
attr()
form表单会经常操作value属性:密码框、下拉列表、复选框、单选按钮、文本域、隐藏域
function f1(){ //textarea与普通input框一样可以使用value属性 //$("#username").attr('value'); //console.log($("#username").val()); //获得value属性信息 console.log($("#introduce").val()); //获得textarea的value值 } function f2(){ //修改value属性信息 //$("#username").val('tom'); $("#introduce").val('very good'); //设置textarea的value值 } <body> <h2>val快捷操作方法</h2> <input type="text" name="username" id="username" value="linken" /> <!--密码框、下拉列表、复选框、单选按钮、文本域、隐藏域、普通按钮--> <textarea id="introduce">I am linken</textarea> <input type="button" value="获得" onclick="f1()"> <input type="button" value="设置" onclick="f2()"> </body>
6、CSS-Dom操作css()操作样式属性信息
css(name) 获取样式信息css(name,value) 设置样式属性信息
css(json对象) 同时设置多个样式属性信息
<script> function f1(){ //获取样式信息 console.log($("div").css("width")); console.log($("div").css("background-color")); } function f2(){ //$("div").css('width',"200px"); //$("div").css('height',"100px"); //$("div").css('background-color',"pink"); //利用json对象同时设置多个样式信息 var jn = {width:"300px",height:"200px;",fontSize:"30px","background-color":"lightgreen"}; $("div").css(jn); } </script> <body> <h2>css快捷操作方法</h2> <div>this is computer</div> <input type="button" value="获得" onclick="f1()"> <input type="button" value="设置" onclick="f2()"> </body>
另附:offset()、position()、scrollTop()和scrollLeft()
offset()方法——用于获取元素相对当前窗体的偏移量,其返回对象包括两个属性:top和left。方法如下:
$(selector).offset()
\\该示例用于获得元素p的偏移量。 var offset= $("p").offset(); var left=offset.left; var top=offset.top;
PS: offset()只对可见元素有效。
position()方法——用于获取元素于最近的个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。方法如下:
$(selector).position();
\\该示例用于获得元素p的位置。 var postion = $("p").positon(); var left=positon.left; var top=positon.top;
scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下:
$(selector).scrollTop();$(selector).scrollLeft();例:
\\该示例用于获得元素的滚动条的位置。 var scrollTop=$("p").scrollTop(); var scrollLeft=$("p").scrollLeft();
也可以添加参数将元素滚动到指定的位置。例:
$("textarea").scrollTop(300); $("textarea").scrollLeft(300);
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结