jQuery中.html(),.text()和.val()的概述
『jQuery』.html(),.text()和.val()的概述及使用
jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如：你可以给已存在的元素的内部，周围，前面或者后面增加新元素；或者用一个元素替代另一个元素；你也可以读取或者修改一个元素的内容或结构。有时我们就会比较模糊，不知道是给元素增加内容或者增加一个元素，比如说我们需要给一个存在的元素有效的增加这个元素的内容。
这里主要和大家一起分享如何增加，删除和替换元素，jQuery给我们提供了三种方法来对元素的结构，内容进行操作：
.html():读取和修改一个元素的HTML内容，详情.html()；
.text()：读取和修改一个元素的文本内容，详情.text()；
.val()：读取和修改一个表单元素的value字段值，详情.val()。
正如你将看到的，这些方法可以让你轻松的读取或修改元素的原始内容或读取和修改任何HTML的值，也可以轻松的读取或修改表单中的value字段值。
1.读取一个元素的HTML结构——.html()
语法：
$("Element").html();
返回值：string
HTML:
jQuery Code:
$(document).ready(function(){
alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html());
});
如果你调用多个选定元素的.html()方法，那么其读取的只是第一个元素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的HTML 内容会被获取。
2、修改一个元素的HTML内容——.html(htmlString)
语法：
$("Element").html(htmlString);//htmlString是用来设置每个匹配元素的一个HTML 字符串返回值：jQuery对象
说明：
重新设置第一个匹配元素的html内容，这些元素的任何内容完全被新的内容取代。基于上面的实例，将原来的段落的HTML内容完全取代：
HTML Markup
jQuery Code:
$(document).ready(function(){
$("div.demo p").html('
新加的标签
我是divdemo中第一个p 元素：我在第一个P里面
');});
如果使用.html(htmlStrong)方法匹配在多个元素上，那么多个匹配元素将的HTML内容将被替换，并且都被替换成一样的HTML结构，也就是.html(htmlString)方法中指定的“htmlString”
结构。换句话，如果你使用.html(htmlString)方法选定了多个元素，那么这些选定的元素的HTML内容都会被.html(htmlString)方法中的“htmlString”所替代。
3。使用一个回调函数来替换一个元素的HTML内容
语法：
$("Element").html(function(index,html){...});
返回值：jQuery对象
说明：
用来返回设置HTML内容的一个函数。接收元素的索引位置和元素旧的HTML作为参数。
使用个回调函数来替换一个元素的HTML内容，必须满足下面两个条件：
1.当前元素的索引值位置(index值从0开始计算)；
2.当前元素的旧的html内容。
函数的返回值随后被用来作为替代HTML。这种做法很方便的，如果你要替换多个元素的内容，而且不想像上面那们换成相同的内容，而是换成不同的内容，那么我们就可以使用这种方法，根据元素自己的位置或现有的内容（或者两者同时）来给多个元素替换成不同的html 内容。我们来看一个实例：
HTML Markup:
jQuery Code:
$(document).ready(function(){
$("div.demo p").html(function(index,oldHtml){
return "我是段落" + (index+1) + "：" + oldHtml;
});
});
操作元素的纯文本内容——.text()
前面的.html()方法让你可以读取或修改元素的HTML内容——包括元素的HTML标签；而jQuery中的.text()方法仅仅是对元素的纯文本的操作。他和.html()方法一样包含了三种使用方法：
1、读取文本内容——.text()
语法：
$("Element").text();
返回值：返回字符串；
说明：
将获取匹配元素集合中每个元素的文本内容结合,包括他们的后代。.text()和.html()方法不同，.text()方法都可以在XML和HTML文档中使用。.text()方法的结果是由所有匹配元素包含的文本内容组合起来的文本(由于不同的浏览器对HTML分析器的不同，在返回的文本换行和其他空格可能会有所不同。)
使用.text()和.html()方法都差不多相同，如：
HTML Markup:
jQuery Code:
$(document).ready(function(){
alert(".text()读取的内容：" + $("div.demo p").text());
});
从上面的效果中我们得知：使用.text()方法，我们只读取元素的纯文本内容，包括他的后代
元素，而此元素中的HTML标签（包括其后代元素的HTML标签）都被剥离出去，只留下文本内容。
.text()和.html()方法一样可以同时选定多个元素，但有一点不同：.html()匹配多个元素时，只会读取匹配元素中的第一个；而.text()方法不同，他在匹配多个元素时，会同时读取多个
元素的内容，如：
HTML Markup
jQuery Code
$(document).ready(function(){
alert(".text()方法：" + $("div.demo p").text());
alert(".html()方法：" + $("div.demo p").html());
});
2、替换文本内容——.text(textString)
语法
$("Element").text(textString);//textString用于设置匹配元素内容的文本
返回值：jQuery对象
说明：
.text(textString)方法和.html(htmlString)方法都是一样用来替换元素的内容，他们不同之种是：.html(htmlString)方法会把HTML标签当作新的HTML标签来替换原来的内容，
而.text(textString)则把HTML标签会转换成纯文本内容来代替元素的旧内容。换句话
说，.text(textString)方法中如果包含了HTML的标签，此方法会将< 替换为<,>替换为>。
我们在前面的.html(htmlString)实例基础上把.html()换成.text()。
HTML Markup
jQuery Code
$(document).ready(function(){
$("div.demo p").text('
新加的标题
我是div.demo中第一个P元素：< href="#">我在第一个P里面
');});
通过以上得知，.text(textString)方法会将HTML标签当作纯文本内容来替换元素的旧内容，这一点和.html(htmlString)方法是完全不一样，大家可以和前面的.html(htmlString)进行比较。不过他们有一个相同之处：如果匹配多个元素时，采用.text(textString)会将所匹配元素的内容替换成相同的内容。
3、使用一个回调函数来替换一个元素的文本内容
.text()方法和.html()方法一样，也要以通过一个回调函数来动态的替换多个元素的内容，不致于像.text(textString)把多个元素换成相同的内容。
语法
$("Element").text(function(index,text){...});
返回值：jQuery对像
说明：
用来返回设置文本内容的一个函数。接收元素的索引位置和元素旧的文本值作为参数。使用回调函数来替换一个元素的内容，必须满足下面两个条件：
1.当前元素的索引值位置(index值从0开始计算)；
2.当前元素的旧的文本内容。
函数的返回值随后被用来作为替代元素的纯文本内容。这种做法很方便的，如果你要替换多个元素的内容，而且不想像上面那们换成相同的内容，而是换成不同的内容，那么我们就可以使用这种方法，根据元素自己的位置或现有的内容（或者两者同时）来给多个元素替换成不同的千篇一文本内容。我们来看一个实例：
HTML Markup
jQuery Code
$(document).ready(function(){
$("div.demo p").text(function(index,oldText){
return (index+1) + "." + oldText;
});
});
操作表单字段Value值——.val()
前面介绍的.html()和.text()都无法在input元素上操作，那么我们接着看一个.val()方法。这个方法就像.text()方法一样，可以读取，修改表单字段“value”的值。
1、获取表单元素值——.val()
语法
$("Element").val();
返回值：将返回的是字符串或数组
说明
.val()方法主要用于获取表单元素的值。至于“
HTML Markup
Red
Yello
Blue
10 pt
12 pt
14 pt
jQuery Code
$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('#colorRadio input:radio').val());
alert($('#sizeCheck input:checkbox').val());
});
});
.val()返回的是匹配的元素集合中的第一个，有时你想返回选中的radio或checkbox的值，如果此时你只使用.val()方法，那么返回的将是第一个值，跟选中不选择中没有任何关系，就如上图所示，如果你想返回你选择的值，你就需要像下面这样操作，才能得到选中的值：$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('input:radio[name=color]:checked').val());
alert($('input:checkbox[name=size]:checked').val());
});
});
此时单选(radio)将返回你选择中的值，但checkbox不是，如果你同时选中多个checkbox 时.val()只会返回第一个选择中的值，如果没有选中任何值，此时将返加的是“undefined”。刚才说过对于“checkbox”有多个选中时，返加的将只是第一个值，如果需要全部返回，我们就需要使用each()对checkbox进行遍历
$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('input:radio[name=color]:checked').val());
$('input:checkbox[name=size]:checked').each( function() {
alert( $(this).val());
});
});
});
另外.val()在“select”时也分两种情况，当.val()方法应用在
HTML Markup
jQuery Code
$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('input:radio[name=color]:checked').val());
alert($('input:checkbox[name=size]:checked').val());
});
});
$("#getSelectValue").click(function(){
alert($("#dropdown").val());
var colors = $("#listbox").val();
for(var key in colors){
alert(colors[key]);
}
});
2、替换表单元素的Value值——.val(value)
语法
$("Element").val(value);//value表示的是：一个文本字符串或一个以字符串形式的数组来设定每个匹配元素的值。
返回值jQuery对象
说明
这个方法常用来设置表单域的值，同样对于“
HTML Markup
$("input").val("test");
上面代码最终会将所有inupt的value值替换成“test”，在平时的应用中我们一般是不这样使用的。.val(value)常应用在input[type="text"]的focus和blur上，如：
jQuery Code
$("input:text").focus(function(){
var $inputTextVal = $(this).val();
if($inputTextVal == this.defaultValue) {
$(this).val("");
}
});
$("input:text").blur(function(){
var $inputTextVal = $(this).val();
if($inputTextVal == ""){
$(this).val(this.defaultValue);
}
});
3、使用一个回调函数来替换表单字段“value”的值
前面的.val(value)可以将选中的表单元素的value值改成相同的，那么我们往往是需要设置成不同的value值，此时我们就需使用这个方法，通过一个函数来设置这个值。这个函数通过两个参数，当前元素的所引值和它当前的值。
语法
$("Element").val(function(index,value){...});
返回值jQuery对象
说明
使用这个函数的返回值来设置每个匹配的input元素的“value”值，
jQuery Code
$(document).ready(function(){
$("input:radio[name=color]").val(function(index,oldVal){
return "color-" + (index+1) + ":" + oldVal;
});
$("input:checkbox[name=size]").val(function(index,oldVal){
return "size-" + (index+1) + ":" + oldVal;
});
$("#setValue").click(function(){
var $msg = $("input:radio[name=color]:checked").val() + ",";
$("input:checkbox[name=size]:checked").each(function(){
$msg += $(this).val() + ",";
});
$("#txtBox").val($msg);
});
});
对于多选择下接框，我们可以这样来改变：
HTML Markup
jQuery Cody
$(document).ready(function () {
$('#dropdown').val('Yellow');
$('#listbox').val(['Red', 'Blue']);
});
上面介绍了.val()的具体使用方法，那么我们什么情况下可以使用.val()方法呢？
1.你可以使用.val()来读取和修改
已经在存在列表项中；
2.你可以使用.val()来读取
此时.val()将返回的是一个option数组，不过你不能使用.val()给他设置多个值；
3.你可以使用.val()来读取radio和checkbox的值，也可以配合checked="checked"属性来读
取选中的值，但对于checkbox需要使用each()进行遍历，否则只能读取第一个选中的值；
4.你可使用function动态改变表单中多个元素的value值。
这节主要学习了jQuery中的.html(),.text()和.val()三种方法的使用，最后总结一下这三个方法：
1..html()用为读取和修改元素的HTML标签
2..text()用来读取或修改元素的纯文本内容
3..val()用来读取或修改表单元素的value值。
这三个方法功能上的对比
1..html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素
的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2..html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如
果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
3..html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
js和jquery获取父级元素、子级元素、兄弟元素的方法
原文地址：js和jquery获取父级元素、子级元素、兄弟元素的方法作者：草根gis 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2； 但是如果我们换另一种方法 var b =document.getElementByIdx_x("test").childNodes; 此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。 所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。 functiondel_ff(elem){ varelem_child = elem.childNodes; for(vari=0; i< p=""> if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)
} } } 上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。 nodeNames可以得到一个节点的节点类型，/s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符 test() 方法用于检测一个字符串是否匹配某个模式.语法是：RegExpObject.test(string) 如果字符串string 中含有与RegExpObject 匹配的文本，则返回true，否则返回false。 nodeValue表示得到这个节点里的值。 removeChild则是删除元素的子元素。 之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了 下面介绍JQUERY的父，子，兄弟节点查找方法 jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery常用方法中文解析
jQuery常用方法中文解析 jQuery设计思想 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作：取值和赋值 五、元素的操作：移动 六、元素的操作：复制、删除和创建 七、工具方法 八、事件操作 九、特殊效果 一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。选择表达式可以是CSS选择器： $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素，除了前三个 $('div:animated') // 选择当前处于动画状态的div元素
二、改变结果集 如果选中多个元素，jQuery提供过滤器，可以缩小结果集： $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： $('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后，就可以对它进行某种操作。jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： $('div').find('h3').eq(2).html('Hello'); 分解开来，就是下面这样： $('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。jQuery还提供了.end()方法，使得结果集可以后退一步： $('div').find('h3').eq(2).html('Hello').end() //退回到选中所有的h3元素的那一步.eq(0) //选中第一个h3元素.html('World'); //将它的内容改为World
jQuery常用功能大全
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementByIdx_x("msg"))则为jquery对象，可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery 对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
jQuery入门教程(很不错)
jQuery入门[1]－构造函数 https://www.360docs.net/doc/9a15783272.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小（v1.2.3 15kb） ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器（IE6,FF,Safari,Opera） ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/9a15783272.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">