jquery中 html()、text() 、val() + 常用表单元素

合集下载

jquery

jquery

构造jQuery对象:jQuery(html),jQuery(elements) ,
$("<div><p>Hello</p></div>").appendTo("body") $(document.body).css( "background", "black" );
$(html),$(elements)
show() show(speed,[callback])
淡入淡出
通过不透明度的变化来实现所有匹配元素的淡入效果
fadeIn(speed, [callback])
淡出效果
fadeOut(speed,[callback])
调整为指定的不透明度
fadeTo(speed,opacity,[callback])
3
一些简单的代码简化
实现为页面的某一区域中的每个链接附加一个单击事件
没有使用 jQuery 的 DOM 脚本
使用了 jQuery 的 DOM 脚本
4
jQuery能做什么?
获取页面的部分内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进基本的 JavaScript 结构,如迭代和数组操作 以插件的形式持续地通过开发加入新的功能
$(".myClass").css("border","3px solid red");
根据给定的元素名匹配所有元素
$("div").css("border","3px solid red");

jquery获取文本的三种方法

jquery获取文本的三种方法

标题:jQuery获取文本的三种方法正文:随着前端开发的不断发展,jQuery作为一个高效、简洁的JavaScript 库,成为了前端工程师们必备的技能之一。

在日常开发中,我们经常需要获取页面中的文本内容,并对其进行相关操作。

本文将介绍jQuery中获取文本的三种方法,帮助大家更好地理解和应用jQuery。

1. 使用text()方法获取元素文本在jQuery中,使用text()方法可以直接获取被选元素内部的文本内容。

我们有一个段落的HTML结构如下:```<p id="demo">这是一个段落</p>```如果我们想获取这个段落的文本内容,就可以使用text()方法进行操作:```var text = $("#demo").text();console.log(text); // 输出:这是一个段落```2. 使用html()方法获取元素文本与text()方法类似,html()方法也可以用于获取元素的文本内容。

不同的是,html()方法还可以获取元素内的HTML内容。

如果我们有一个div的HTML结构如下:```<div id="cont本人ner">这是一个<span>包含HTML内容</span>的div</div>```我们可以使用html()方法来获取该div元素内的文本内容:```var text = $("#cont本人ner").html();console.log(text); // 输出:这是一个<span>包含HTML内容</span>的div```3. 使用val()方法获取表单元素的值在处理表单元素时,我们经常需要获取输入框、下拉框等元素的值。

此时可以使用val()方法来获取相关元素的值。

我们有一个输入框的HTML结构如下:```<input type="text" id="username" value="admin">```我们可以使用val()方法来获取输入框的值:```var value = $("#username").val();console.log(value); // 输出:admin```以上就是jQuery获取文本的三种方法,通过text()、html()和val()方法,我们可以灵活地获取页面中元素的文本内容,并进行后续的操作。

jquery用法

jquery用法

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库,它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素,如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器:•('#element'):选择具有特定ID的元素•('.class'):选择具有特定类的元素•('input[type=“text”]'):选择特定类型的表单元素•('div:first'):选择第一个div•('ul li').eq(2):选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数:•click():单击元素时触发•dblclick():双击元素时触发•mouseenter():鼠标移入元素时触发•mouseleave():鼠标移出元素时触发•keydown():按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作,可以改变和获取元素的属性,例如:•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值,与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果,可以使网页更加动态。

以下是一些常见的动画效果:•fadeIn():淡入元素,即从不可见到可见•fadeOut():淡出元素,即从可见到不可见•slideDown():向下展开元素•slideUp():向上收缩元素•animate():通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法,可以在不刷新网页的情况下从服务器获取数据。

表单构成的基本元素

表单构成的基本元素

表单构成的基本元素表单是Web界面中常见的一种交互元素,通常用于收集用户输入的数据。

表单的基本元素包括输入框、下拉框、单选框、复选框、文本域和按钮等。

以下是对这些基本元素的详细描述和相关使用参考。

1. 输入框(Input Field)输入框是用户输入文本内容的常用元素,用于接受单行文本数据。

常见的输入框类型有文本框(text)、密码框(password)、邮箱框(email)、电话框(tel)等。

输入框可以设定最大长度(maxlength)、最小长度(minlength)、占位文本(placeholder)、默认值(value)等属性,用于控制用户输入的规则和提示。

使用参考:- 注册页面,包括输入用户名、密码等信息时使用文本框。

- 用于搜索的输入框,用户可以输入搜索关键词。

2. 下拉框(Select)下拉框用于提供一组选项供用户选择。

下拉框包括一个可展开和折叠的选项列表,用户可以通过点击下拉箭头展开或隐藏选项。

每个选项由一个文本和一个值(value)组成,用户选择后,该值会传递到服务器进行处理。

使用参考:- 国家、省市选择器,用于选择地区。

- 选择性别时使用单选框。

3. 单选框(Radio Button)单选框用于提供一组选项,但用户只能选择其中的一项。

每个单选框由一个文本和一个值组成,用户选择后,该值会传递到服务器进行处理。

与下拉框不同的是,单选框在页面中展示为圆形按钮。

使用参考:- 常见的性别选择,男、女、未透露。

- 在问卷调查中,提供多个单选题供用户选择。

4. 复选框(Checkbox)复选框用于提供多个选项,用户可以选择其中的一个或多个选项。

每个复选框由一个文本和一个值组成,用户选择后,所选的值会传递到服务器进行处理。

与单选框不同的是,复选框在页面中展示为方形按钮。

使用参考:- 用户注册页面,选择用户所关注的兴趣爱好。

- 在购物网站中,用户可以同时选择多个商品加入购物车。

5. 文本域(Textarea)文本域用于接受多行文本输入,与输入框不同的是,文本域可以容纳较多的文本内容。

jquery基础填空题

jquery基础填空题

jquery基础填空题【一、填空题】1.jQuery通过对______的封装,简化了HTML与JavaScript之间的操作。

2.jQuery中,$()函数中的$可以替换为______。

3.Chrome开发者工具中,_____面板提供断点调试代码的功能。

4.判断一个对象是否为jQuery对象使用______运算符。

5.HTML页面中利用______标签可引入jQuery库。

【答案】1.JavaScript2.jQuery3.开发者工具sources4.instanceof5.script【二、填空题】1.jQuery选择器按照功能可以分为3类,它们是______、______和______。

2.与prev+next选择器作用相同的方法是______。

3.$('selector1,selector2…selectorN');是______选择器的语法。

4.jQuery中______选择器用于获取正在执行动画效果的元素。

5.:eq(index)选择器的index值从______开始。

【答案】1.基本选择器、层级选择器、过滤选择器2.next()3.css4.:animated5.0【三、填空题】1.jQuery中判断某个类是否存在的方法是_____。

2.jQuery中用于操作元素内容的方法有______和_____。

3.p元素调用jQuery提供的_____方法可替换成span元素。

4.使用_____方法可以删除jQuery中的DOM节点。

5.ul元素调用jQuery提供的_____方法,可将li元素作为ul的第一个子元素插入。

【答案】1.hasClass()2.html()、val()3.replaceWith();4.remove()5.prepend()【四、填空题】1.jQuery中元素获得焦点时触发____事件,元素失去焦点时触发____事件。

2.jQuery中______与____都是鼠标移出事件,它们的区别是_____的触发范围更小。

jq基础笔记

jq基础笔记

JQuery等价于$$(document).ready(function(){});简写==$(function(){});返回值都为[object Object]容错,jQ发生错误不报错1,jq选择器1>基本选择器$(“#idName”)------通过id找元素$(“.className” )------通过class找元素$(“tagName”)-------通过标签找元素$(“*”)---------匹配所有的元素$(“li *”)----li下的全部一般用于局部环境内$(“selector1,selector2”)---群组匹配元素$(“box.div”)-----限定必须是box元素的div2,层级选择器$(“a b”)-----匹配a的后代中所有b元素$(“a>b”)----匹配a中子代b元素(只找儿子,不找孙子)$(“a+b”)----匹配紧邻的一个兄弟b元素(紧邻,一个)$(“a~b”)----匹配a之后的所有兄弟b元素(之后所有)3,过滤选择器1>基本选择器a>特定位置的过滤$(“li:first”)--- --匹配第一个li元素$(“li:last”) ---匹配找到的li中最后一个li元素$(“li:eq(index)”)---匹配找到的li中索引为index的li。

(index从零开始)b>指定范围的过滤$(“li:lt(index)”) --匹配index之前的所有li(不包含index位置的li);$(“li:gt(index)”)---匹配index之后的所有li(不包含index位置的li)$(“li:not(selector)”)---匹配除了not的li内元素$(“li:odd”)----匹配偶数行(索引为奇数)的li$(“li:even”)----匹配奇数行(索引为偶数)的li2>属性过滤$(“[标签属性]”)-----匹配有该属性的俄元素$(“[标签属性=值]”)---匹配属性=指定的元素$(“[标签属性^=value]”)$(“[标签属性$=value]”)$(“[标签属性!=value]”)3>子元素选择器$(“li:first”)------将所有匹配到的元素中只选第一个(返回第一个元素)$(“li:first-child”)----匹配每个li的父元素的第一个孩子(可返回多个元素)$(“li:last”)和(“li:last-child”)用法与以上类似$(“li:only-child”)------匹配li的父级只有一个孩子的li元素val=$(“#id”).val()---获取#id 的文本内容$("#btn").click(function(){var val=$("#txt").val();$("a:contains('"+val+"')").css("background","red");})4>内容过滤$(“li:contexts(text)”)--匹配内容中包含了text的文本的li$(“li:has(selector)”)---匹配内容中包含了selector元素的li$(“li:empty”)-----匹配内容为空的li元素$(“li:parent”)----匹配以li为父元素的DOM节点5>可见和隐藏选择器$(“div:hidden”)----匹配div中设置了display为none的元素,通过其他方式不可见的元素匹配不到;$(“div:visible”)---匹配div中没有设置display为none的元素,只认display设置不为none的元素备注:此选择器只以display设置的结果为准4,表单选择器$(“:input”) ------所有的表单中的控件:input button select$(“:text”)-------文本输入框---所有的input标签type属性值之前加冒号--表示相应的input元素$(“:disable”)---所有表单控件中设置了disable属性的元素$(“:enable”)----所有的表单控件中没有设置disable属性的元素$(“:checked”)---匹配被选中的单选按钮或者复选框$(“:selected”)---匹配被选中的option元素2,获取文本text( )------只获取到文本内容html( )-----获取包含标签在内的所有内容val( ) -----获取表单控件的文本设置内容text(“内容”)------设置内容,不解析标签html( “内容”)-----获取包含标签在内的所有内容val( “内容”) -----获取表单控件的文本.val([“check”,”radio”])----通过数组传递设置选定状态3,获取和设置元素的特性attr(“标签属性”)------获取该属性attr(“标签属性“,”属性值)-----设置该属性设置多个属性:attr({ 属性:属性值,属性:属性值});备注:多个属性设置之间用逗号分隔,最后一个无任何符号删除属性:removeAttr(“标签属性”)4,获取和设置DOM对象的属性property获取:prop( “属性”)设置:Prop(“属性””属性值”)备注:互补与attr( ),, 更适应结果为boolth的类型,5,attrbute和property区别1,区别:表示的意思不一样attrbute特性--所有设置的标签属性都存在attrbute类关联数组中获取:attrbute[ i ] 或者attrbute[“特性名”]property 属性标签有的特性,并已经设置了,可以通过property的方式获取获取:对象.属性名设置:如果对象没有该属性,可以通过对象.属性名=属性值jq:通过prop()方式设置的属性,通过attr()的方式获取不到对象没有的,通过attr()方式设置的,通过prop()的方式获取不到;联系:DOM元素有该特性,并且已经设置了,两种方式度可以获取到补充:通过attr( )获取不到的或设置不了的特殊属性,我们可以通过prop( )获取和设置例如:表单控件的checked属性;6,each( )----遍历每一个匹配到的元素使用语法:each(function(i,ele){ 执行内容});i-----表示每一个元素的索引Ele-----表示匹配到的每一个元素$(Ele)---将获取到的DOM元素转换成jq对象----用jq的API数组与遍历结合使用var arr=["#000","#0f0","#00f","#0ff","#f0f"];$(".warp").each(function(i){$(".warp").eq(i).css("backgroundColor",arr[i]);}); 这里不能使用this7,修改css属性的方法:attr(“class”,”类名”)addClass(“类名”)--------追加样式removeClass(“类名”)-----删除指定的类名removeclass( )------删除所有的类名toggleClass(“类名”)-------切换类名(在有和没有该类名之间切换)hasClasscss(“css属性”)--------获取一个css属性的值css(“css属性”,”属性值”)---设置一个csss属性css({属性:“属性值”,属性:“属性值”});8,获取索引:index( )-----在同辈中找索引index(“selector”)---在指定的同类(同辈)中找索引9,js对象和jq对象相互转换js-----jq 适用$( )工厂函数------$( js对象)jq----js $(“”)[index] 或者$(“”).get( index )转换之后的对象可以用彼此的API10,节点的遍历children( )/children( selector )----子代/子代中某个find( selector )-------在子孙后代中查找指定元素next( )/next( selector )------之后紧跟的一个兄弟元素/筛选某个紧邻的元素nextALL( )/nextAll( selector )----之后所有的兄弟元素prev( )/prev( selector )prevALL/prevALL( selector )siblings( )-----所有兄弟元素不包含自身parent( )------父元素输出---遍历到的内容console.log--只能输出一个,,用each( )11,创建元素$() 工厂函数创建var tr=$("<tr></tr>");$("#oDiv table").append(tr);添加元素父.append(子)----------子元素插入在父元素内容的后面父.preppend(子)--------子元素插入在父元素的内容的前面父.before(子)-----------子元素插入在父元素容器的前面父.after(子)--------------子元素插入在父元素容器的后面补充:反方向操作子.apppendTo(父)preppendTo(父)insertBefore(父)insertAfter(父)12, 替换被替换元素.replaceWith(替换的内容);替换的内容.replaceAll(被替换元素);13,删除要删除的元素.remove();-----------------将匹配到的元素全部删除要删除的元素.remove(“selector”)-----匹配到的元素筛选后再删除14,复制jq对象.clone()------------------将匹配到的jq对象复制如果:jq对象使用嵌入的绑定事件,连同事件一起被复制如果:jq对象使用的分离式绑定事件,绑定的事件不会被复制如果想将分离式绑定的事件一起被复制:jq对象.clone(true);备注:clone()紧紧是复制,并没有挂在DOM树上15,页面加载事件全写:jQuery(document).ready(function(){js语句})简写:$(function(){js语句})16,js的load事件和jq的ready事件的区别js中多个load事件只执行最后一个,jq的多个ready事件都会执行执行时机不同:js的load事件是在页面解析完毕之后执行jq的ready事件在DOM树生成的时候执行ready先于load执行17,$符号与其他框架发生冲突交出$的使用权:$.noConflict()交权的同时可以使用其他符号代替,例如:var Q=$.noConflict(); 收回$的使用权:jQuery(function($){此处可以使用$})18,鼠标经过事件总结mouseovermouseout以上两个事件绑定给father:鼠标经过father 到son也会触发mouseenter可解决mouseleave以上两个事件绑定给father,经过son时不会触发hover将mousenter和mouseleave两个事件封装成一个事件执行jq对象.hover(function(){ 鼠标移入时执行},function(){ 鼠标移出时执行});$("#warp").hover(function(){$("#inner").stop().animate({bottom:0},1000)},function(){$("#inner").stop().animate({bottom:"-200px"},1000)});jq对象.hover(function(){鼠标移入移出都执行此函数---套路:此方法中实现的切换功能})19,事件的绑定方式:1, jq对象.事件名称(fn);eg:$(“#btn”).click(function(){})2, 用on绑定jq对象.on(“事件名称”,执行任务)写法有多种:$(“#btn”).on(“click mouseover”,fn);$(“#btn”).on({click:fn,moueover:fn});20,解除事件绑定:jq对象.off(“事件名称”,fn)------解绑事件名称执行的fn任务jq对象.off(“事件名称”)---------解绑事件名称执行的所有任务jq对象off()----------------解绑该对象的所有事件的所有任务星星评价二级出现增加21,on绑定事件实现的事件代理---------给未来的元素添加事件父.on(“type”,“子元素”,fn)以上父元素将事件类型代理给子元素(未来的),执行fn任务22,jq的事件对象:注意:jq事件对象中阻止事件冒泡和事件的默认行为只需使用事件对象的方法,兼容性已经处理(2.0)trigger 事件自动只执行(冒泡)triggerHander阻止冒泡23,事件的自动执行jq对象.事件名称()------$(“#btn”).clickjq对象.trigger(“type”)------$(“btn”).trigger(“click”)备注:trgger会执行对象的默认行为,也会发生冒泡jq对象.triggerHandler(“type”)定时轮播备注:不会执行事件的默认行为,会阻止事件冒泡24,动画效果show( )hide( )toggle( )---切换执行show( ) hide( )可以传的速度参数:nomal slow fast 数字slideDown----向下滑开slideUp--------向上收齐animition-delay:数字----------延迟动画执行时间stop 当事件中断时,停止动画继续执行多事件合并执行---------节点1 . 方法1 . 节点2 . 方法2节点2 由节点1确定方法从前到后依次执行$(".banner .bg").fadeTo("fast",.6).attr("src",arr[idx]).fadeTo("fast",1);函数的调用方法:function fun(){}var mytime=setInterval(function(){$("#btn").click()},1000); var mytime=setInterval("$('#btn').click()",1000);var mytime=setInterval(fun,1000);var mytime=setInterval("fun()",1000);25,.offset ( ) 获取元素的当前坐标,坐标相对于文档25,获取窗口的相关尺寸js方法:clientHeight || document.documentElement.clientHeight-------获取页面内容所占的高度document.body.scrollHeight || document.documentElement.scrollHeight ------获取页面滚动的高度jq方法:var h=$(window).outHeight( )=$(window).innerHeight( )-----获取的是窗口的可见高度总结:js无法正常获取,只能通过jq获取窗口的可见高度jq无法获取,只能js获取页面的滚动高度outerHeight()获取窗口可见的边框以内的尺寸offsetHeight$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin})事件放在引号内购物车--全选解除a标签的自身方法模态框视频1,视频标签<video></video>两种链接资源的方式:1,<video src=”视频资源”>2,<video><source src=”视频资源.mp4”><source src=””视频资源.avi></video>2,可通过标签属性来设置的属性control 控制视屏的控件muted 设置静音autoplay设置视频自动播放以上三个属性直接设置属性表示属性为true 不设置表示false poster 设置视屏暂停是的封面缺点:无法正常设置图片的尺寸解决:不使用该属性,而用定位的方式解决3,视屏中是通过js获取或者设置的属性currentTime视频当前播放时间,可以设置和获取paused获取当前是否处于暂停状态true--暂停false---播放ended 获取视屏是否播放到结尾true----播放完duration 获取视频的整个播放时长只能获取不能设置4,视频播放与暂停的方法play( )------播放pause( )-------暂停var w=$("v1").offsetWidth; 获取内容宽度var h=$("v1").offsetHeight; 获取内容高度补充:.get( index ) 根据索引获取html内容返回值:Element、Array.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。

Jquery复习DAY2(jQuery属性操作jQuery文本属性值jQuery元素操作)

Jquery复习DAY2(jQuery属性操作jQuery文本属性值jQuery元素操作)

Jquery复习DAY2(jQuery属性操作jQuery⽂本属性值jQuery元素操作)5. jQuery 属性操作5.1 设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本⾝⾃带的属性,⽐如 <a> 元素⾥⾯的 href ,⽐如 <input> 元素⾥⾯的 type。

1. 获取属性语法prop(''属性'')2. 设置属性语法prop(''属性'', ''属性值'')5.2 设置或获取元素⾃定义属性值 attr()⽤户⾃⼰给元素添加的属性,我们称为⾃定义属性。

⽐如给 div 添加 index =“1”。

1. 获取属性语法attr(''属性'') // 类似原⽣ getAttribute()2. 设置属性语法attr(''属性'', ''属性值'') // 类似原⽣ setAttribute()改⽅法也可以获取 H5 ⾃定义属性5.3 数据缓存 data()data() ⽅法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。

⼀旦页⾯刷新,之前存放的数据都将被移除。

1. 附加数据语法data(''name'',''value'') // 向被选元素附加数据2. 获取数据语法date(''name'') // 向被选元素获取数据同时,还可以读取 HTML5 ⾃定义属性 data-index ,得到的是数字型6. jQuery 内容⽂本值主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()(相当于原⽣inner HTML)html() // 获取元素的内容html(''内容'') // 设置元素的内容2. 普通元素⽂本内容 text() (相当与原⽣ innerText)text() // 获取元素的⽂本内容text(''⽂本内容'') // 设置元素的⽂本内容主要针对元素的内容还有表单的值操作。

jquery获取value的方法

jquery获取value的方法

jQuery 获取 value 的方法在网页开发中,获取表单元素的值是常见的操作,jQuery 提供了多种方法来获取表单元素的值,本文将介绍几种常用的方法。

下面是本店铺为大家精心编写的3篇《jQuery 获取 value 的方法》,供大家借鉴与参考,希望对大家有所帮助。

《jQuery 获取 value 的方法》篇11. 使用$("input").val() 方法该方法用于获取 input 元素的值,返回一个字符串,可以使用如下代码示例:```$("input").val();```2. 使用$("select").val() 方法该方法用于获取 select 元素的值,返回一个字符串,可以使用如下代码示例:```$("select").val();```3. 使用$("textarea").val() 方法该方法用于获取 textarea 元素的值,返回一个字符串,可以使用如下代码示例:```$("textarea").val();```4. 使用$(":input").val() 方法该方法用于获取所有 input、select、textarea 元素的值,返回一个字符串数组,可以使用如下代码示例:```$(":input").val();```5. 使用$("form").serialize() 方法该方法用于获取表单的所有提交数据,返回一个字符串,可以使用如下代码示例:```$("form").serialize();```以上是几种常用的 jQuery 获取 value 的方法,根据不同的需求选择合适的方法即可。

不过,在使用这些方法时需要注意以下几点:1. 使用这些方法时,需要先引入 jQuery 库。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

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()应用在多个元素上时,将会读取所有选中元素的文本内容。

【text也是只能读取第一个选中元素的文本】
2..html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果
三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。

3..html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

例子:<div id="div">
<p>here is a paragram</p>
<div>here is a big DIV</div>
</div>
function showVal()
{
var div = $("#div");
alert("showVal(): "+div.val());
显示为空
}
function showHtml()
{
var div = $("#div");
alert("showHtml(): "+div.html());
显示为:
<p>here is a paragram</p>
<div>here is a big DIV</div>
}
function showText()
{var div = $("#div");
alert("showText(): "+div.text());
显示为:
here is a paragram
here is a big DIV
}
总结:val()---一般用在input上,而不用在其他元素,用来获取input 或者是select的值
html()和text()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容
html属性中有两个方法,一个有参,一个无参
1. 无参html():取得第一个匹配元素的html内容。

这个函数不能用于XML文档。

但可以用于XHTML文档,返回的是一个String
2.有参html(val):设置每一个匹配元素的html内容。

这个函数不能用于XML文档。

但可以用于XHTML文档。

返回一个jquery对象
其次,text属性中有两个方法,一个有参,一个无参
1. 无参text():取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。

返回的是一个String
2.有参text(val):设置所有匹配元素的文本内容,与html() 类似, 但将编码HTML (将"<" 和">" 替换成相应的HTML实体).返回一个jquery对象
最后,val()属性中也有两个方法,一个有参,一个无参。

1.无参val():获得第一个匹配元素的当前值。

在jQuery 1.2 中,可以返回任意元素的值了。

包括select。

如果多选,将返回一个数组,其包含所选的值。

返回的是一个String、array
结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有参val(val):设置每一个匹配元素的值。

在jQuery 1.2, 这也可以为check,select,radio 元件赋值,返回一个jquery对象
常用表单元素:
表单标志的主要元素、属性如下:
<form></form>创建表单
<select multiple name="name" size=""></select>创建滚动菜单,size设置在需要滚动前可以看到的表单项数目
<option> 设置每个表单项的内容
<select name="name"></select>创建下拉菜单
<option> 设置每个菜单项的内容
<textarea name="name" cols=40 rows=8></textarea>创建一个文本框区域,列的数目设置宽度,行的数目设置高度
<input type="checkbox" name="name">创建一个复选框,文字在标签后面
<input type="radio" name="name" value="">创建一个单选框,文字在标志后面
<input type=text name="foo" size=20> 创建一个单行文本输入区域,size设置为字符串的宽度
<input type="submit" value="name">创建提交(submit)按钮
<input type="image" border=0 name="name" src="name.gif">创建一个使用图像的提交(submit)按钮
<input type="reset">创建重置(reset)按钮。

相关文档
最新文档