jQuery学习--jQuery DOM 操作
2015-12-28 18:06
811 查看
jQuery DOM 操作
获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
例:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
//获取表单中value值
alert("Value: " + $("#test").val());
});
$("button").click(function(){
//设置 <input> 字段的值:
$("input").val("Glenn Quagmire");
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。下面的例子演示带有回调函数的 text() 和 html():
实例
$("#btn1").click(function(){$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
如果想设置多个选项的选定状态,比如下拉列表、单选复选框等等,可以通过数组传递操作。
如:
$("input").val(["check1","check2","check3"]); //value 值是这些的将被选定(即默认被勾选)
获取属性 - attr()
jQuery attr() 方法用于获取/设置/改变属性值。下面的例子演示如何获得链接中 href 属性的值:
$("button").click(function(){
alert($("#w3s").attr("href"));
});
下面的例子演示如何改变(设置)链接中 href 属性的值:
$("button").click(function(){
$("#w3s").attr("href","http://www.w3cschool.cc/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cc/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。下面的例子演示带有回调函数的 attr() 方法:
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
$("button").click(function(){
alert($("#w3s").attr("href"));
});
相关文章推荐
- jQuery 双击事件(dblclick)时,不触发单击事件(click)
- jQuery子窗体取得父窗体元素的方法
- Jquery动画操作的stop()函数
- JQuery使用方法及详解
- 解密jQuery内核 DOM操作的核心函数domManip
- Asp.net mvc 添加Jquery UI
- JQuery 中的事件命名空间
- jquery图片轮播效果代码
- 58种jQuery模拟CSS3过渡页面切换特效
- 使用jquery.cookie.js插件实现记住密码功能
- 导入jquery等标签库引发的无法使用问题
- 读jQuery之二十(Deferred对象)--(转)
- JQUERY dialog的用法详细解析
- Jquery_artDialog对话框弹出
- jquery垂直展开折叠手风琴二级菜单
- jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏
- jquery实现“更多”链接
- jsp中找不到jquery.js文件解决办法
- Ajax直接调用WebService
- 基于jQuery实现选取月份插件附源码下载