$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值
常见的取值和赋值函数如下:
1. .html() 返回或设置被选元素的内容 (inner HTML)
2. .text() 取出或设置text内容
3. .attr() 取出或设置某个属性的值
4. .width() 取出或设置某个元素的宽度
5. .height() 取出或设置某个元素的高度
6. .val() 取出或设置html内容 取出某个表单元素的值
需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。
五、元素的操作:移动
.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter('p');
.after(),把p元素加到div元素前面:
$('p').after('div');
使用这种模式的操作方法,一共有四对
1. .insertAfter()和.after():在现存元素的外部,从后面插入元素
2. .insertBefore()和.before():在现存元素的外部,从前面插入元素
3. .appendTo()和.append():在现存元素的内部,从后面插入元素
4. .prependTo()和.prepend() :在现存元素的内部,从前面插入元素
1.after():
描述:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码: <b>Hello</b><p>I would like to say: </p> jQuery 代码: $("p").after( $("b") ); 结果: <p>I would like to say: </p><b>Hello</b>
2.insertAfter():
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码: <p>I would like to say: </p><div>Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div>Hello</div><p>I would like to say: </p>
3.before():
描述:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码: <p>I would like to say: </p><b>Hello</b> jQuery 代码: $("p").before( $("b") ); 结果: <b>Hello</b><p>I would like to say: </p>
4.append():
描述:向所有段落中追加一些HTML标记。
HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello</b>"); 结果: <p>I would like to say: <b>Hello</b></p>
5.appendTo()
描述:新建段落追加div中并加上一个class
HTML 代码: <div></div><div></div> jQuery 代码: $("<p/>") .appendTo("div") .addClass("test") .end() .addClass("test2"); 结果: <div><p></p></div> <div><p></p></div>
6.prepend()
描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码: <p>I would like to say: </p><b>Hello</b> jQuery 代码: $("p").prepend( $("b") ); 结果: <p><b>Hello</b>I would like to say: </p>
7.prependTo()
描述:把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div><p>I would like to say: </p></div>
**六**、元素的操作:复制、删除和创建
复制元素使用.clone()
删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
清空元素内容(但是不删除该元素)使用.empty()。
创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:
* $('<p>Hello</p>'); * $('<li>new list item</li>'); * $('ul').append('<li>list item</li>');
七、工具方法
除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。
常用的工具方法有以下几种:
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象,合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。
八、事件操作
jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。
$('p').click(function(){ alert('Hello'); });
目前,jQuery主要支持以下事件: