The operation jQuery html

1 query
after using the selector node is found to be operated, to obtain values of the nodes, attribute values, text and html content.
1) html (): html content: operating all content ditag, including text and child tags, such as: alert($('#d1').html())corresponds innerHTML property
2) text (): Text: operating text double label (excluding the sub-label) , such as: alert($('#d1').text())corresponds innerText property
3) val (): node value: value of the operating value matching elements, such as: alert($('#username').val())the resulting value is entered in the text box.
 Note: In addition, these methods may also be used to modify the contents of the node, values, text content, attribute values. Such as:

$('#d1').html('hello java'); $('#username').val('chang');

2 attributes attr (): Property Value: attribute matching operation element
1) attr ( 'attrName') : to read attributes. alert($('#d1').attr('id')), The result is D1
2) attr ( 'attrName', 'value'): Set a property.
3) attr ({ "attrName1" : "value1", "attrName2": "value2"}): a plurality of attributes
( " selected Choose Device " ) . a t t r ( " Belong Sex name " , " Belong Sex value " ) ; or (& Quot; selector & quot;). Attr (& quot; property name & quot;, & quot; attribute value & quot;); or ( "selector") .attr ({property name: "attribute value", the attribute name: "attribute value", ...});
for example:$("img").attr({ src: "test.jpg", alt: "Test Image" });
 Note: attribute name can not here quotes (single or double quotes cited ), but the attribute values must be quoted! Do not attribute the style when.
4) removeAttr ( 'attrName')Delete property.

3 pattern of operations
1) attr ( 'class', '') or attr ( 'style', '' ): read and set.
Example: Reading style: Alert ( Katex the parse error: the Expected 'the EOF', GOT '#' position AT. 3: ( '# D1') attr ( 'Clas .... (' # D1 ') attr (.' Class', . 's1'); or $ ( '# d1') attr ( 'style', 'color: red; font-style: italic;');

2)addClass(''):追加。
	例如:$('#d1').addClass('s1 s2');//追加 s1 和 s2 两种样式
	
3)removeClass('') :移除。
	例如:$('#d1').removeClass('s1');//移除样式 s1
	
4)removeClass('s1 s2 ...sn') :移除多个样式
	例如:$('#d1').removeClass('s1 s2');//移除样式 s1 和 s2
	
5)removeClass():删除所有样式。

6)toggleClass(''):样式来回切换,有该样式就删除,没有就添加。
	例如:$('#d1').toggleClass('s3');//样式 s3 一会有一会没(来回切换)
	
7)hasClass(''):是否有某个样式。
	例如:alert($('#d1').hasClass('s3'));//返回值 true 或 false
	
8)css(''):操作匹配元素css样式,只能读取 style 样式里某个属性的值。

 Note: You can not read a style class can not read class
example: <div id="d1" style="font-size:60px;" class="s3">hello jQuery</div>,
if alert($('#d1').css('font-size'));只能读出 60px,若写 alert($('#d1').css('s3'));the content is
empty, could not be read.

9)css('',''):设置一个 CSS 样式。
	例如:$('#d1').css('border','1px solid red');
	
10)css({'':'','':''}):设置多个样式。
	例如:$('#d1').css({'border':'1px solid red','font-size':'50px'});
	
11)元素CSS位置概念:获取页面元素的位置。格式:position();返回的对象包含两个整型属性:top 和 left。
	`$("p").text("上"+$(this).position().top+":左"+$(this).position().left+"`当前元素高:"`+$(this).height());`
	
12)元素CSS尺寸
	1)  height():取得匹配元素当前计算的高度值
	2)  width():取得第一个匹配元素当前计算的宽度值
	3)  innerHeight():获取第一个匹配元素内部区域高度
	4)  innerWidth():获取第一个匹配元素内部区域宽度
	5)  outerHeight():获取第一个匹配元素外部高度
	6)  outerWidth():获取第一个匹配元素外部宽度

Guess you like

Origin blog.csdn.net/SqrsCbrOnly1/article/details/91379300