jQuery HTML / CSS 方法

面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。

下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

方法	描述
addClass()	向被选元素添加一个或多个类名
after()	在被选元素后插入内容
append()	在被选元素的结尾插入内容
appendTo()	在被选元素的结尾插入 HTML 元素
attr()	设置或返回被选元素的属性/值
before()	在被选元素前插入内容
clone()	生成被选元素的副本
css()	为被选元素设置或返回一个或多个样式属性
detach()	移除被选元素（保留数据和事件）
empty()	从被选元素移除所有子节点和内容
hasClass()	检查被选元素是否包含指定的 class 名称
height()	设置或返回被选元素的高度
html()	设置或返回被选元素的内容
innerHeight()	返回元素的高度（包含 padding，不包含 border）
innerWidth()	返回元素的宽度（包含 padding，不包含 border）
insertAfter()	在被选元素后插入 HTML 元素
insertBefore()	在被选元素前插入 HTML 元素
offset()	设置或返回被选元素的偏移坐标（相对于文档）
offsetParent()	返回第一个定位的祖先元素
outerHeight()	返回元素的高度（包含 padding 和 border）
outerWidth()	返回元素的宽度（包含 padding 和 border）
position()	返回元素的位置（相对于父元素）
prepend()	在被选元素的开头插入内容
prependTo()	在被选元素的开头插入 HTML 元素
prop()	设置或返回被选元素的属性/值
remove()	移除被选元素（包含数据和事件）
removeAttr()	从被选元素移除一个或多个属性
removeClass()	从被选元素移除一个或多个类
removeProp()	移除通过 prop() 方法设置的属性
replaceAll()	把被选元素替换为新的 HTML 元素
replaceWith()	把被选元素替换为新的内容
scrollLeft()	设置或返回被选元素的水平滚动条位置
scrollTop()	设置或返回被选元素的垂直滚动条位置
text()	设置或返回被选元素的文本内容
toggleClass()	在被选元素中添加/移除一个或多个类之间切换
unwrap()	移除被选元素的父元素
val()	设置或返回被选元素的属性值（针对表单元素）
width()	设置或返回被选元素的宽度
wrap()	在每个被选元素的周围用 HTML 元素包裹起来
wrapAll()	在所有被选元素的周围用 HTML 元素包裹起来
wrapInner()	在每个被选元素的内容周围用 HTML 元素包裹起来
$.escapeSelector()	转义CSS选择器中有特殊意义的字符或字符串
$.cssHooks	提供了一种方法通过定义函数来获取和设置特定的CSS值

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

测试 JavaScript 框架库 - jQuery

引用 jQuery

如需测试 JavaScript 库，您需要在网页中引用它。

为了引用某个库，请使用 <script> 标签，其 src 属性设置为库的 URL：

引用 jQuery

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

</body>

</html>

jQuery 描述

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：

JavaScript 方式：

function myFunction()

{

var obj=document.getElementById("h01");

obj.innerHTML="Hello jQuery";

}

onload=myFunction;

等价的 jQuery 是不同的：

jQuery 方式：

function myFunction()

{

$("#h01").html("Hello jQuery");

}

$(document).ready(myFunction);

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。

当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。

由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

	jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

测试 jQuery

请试一下下面这个例子：

实例

<!DOCTYPE html>

<html>

<head>

</script>

function myFunction()

{

$("#h01").html("Hello jQuery")

}

$(document).ready(myFunction);

</script>

</head>

<body>

</body>

</html>

请再试一下这个例子：

实例

<!DOCTYPE html>

<html>

<head>

</script>

function myFunction()

{

$("#h01").attr("style","color:red").html("Hello jQuery")

}

$(document).ready(myFunction);

</script>

</head>

<body>

</body>

</html>

正如您在上面的例子中看到的，jQuery 允许链接（链式语法）。

链接（Chaining）是一种在同一对象上执行多个任务的便捷方法。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

、jQuery的事件有哪些？

javscript的事件：onClick,onmouseover

jquery的事件：click,mouseover

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

1）鼠标事件

click：单击事件

//dbclick：双击事件

mouseover：鼠标悬念（移入）

mouseout：鼠标移出

<style>

.abc{

background-color: #aaa;

}

</style>

$(function(){

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

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

}).mouseout(function(){

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

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

});

</script>

<ul>

</ul>

</div>

2) 键盘事件

keydown：键盘按下事件

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

keydown：键盘放开时触发

$(function(){

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

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

if(event.keyCode==13){

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

return true;

}

return false;

})

});

</script>

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

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

</form>

3) 表单事件

focus：获得焦点时触发

blur：失去焦点

select：文本选中时触发

$(function(){

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

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

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

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

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

}

}).blur(function(){

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

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

}

});

</script>

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

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

</form>

4）其它事件

bind()：绑定事件

unbind()：移除绑定事件

$(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>

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

.abc{

background-color: #aaa;

}

</style>

$(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>

togger()：

a) 鼠标连续点击

b) 显示和隐藏

$(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>

在线咨询

上一篇：HTML5干货整理详解canvas的学习方法及学习曲线（收藏保存）
下一篇：JS短文：如何在网站上使用JavaScript播放通知声音？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery HTML / CSS 方法

您的项目需求