xml地图|网站地图|网站标签 [设为首页] [加入收藏]

深入学习jQuery描述文本内容的3个方法

来源:http://www.ccidsi.com 作者:最新解决方案 人气:79 发布时间:2019-05-29
摘要:val() val()方法类似于javascript中的value属性,首如果用以拍卖表单成分的值,用于获取相配的因素集结中率先个要素的日前值或设置相配的元素集合中种种成分的值 val() 当val()方法未有参

val()

  val()方法类似于javascript中的value属性,首如果用以拍卖表单成分的值,用于获取相配的因素集结中率先个要素的日前值或设置相配的元素集合中种种成分的值

val()

  当val()方法未有参数时,表示收获成分的value值

<input id="test" value="text">
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
console.log($('#test').val());//'text'
</script>

  [注意]透过val()方法从textarea元素中收获的值是不分包回车(r)字符的。可是借使该值是透过XHLX570传递给服务器的,回车(r)字符会被保存(恐怕是被浏览器增加的,可是在本来数据中并不分包回车(r))。可以动用下边包车型大巴valHook方法消除这一个标题

$.valHooks.textarea = {
  get: function(elem){
    return elem.value.replace(/r?n/g,"rn");
  }
};

  val()方法主要用于获取表单元素的值,比方input,select和textarea。对 <select multiple="multiple">成分,val()方法重回三个分包每一种采取项的数组,假使未有采纳性被入选,它回到null

<textarea id="test1">1</textarea>
<input id="test2" value="2">
<select id="test3">
    <option>3</option>
</select>
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
console.log($('#test1').val());//1
console.log($('#test2').val());//2
console.log($('#test3').val());//3
</script>

val(value)

  val(value)用来安装表单成分的value值

<input id="test" value="2">
<button id="btn">按钮</button>
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
btn.onclick = function(){
    var value = $('#test').val();
    $('#test').val('测试'  value)
}
</script>

val(function(index, value))

  val()方法还不错贰个函数作为参数,函数中的this指向当前成分。接收的聚合中的成分,旧的值作为参数的目录地方,重回设置的值

<input id="test" value="2">
<button id="btn">按钮</button>
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
btn.onclick = function(){
    $('#test').val(function(index,value){
        return '测试' index   value;
    })
}
</script>

 

三. 样式操作

.css()

.css()

  • 获取:
    .css( propertyName ) :获取相配成分集合中的第1个要素的样式属性的总计值
    .css( propertyNames ):传递一组数组,重返2个目的结果
  • 设置:
    .css(propertyName, value ):设置CSS
    .css( propertyName, function ):能够流传1个回调函数,重回取到对应的值进行管理
    .css( properties ):能够传1个对象,相同的时候设置四个样式

html()

  html()方法类似于javascript中的innerHTML属性,用来猎取集合中率先个相称成分的HTML内容或安装每3个相配元素的html内容,具体有叁种用法:

【1】html()

  html()不传入值可以用来博取集结中首先个相配成分的HTML内容

  [注意]与innerHTML属性的标题一样,IE8-浏览器会将具有标签转换到大写格局,且不包涵空白文本节点;而别的浏览器则形容再次回到

<div class="test">
    <div>Demonstration Box</div>
</div>
<div class="test">
    <div>123</div>
</div>
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
//'  <div>Demonstration Box</div>'
console.log($('.test').html());
</script>

【2】html(htmlString)

  html(htmlString)方法设置每三个相配成分的html内容,这么些因素中的任何内容会全盘被新的剧情取代。别的,用新的开始和结果替换这个元素前,jQuery从子成分删除其余组织,如数据和事件管理程序,那样可防止备内部存款和储蓄器溢出

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
//123
$('div.demo-container').html('123');
</script>

【3】html(function(index, oldhtml)) 

  html(function(index, oldhtml))用来回到设置HTML内容的1个函数。接收成分的目录地点和要素原先的HTML作为参数。jQuery的调用那个函数在此以前会清空成分,使用oldhtml参数引用先前的剧情。在这一个函数中,this指向元素集合中的当前因素

<div class="demo-container">123</div>
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
//1230
$('div.demo-container').html(function(index,oldhtml) {
  return oldhtml   index;
});
</script>

动用范围

  与innerHTML属性同样,html()方法只能利用于双标签,单标签无效

<input id="test" value="123">
<script src="http://www.ccidsi.com/uploads/allimg/190529/02115I193-0.jpg"></script>
<script>
console.log(test.innerHTML)//''
console.log($('#test').html())//''
</script>

 

一. 甩卖内容

.attr()与.removeAttr()

  • attr()有5个表明式
    attr(传入属性名):获取属性的值
    attr(属性名, 属性值):设置属性的值
    attr(属性名,函数值):设置属性的函数值
    attr(attributes):给钦命成分设置三个属性值,即:{属性名1: “属性值一” , 属性名二: “属性值二” , … … }
  • removeAttr()删除方法
    .removeAttr( attributeName ) : 为合作的因素集结中的每一个成分中移除3特本性(attribute)

html()及.text()

  • .html()方法
    .html() 不传入值,就是获取集结中第三个相配元素的HTML内容
    .html( htmlString ) 设置每二个相称成分的html内容
    .html( function(index, oldhtml) ) 用来回到设置HTML内容的3个函数
  • .text()方法
    .text() 获得相称成分集结中种种成分的集结文本,包含他们的后生
    .text( textString ) 用于安装相称成分内容的文本
    .text( function(index, text) ) 用来回到设置文本内容的2个函数

val()

  • .val()方法
    .val()无参数,获取相配的要素集合中率先个要素的近来值
    .val( value ),设置相配的要素集结中各种成分的值
    .val( function ) ,3个用来回到设置值的函数

.html(),.text()和.val()的异样总计:

html(),.text(),.val()两种办法都是用来读取选定成分的原委;
.html()是用来读取元素的html内容(蕴含html标签),
.text()用来读取成分的纯文本内容,包蕴其后裔成分,
.val()是用来读取表单成分的"value"值。

.html()和.text()方法不可能运用在表单成分上,
.val()只可以使用在表单成分上;
.html()方法运用在三个成分上时,只读取第四个成分;
.val()方法和.html()同样,固然其使用在七个要素上时,只可以读取第2个表单成分的"value"值,
唯独.text()和她俩不雷同,如若.text()应用在八个因素上时,将会读取全体入选成分的公文内容。

.html(htmlString),.text(textString)和.val(value)三种情势都是用来替换选七月素的内容,
设若四个方法同一时间接选举择在多个要素上时,那么将会交替全数入选成分的原委。
.html(),.text(),.val()都足以应用回调函数的重回值来动态的更换五个因素的剧情。

前边的话

  在javascript中,讲述成分内容有5个属性,分别是innerHTML、outerHTML、innerText、outerText和textContent。那五个属性各自有个别的功能,且包容性分裂。jQuery针对那样的拍卖提供了二个方便人民群众的艺术,分别是:html()、text()和val()。本文将详细介绍jQuery描述文本内容的那二个方法

 

Ⅱ、选择器

一. 主干选取器

$( "#id" )
$( ".class" )
$( "element" )
$( "*" )

二. 层级选拔器

  • 子选拔器与儿孙选取器
$('div > p') ; //选择所有div元素里面的子元素P
$('div  p') ; //选择所有div元素里面的p元素
  • 左近兄弟选拔器与一般兄弟接纳器
$(".prev   div") ; //选取prev后面的第一个的div兄弟节点
$(".prev ~ div") ; //选取prev后面的所有的div兄弟节点

三. 层级选拔器

  • 主干筛选选取器
![](https://upload-images.jianshu.io/upload_images/526346-539b042531210f8e.png)

基本筛选选择器
  • 剧情筛选选取器
![](https://upload-images.jianshu.io/upload_images/526346-df611071f9adeb0a.png)

内容筛选选择器
  • 可知性筛选采取器
![](https://upload-images.jianshu.io/upload_images/526346-d58441fa741bb22d.png)

可见性筛选选择器
  • 天性筛选选拔器
![](https://upload-images.jianshu.io/upload_images/526346-98f404adda592142.png)

属性筛选选择器
  • 子成分筛选选择器
![](https://upload-images.jianshu.io/upload_images/526346-3eab708a003bec9e.png)

子元素筛选选择器
  • 表单成分选择器
![](https://upload-images.jianshu.io/upload_images/526346-7e507ffda156fdcb.png)

表单元素选择器
  • 表单对象属性筛选接纳器
![](https://upload-images.jianshu.io/upload_images/526346-3dba3e38697ab4ef.png)

表单对象属性筛选选择器

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:深入学习jQuery描述文本内容的3个方法

关键词: 68399皇家赌场 jquery

上一篇:关于SQL的相关笔记,MySql的优化步骤

下一篇:没有了

最火资讯