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，我们一起飞！

query完全继承了CSS的操作风格，使用jquery选择器有一些注意事项。

1.选择器中含有特殊符号，比如.#[(^*$等

由于这些符号在jquery选择器中是有特殊含义的，所以不能直接使用，需要转义符进行转义。
HTML代码如下：
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
由于上述元素的id中含有特殊字符，使用jquery选择器时必须通过转义符进行转义。
$('#id\.a');//转义特殊字符“.”
$('#id\#b');//转义特殊字符“#”
$('#id\[1\]'); //转义特殊字符“[]”

2.属性选择器的@

1.1.0版本的属性选择器中有使用@，从1.3.1以后的版本中不再使用@，这一点需要注意。

3.选择器中含有空格

选择器中的空格往往表示的是后代选择器，不加空格表示的是对元素进行的过滤操作等，操作的是元素本身。在实际的使用过程中，有空格和没有空格会取得截然不同的结果，这一点尤其需要注意。

实例代码：

运行结果：

以上即为使用jquery选择器需要注意的一些问题，需要在实际的使用过程中慢慢体会。

了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

在线咨询

上一篇：Power Query抓取网络数据的方法，CSV格式取URL
下一篇：Pandas库常用方法、函数集合

您的项目需求

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

整合营销服务商