Query 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容

• html() - 设置或返回所选元素的内容（包括 HTML 标记）

• val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});

尝试一下 ?

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

实例

$("#btn1").click(function(){alert("值为: " + $("#test").val());});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

实例

$("button").click(function(){alert($("#runoob").attr("href"));});

开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然后我们有时候确需要，找遍jQuery api文档也没有任何方法可以拿到。

看到有的人通过parent().html()，如果当前元素没有兄弟元素还行，如果有那就行不通了。后台实验发现有一个jQuery的一个方法可以解决，而且非常简便，如下：

jQuery.prop("outerHTML");

<div class="test"><p>hello，你好！</p></div>
<script>$(".test").prop("outerHTML");</script>

输出结果为：<div class="test"><P>hello,你好！</p></div>

因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到，经过实验attr()方法是拿不到的，不信的话，大家也可以尝试尝试，谢谢。

当然也有人用jQuery的 clone() 函数配合append() 来创建一个只有一个子元素的节点，然后来拿节点的html，这样也是可行的，但是代码繁琐。

、jQuery的事件有哪些？

javscript的事件：onClick,onmouseover

jquery的事件：click,mouseover

注意jQuery的事件比javascript的事件少一个on

1）鼠标事件

click：单击事件

//dbclick：双击事件

mouseover：鼠标悬念（移入）

mouseout：鼠标移出

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

<style>

.abc{

background-color: #aaa;

}

</style>

<script type="text/javascript">

$(function(){

$("#nav li").mouseover(function(){

$(this).addClass("abc");//当鼠标移入li元素时添加样式

}).mouseout(function(){

//$(this).removeClass() //当鼠标移出时删除所有样式

$(this).removeClass("abc") //当鼠标移出时删除指定样式

});

});

</script>

<div id="nav">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">服装</a></li>

<li><a href="#">电器</a></li>

<li><a href="#">团购</a></li>

<li><a href="#">在线浏览</a></li>

</ul>

</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

2) 键盘事件

keydown：键盘按下事件

keypress：键盘按下并放开时触发

keydown：键盘放开时触发

• 1
• 2
• 3
• 4
• 5

<script type="text/javascript">

$(function(){

//按回车键自动登录(不用再点击登录按钮)

$(document).keydown(function(event){

if(event.keyCode==13){

$("#actionForm").submit();

return true;

}

return false;

})

});

</script>

<form id="actionForm" action="../index.html">

登录名：<input id="txtLoginName" /><br />

密码：<input type="password" />

<input type="button" value="登录" />

</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

3) 表单事件

focus：获得焦点时触发

blur：失去焦点

select：文本选中时触发

• 1
• 2
• 3
• 4
• 5

<script type="text/javascript">

$(function(){

//文本框获得焦点时，将当前文本框的内容清空（值等于"请输入登录名.."）

//文本框失去焦点时，判断内容是否为"请输入登录名.."或是否为空，那么将这个值"请输入登录名.."设回到文本框

$("#txtLoginName").focus(function(){

if($(this).val()=='请输入登录名...'){

$(this).val('');//清空内容

}

}).blur(function(){

if($(this).val().trim()==''){

$(this).val('请输入登录名...');//清空内容

}

});

});

</script>

<form id="actionForm" action="../index.html">

登录名：<input id="txtLoginName" value="请输入登录名..." /><br />

密码：<input type="password" />

<input type="button" value="登录" />

</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

4）其它事件

bind()：绑定事件

unbind()：移除绑定事件

• 1
• 2
• 3
• 4

<script type="text/javascript">

$(function(){

//绑定单个事件

// $("#btn1").bind('click',function(){

// alert("OK");

// });

//绑定多个事件

$("#btn1").bind({

mouseover:function(){

alert("鼠标悬念");

},

mouseout:function(){

alert("鼠标移出");

}

})

//解除绑定事件

$("#btn2").click(function(){

//$("#btn1").unbind("click");//解除绑定的单个事件

$("#btn1").unbind("mouseover mouseout");//解除多个绑定的事件，用空格分隔

//$("#btn1").unbind();//解除所有绑定的事件

});

});

</script>

<input type="button" id="btn1" value="点我" /><br />

<input type="button" id="btn2" value="解除绑定" />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

hover()：相当于mouseover和mouseout的组合

• 1
• 2

.abc{

background-color: #aaa;

}

</style>

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script type="text/javascript">

$(function(){

// $("#nav li").mouseover(function(){

// $(this).addClass("abc");//当鼠标移入li元素时添加样式

// }).mouseout(function(){

// //$(this).removeClass() //当鼠标移出时删除所有样式

// $(this).removeClass("abc") //当鼠标移出时删除指定样式

// });

$("#nav li").hover(

function(){

$(this).addClass("abc");//当鼠标移入li元素时添加样式

},

function(){

$(this).removeClass("abc") //当鼠标移出时删除指定样式

}

);

});

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

togger()：

a) 鼠标连续点击

b) 显示和隐藏

• 1
• 2
• 3
• 4

<script type="text/javascript">

$(function(){

//点击当前页面时显示红绿蓝的背景色

$("body").toggle(

function(){

$(this).css("background-color","red");

},

function(){

$(this).css("background-color","green");

},

function(){

$(this).css("background-color","blue");

}

);

});

</script>

</head>

<body>

测试

</body>